personal/werc-1.5.0-tweaks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make scaling of central image continuous & parsimonious.

Browse Source
This commit is contained in:
Nuno Sempere 2023-06-24 23:41:34 +00:00
parent 4b9952e3d5
commit 0856fbb5b3
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pub/style/style.css
View File

@ -321,7 +321,26 @@ img + em {
} }
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */ /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 1400px) {
@media screen and (max-width: 700px) {
.img-frontpage-center {
width: 60%; /* 700px * 0.6 = 420px */
}
}
@media screen and (min-width: 700px) and (max-width: 1500px) {
.img-frontpage-center {
width: 420px
}
}
@media screen and (min-width: 1500px) {
.img-frontpage-center {
width: 40%; /* 1500px * 0.7 (article) * 0.4 = 420px */
}
}
@media screen and (max-width: 1500px) {
body { body {
display: block; display: block;
} }
@ -337,12 +356,9 @@ img + em {
header h1 { header h1 {
margin-left: 0; margin-left: 0;
} }
.img-frontpage-center {
width: 28%; /* 40% * 70%, so that the relative size stays the same*/
}
} }
@media screen and (min-width: 1400px) { @media screen and (min-width: 1500px) {
.hide-not-mobile { .hide-not-mobile {
display: none; display: none;
} }