michal-sapka-me

commit 53634e6fec0e25bb85a0746d256ab72c01b30831
parent 02f2b53f642ed69d5f4d94e5e294aa6d030450f0
Author: Michał M. Sapka <michal@sapka.me>
Date:   Sat, 25 Feb 2023 19:19:56 +0100

feat: handle images better on small screens

Diffstat:
M
layouts/shortcodes/img-center.html
 | 
3
++-
M
layouts/shortcodes/youtube.html
 | 
23
++++++++++++-----------
M
static/style.css
 | 
11
+++++++----

3 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/layouts/shortcodes/img-center.html b/layouts/shortcodes/img-center.html
@@ -5,9 +5,9 @@
 {{- $source := .Get 2 }}
 {{- $img1x := $img.Resize "500x webp q90"}}
 {{- $img2x := $img.Resize "1000x webp q90"}}
+<center>
 <figure>
   <img 
-    class="centered" 
     alt="{{ $caption }}" 
     src="{{ $img1x.RelPermalink }}" 
     srcset="
@@ -24,3 +24,4 @@
     {{ end }}
 	</figcaption>
 </figure>
+</center>
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
@@ -6,17 +6,18 @@
 {{- $img2x := $img.Resize "x600 webp q90" }}
 
 <center>
-<a href="https://www.youtube.com/watch?v={{$id}}" target="_blank">
-  <img 
-    src="{{ $img1x.Permalink }}" 
-    srcset="
-      {{ $img1x.RelPermalink }} 1x,
-      {{ $img2x.RelPermalink }} 2x,
-    "
-    width="{{ $img1x.Width }}" 
-    height="{{ $img1x.Height }}"
+  <a href="https://www.youtube.com/watch?v={{$id}}" target="_blank">
+    <img 
+      src="{{ $img1x.Permalink }}" 
+      srcset="
+        {{ $img1x.RelPermalink }} 1x,
+        {{ $img2x.RelPermalink }} 2x,
+      "
+      width="{{ $img1x.Width }}" 
+      height="{{ $img1x.Height }}"
       alt="{{$title}} on Youtube" 
       width="{{$img.Width}}" 
-      height="{{$img.Height}}"/>
-</a>
+      height="{{$img.Height}}"
+    />
+  </a>
 </center>
diff --git a/static/style.css b/static/style.css
@@ -166,16 +166,19 @@ h2 {
 }
 
 /* ----------- Articles images */
+article figure {
+  text-align: left;
+  margin: 0;
+  width: 500px;
+  max-width: 100%;
+  font-size: 0.8em;
+}
 img.float-right {
   float: right;
   display: inline;
   margin-left: 10px;
 }
 
-img.centered {
-}
-
-
 /* ----------- Articles adjustement navigation */
 .next-link {
   float: right;