Add colour codes to ref sheet page

This commit is contained in:
Hexaitos 2024-11-05 20:47:40 +01:00
parent b2c8aea5d4
commit 314684ba3c
8 changed files with 156 additions and 18 deletions

View File

@ -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",

View File

@ -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",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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>

View File

@ -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%;

View File

@ -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).
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>