add stuff to gallery

This commit is contained in:
ailyaut committed 2025-11-24 16:38:15 +01:00
1 parent 9b671490f1
commit 9e10e8fac3
19 files changed
+321 -9

No files matched your search

+6 -8
View File
@@ -4,13 +4,13 @@
<head>
<meta charset="utf-8" />
<title>Gallery – Ailyaut's blog</title>
<title>3D / Gallery – Ailyaut's blog</title>
<link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Gallery – Ailyaut's blog" />
<meta property="og:title" content="3D / Gallery – Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.com/" />
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
@@ -37,17 +37,15 @@
<div class="box">
<div class="column" style="width: 100%;">
<h1>Gallery</h1>
<p class="light">This page is still under construction.</p>
</div>
</div>
<div class="spacer" style="--size: 1em;"></div>
<div class="box">
<div class="row" style="gap: 0.75em;">
<div class="button_active">3D</div>
<div class="button">Illustration</div>
<div class="button">Graphic design</div>
<div class="button">UI & webdesign</div>
<div class="button">Animation</div>
<a href="gallery.html" class="button_active">3D</a>
<a href="gallery/illustration.html" class="button">Illustration</a>
<a href="gallery/animation.html" class="button">Animation</a>
<a href="gallery/music.html" class="button">Music</a>
</div>
</div>
<div class="spacer" style="--size: 2em;"></div>
+105
View File
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Animation / Gallery – Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Animation / Gallery – Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.com/" />
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
<meta property="og:description" content="Hi! I'm Ailyaut, a 25-year-old everything-designer with a particular interest in open source and card games." />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button">Blog</a>
<a href="../gallery.html" class="nav_button_active">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="width: 100%;">
<h1>Gallery</h1>
</div>
</div>
<div class="spacer" style="--size: 1em;"></div>
<div class="box">
<div class="row" style="gap: 0.75em;">
<a href="../gallery.html" class="button">3D</a>
<a href="illustration.html" class="button">Illustration</a>
<a href="animation.html" class="button_active">Animation</a>
<a href="music.html" class="button">Music</a>
</div>
</div>
<div class="spacer" style="--size: 2em;"></div>
<div class="box">
<div class="column" style="width: 100%;">
<div class="row" style="gap: 1em;">
<div class="column" style="--custom_width: 50%">
<iframe class="gallery" style="aspect-ratio: 16/9;" src="https://www.youtube-nocookie.com/embed/BWbewoul1n8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="column" style="--custom_width: 50%">
<iframe class="gallery" style="aspect-ratio: 16/9;" src="https://www.youtube-nocookie.com/embed/fAEp-mdmtq4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="row" style="gap: 1em; margin-top: 1em;">
<div class="column" style="--custom_width: 50%">
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/bar.mp4" type=video/mp4></video>
</div>
<div class="column" style="--custom_width: 50%">
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/tententrain.mp4" type=video/mp4></video>
</div>
</div>
<div class="row" style="gap: 1em; margin-top: 1em;">
<div class="column" style="--custom_width: 50%">
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/tentensky.mp4" type=video/mp4></video>
</div>
<div class="column" style="--custom_width: 50%">
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/lettheshowbegin.mp4" type=video/mp4></video>
</div>
</div>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+106
View File
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Illustration / Gallery – Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Illustration / Gallery – Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.com/" />
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
<meta property="og:description" content="Hi! I'm Ailyaut, a 25-year-old everything-designer with a particular interest in open source and card games." />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button">Blog</a>
<a href="../gallery.html" class="nav_button_active">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="width: 100%;">
<h1>Gallery</h1>
</div>
</div>
<div class="spacer" style="--size: 1em;"></div>
<div class="box">
<div class="row" style="gap: 0.75em;">
<a href="../gallery.html" class="button">3D</a>
<a href="illustration.html" class="button_active">Illustration</a>
<a href="animation.html" class="button">Animation</a>
<a href="music.html" class="button">Music</a>
</div>
</div>
<div class="spacer" style="--size: 2em;"></div>
<div class="box">
<div class="column" style="width: 100%;">
<div class="row" style="gap: 1em;">
<div class="column" style="--custom_width: 25%">
<img class="gallery" src="illustration/mars.png" title="Mars" />
</div>
<div class="column" style="--custom_width: 25%">
<img class="gallery" src="illustration/jupiter.png" title="Jupiter" />
</div>
<div class="column" style="--custom_width: 25%">
<img class="gallery" src="illustration/uranus.png" title="Uranus" />
</div>
<div class="column" style="--custom_width: 25%">
<img class="gallery" src="illustration/iso.png" title="Iso" />
</div>
</div>
<div class="row" style="gap: 1em; margin-top: 1em;">
<div class="column" style="--custom_width: 28.5%">
<img class="gallery" src="illustration/canevas_2025.png" title="Canevas" />
</div>
<div class="column" style="--custom_width: 20.1%">
<a target="_blank" href="illustration/leopard.jpg"><img class="gallery" src="illustration/thumb/leopard.png" title="BD Leopard" /></a>
</div>
<div class="column" style="--custom_width: 50.5%">
<a target="_blank" href="illustration/thunderblight.png"><img class="gallery" src="illustration/thumb/thunderblight.png" title="Bassist Thunderblight Ganon" /></a>
</div>
</div>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 859 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

