Move remaining HTML from pages into _includes

_includes/click.html

@@ -0,0 +1 @@
+<span class="desktop-only">click</span><span class="raw-only">/</span><span class="mobile-only">tap</span>

_includes/colorbox.html

@@ -0,0 +1,10 @@
+<span style="display: flex; flex-wrap: wrap">
+{% for color in page.colors -%}
+	<span style="padding: 0.5em">
+		<span class="colorbox {% if color.darktext -%} darktext {%- else -%} lighttext {%- endif %}"
+		style="background-color: {{ color.color }}">
+		{%- if color.display -%} {{ color.display }} {% else %} {{ color.color }} {%- endif -%}
+		</span> {{ color.note }}
+	</span>
+{%- endfor %}
+</span>

_includes/simplenav.html

@@ -1,8 +1,12 @@
 {% if page.nav %}
 	<h6>
 	{% for item in page.nav %}
-		<span>{% if item.icon %}<img src={{ item.icon }} class="navicon"></img>{% endif %}
-		{% if item.url == page.url %}<b>{{item.title}}</b>{% else %}<a href = "{{ item.url }}">{{ item.title }}</a>{% endif %}</span>
+		<span>
+			{%- if item.icon -%}
+				<img src={{ item.icon }} class="navicon"></img>
+			{%- endif %}
+			{% if item.url == page.url %}<b>{{item.title}}</b>{% else %}<a href = "{{ item.url }}">{{ item.title }}</a>{% endif -%}
+		</span>
 		{% if item != page.nav.last %} | {% endif %}
 	{% endfor %}
 	</h6>

drakkite/index.md

@@ -3,7 +3,7 @@ title: Drakkite
 description: "Stone gargoyle that comes to life in the darkness."
 favicon: "/assets/img/drakkite-favicon.png"
 socialmedia:
-  image: https://hazmatdr.one/assets/img/drakkite-sitepreview.png
+  image: "/assets/img/drakkite-sitepreview.png"
   type: summary_large_image
 social:
   twitter: Tekxach
@@ -12,18 +12,19 @@ social:
 flexbox:
   leftflex: 2
   rightflex: 3
+colors:
+  - color: "#7C8086"
+    darktext: true
+  - color: "#C7FFFF"
+    darktext: true
 ---
 
 [![Refsheet Image](/assets/img/drakkite-1200px.png)](/assets/img/drakkite.png)
-###### Art by [GlaucaBlitz](https://www.furaffinity.net/user/GlaucaBlitz) - <span class="desktop-only">click</span><span class="raw-only">/</span><span class="mobile-only">tap</span> the image for full version
+###### Art by [GlaucaBlitz](https://www.furaffinity.net/user/GlaucaBlitz) - {% include click.html %} the image for full version
 
-
 {% capture leftbox %}
 ## Colours
-<span style="display: flex; flex-wrap: wrap">
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #7C8086">#7C8086</span></span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #C7FFFF">#C7FFFF</span></span>
-</span>
+{% include colorbox.html %}
 
 ## General Info
 - **Name:** Drakkite
@@ -33,7 +34,6 @@ flexbox:
 - **Height:** 180cm *(6ft)*
 - **Weight:** 250kg *(551lbs)*
 
-
 Animated by dark magic, Drakkite is a stone gargoyle that comes to life in the darkness. He is vicious, agile, flying hunter with a body resistant to most attacks.
 During the day, he may perch on the rooftops, wear a cloak to cover himself from the light, or seek refuge somewhere indoors.
 

index.md

@@ -5,12 +5,41 @@ social:
   furaffinity: "gallery/hazmatdrone/folder/881793/T615-J"
   telegram: T615J
 socialmedia:
-  image: https://hazmatdr.one/assets/img/hazmatdrone-sitepreview.png
+  image: "/assets/img/hazmatdrone-sitepreview.png"
   type: summary_large_image
+colors:
+  - note: "Primary"
+    color: "black"
+    darktext: false
+    display: "Black Latex"
+  - note: "Secondary"
+    color: "#E4A943"
+    darktext: true
+  - note: "Gear/Visor"
+    color: "#222222"
+    darktext: false
+  - note: "Gear secondary"
+    color: "#595959"
+    darktext: false
+  - note: "Jacket"
+    color: "#313139"
+    darktext: false
+  - note: "Hood"
+    color: "#47474F"
+    darktext: false
+  - note: "Pants"
+    color: "#2A2A2A"
+    darktext: false
+  - note: "Accent"
+    color: "#43CBE5"
+    darktext: true
+  - note: "Accent 2"
+    color: "#E15554"
+    darktext: true
 ---
 
 [![Refsheet Image](/assets/img/hazmatdrone-refsheet-1200.png)](/assets/img/hazmatdrone-refsheet-full.png)
-###### Art by [Hacony](https://www.furaffinity.net/user/qundium) - <span class="desktop-only">click</span><span class="raw-only">/</span><span class="mobile-only">tap</span> the image for full version
+###### Art by [Hacony](https://www.furaffinity.net/user/qundium) - {% include click.html %} the image for full version
 
 {% capture leftbox %}
 ## General Info
@@ -39,17 +68,8 @@ socialmedia:
 {% capture rightbox %}
 
 ## Colours
