From a43b353ca3e2d923ca8f0cdd1aeab70e5b1313a4 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Sat, 19 Sep 2020 14:15:35 +0800
Subject: new: lazyload image shortcodes

---
 assets/scss/_image.scss | 52 +++++++++++++++++++++++++++++++++++++++++++++++++
 assets/scss/fuji.scss   |  3 +++
 2 files changed, 55 insertions(+)
 create mode 100644 assets/scss/_image.scss

(limited to 'assets')

diff --git a/assets/scss/_image.scss b/assets/scss/_image.scss
new file mode 100644
index 0000000..938340e
--- /dev/null
+++ b/assets/scss/_image.scss
@@ -0,0 +1,52 @@
+.image-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  background-color: var(--color-divider);
+  border-radius: 3px;
+  max-width: 98%;
+  margin: 0 0.25rem 0.5rem 0.25rem;
+
+  img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    overflow: hidden;
+  }
+}
+
+// common aspect ratios
+// 32x9  -  28.125%
+// 21x9  -  42.85714286%
+// 18x9  -  50%
+// 16x9  -  56.25%
+// 16x10 -  62.5%
+// 3x2   -  66.66666667%
+// 4x3   -  75%
+// 1x1   -  100%
+$ratios: (
+  '40x9': 9 / 40 * 100%,
+  '32x9': 9 / 32 * 100%,
+  '21x9': 9 / 21 * 100%,
+  '18x9': 9 / 18 * 100%,
+  '16x9': 9 / 16 * 100%,
+  '16x10': 10 / 16 * 100%,
+  '3x2': 2 / 3 * 100%,
+  '4x3': 3 / 4 * 100%,
+  '1x1': 100%,
+  '3x4': 4 / 3 * 100%,
+  '2x3': 3 / 2 * 100%,
+  '10x16': 16 / 10 * 100%,
+  '9x16': 16 / 9 * 100%,
+  '9x18': 18 / 9 * 100%,
+  '9x21': 21 / 9 * 100%,
+  '9x32': 32 / 9 * 100%,
+);
+@each $key, $value in $ratios {
+  .ratio-#{$key} {
+    padding-bottom: $value;
+  }
+}
diff --git a/assets/scss/fuji.scss b/assets/scss/fuji.scss
index 3c59ebe..fa29589 100644
--- a/assets/scss/fuji.scss
+++ b/assets/scss/fuji.scss
@@ -25,3 +25,6 @@
 // theme
 @import '_fuji-theme/_base';
 @import '_fuji-theme/_style';
+
+// lazy image placeholder
+@import '_image';
-- 
cgit v1.2.3