From b1e8e933d6bad0cbab09f7e5178f8428f0f14beb Mon Sep 17 00:00:00 2001
From: Quinton Miller <nicetas.c@gmail.com>
Date: Mon, 6 Nov 2023 20:14:06 +0800
Subject: [PATCH] make `hex-icon` an element

---
 _includes/elements/hex-icon.html         |  5 +++
 _pages/learning/crystal_programming.html | 36 ++++---------------
 _sass/elements/_hex-icon.scss            | 43 +++++++++++++++++++++++
 _sass/main.scss                          |  1 +
 _sass/pages/_learning.scss               | 44 ------------------------
 _style_guide/elements/hex-icon.md        |  5 +++
 6 files changed, 60 insertions(+), 74 deletions(-)
 create mode 100644 _includes/elements/hex-icon.html
 create mode 100644 _sass/elements/_hex-icon.scss
 create mode 100644 _style_guide/elements/hex-icon.md

diff --git a/_includes/elements/hex-icon.html b/_includes/elements/hex-icon.html
new file mode 100644
index 00000000..d4abeb2b
--- /dev/null
+++ b/_includes/elements/hex-icon.html
@@ -0,0 +1,5 @@
+<div class="hex-icon">
+  <div class="inner">
+    {% include {{ include.file }} %}
+  </div>
+</div>
diff --git a/_pages/learning/crystal_programming.html b/_pages/learning/crystal_programming.html
index 93883c60..b5bf7508 100644
--- a/_pages/learning/crystal_programming.html
+++ b/_pages/learning/crystal_programming.html
@@ -46,41 +46,17 @@
   </div>
 
   <div class="image-list">
-    <div class="hex-icon">
-      <div class="inner">
-        {% include icons/merge-type.svg %}
-      </div>
-    </div>
+    {% include elements/hex-icon.html file='icons/merge-type.svg' %}
     <div class="small">Explore how Crystal combines the merits of other languages</div>
-    <div class="hex-icon">
-      <div class="inner">
-        {% include icons/folder.svg %}
-      </div>
-    </div>
+    {% include elements/hex-icon.html file='icons/folder.svg' %}
     <div class="small">Understand how to leverage existing C libraries without writing any C</div>
-    <div class="hex-icon">
-      <div class="inner">
-        {% include icons/update.svg %}
-      </div>
-    </div>
+    {% include elements/hex-icon.html file='icons/update.svg' %}
     <div class="small">Focus on zero-cost abstractions with compile-time macros</div>
-    <div class="hex-icon">
-      <div class="inner">
-        {% include icons/code.svg %}
-      </div>
-    </div>
+    {% include elements/hex-icon.html file='icons/code.svg' %}
     <div class="small">Use an example-based approach to demonstrate language features</div>
-    <div class="hex-icon">
-      <div class="inner">
-        {% include icons/apps.svg %}
-      </div>
-    </div>
+    {% include elements/hex-icon.html file='icons/apps.svg' %}
     <div class="small">Develop a variety of Crystal applications, such as web and CLI apps</div>
-    <div class="hex-icon">
-      <div class="inner">
-        {% include icons/library-books.svg %}
-      </div>
-    </div>
+    {% include elements/hex-icon.html file='icons/library-books.svg' %}
     <div class="small">Gain an understanding of the macro API and annotations</div>
   </div>
 
diff --git a/_sass/elements/_hex-icon.scss b/_sass/elements/_hex-icon.scss
new file mode 100644
index 00000000..260ec546
--- /dev/null
+++ b/_sass/elements/_hex-icon.scss
@@ -0,0 +1,43 @@
+:root {
+  --sin-60: 0.866;
+}
+
+.hex-icon {
+  --icon-height: 48px;
+
+  width: calc(var(--icon-height) * var(--sin-60));
+  height: var(--icon-height);
+  display: inline-block;
+  margin-right: 12px;
+  position: relative;
+
+  filter: drop-shadow(0 0 2px rgba(0,0,0,0.1))
+    drop-shadow(0 1px 1px rgba(0,0,0,0.2))
+    drop-shadow(0 1px 1px rgba(0,0,0,0.1));
+
+  .inner {
+    background-color: white;
+    width: 100%;
+    height: 100%;
+
+    clip-path: polygon(
+      evenodd,
+      0% 25%,
+      0% 75%,
+      50% 100%,
+      100% 75%,
+      100% 25%,
+      50% 0,
+      0% 25%
+    );
+
+    & > * {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
diff --git a/_sass/main.scss b/_sass/main.scss
index c1db12c1..35065c44 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -23,6 +23,7 @@
   @import "elements/avatar-list";
   @import "elements/color-sample";
   @import "elements/hex";
+  @import "elements/hex-icon";
   @import "elements/table";
 
   @import "components/book-authors";
diff --git a/_sass/pages/_learning.scss b/_sass/pages/_learning.scss
index 7f0d0531..6091cd24 100644
--- a/_sass/pages/_learning.scss
+++ b/_sass/pages/_learning.scss
@@ -1,47 +1,3 @@
-:root {
-  --sin-60: 0.866;
-}
-
-.hex-icon {
-  --icon-height: 48px;
-
-  width: calc(var(--icon-height) * var(--sin-60));
-  height: var(--icon-height);
-  display: inline-block;
-  margin-right: 12px;
-  position: relative;
-
-  filter: drop-shadow(0 0 2px rgba(0,0,0,0.1))
-    drop-shadow(0 1px 1px rgba(0,0,0,0.2))
-    drop-shadow(0 1px 1px rgba(0,0,0,0.1));
-
-  .inner {
-    background-color: white;
-    width: 100%;
-    height: 100%;
-
-    clip-path: polygon(
-      evenodd,
-      0% 25%,
-      0% 75%,
-      50% 100%,
-      100% 75%,
-      100% 25%,
-      50% 0,
-      0% 25%
-    );
-
-    & > * {
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}
-
 .image-list {
   display: grid;
   grid-template-columns: repeat(1, min-content 1fr);
diff --git a/_style_guide/elements/hex-icon.md b/_style_guide/elements/hex-icon.md
new file mode 100644
index 00000000..eaf2581f
--- /dev/null
+++ b/_style_guide/elements/hex-icon.md
@@ -0,0 +1,5 @@
+---
+title: Hex Icon
+type: elements
+---
+{% include elements/hex-icon.html file='icons/folder.svg' %}