Change responsive method. Probably breaks most old browsers
This commit is contained in:
parent
4e9df4568a
commit
10319489f0
|
@ -2,9 +2,19 @@
|
|||
|
||||
:root {
|
||||
--site-width: 960px;
|
||||
--site-padding: 10px;
|
||||
|
||||
--content-width: calc(var(--site-width) - var(--site-padding) * 2);
|
||||
|
||||
--regular-margin: 15px;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 960px) {
|
||||
:root {
|
||||
--site-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
html, body, p, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -97,7 +107,7 @@ header hr, footer hr {
|
|||
}
|
||||
|
||||
main img {
|
||||
max-width: var(--site-width);
|
||||
max-width: var(--content-width);
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 10px #000;
|
||||
|
@ -110,13 +120,3 @@ time, small {
|
|||
footer small a {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: var(--site-width)) {
|
||||
body {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
main img {
|
||||
max-width: 95vw;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue