kayomn
/
kayomn.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix index page content layout

This commit is contained in:
kayomn 2024-06-24 09:15:13 +01:00
parent a8e1b39023
commit a3edf5449b
1 changed files with 67 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
templates/index.html
View File

@ -4,48 +4,79 @@
<h1>My Work</h1> <h1>My Work</h1>
<div class="columns"> <div class="columns">
<div class="slideshow" style="min-width: 70%;"> <div style="min-width: 70%;">
<a href="https://store.steampowered.com/app/2399420/Le_Mans_Ultimate/"> <div class="slideshow">
<div class="title">Le Mans Ultimate</div> <a href="https://store.steampowered.com/app/2399420/Le_Mans_Ultimate/">
<img src="/showreel/le-mans-ultimate-hud.png" /> <div class="title">Le Mans Ultimate</div>
<div class="summary">World Endurance Championship racing simulation.</div> <img src="/showreel/le-mans-ultimate-hud.png" />
</a> <div class="summary">World Endurance Championship racing simulation.</div>
</a>
<a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM"> <a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM">
<div class="title">Afterglow</div> <div class="title">Afterglow</div>
<img src="/showreel/afterglow.png" /> <img src="/showreel/afterglow.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div> <div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
</a> </a>
<a href="https://www.youtube.com/watch?v=ijJhM8nfthw"> <a href="https://www.youtube.com/watch?v=ijJhM8nfthw">
<div class="title">Afterglow</div> <div class="title">Afterglow</div>
<img src="/showreel/afterglow-menu.png" /> <img src="/showreel/afterglow-menu.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div> <div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
</a> </a>
<a href="https://sauce.pizzawednes.day/protectorate/game"> <a href="https://sauce.pizzawednes.day/protectorate/game">
<div class="title">Protectorate Map Editor</div> <div class="title">Protectorate Map Editor</div>
<img src="/showreel/protectorate-interior-editor.png" /> <img src="/showreel/protectorate-interior-editor.png" />
<div class="summary">Interior map editor for a turn-based RPG-lite built in the Godot game engine.</div> <div class="summary">Interior map editor for a turn-based RPG-lite built in the Godot game engine.</div>
</a> </a>
<a href="https://sauce.pizzawednes.day/protectorate/game"> <a href="https://sauce.pizzawednes.day/protectorate/game">
<div class="title">Protectorate Map Editor</div> <div class="title">Protectorate Map Editor</div>
<img src="/showreel/protectorate-exterior-editor.png" /> <img src="/showreel/protectorate-exterior-editor.png" />
<div class="summary">Exterior map editor for a turn-based RPG-lite built in the Godot game engine.</div> <div class="summary">Exterior map editor for a turn-based RPG-lite built in the Godot game engine.</div>
</a> </a>
<a href="https://www.myenergygame.net/"> <a href="https://www.myenergygame.net/">
<div class="title">My Energy Game® Quest</div> <div class="title">My Energy Game® Quest</div>
<img src="/showreel/my-energy-game-intro.png" /> <img src="/showreel/my-energy-game-intro.png" />
<div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div> <div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div>
</a> </a>
<a href="https://www.myenergygame.net/"> <a href="https://www.myenergygame.net/">
<div class="title">My Energy Game® Quest</div> <div class="title">My Energy Game® Quest</div>
<img src="/showreel/my-energy-game-activity.png" /> <img src="/showreel/my-energy-game-activity.png" />
<div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div> <div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div>
</a> </a>
</div>
<h1>Articles</h1>
{% set blog_section = get_section(path="blog/_index.md") %}
{% for page in blog_section.pages %}
<div>
<a href="{{ page.permalink }}"><h2>{{ page.title }}</h2></a>
{% set day = page.date | date(format="%e") %}
{% set month = page.date | date(format="%B") %}
{% set year = page.date | date(format="%Y") %}
{% set day_suffix = "" %}
{% if day in ["1", "21", "31"] %}
{% set day_suffix = "st" %}
{% elif day in ["2", "22"] %}
{% set day_suffix = "nd" %}
{% elif day in ["3", "23"] %}
{% set day_suffix = "rd" %}
{% else %}
{% set day_suffix = "th" %}
{% endif %}
Posted {{ day }}{{ day_suffix }} {{ month }} {{ year }}
<p>{{ page.content | striptags | truncate(length=255) }}</p>
</div>
{% endfor %}
</div> </div>
<div style="min-width: 30%;"> <div style="min-width: 30%;">
@ -54,35 +85,6 @@
</div> </div>
</div> </div>
<h1>Articles</h1>
{% set blog_section = get_section(path="blog/_index.md") %}
{% for page in blog_section.pages %}
<div>
<a href="{{ page.permalink }}"><h2>{{ page.title }}</h2></a>
{% set day = page.date | date(format="%e") %}
{% set month = page.date | date(format="%B") %}
{% set year = page.date | date(format="%Y") %}
{% set day_suffix = "" %}
{% if day in ["1", "21", "31"] %}
{% set day_suffix = "st" %}
{% elif day in ["2", "22"] %}
{% set day_suffix = "nd" %}
{% elif day in ["3", "23"] %}
{% set day_suffix = "rd" %}
{% else %}
{% set day_suffix = "th" %}
{% endif %}
Posted {{ day }}{{ day_suffix }} {{ month }} {{ year }}
<p>{{ page.content | striptags | truncate(length=255) }}</p>
</div>
{% endfor %}
<style> <style>
.slideshow { .slideshow {
min-height: 320px; min-height: 320px;