+102
View File
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Music / Gallery – Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Music / Gallery – Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.com/" />
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
<meta property="og:description" content="Hi! I'm Ailyaut, a 25-year-old everything-designer with a particular interest in open source and card games." />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button">Blog</a>
<a href="../gallery.html" class="nav_button_active">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="width: 100%;">
<h1>Gallery</h1>
</div>
</div>
<div class="spacer" style="--size: 1em;"></div>
<div class="box">
<div class="row" style="gap: 0.75em;">
<a href="../gallery.html" class="button">3D</a>
<a href="illustration.html" class="button">Illustration</a>
<a href="animation.html" class="button">Animation</a>
<a href="music.html" class="button_active">Music</a>
</div>
</div>
<div class="spacer" style="--size: 2em;"></div>
<div class="box">
<div class="column" style="width: 100%;">
<div class="row" style="gap: 1em;">
<div class="column" style="--custom_width: 33%">
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=696183895/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/camel-by-camel-metal-cover-by-ailyaut-2">Camel by Camel (Metal cover by Ailyaut) by Ailyaut</a></iframe>
</div>
<div class="column" style="--custom_width: 33%">
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=2935215900/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/oummm-le-dauphin-blanc-metal-cover-by-ailyaut">Oummm le dauphin blanc (Metal cover by Ailyaut) by Ailyaut</a></iframe>
</div>
<div class="column" style="--custom_width: 33%">
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=3370488760/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/thunderblight-ganon-metal-cover-by-ailyaut">Thunderblight Ganon (Metal cover by Ailyaut) by Ailyaut</a></iframe>
</div>
</div>
<div class="row" style="gap: 1em;">
<div class="column" style="--custom_width: 33%">
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=1371748336/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/les-m-nestrels-percussionnistes-metal-cover-by-ailyaut">Les ménestrels percussionnistes (metal cover by Ailyaut) by Ailyaut</a></iframe>
</div>
<div class="column" style="--custom_width: 33%">
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=2098400706/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/miki-matsubara-stay-with-me-splatoon-cover">Miki Matsubara - Stay With Me (Splatoon cover) by Ailyaut</a></iframe>
</div>
<div class="column" style="--custom_width: 33%">
</div>
</div>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>
+1 -1
View File
@@ -1 +1 @@
:root{--accent:#9b9bff;--background:white;--onBackground:black;--surface:#f4f4f4;--outline:#e0e0e0;--light:#666666;--link:#0069C2;--icons:none;--inverseIcons:invert();}@media(prefers-color-scheme:dark){:root{--accent:#9b9bff;--background:black;--onBackground:white;--surface:#202020;--outline:#3a3a3a;--light:#AAAAAA;--link:#8CB4FF;--icons:invert();--inverseIcons:none;}.button:hover,.button:active{.icon{filter:var(--inverseIcons);transition:all 0.2s ease;}}}@font-face{font-family:"title";src:url("media/fonts/bricolagegrotesque.woff2")format("woff2");}html{box-sizing:border-box;scroll-behavior:smooth;}*,*::before,*::after{box-sizing:inherit;}body{background-color:var(--background);margin:0;}main{margin-top:6em;margin-bottom:2em;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 18em);}/* TEXT */h1,h2,h3{font-family:'title',sans-serif;font-weight:400;color:var(--onBackground);}h1{ font-size:2.5em;margin-bottom:0.25em;margin-top:0;}h2{ font-size:2em;margin-bottom:0.5em;}h3{font-size:1.6em;margin-bottom:0.5em;}p,ol,ul,li,.bold,.light,.credit,.monospace{font-family:system-ui,sans-serif;font-weight:400;font-size:1em;line-height:1.5em;margin-top:0;color:var(--onBackground);flex-wrap:wrap;}a{color:var(--link);}.bold{font-weight:800;}.italic{font-style:italic;}.light,.credit{color:var(--light);}.credit{font-style:italic;}.monospace{font-family:ui-monospace,monospace;background-color:var(--surface);border:1px solid var(--outline);border-radius:0.5em;padding:0.5em;}li{padding-left:0.5em;margin-bottom:0.5em;}.link_title{text-decoration:underline 4px var(--accent);transition:all 0.2s ease-out;}.link_title:hover{margin-right:0.5em;transition:all 0.2s ease-out;}hr{width:100%;border:none;border-top:solid 2px var(--outline);}.card_title,.card_text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical;margin-top:0.5em;margin-bottom:0;transition:all 0.2s ease-out;}.card_text{color:var(--light);margin-bottom:1em}/* CONTAINERS */.box,.card,.column{display:flex;flex-direction:column;width:100%;}.box{padding:0 1.25em 0 1.25em;}.reverse{flex-direction:column-reverse;}.row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;height:var(--custom_height);}.card{padding:0;position:relative;bottom:0;left:0;filter:drop-shadow(0 0 0 var(--surface));background-color:var(--surface);border-radius:1.5em;border:1px solid var(--outline);transition:all 0.2s ease-out;}.card:hover,.card:active{bottom:1em;left:1em;filter:drop-shadow(-1em 1em 0 var(--accent));background-color:var(--accent);transition:all 0.2s ease-out;border:none;.card_title,.card_text {color:black;transition:all 0.2s ease-out;} .verified {filter:brightness(0);}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.reverse{flex-direction:row;}.column{width:var(--custom_width);}.row{flex-wrap:nowrap;}}/* ALIGNMENT */.align_left,.align_horizontal,.align_right{display:flex;flex-direction:column;width:100%}.align_top,.align_vertical,.align_bottom{display:flex;flex-direction:row;height:100%;}.align_left,.align_top{align-items:flex-start;}.align_horizontal,.align_vertical{align-items:center;}.align_right,.align_bottom{align-items:flex-end;}/* MEDIA */#portrait{max-width:min(100%,200px);max-height:200px;border-radius:100%;}.image_custom{max-width:min(var(--custom_size),90%);max-height:var(--custom_size);}.icon{filter:var(--icons);height:26px;}.verified{filter:var(--icons);position:relative;top:0.15em;overflow:visible;margin-top:-99em;height:24px;}.icon:hover,.icon:active{opacity:0.75;filter:opacity(0.75);-webkit-filter:opacity(0.75);filter:var(--icons);}.card_image{width:100vw;max-width:100%;aspect-ratio:16/10;border-radius:1.5em 1.5em 0 0;object-fit:cover;}.gallery{max-width:100%;border-radius:1em;}/* HEADER & FOOTER */header,footer{display:flex;flex-direction:column;align-items:center;}#header_box,#footer_box{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:5em;padding:0 1.5em 0 1.5em;}#header_box{gap:1em;margin:1em 3em 0 3em;}#footer_box{margin:0 3em 4em 3em;}#header_title{font-family:'title',sans-serif;font-size:1.8em;font-weight:400;text-decoration:none;color:var(--onBackground);transition:all 0.1s ease;}#header_title:hover,#header_title:active{color:var(--accent);transition:all 0.1s ease;}#header_nav{display:flex;flex-direction:row;justify-content:flex-end;background-color:var(--surface);border:solid var(--outline) 1px;border-radius:5em;padding:0.5em 0.6em 0.5em 0.6em;gap:0.25em;}.nav_button,.nav_button_active,.button,.button_active{display:flex;flex-direction:row;align-items:center;font-family:'title',sans-serif;font-size:1em;font-weight:400;text-decoration:none;color:var(--onBackground);background-color:color-mix(in srgb,var(--onBackground),transparent 100%);padding:0.5em 0.8em 0.5em 0.8em;border-radius:1.5em;transition:all 0.2s ease;}.nav_button_active{color:black;background-color:var(--accent);Line truncated
:root{--accent:#9b9bff;--background:white;--onBackground:black;--surface:#f4f4f4;--outline:#e0e0e0;--light:#666666;--link:#0069C2;--icons:none;--inverseIcons:invert();}@media(prefers-color-scheme:dark){:root{--accent:#9b9bff;--background:black;--onBackground:white;--surface:#202020;--outline:#3a3a3a;--light:#AAAAAA;--link:#8CB4FF;--icons:invert();--inverseIcons:none;}.button:hover,.button:active{.icon{filter:var(--inverseIcons);transition:all 0.2s ease;}}}@font-face{font-family:"title";src:url("media/fonts/bricolagegrotesque.woff2")format("woff2");}html{box-sizing:border-box;scroll-behavior:smooth;}*,*::before,*::after{box-sizing:inherit;}body{background-color:var(--background);margin:0;}main{margin-top:6em;margin-bottom:2em;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 18em);}/* TEXT */h1,h2,h3{font-family:'title',sans-serif;font-weight:400;color:var(--onBackground);}h1{ font-size:2.5em;margin-bottom:0.25em;margin-top:0;}h2{ font-size:2em;margin-bottom:0.5em;}h3{font-size:1.6em;margin-bottom:0.5em;}p,ol,ul,li,.bold,.light,.credit,.monospace{font-family:system-ui,sans-serif;font-weight:400;font-size:1em;line-height:1.5em;margin-top:0;color:var(--onBackground);flex-wrap:wrap;}a{color:var(--link);}.bold{font-weight:800;}.italic{font-style:italic;}.light,.credit{color:var(--light);}.credit{font-style:italic;}.monospace{font-family:ui-monospace,monospace;background-color:var(--surface);border:1px solid var(--outline);border-radius:0.5em;padding:0.5em;}li{padding-left:0.5em;margin-bottom:0.5em;}.link_title{text-decoration:underline 4px var(--accent);transition:all 0.2s ease-out;}.link_title:hover{margin-right:0.5em;transition:all 0.2s ease-out;}hr{width:100%;border:none;border-top:solid 2px var(--outline);}.card_title,.card_text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical;margin-top:0.5em;margin-bottom:0;transition:all 0.2s ease-out;}.card_text{color:var(--light);margin-bottom:1em}/* CONTAINERS */.box,.card,.column{display:flex;flex-direction:column;width:100%;}.box{padding:0 1.25em 0 1.25em;}.reverse{flex-direction:column-reverse;}.row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;height:var(--custom_height);}.card{padding:0;position:relative;bottom:0;left:0;filter:drop-shadow(0 0 0 var(--surface));background-color:var(--surface);border-radius:1.5em;border:1px solid var(--outline);transition:all 0.2s ease-out;}.card:hover,.card:active{bottom:1em;left:1em;filter:drop-shadow(-1em 1em 0 var(--accent));background-color:var(--accent);transition:all 0.2s ease-out;border:none;.card_title,.card_text {color:black;transition:all 0.2s ease-out;} .verified {filter:brightness(0);}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.reverse{flex-direction:row;}.column{width:var(--custom_width);}.row{flex-wrap:nowrap;}}/* ALIGNMENT */.align_left,.align_horizontal,.align_right{display:flex;flex-direction:column;width:100%}.align_top,.align_vertical,.align_bottom{display:flex;flex-direction:row;height:100%;}.align_left,.align_top{align-items:flex-start;}.align_horizontal,.align_vertical{align-items:center;}.align_right,.align_bottom{align-items:flex-end;}/* MEDIA */#portrait{max-width:min(100%,200px);max-height:200px;border-radius:100%;}.image_custom{max-width:min(var(--custom_size),90%);max-height:var(--custom_size);}.icon{filter:var(--icons);height:26px;}.verified{filter:var(--icons);position:relative;top:0.15em;overflow:visible;margin-top:-99em;height:24px;}.icon:hover,.icon:active{opacity:0.75;filter:opacity(0.75);-webkit-filter:opacity(0.75);filter:var(--icons);}.card_image{width:100vw;max-width:100%;aspect-ratio:16/10;border-radius:1.5em 1.5em 0 0;object-fit:cover;}.gallery{background-color:var(--surface);max-width:100%;border-radius:1em;}/* HEADER & FOOTER */header,footer{display:flex;flex-direction:column;align-items:center;}#header_box,#footer_box{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:5em;padding:0 1.5em 0 1.5em;}#header_box{gap:1em;margin:1em 3em 0 3em;}#footer_box{margin:0 3em 4em 3em;}#header_title{font-family:'title',sans-serif;font-size:1.8em;font-weight:400;text-decoration:none;color:var(--onBackground);transition:all 0.1s ease;}#header_title:hover,#header_title:active{color:var(--accent);transition:all 0.1s ease;}#header_nav{display:flex;flex-direction:row;justify-content:flex-end;background-color:var(--surface);border:solid var(--outline) 1px;border-radius:5em;padding:0.5em 0.6em 0.5em 0.6em;gap:0.25em;}.nav_button,.nav_button_active,.button,.button_active{display:flex;flex-direction:row;align-items:center;font-family:'title',sans-serif;font-size:1em;font-weight:400;text-decoration:none;color:var(--onBackground);background-color:color-mix(in srgb,var(--onBackground),transparent 100%);padding:0.5em 0.8em 0.5em 0.8em;border-radius:1.5em;transition:all 0.2s ease;}.nav_button_active{color:blackLine truncated
+1
View File
@@ -292,6 +292,7 @@ hr {
}
.gallery {
background-color: var(--surface);
max-width: 100%;
border-radius: 1em;
}