From e020639a3bccbcb3b2ea701629d0402c3bfd1016 Mon Sep 17 00:00:00 2001 From: McSinyx Date: Thu, 25 Apr 2024 14:09:43 +0900 Subject: [PATCH] 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) --- public/globals.css | 19 ++++- public/home.css | 20 +---- public/question.css | 37 --------- templates/question.html | 168 ++++++++++++++++++++-------------------- 4 files changed, 100 insertions(+), 144 deletions(-) diff --git a/public/globals.css b/public/globals.css index ddd179a..1655a96 100644 --- a/public/globals.css +++ b/public/globals.css @@ -29,10 +29,23 @@ a { } 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; - padding: 0; - width: 100vw; - height: 100vh; } .icon { diff --git a/public/home.css b/public/home.css index dd33e93..d947c81 100644 --- a/public/home.css +++ b/public/home.css @@ -1,21 +1,10 @@ body { - background-color: var(--main-bg); - font-family: sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - width: 100vw; - - margin: 0; - - color: var(--text-color); } .container { - width: 40rem; + margin: auto; } .footer { @@ -104,10 +93,3 @@ body { width: 2rem; height: 2rem; } - -@media screen and (max-width: 800px) { - body { - padding: 1rem; - box-sizing: border-box; - } -} diff --git a/public/question.css b/public/question.css index 35ded1f..85cbcae 100644 --- a/public/question.css +++ b/public/question.css @@ -1,35 +1,5 @@ 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; - - 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 { @@ -195,10 +165,3 @@ img { justify-content: center; align-items: center; } - -@media only screen and (max-width: 800px) { - body { - padding-left: 1rem; - padding-right: 1rem; - } -} diff --git a/templates/question.html b/templates/question.html index 32f60a9..f0bf96c 100644 --- a/templates/question.html +++ b/templates/question.html @@ -21,91 +21,89 @@ -
-
- - - - {{ template "themeSwitcher.html" . }} -
-
-
-

{{ .question.Title }}

-

- Asked {{ .question.Timestamp }} by - {{ .question.AuthorName }}. -

-
-
{{ .question.Body }}
-
- {{ range .question.Tags }} -
{{ . }}
- {{ end }} -
- {{ if .question.Comments }} {{ template "comments.html" - .question }} {{end}} -
-
-
-

Answers

-
-
- - -
-
-
- {{ range $answer := .answers }} -
-
-

- {{ if $answer.IsAccepted }} Accepted - {{ end }} - {{$answer.Upvotes}} Votes -

- -
- Paperclip icon -
- -
- {{ $answer.Body }} -
-
- Answered {{ $answer.Timestamp }} by - {{ $answer.AuthorName }} -
-
- {{ if $answer.Comments }} {{ template "comments.html" $answer }} - {{end}} -
- {{ end }} +
+ + + + {{ template "themeSwitcher.html" . }}
+
+
+

{{ .question.Title }}

+

+ Asked {{ .question.Timestamp }} by + {{ .question.AuthorName }}. +

+
+
{{ .question.Body }}
+
+ {{ range .question.Tags }} +
{{ . }}
+ {{ end }} +
+ {{ if .question.Comments }} {{ template "comments.html" + .question }} {{end}} +
+
+
+

Answers

+
+
+ + +
+
+
+ {{ range $answer := .answers }} +
+
+

+ {{ if $answer.IsAccepted }} Accepted - {{ end }} + {{$answer.Upvotes}} Votes +

+ +
+ Paperclip icon +
+ +
+ {{ $answer.Body }} +
+
+ Answered {{ $answer.Timestamp }} by + {{ $answer.AuthorName }} +
+
+ {{ if $answer.Comments }} {{ template "comments.html" $answer }} + {{end}} +
+ {{ end }}