-<span style="display: flex; flex-wrap: wrap">
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: black">Black Latex</span> Primary</span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #E4A943">#E4A943</span> Secondary</span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #222222">#222222</span> Gear/Visor</span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #595959">#595959</span> Gear secondary</span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #313139">#313139</span> Jacket</span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #47474F">#47474F</span> Hood</span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #2A2A2A">#2A2A2A</span> Pants</span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #43CBE5">#43CBE5</span> Accent</span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #E15554">#E15554</span> Accent 2</span>
-</span>
+
+{% include colorbox.html %}
 
 ## Artist Notes
 - **Digitigrade**, should have a [buff physique](/assets/img/physique.png/)

resin/index.md

@@ -12,11 +12,16 @@ socialmedia:
 flexbox:
   leftflex: 2
   rightflex: 3
+colors:
+  - color: black
+    display: Black latex
+  - color: "#CD822A"
+    darktext: true
 ---
 
 {% capture leftbox %}
 [![Refsheet Image](/assets/img/resin-ref-1200px.png)](/assets/img/resin_refsheet.png)
-###### Art by [Rindeadsong](https://www.furaffinity.net/view/27334962/) - <span class="desktop-only">click</span><span class="raw-only">/</span><span class="mobile-only">tap</span> the image for full version
+###### Art by [Rindeadsong](https://www.furaffinity.net/view/27334962/) - {% include click.html %} the image for full version
 {% endcapture %}
 {% capture rightbox %}
 ## General Info
@@ -35,10 +40,8 @@ Resin is a squeaky, shiny living-rubber toy dragon. He usually dons black latex
 - Squeaks a bit as he moves
 - Can be very [dommy](https://www.furaffinity.net/view/33994059/) or very [subby](https://www.furaffinity.net/view/19488527/) depending on the mood or individual
 
-<span style="display: flex; flex-wrap: wrap">
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: black">Black Latex</span></span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #CD822A">#CD822A</span></span>
-</span>
+{% include colorbox.html %}
+
 - **Don't colourpick from ref!** Use your natural black latex tone.
     - It's a **good** thing if latex gear is about the same tone and texture as him!
 

tekxach/index.md

@@ -3,7 +3,7 @@ title: Tekxach
 description: "Basilisk with a petrifying gaze."
 favicon: "/assets/img/tekxach-favicon.png"
 socialmedia:
-  image: https://hazmatdr.one/assets/img/tekxach-sitepreview.png
+  image: "/assets/img/tekxach-sitepreview.png"
   type: summary_large_image
 social:
   twitter: Tekxach
@@ -12,23 +12,28 @@ social:
 flexbox:
   leftflex: 2
   rightflex: 3
+colors:
+  - color: "#6C7A54"
+    darktext: true
+  - color: "#3D4A26"
+    darktext: false
+  - color: "#98906B"
+    darktext: true
+  - color: "#CE9B33"
+    darktext: true
 ---
 
 {% capture leftbox %}
 
 [![Refsheet Image](/assets/img/2021JulyTekxach2-1200.png)](/assets/img/2021JulyTekxach2.png)
-###### Art by [Hacony](https://www.furaffinity.net/user/qundium) - <span class="desktop-only">click</span><span class="raw-only">/</span><span class="mobile-only">tap</span> the image for full version
-<span style="display: flex; flex-wrap: wrap">
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #6C7A54">#6C7A54</span></span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #3D4A26">#3D4A26</span></span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #98906B">#98906B</span></span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #CE9B33">#CE9B33</span></span>
-</span>
+###### Art by [Hacony](https://www.furaffinity.net/user/qundium) - {% include click.html %} the image for full version
+
+{% include colorbox.html %}
 
 {% endcapture %}
 {% capture rightbox %}
 
-**English** | [日本語](https://hazmatdr.one/tekxach/jp/)
+**English** | [日本語](jp/)
 ## General Info
 - **Name:** Tekxach [/ˈtɛʼzɑk/](http://ipa-reader.xyz/?text=%CB%88t%C9%9B%CA%BCz%C9%91k&voice=Brian)
 - **Species:** Basilisk

tekxach/jp/index.md

@@ -3,7 +3,7 @@ title: テザク
 description: "人を石化な眼差しのバジリスク。"
 favicon: "/assets/img/tekxach-favicon.png"
 socialmedia:
-  image: https://hazmatdr.one/assets/img/tekxach-sitepreview.png
+  image: "/assets/img/tekxach-sitepreview.png"
   type: summary_large_image
 social:
   twitter: Tekxach
@@ -12,23 +12,28 @@ social:
 flexbox:
   leftflex: 2
   rightflex: 3
+colors:
+  - color: "#6C7A54"
+    darktext: true
+  - color: "#3D4A26"
+    darktext: false
+  - color: "#98906B"
+    darktext: true
+  - color: "#CE9B33"
+    darktext: true
 ---
 
 {% capture leftbox %}
 
 [![キャラクターシート](/assets/img/2021JulyTekxach2.png)](/assets/img/2021JulyTekxach2.png)
 ###### [Hacony](https://www.furaffinity.net/user/qundium)のアート。画像をクリックすると拡大表示します。
-<span style="display: flex; flex-wrap: wrap">
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #6C7A54">#6C7A54</span></span>
-	<span style="padding: 0.5em"><span class="colorbox lighttext" style="background-color: #3D4A26">#3D4A26</span></span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #98906B">#98906B</span></span>
-	<span style="padding: 0.5em"><span class="colorbox darktext" style="background-color: #CE9B33">#CE9B33</span></span>
-</span>
+
+{% include colorbox.html %}
 
 {% endcapture %}
 {% capture rightbox %}
 
-[English](https://hazmatdr.one/tekxach/) | **日本語**
+[English](../) | **日本語**
 ## 概要
 - **名前：**　テザク - Tekxach
 - **種：**　バジリスク