style: background (#2996)

apache · Jun 25, 2024 · 7bdf69d · 7bdf69d
1 parent 235c40c
commit 7bdf69d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html
@@ -9,22 +9,28 @@
 {{ $height := .Get "height" | default "max" }}
 {{ $byline := .Get "byline" | default "" }}
 {{ with $promo_image }}
-{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }}
-{{ $promo_image_small := (.Fill (printf "1440x640 %s" $image_anchor)) }}
-<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
+{{ $promo_image_big := (.Fill (printf "1440x640 %s" $image_anchor)) }}
+{{ $promo_image_medium := (.Fill (printf "1440x640 %s" $image_anchor)) }}
+{{ $promo_image_small := (.Fill (printf "500x500 %s" $image_anchor)) }}
+<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 600px)">
+<link rel="preload" as="image" href="{{ $promo_image_medium.RelPermalink }}" media="(min-width: 1200px)">
 <link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
 <style>
 #{{ $blockID }} {
     background-image: url({{ $promo_image_small.RelPermalink }});
 }
+@media only screen and (min-width: 700px) {
+    #{{ $blockID }} {
+        background-image: url({{ $promo_image_medium.RelPermalink }});
+    }
+}
 @media only screen and (min-width: 1200px) {
     #{{ $blockID }} {
         background-image: url({{ $promo_image_big.RelPermalink }});
     }
 }
   .td-cover-block{
     min-height: 500px;
-    height: 90vh;
     padding-bottom: 0;
     .container-fluid{
       display: flex;
@@ -46,6 +52,9 @@
     @media only screen and (min-width: 768px) {
       font-size: 64px;
     }
+    @media only screen and (min-width: 1100px) {
+      width: 90%;
+    }
   }
   .homepage-btn-group {
     padding-left: 15px;

diff --git a/static/css/language.css b/static/css/language.css
@@ -5,6 +5,15 @@
   flex-direction: column;
   align-items: center;
   background: linear-gradient(180deg, #E9E3F8 0%, rgba(233, 227, 248, 0) 100%);
+  h3 {
+      font-size: 1rem;
+    }
+
+    @media only screen and (min-width: 768px) {
+      h3 {
+        font-size: 1.5rem;
+      }
+    }
 }
 
 #language .language-content {