werc-1.5.0-tweaks

commit 0856fbb5b37ce2165cf6d406d7b864da1a0c7115
parent 4b9952e3d58271898a2ea5d5a4de98be7bb43eff
Author: Nuno Sempere <nuno.semperelh@protonmail.com>
Date:   Sat, 24 Jun 2023 23:41:34 +0000

make scaling of central image continuous & parsimonious.

Diffstat:
M
pub/style/style.css
 | 
26
+++++++++++++++++++++-----

1 file changed, 21 insertions(+), 5 deletions(-)
diff --git a/pub/style/style.css b/pub/style/style.css
@@ -321,7 +321,26 @@ img + em {
 }
 
 /* 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 {
     display: block;
   }
@@ -337,12 +356,9 @@ img + em {
   header h1 {
     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 {
     display: none;
   }