ngn/anonymous_overflow
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Activity

Set maximum width to 40rem across screen sizes (#111)

Browse Source 
* 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 2024-04-25 14:09:43 +09:00 committed by GitHub
parent 3a508ddbd4
commit e020639a3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 100 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/globals.css
View File

@ -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 {

20
public/home.css
View File

@ -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;
}
}

37
public/question.css
View File

@ -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;
}
}

2
templates/question.html
View File

@ -21,7 +21,6 @@
<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
@ -106,6 +105,5 @@
{{end}} {{end}}
</div> </div>
{{ end }} {{ end }}
</div>
</body> </body>
</html> </html>