quad
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change responsive method. Probably breaks most old browsers

This commit is contained in:
Quad 2025-04-18 20:50:26 +02:00
parent 4e9df4568a
commit 10319489f0
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
themes/quadrant/assets/css/main.css
View File

@ -2,9 +2,19 @@
:root { :root {
--site-width: 960px; --site-width: 960px;
--site-padding: 10px;
--content-width: calc(var(--site-width) - var(--site-padding) * 2);
--regular-margin: 15px; --regular-margin: 15px;
} }
@media only screen and (max-device-width: 960px) {
:root {
--site-width: 100vw;
}
}
html, body, p, h1, h2, h3, h4, h5, h6 { html, body, p, h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -97,7 +107,7 @@ header hr, footer hr {
} }
main img { main img {
max-width: var(--site-width); max-width: var(--content-width);
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
box-shadow: 2px 2px 10px #000; box-shadow: 2px 2px 10px #000;
@ -110,13 +120,3 @@ time, small {
footer small a { footer small a {
padding-right: 12px; padding-right: 12px;
} }
@media only screen and (max-device-width: var(--site-width)) {
body {
max-width: 100vw;
}
main img {
max-width: 95vw;
}
}