Add colour codes to ref sheet page

.well-known/fursona

@@ -1,10 +1,10 @@
 {
 	"sonas": [{
-		"name": "Hexaitos (or Hex)",
+		"name": "Hexaitos",
 		"pronouns": "he/they/any",
-		"gender": "Male (probably)",
+		"gender": "(Probably) male",
 		"species": "Bateleur Eagle",
-		"description": "#todo",
+		"description": "Likes Linux and FOSS in general. Anthro and often feral. ΘΔ",
 		"ref": "https://hexaitos.com/refsheet",
 		"refAlt": "A ref sheet of an anthropomorphic bateleur eagle with blue eyes including wing details and a headshot.",
 		"avatar": "https://hexaitos.com/assets/images/Hexaitos/FaultyArts/hexaitos_icon_small.png",

_site/.well-known/fursona

@@ -1,10 +1,10 @@
 {
 	"sonas": [{
-		"name": "Hexaitos (or Hex)",
+		"name": "Hexaitos",
 		"pronouns": "he/they/any",
-		"gender": "Male (probably)",
+		"gender": "(Probably) male",
 		"species": "Bateleur Eagle",
-		"description": "#todo",
+		"description": "Likes Linux and FOSS in general. Anthro and often feral. ΘΔ",
 		"ref": "https://hexaitos.com/refsheet",
 		"refAlt": "A ref sheet of an anthropomorphic bateleur eagle with blue eyes including wing details and a headshot.",
 		"avatar": "https://hexaitos.com/assets/images/Hexaitos/FaultyArts/hexaitos_icon_small.png",

_site/refsheet.html

@@ -22,11 +22,52 @@
     <div class="main">
       <h1 id="my-ref-sheet">My ref sheet</h1>
 <p><a href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" target="_blank">
-    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png" />
+    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.jpg" />
 </a></p>
 
 <p>Drawn by <a href="https://faultyarts.carrd.co/">FaultyArts</a>. Click the image to enlargen it (opens it in a new tab, roughly 4 MB).</p>
 
+<h2 id="colours">Colours</h2>
+<section class="colour-cols">
+    <span class="colour-heading">Face / scaling</span>
+    <div class="colour-col-1">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="hex-code-col-1">
+        <span>#2E2A1E</span>
+        <span>#CB9E4F</span>
+        <span>#994F2C</span>
+        <span>#90331C</span>
+    </div>
+    <span class="colour-heading">Eyes</span>
+    <div class="colour-col-2">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="hex-code-col-1">
+        <span>#FFFFFF</span>
+        <span>#233443</span>
+        <span>#2E2A1E</span>
+    </div>
+    <span class="colour-heading">Wings</span>
+    <div class="colour-col-3">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="hex-code-col-1">
+        <span>#BCB4AC</span>
+        <span>#9B9186</span>
+        <span>#2E2A1E</span>
+        <span>#794721</span>
+    </div>
+</section>
+
     </div>
 
     <footer>

_site/sitemap.xml

@@ -4,7 +4,7 @@
   <url>
     <loc>https://hexaitos.com/art.html</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
@@ -13,7 +13,7 @@
   <url>
     <loc>https://hexaitos.com/blog.html</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
@@ -22,7 +22,7 @@
   <url>
     <loc>https://hexaitos.com/contact.html</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
@@ -31,7 +31,7 @@
   <url>
     <loc>https://hexaitos.com/</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
@@ -40,7 +40,7 @@
   <url>
     <loc>https://hexaitos.com/refsheet.html</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
@@ -49,7 +49,7 @@
   <url>
     <loc>https://hexaitos.com/sitemap.xml</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
@@ -58,7 +58,7 @@
   <url>
     <loc>https://hexaitos.com/assets/css/styles.css</loc>
     
-      <lastmod>2024-11-05T17:13:55+01:00</lastmod>
+      <lastmod>2024-11-05T20:47:16+01:00</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>

assets/css/styles.scss

@@ -340,6 +340,62 @@ div.desc {
   width: 24.99999%;
 }
 
+section.colour-cols {
+  display:flex;
+  flex-direction: column;
+  justify-content: space-around;
+  text-align: center;
+}
+
+div[class*="colour-col-"] {
+  display: flex;
+  justify-content: center;
+
+  > div {
+    height: 75px;
+    width: 25%;
+  }
+
+  &[class*="1"] {
+    :nth-child(1) { background-color: #2E2A1E; }
+    :nth-child(2) { background-color: #CB9E4F; }
+    :nth-child(3) { background-color: #994F2C; }
+    :nth-child(4) { background-color: #90331C; }
+  }
+
+  &[class*="2"] {
+    :nth-child(1) { background-color: #FFFFFF; }
+    :nth-child(2) { background-color: #233443; }
+    :nth-child(3) { background-color: #2E2A1E; }
+  }
+
+  &[class*="3"] {
+    :nth-child(1) { background-color: #BCB4AC; }
+    :nth-child(2) { background-color: #9B9186; }
+    :nth-child(3) { background-color: #2E2A1E; }
+    :nth-child(4) { background-color: #794721; }
+  }
+}
+
+div[class*="hex-code-col-"] {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  margin-bottom: 15px;
+
+  > span {
+    width: 25%;
+    display: inline;
+    text-align: center;
+    font-family: monospace;
+  }
+}
+
+span.colour-heading {
+  margin-bottom: 5px;
+  font-size: large;
+}
+
 @media only screen and (max-width: 700px) {
   .responsive {
     width: 49.99999%;

refsheet.md

@@ -5,7 +5,48 @@ title: "Hexaitos.com – Ref Sheet"
 
 # My ref sheet
 <a href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" target="_blank">
-    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png">
+    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.jpg">
 </a>
 
 Drawn by [FaultyArts](https://faultyarts.carrd.co/). Click the image to enlargen it (opens it in a new tab, roughly 4 MB). 
+
+## Colours
+<section class="colour-cols">
+    <span class="colour-heading">Face / scaling</span>
+    <div class="colour-col-1">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="hex-code-col-1">
+        <span>#2E2A1E</span>
+        <span>#CB9E4F</span>
+        <span>#994F2C</span>
+        <span>#90331C</span>
+    </div>
+    <span class="colour-heading">Eyes</span>
+    <div class="colour-col-2">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="hex-code-col-1">
+        <span>#FFFFFF</span>
+        <span>#233443</span>
+        <span>#2E2A1E</span>
+    </div>
+    <span class="colour-heading">Wings</span>
+    <div class="colour-col-3">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="hex-code-col-1">
+        <span>#BCB4AC</span>
+        <span>#9B9186</span>
+        <span>#2E2A1E</span>
+        <span>#794721</span>
+    </div>
+</section>