hexaitos/hexaitos.com
hexaitos
/
hexaitos.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add art

This commit is contained in:
Hexaitos 2024-10-12 12:56:37 +02:00
parent 8ce2268989
commit 3469304cc6
9 changed files with 203 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
_layouts/art.html Executable file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css">
<body>
{% include menu.html %}
<div class="main">
{{ content }}
</div>
<footer>
{% include footer.html %}
</footer>
</body>
</html>

33
_site/art.html
View File

@ -18,9 +18,38 @@
</div>
<div class="main">
<h1 id="art-of-hexaitos">Art of Hexaitos</h1>
<p>This page contains art that I have commissioned.</p>
<h1>Art of Hexaitos</h1>
<div class="art">
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/images/Hexaitos/CZGoldEdition/spookyHexaitos_icon.png">
<img src="/assets/images/Hexaitos/CZGoldEdition/spookyHexaitos_icon.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Spooky icon portrait 2024 – CZGoldEdition</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Hexaitos ref sheet – FaultyArts</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/images/Hexaitos/FaultyArts/hexaitos_icon.png">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_icon_small.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Hexaitos bonus icon – FaultyArts</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<footer>

56
_site/assets/css/styles.css
View File

@ -255,3 +255,59 @@ footer p:last-of-type {
float: none;
}
}
/* CSS gallery from w3schools.com */
div.art {
width: 100%;
display: flex;
justify-content: center;
}
div.gallery {
border: 5px double rgba(167, 47, 20, 0.3);
}
div.gallery:hover {
border: 5px double #dba047;
}
div.gallery img {
width: 100%;
height: 200px;
object-fit: scale-down;
}
div.desc {
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

BIN
_site/assets/images/Hexaitos/CZGoldEdition/spookyHexaitos_icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 905 KiB

2
_site/index.html
View File

@ -39,7 +39,7 @@
<p>If you want to get in touch, look at the <a href="contact.html">contact</a> page! You can find me on plenty of websites or just send me an email – I am always happy to talk to new people!</p>
<p>This website is still very much a work-in-progress and it was last updated: 9 October 2024. I will be adding a <a href="blog.html">blog</a> at some point where I will be posting things mostly about computers, games and birds (<i>who’d’ve thunk?</i>). </p>
<p>This website is still very much a work-in-progress and it was last updated: 12 October 2024. I will be adding a <a href="blog.html">blog</a> at some point where I will be posting things mostly about computers, games and birds (<i>who’d’ve thunk?</i>). </p>
</div>
<footer>

37
art.html Executable file
View File

@ -0,0 +1,37 @@
---
layout: art
title: "Hexaitos.com – Art"
---
<h1>Art of Hexaitos</h1>
<div class="art">
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/images/Hexaitos/CZGoldEdition/spookyHexaitos_icon.png">
<img src="/assets/images/Hexaitos/CZGoldEdition/spookyHexaitos_icon.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Spooky icon portrait 2024 – CZGoldEdition</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Hexaitos ref sheet – FaultyArts</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/images/Hexaitos/FaultyArts/hexaitos_icon.png">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_icon_small.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Hexaitos bonus icon – FaultyArts</div>
</div>
</div>
</div>
<div class="clearfix"></div>

7
art.md
View File

@ -1,7 +0,0 @@
---
layout: default
title: "Hexaitos.com – Art"
---
# Art of Hexaitos
This page contains art that I have commissioned.

56
assets/css/styles.css
View File

@ -255,3 +255,59 @@ footer p:last-of-type {
float: none;
}
}
/* CSS gallery from w3schools.com */
div.art {
width: 100%;
display: flex;
justify-content: center;
}
div.gallery {
border: 5px double rgba(167, 47, 20, 0.3);
}
div.gallery:hover {
border: 5px double #dba047;
}
div.gallery img {
width: 100%;
height: 200px;
object-fit: scale-down;
}
div.desc {
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

BIN
assets/images/Hexaitos/CZGoldEdition/spookyHexaitos_icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 905 KiB