Set maximum width to 40rem across screen sizes (#111)
* Set maximum width to 40rem across screen sizes Some rules are removed to correct the bounding box size in browser inspector and fix the overflow on the x-axis. * Remove unused div.parent (The diff should be viewed --ignore-all-space)
This commit is contained in:
McSinyx
GitHub
parent
3a508ddbd4
commit
e020639a3b
@ -29,10 +29,23 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
margin: auto;
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: calc(40rem + 2rem)) {
|
||||||
|
body {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--main-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|||||||
@ -1,21 +1,10 @@
|
|||||||
body {
|
body {
|
||||||
background-color: var(--main-bg);
|
|
||||||
font-family: sans-serif;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 40rem;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
@ -104,10 +93,3 @@ body {
|
|||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
|
||||||
body {
|
|
||||||
padding: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,35 +1,5 @@
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
background-color: var(--main-bg);
|
|
||||||
color: var(--text-color);
|
|
||||||
font-family: sans-serif;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
padding-left: 5rem;
|
|
||||||
padding-right: 5rem;
|
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (orientation: landscape) {
|
|
||||||
.parent {
|
|
||||||
max-width: 50%;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (orientation: portrait) {
|
|
||||||
.parent {
|
|
||||||
max-width: 90%;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@ -195,10 +165,3 @@ img {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
|
||||||
body {
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -21,91 +21,89 @@
|
|||||||
<script defer src="/static/question.js" type="text/javascript"></script>
|
<script defer src="/static/question.js" type="text/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="parent">
|
<div class="header">
|
||||||
<div class="header">
|
<a href="/" class="logo-link">
|
||||||
<a href="/" class="logo-link">
|
<img
|
||||||
<img
|
class="logo"
|
||||||
class="logo"
|
src="/static/codecircles.webp"
|
||||||
src="/static/codecircles.webp"
|
alt="4 circles with alternating colors between green and white"
|
||||||
alt="4 circles with alternating colors between green and white"
|
/>
|
||||||
/>
|
</a>
|
||||||
</a>
|
{{ template "themeSwitcher.html" . }}
|
||||||
{{ template "themeSwitcher.html" . }}
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h1>{{ .question.Title }}</h1>
|
|
||||||
<p class="timestamp">
|
|
||||||
Asked {{ .question.Timestamp }} by
|
|
||||||
<a
|
|
||||||
href="{{ .question.AuthorURL }}"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>{{ .question.AuthorName }}</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">{{ .question.Body }}</div>
|
|
||||||
<div class="card-tags">
|
|
||||||
{{ range .question.Tags }}
|
|
||||||
<div class="tag">{{ . }}</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
{{ if .question.Comments }} {{ template "comments.html"
|
|
||||||
.question }} {{end}}
|
|
||||||
</div>
|
|
||||||
<hr class="post-divider" />
|
|
||||||
<div class="answers-header">
|
|
||||||
<h2>Answers</h2>
|
|
||||||
<div class="sorting">
|
|
||||||
<form>
|
|
||||||
<select name="sort_by">
|
|
||||||
<option disabled value="">Sort answers by...</option>
|
|
||||||
<option value="votes"{{ if eq .sortValue "votes" }} selected{{ end }}>Votes</option>
|
|
||||||
<option value="trending"{{ if eq .sortValue "trending" }} selected{{ end }}>Trending</option>
|
|
||||||
<option value="newest"{{ if eq .sortValue "newest" }} selected{{ end }}>Date modified (newest first)</option>
|
|
||||||
<option value="oldest"{{ if eq .sortValue "oldest" }} selected{{ end }}>Date created (oldest first)</option>
|
|
||||||
</select>
|
|
||||||
<button type="submit">
|
|
||||||
<img
|
|
||||||
src="/static/icons/sort.svg"
|
|
||||||
alt="Sieve icon"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ range $answer := .answers }}
|
|
||||||
<div class="answer" id="{{ $answer.ID }}">
|
|
||||||
<div
|
|
||||||
class="answer-meta{{ if $answer.IsAccepted }} accepted{{end}}"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
{{ if $answer.IsAccepted }} Accepted - {{ end }}
|
|
||||||
{{$answer.Upvotes}} Votes
|
|
||||||
</p>
|
|
||||||
<a href="#{{ $answer.ID }}" class="answer-link">
|
|
||||||
<div class="icon">
|
|
||||||
<img src="/static/icons/link.svg" alt="Paperclip icon" />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{{ $answer.Body }}
|
|
||||||
<div class="answer-author-parent">
|
|
||||||
<div class="answer-author">
|
|
||||||
Answered {{ $answer.Timestamp }} by
|
|
||||||
<a
|
|
||||||
href="{{ $answer.AuthorURL }}"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>{{ $answer.AuthorName }}</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ if $answer.Comments }} {{ template "comments.html" $answer }}
|
|
||||||
{{end}}
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h1>{{ .question.Title }}</h1>
|
||||||
|
<p class="timestamp">
|
||||||
|
Asked {{ .question.Timestamp }} by
|
||||||
|
<a
|
||||||
|
href="{{ .question.AuthorURL }}"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>{{ .question.AuthorName }}</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">{{ .question.Body }}</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
{{ range .question.Tags }}
|
||||||
|
<div class="tag">{{ . }}</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ if .question.Comments }} {{ template "comments.html"
|
||||||
|
.question }} {{end}}
|
||||||
|
</div>
|
||||||
|
<hr class="post-divider" />
|
||||||
|
<div class="answers-header">
|
||||||
|
<h2>Answers</h2>
|
||||||
|
<div class="sorting">
|
||||||
|
<form>
|
||||||
|
<select name="sort_by">
|
||||||
|
<option disabled value="">Sort answers by...</option>
|
||||||
|
<option value="votes"{{ if eq .sortValue "votes" }} selected{{ end }}>Votes</option>
|
||||||
|
<option value="trending"{{ if eq .sortValue "trending" }} selected{{ end }}>Trending</option>
|
||||||
|
<option value="newest"{{ if eq .sortValue "newest" }} selected{{ end }}>Date modified (newest first)</option>
|
||||||
|
<option value="oldest"{{ if eq .sortValue "oldest" }} selected{{ end }}>Date created (oldest first)</option>
|
||||||
|
</select>
|
||||||
|
<button type="submit">
|
||||||
|
<img
|
||||||
|
src="/static/icons/sort.svg"
|
||||||
|
alt="Sieve icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ range $answer := .answers }}
|
||||||
|
<div class="answer" id="{{ $answer.ID }}">
|
||||||
|
<div
|
||||||
|
class="answer-meta{{ if $answer.IsAccepted }} accepted{{end}}"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
{{ if $answer.IsAccepted }} Accepted - {{ end }}
|
||||||
|
{{$answer.Upvotes}} Votes
|
||||||
|
</p>
|
||||||
|
<a href="#{{ $answer.ID }}" class="answer-link">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/static/icons/link.svg" alt="Paperclip icon" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{ $answer.Body }}
|
||||||
|
<div class="answer-author-parent">
|
||||||
|
<div class="answer-author">
|
||||||
|
Answered {{ $answer.Timestamp }} by
|
||||||
|
<a
|
||||||
|
href="{{ $answer.AuthorURL }}"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>{{ $answer.AuthorName }}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ if $answer.Comments }} {{ template "comments.html" $answer }}
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user