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

switch to svg for 'verified' icon

Browse Source
This commit is contained in:
ailyaut committed 2025-05-24 23:40:59 +02:00
1 parent 2ad1434e08
commit 1434516341
6 files changed
+10 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+1 -1
View File
@@ -64,7 +64,7 @@
<div class="row align_vertical" style="justify-content: space-between; height: min-content;">
<div class="row align_vertical" style="gap: 0.75em;">
<h2 style="margin-bottom: 0; margin-top: 0;">Featured project</h2>
<img class="icon" src="media/icons/verified.png">
<img class="icon" src="media/icons/verified.svg">
</div>
<p style="min-width: max-content; position: relative; top: 0.75em;"><a href="projects.html" class="light">All projects ></a></p>
</div>
media/icons/verified.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 298 B

media/icons/verified.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m344-60-76-128-144-32 14-148-98-112 98-112-14-148 144-32 76-128 136 58 136-58 76 128 144 32-14 148 98 112-98 112 14 148-144 32-76 128-136-58-136 58Zm94-278 226-226-56-58-170 170-86-84-56 56 142 142Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 323 B

projects.html
+6 -6
View File
@@ -41,10 +41,10 @@
<div class="spacer" style="--size: 1em;"></div>
<!-- <div class="spacer" style="--size: 0.5em;"></div>
<div class="box">
<div class="column" style="width: 100%; background-color: var(--accent); border-radius: 1em; padding: 1em 1em 0 1em;">
<div class="column" style="width: 100%; background-color: var(--accent); border-radius: 1.25em; padding: 1em 1em 0 1em;">
<h3 style="color: black; margin-top: 0; margin-bottom: 0.5em">Are you a recruiter?</h3>
<p style="color: black;">If you wish to see case studies and other previous works, <a href="#" class="bold" style="color: black; text-decoration: underline dotted; text-decoration-thickness: 2px;">click here</a>.
The projects you might find interesting on this page are marked with a <img class="verified" style="filter: brightness(0); top: 0.35em;" src="media/icons/verified.png" />
The projects you might find interesting on this page are marked with a <img class="verified" style="filter: brightness(0); top: 0.35em;" src="media/icons/verified.svg" />
</div>
</div>
<div class="spacer" style="--size: 1.5em;"></div> -->
@@ -82,7 +82,7 @@
<img src="projects/kaya/thumb.png" alt="Kaya sur la banquise" title="Kaya sur la banquise" class="card_image"/>
<div class="box">
<div class="column" style="width: 100%;">
<h3 class="card_title">Kaya sur la banquise <img class="verified" src="media/icons/verified.png" /></h3>
<h3 class="card_title">Kaya sur la banquise <img class="verified" src="media/icons/verified.svg" /></h3>
<p class="card_text">
A puppet show telling the story of Kaya, a young inuit girl who seeks a magic flower.
</p>
@@ -95,7 +95,7 @@
<img src="projects/patatotapopata/thumb.png" alt="Patatotapopata" title="Patatotapopata" class="card_image"/>
<div class="box">
<div class="column" style="width: 100%;">
<h3 class="card_title">Patatotapopata <img class="verified" src="media/icons/verified.png" /></h3>
<h3 class="card_title">Patatotapopata <img class="verified" src="media/icons/verified.svg" /></h3>
<p class="card_text">
A 30 seconds 3D animated short film about choice, freedom and death.
</p>
@@ -118,7 +118,7 @@
<img src="projects/moxxy/thumb.png" alt="Moxxy" title="Moxxy" class="card_image"/>
<div class="box">
<div class="column" style="width: 100%;">
<h3 class="card_title">Moxxy <img class="verified" src="media/icons/verified.png" /></h3>
<h3 class="card_title">Moxxy <img class="verified" src="media/icons/verified.svg" /></h3>
<p class="card_text">
A modern open source XMPP client for Android written in Flutter.
</p>
@@ -155,7 +155,7 @@
<img src="projects/gang/thumb.png" alt="Gang" title="Gang" class="card_image"/>
<div class="box">
<div class="column" style="width: 100%;">
<h3 class="card_title">Gang <img class="verified" src="media/icons/verified.png" /></h3>
<h3 class="card_title">Gang <img class="verified" src="media/icons/verified.svg" /></h3>
<p class="card_text">
A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people.
</p>
style.css
+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;}.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;}.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;}.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);}.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);}.nav_button:hover{background-color:color-mix(in srgb,var(--onBackground),transparent 92%);transitionLine 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;}.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;}.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;}.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);}.nav_button:hover{background-color:color-mix(in srgb,var(--onBackground),transparent 92%Line truncated
style_expanded.css
+1
View File
@@ -255,6 +255,7 @@ hr {
.icon {
filter: var(--icons);
height: 26px;
}
.verified {