ybbond

commit 2238894f1155632283d377b030c8dfe3f14db1c8
parent af2f63ac1820b3828089d2d7e971303eb1edd6f6
Author: Yohanes Bandung Bondowoso <hi@ybbond.id>
Date:   Sat,  3 Apr 2021 19:56:45 +0700

refactor: responsive image in many ratio

Diffstat:
M
assets/content.css
 | 
5
-----
M
assets/main.css
 | 
4
++++
M
assets/responsive.css
 | 
149
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
content/archives/Plastik Sepele Kan/index.md
 | 
2
+-
M
content/posts/Inclusive Content Sharing/medium-paywall.gif
 | 
0

M
layouts/_default/_markup/render-heading.html
 | 
11
++---------
M
layouts/_default/_markup/render-heading.rss.xml
 | 
3
++-
M
layouts/_default/_markup/render-image.html
 | 
50
++++++++++++--------------------------------------
M
layouts/_default/_markup/render-image.rss.xml
 | 
4
+---

diff --git a/assets/content.css b/assets/content.css
@@ -178,8 +178,3 @@
 .responses__subtitle a {
   font-family: var(--font-mono);
 }
-
-.image-figure {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
diff --git a/assets/main.css b/assets/main.css
@@ -86,7 +86,11 @@ time[title] {
   cursor: help;
 }
 
+.view-full-size {
+  position: relative;
+}
 .view-full-size svg {
+  position: absolute;
   width: .9em;
   height: .9em;
 }
diff --git a/assets/responsive.css b/assets/responsive.css
@@ -8,6 +8,39 @@
   .header__title:not(h1) {
     margin-top: 1.4em;
   }
+
+  /* content */
+  .image-figure {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .image-figure div.portrait {
+    width: 360px;
+    height: 520px;
+  }
+  .image-figure div.landscape {
+    width: 520px;
+  }
+  .image-figure div.landscape.r79 {
+    height: 490px;
+  }
+  .image-figure div.landscape.r72 {
+    height: 420px;
+  }
+  .image-figure div.landscape.r68 {
+    height: 370px;
+  }
+  .image-figure div.landscape.r58 {
+    height: 320px;
+  }
+  .image-figure div.landscape.r48 {
+    height: 250px;
+  }
+  .image-figure div.r1 {
+    width: 360px;
+    height: 390px;
+  }
 }
 
 @media (max-width: 599px) {
@@ -44,6 +77,36 @@
   .notes__title__separator {
     display: none;
   }
+  .image-figure {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .image-figure div.portrait {
+    width: 275px;
+    height: 420px;
+  }
+  .image-figure div.landscape {
+    width: 350px;
+  }
+  .image-figure div.landscape.r79 {
+    height: 350px;
+  }
+  .image-figure div.landscape.r72 {
+    height: 300px;
+  }
+  .image-figure div.landscape.r68 {
+    height: 275px;
+  }
+  .image-figure div.landscape.r58 {
+    height: 240px;
+  }
+  .image-figure div.landscape.r48 {
+    height: 200px;
+  }
+  .image-figure div.r1 {
+    width: 350px;
+    height: 390px;
+  }
 
   /* header */
   .header__title {
@@ -79,6 +142,34 @@
 }
 
 @media (max-width: 400px) {
+  /* content */
+  .image-figure div.portrait {
+    width: 250px;
+    height: 380px;
+  }
+  .image-figure div.landscape {
+    width: 300px;
+  }
+  .image-figure div.landscape.r79 {
+    height: 290px;
+  }
+  .image-figure div.landscape.r72 {
+    height: 270px;
+  }
+  .image-figure div.landscape.r68 {
+    height: 250px;
+  }
+  .image-figure div.landscape.r58 {
+    height: 220px;
+  }
+  .image-figure div.landscape.r48 {
+    height: 170px;
+  }
+  .image-figure div.r1 {
+    width: 290px;
+    height: 325px;
+  }
+
   /* footer */
   .footer__nav__right a {
     padding: 0 0.15rem;
@@ -98,5 +189,62 @@
   .header__menu__list__item {
     font-size: 0.8rem;
   }
+
+  /* content */
+  .image-figure div.portrait {
+    width: 240px;
+    height: 370px;
+  }
+  .image-figure div.landscape {
+    width: 280px;
+  }
+  .image-figure div.landscape.r79 {
+    height: 280px;
+  }
+  .image-figure div.landscape.r72 {
+    height: 260px;
+  }
+  .image-figure div.landscape.r68 {
+    height: 240px;
+  }
+  .image-figure div.landscape.r58 {
+    height: 200px;
+  }
+  .image-figure div.landscape.r48 {
+    height: 160px;
+  }
+  .image-figure div.r1 {
+    width: 270px;
+    height: 310px;
+  }
 }
 
+@media(max-width: 320px) {
+  /* content */
+  .image-figure div.portrait {
+    width: 230px;
+    height: 360px;
+  }
+  .image-figure div.landscape {
+    width: 250px;
+  }
+  .image-figure div.landscape.r79 {
+    height: 250px;
+  }
+  .image-figure div.landscape.r72 {
+    height: 240px;
+  }
+  .image-figure div.landscape.r68 {
+    height: 230px;
+  }
+  .image-figure div.landscape.r58 {
+    height: 200px;
+  }
+  .image-figure div.landscape.r48 {
+    height: 150px;
+  }
+  .image-figure div.r1 {
+    width: 250px;
+    height: 290px;
+  }
+}+
\ No newline at end of file
diff --git a/content/archives/Plastik Sepele Kan/index.md b/content/archives/Plastik Sepele Kan/index.md
@@ -17,7 +17,7 @@ Tadi gua baru baca koran Kompas minggu lalu, liat iklan hape, terus langsung nga
 
 **Serius**, di koran ada berita: plastik kresek(dinamain dari bunyinya) bakal dicatok tarif minimal Rp 200 di kota tertentu, lebih murah daripada di Balikpapan harganya cenggo(tadinya malah goceng).
 
-![](vin-diesel.jpeg "picture of Vin Diesel meme in Indonesian")
+![Picture of Vin Diesel meme in Indonesian](vin-diesel.jpeg "picture of Vin Diesel meme in Indonesian")
 
 (Di sini gua akan mengandaikan jika harga plastik yang dicatok retailer sama kaya di Balikpapan, Rp 1500) Mengingat mental orang normal yang protes bensin—jelas bermanfaat buat pacaran, nongkrong, bikin areng pas bakar ayam— sempet naik jadi Rp 9000, gimana kalo benda sepele yang biasa dikasih gratis—kadang malah diminta dobel— dikasih harga? Kebayang gimana reaksi orang yang biasanya cuma beli Royco 2 sachet aja pake minta diplastikin.
 
diff --git a/content/posts/Inclusive Content Sharing/medium-paywall.gif b/content/posts/Inclusive Content Sharing/medium-paywall.gif
Binary files differ.
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -1,8 +1 @@
-{{ $href := .Anchor | safeURL }}
-{{ $hashrepeat := "#" | strings.Repeat .Level }}
-<h{{ .Level }} id="{{ $href }}">
-  <a class="before-hash h{{ .Level }}" href="#{{ $href }}">
-    {{ $hashrepeat }}
-  </a>{{ .Text | safeHTML }} 
-  <a class="headline-hash" href="#{{ $href }}">#</a>
-</h{{ .Level }}>-
\ No newline at end of file
+{{ $href := .Anchor | safeURL }}{{ $hashrepeat := "#" | strings.Repeat .Level }}<h{{ .Level }} id="{{ $href }}"><a class="before-hash h{{ .Level }}" href="#{{ $href }}">{{ $hashrepeat }}</a>{{ .Text | safeHTML }}<a class="headline-hash" href="#{{ $href }}">#</a></h{{ .Level }}>+
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-heading.rss.xml b/layouts/_default/_markup/render-heading.rss.xml
@@ -1 +1 @@
-<h{{ .Level }}>{{ .Text | safeHTML }}</h{{ .Level }}>
+<h{{ .Level }}>{{ .Text | safeHTML }}</h{{ .Level }}>+
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,47 +1,21 @@
-{{ $image := (.Page.Resources.GetMatch  .Destination) }}
-{{ $alt := .Text }}
-{{ $title := "" }}
-{{ if ne .Text "" }}
-  {{ $title = .Text }}
-{{ end }}
-{{ if ne .Title "" }}
-  {{ $title = .Title }}
-{{ end }}
+{{ $image := (.Page.Resources.GetMatch  .Destination) }}{{ $alt := .Text }}{{ $title := "" }} {{- if ne .Text "" }}{{ $title = .Text }}{{- end }}{{ if ne .Title "" -}}{{ $title = .Title }}{{ end -}}{{ $ratio := "r68" }}{{ $orientation := "portrait" }}{{ $size := "normal" }}
 
-{{ $width := "380px" }}
-{{ $height := "520px" }}
-{{ $orientation := "portrait" }}
-
-{{- if gt $image.Width $image.Height -}}
-  {{ $orientation = "landscape" }}
-  {{ $width = "520px" }}
-  {{ $height = "380px" }}
-    {{ if gt "300" $image.Width -}}
-      {{ $width = "300px" }}
-      {{ $height = "170px" }}
-    {{ end -}}
-{{- end -}}
-
-{{- if eq $orientation "portrait" -}}
-  {{ if gt "300" $image.Height -}}
-    {{ $width = "170px" }}
-    {{ $height = "300px" }}
-  {{ end -}}
-{{- end -}}
+{{- if gt $image.Width $image.Height -}}{{ $orientation = "landscape" }} {{ if gt "0.58" (div (float $image.Height) $image.Width) }}{{ $ratio = "r58" }}{{ end }} {{ if gt "0.48" (div (float $image.Height) $image.Width) }}{{ $ratio = "r48" }}{{ end }} {{ if gt (div (float $image.Height) $image.Width) "0.68" }}{{ $ratio = "r68" }}{{ end }} {{ if gt (div (float $image.Height) $image.Width) "0.72" }}{{ $ratio = "r72" }}{{ end }} {{ if gt (div (float $image.Height) $image.Width) "0.79" }}{{ $ratio = "r79" }}{{ end }} {{- end -}}
+{{ if eq (div (float $image.Height) $image.Width) 1.00 }}{{ $ratio = "r1" }}{{ end }}{{- if eq $orientation "portrait" -}}{{ if gt "300" $image.Height -}}{{ $size = "small" }}{{ end -}}{{- end -}}{{- if eq $orientation "landscape" -}}{{ if gt "300" $image.Width -}}{{ $size = "small" }}{{ end -}}{{- end -}}
 
 <figure class="image-figure">
   <center>
-    <div style="width: {{ $width }};height: {{ $height }};">
-      <img
-        src="{{ $image.RelPermalink }}"
-        style="max-width: 100%; height: auto;"
-        alt={{ .Text | safeHTML }}
-        title={{ .Text | safeHTML }}
-      />
+    <div style="display:flex;flex-direction:column;justify-content:space-between;" class="{{ $orientation }} {{ $ratio }} {{ $size }}">
+      <div style="flex:1;display:flex;flex-direction:column;justify-content:center;"><img
+          src="{{ $image.RelPermalink }}"
+          style="max-width: 100%; height: auto;"
+          alt={{ .Text | safeHTML }}
+          title={{ .Text | safeHTML }}
+        /></div>
       <figcaption>
         <em>{{ .Text | safeHTML }} &nbsp;
-          <a title="Link to open full image." href="{{ $image.RelPermalink }}" class="view-full-size">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M71.2 48.8c1.6 1.6 4.1 1.6 5.6 0L112 13.6V32c0 2.4 2.2 4.4 4.7 3.9 2-.3 3.3-2.2 3.3-4.2V4c0-2.2-1.8-4-4-4H88.2c-2 0-3.8 1.4-4.2 3.3-.4 2.5 1.6 4.7 4 4.7h18.4L71.2 43.2c-1.6 1.6-1.6 4.1 0 5.6zm20.8-.9V104c0 4.4-3.6 8-8 8H16c-4.4 0-8-3.6-8-8V36c0-4.4 3.6-8 8-8h56.1c1.1 0 2.1-.4 2.8-1.2l5.1-5.1c.6-.6.2-1.7-.7-1.7H12C5.4 20 0 25.4 0 32v76c0 6.6 5.4 12 12 12h76c6.6 0 12-5.4 12-12V40.6c0-.9-1.1-1.3-1.7-.7L93.2 45c-.8.8-1.2 1.8-1.2 2.9z"></path></svg>
+          <a title="Link to open full image." href="{{ $image.RelPermalink }}" class="view-full-size no-outline">
+            <wrap><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M71.2 48.8c1.6 1.6 4.1 1.6 5.6 0L112 13.6V32c0 2.4 2.2 4.4 4.7 3.9 2-.3 3.3-2.2 3.3-4.2V4c0-2.2-1.8-4-4-4H88.2c-2 0-3.8 1.4-4.2 3.3-.4 2.5 1.6 4.7 4 4.7h18.4L71.2 43.2c-1.6 1.6-1.6 4.1 0 5.6zm20.8-.9V104c0 4.4-3.6 8-8 8H16c-4.4 0-8-3.6-8-8V36c0-4.4 3.6-8 8-8h56.1c1.1 0 2.1-.4 2.8-1.2l5.1-5.1c.6-.6.2-1.7-.7-1.7H12C5.4 20 0 25.4 0 32v76c0 6.6 5.4 12 12 12h76c6.6 0 12-5.4 12-12V40.6c0-.9-1.1-1.3-1.7-.7L93.2 45c-.8.8-1.2 1.8-1.2 2.9z"></path></svg></wrap>
           </a>
         </em>
       </figcaption>
diff --git a/layouts/_default/_markup/render-image.rss.xml b/layouts/_default/_markup/render-image.rss.xml
@@ -1,6 +1,4 @@
-{{ $image := (.Page.Resources.GetMatch  .Destination) }}
-
-<figure>
+{{ $image := (.Page.Resources.GetMatch  .Destination) }}<figure>
   <center>
   <img
     src="{{ $image.RelPermalink }}"