make hex-icon an element

crystal-lang · Nov 6, 2023 · b1e8e93 · b1e8e93
1 parent d50b83b
commit b1e8e93
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 74 deletions.
diff --git a/_includes/elements/hex-icon.html 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+---
+title: Hex Icon
+type: elements
+---
+{% include elements/hex-icon.html file='icons/folder.svg' %}