Edit home style

This commit is contained in:
Paul Nicoué 2025-05-25 18:29:02 +02:00
parent 2f9bf8cd78
commit badf6c29be
16 changed files with 154 additions and 159 deletions

View file

@ -2,4 +2,4 @@
// ABSTRACTS (INDEX)
// --------------------------------------------------
@forward 'variables';
@forward "variables";

View file

@ -4,21 +4,21 @@
// Fonts
$text-font-family: Helvetica, Arial, sans-serif;
$regular-font-weight: 400;
$medium-font-weight: 500;
$semi-bold-font-weight: 600;
$bold-font-weight: 700;
$text-font-size: 1rem;
$text-line-height: 1.1;
$text-font-size: 0.9rem;
$text-line-height: 1.15;
// Dimensions
$icon-size: 3rem;
$sidebar-padding: 0.8rem;
$app-width: min(100%, 120rem); // => 1920px
$large-content-width: min(100%, 100rem); // => 1600px
$medium-content-width: min(100%, 80rem); // => 1280px
$small-content-width: min(100%, 60rem); // => 960px
$icon-size: clamp(2rem, 1.667rem + 0.694vw, 2.5rem); // Viewport range: 48rem <=> 120rem
$icon-spacing: clamp(0.25rem, 0.083rem + 0.347vw, 0.5rem); // Viewport range: 48rem <=> 120rem
// Colors
$black: #000;
$white: #fff;
// Media queries
$tablet-media-query: 48rem;
$desktop-media-query: 62rem;
$tablet-media-query: 48rem; // => 768px
$desktop-media-query: 62rem; // => 992px

View file

@ -1,38 +1,29 @@
@use '../abstracts' as *;
@use "../abstracts" as *;
// --------------------------------------------------
// BASE STYLE
// --------------------------------------------------
// Fonts and colors
body {
color: $black;
background-color: $white;
font-family: $text-font-family;
font-size: $text-font-size;
line-height: $text-line-height;
color: $black;
}
strong {
font-weight: $bold-font-weight;
font-weight: 700;
}
em {
font-style: italic;
}
// Link style
a {
color: $black;
text-decoration: none;
transition: text-decoration 200ms ease-in-out;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
text-decoration: underline;
text-underline-position: under;
&:focus-visible {
outline: 1px dashed $black;
@ -40,40 +31,81 @@ a {
}
}
// General layout
// --------------------------------------------------
// BASE LAYOUT
// --------------------------------------------------
body {
min-height: 100vh !important;
display: flex;
flex-direction: column;
align-items: center;
header {
position: fixed;
top: 0;
#app {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
justify-content: center;
justify-items: center;
width: $app-width;
.header__logo {
width: 5rem;
header {
grid-column: 1;
position: sticky;
top: 0;
height: 100vh; // Fallback in case dvh unit is not supported
height: 100dvh;
padding: 1rem;
.header__logo {
position: relative;
width: $icon-size;
aspect-ratio: calc(1 / 2);
background-image: url("/public/images/signature-vertical.svg");
background-size: contain;
background-position: center;
@media screen and (min-width: $desktop-media-query) {
width: calc(($icon-size * 2) + $icon-spacing);
aspect-ratio: calc(2 / 1);
background-image: url("/public/images/signature-horizontal.svg");
}
}
}
}
main {}
main {
grid-column: 2;
width: $large-content-width;
padding: calc(2rem + $icon-size) 0;
}
footer {
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.8rem;
.footer__link {
footer {
grid-column: 3;
position: sticky;
top: 0;
height: 100vh; // Fallback in case dvh unit is not supported
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
width: $icon-size;
height: $icon-size;
flex-direction: column;
justify-content: flex-end;
gap: $icon-spacing;
padding: 1rem;
svg {
width: 100%;
height: 100%;
@media screen and (min-width: $desktop-media-query) {
flex-direction: row;
align-items: flex-end;
}
.footer__link {
display: flex;
justify-content: center;
align-items: center;
width: $icon-size;
aspect-ratio: 1;
svg {
width: 100%;
height: 100%;
}
}
}
}

View file

@ -2,5 +2,5 @@
// BASE (INDEX)
// --------------------------------------------------
@forward 'minireset';
@forward 'base';
@forward "minireset";
@forward "base";

View file

@ -2,6 +2,6 @@
// MAIN
// --------------------------------------------------
@use '@splidejs/splide/dist/css/splide-core.min';
@use "@splidejs/splide/dist/css/splide-core.min";
@use "base" as *;
@use "pages" as *;

View file

@ -1,4 +1,4 @@
@use '../abstracts' as *;
@use "../abstracts" as *;
// --------------------------------------------------
// HOME STYLE
@ -10,11 +10,11 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
gap: 2rem;
.home__gallery-item {
display: table;
max-width: min(1280px, 100%);
max-width: $medium-content-width;
.home__carousel {
@ -52,6 +52,8 @@
caption-side: bottom;
width: fit-content;
margin: 0.5rem auto 0;
padding: 0 0.5rem;
text-align: center;
}
}
}

View file

@ -2,4 +2,4 @@
// PAGES (INDEX)
// --------------------------------------------------
@forward 'home';
@forward "home";

View file

@ -31,7 +31,7 @@ function setUpCarousels() {
rewind: true,
rewindByDrag: true,
role: 'undefined',
speed: 250,
speed: 0,
type: 'fade',
width: 'auto',
});

View file

@ -1,18 +0,0 @@
<svg class="apple-mail-icon" aria-hidden="true" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="apple-mail-icon__gradient" gradientTransform="matrix(341.333771, 0, 0, -341.333771, 23131.050781, 255408.6875)" gradientUnits="userSpaceOnUse" x1="-67.0167" x2="-67.0167" y1="748.2662" y2="746.7667">
<stop offset="0" stop-color="#1e51ee"/>
<stop offset="1" stop-color="#19e6ff"/>
</linearGradient>
</defs>
<style>
.apple-mail-icon__background {
fill: url(#apple-mail-icon__gradient);
}
.apple-mail-icon__white-path {
fill: #fff;
}
</style>
<path class="apple-mail-icon__background" d="M 333.376 0 C 384.576 0 410.176 0 438.048 8.528 C 468.192 19.344 492.096 43.232 502.896 73.392 C 512 101.264 512 127.424 512 178.624 L 512 333.376 C 512 384.576 512 410.176 503.472 438.048 C 492.656 468.192 468.768 492.096 438.608 502.896 C 410.736 512 384.576 512 333.376 512 L 178.624 512 C 127.424 512 101.824 512 73.952 503.472 C 43.808 492.096 19.904 468.768 9.104 438.048 C 0 410.736 0 385.136 0 333.376 L 0 178.624 C 0 127.424 0 101.824 8.528 73.952 C 19.904 43.808 43.808 19.904 73.952 9.104 C 101.264 0 127.424 0 178.624 0 L 333.376 0 Z" id="Background_2_"/>
<path class="apple-mail-icon__white-path" d="M 420.416 366.928 C 419.84 366.928 418.704 367.504 418.128 367.504 L 93.872 367.504 C 93.296 367.504 92.16 367.504 91.584 366.928 L 192.848 265.664 L 214.464 287.856 C 237.792 311.744 274.768 311.744 298.096 287.856 L 319.712 265.664 L 420.416 366.928 Z M 426.672 356.128 L 426.672 155.312 C 426.672 154.176 426.672 153.024 426.096 152.464 C 425.536 153.6 325.408 257.136 325.408 257.136 L 426.672 358.4 C 426.672 357.264 426.672 356.688 426.672 356.128 Z M 85.328 356.688 L 85.328 156.448 C 85.328 155.312 85.328 154.176 85.904 153.6 C 86.464 154.736 186.592 258.272 186.592 258.272 L 85.904 358.976 C 85.328 358.4 85.328 357.264 85.328 356.688 Z M 420.976 145.632 L 291.84 277.616 C 271.936 297.536 240.064 297.536 220.736 277.616 L 91.584 145.632 C 91.024 145.072 420.976 145.632 420.976 145.632 Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -1,31 +0,0 @@
<svg class="instagram-icon" aria-hidden="true" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="instagram-icon__gradient" gradientUnits="userSpaceOnUse" x1="328.27" x2="183.73" y1="508.05" y2="3.95" gradientTransform="matrix(1, 0, 0, 1, 0, 0)">
<stop offset="0" stop-color="#ffdb73"/>
<stop offset="0.08" stop-color="#fdad4e"/>
<stop offset="0.15" stop-color="#fb832e"/>
<stop offset="0.19" stop-color="#fa7321"/>
<stop offset="0.23" stop-color="#f6692f"/>
<stop offset="0.37" stop-color="#e84a5a"/>
<stop offset="0.48" stop-color="#e03675"/>
<stop offset="0.55" stop-color="#dd2f7f"/>
<stop offset="0.68" stop-color="#b43d97"/>
<stop offset="0.97" stop-color="#4d60d4"/>
<stop offset="1" stop-color="#4264db"/>
</linearGradient>
</defs>
<style>
.instagram-icon__background {
fill: url(#instagram-icon__gradient);
}
.instagram-icon__white-path {
fill: #fff;
}
</style>
<g transform="matrix(1.100933, 0, 0, 1.100933, -25.838909, -25.838909)">
<rect class="instagram-icon__background" height="465.06" rx="107.23" ry="107.23" width="465.06" y="23.47" x="23.47"/>
<path class="instagram-icon__white-path" d="M 331 115.22 C 367.748 115.368 397.502 145.122 397.65 181.87 L 397.65 330.13 C 397.502 366.878 367.748 396.632 331 396.78 L 181 396.78 C 144.252 396.632 114.498 366.878 114.35 330.13 L 114.35 181.87 C 114.498 145.122 144.252 115.368 181 115.22 L 331 115.22 M 331 84.22 L 181 84.22 C 127.29 84.22 83.34 128.22 83.34 181.88 L 83.34 330.13 C 83.34 383.84 127.34 427.79 181 427.79 L 331 427.79 C 384.71 427.79 428.66 383.79 428.66 330.13 L 428.66 181.87 C 428.66 128.16 384.71 84.21 331 84.21 L 331 84.22 Z"/>
<path class="instagram-icon__white-path" d="M 256 198.13 C 300.548 198.13 328.391 246.355 306.117 284.935 C 283.843 323.515 228.157 323.515 205.883 284.935 C 200.804 276.138 198.13 266.158 198.13 256 C 198.169 224.055 224.055 198.169 256 198.13 M 256 167.13 C 187.588 167.13 144.83 241.188 179.036 300.435 C 213.242 359.682 298.758 359.682 332.964 300.435 C 340.764 286.925 344.87 271.6 344.87 256 C 344.87 206.918 305.082 167.13 256 167.13 Z"/>
<circle class="instagram-icon__white-path" cx="346.81" cy="163.23" r="21.07"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -1,6 +0,0 @@
<svg viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
<path style="fill:none;stroke:#000;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
<path style="fill:none;stroke:#fff;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z"></path></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z"></path></svg>

After

Width:  |  Height:  |  Size: 334 B

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 24 12.031" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0.006289, 0, 0, -0.006289, 8.978369, 7.259286)">
<path fill="none" stroke="#000" stroke-width="93.54299927" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
<path fill="none" stroke="#000" stroke-width="8.50399971" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0, 0.006289, 0.006289, 0, -474.462891, -185.771667)" transform-origin=" 480.463px 197.772px">
<path fill="none" stroke="#000" stroke-width="93.54299927" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
<path fill="none" stroke="#000" stroke-width="8.50399971" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -2,62 +2,64 @@
<html lang="fr">
<head>
<head>
{{ snippet('metadata') }}
{{ snippet('favicon') }}
{{ snippet('metadata') }}
{{ snippet('favicon') }}
{# CSS #}
{% block stylesheets %}
<link rel="stylesheet" href="build/main.css">
{% endblock %}
{# CSS #}
{% block stylesheets %}
<link rel="stylesheet" href="build/main.css">
{% endblock %}
{# JavaScript #}
{% block scripts %}
<script src="build/app.js"
{# JavaScript #}
{% block scripts %}
<script src="build/app.js"
defer>
</script>
{% endblock %}
{# Umami #}
<script src="https://umami.paulnicoue.com/script.js"
data-website-id="836d3151-0470-4a49-a511-75851d501e09"
data-domains="julienmonnerie.com"
defer>
</script>
{% endblock %}
{# Umami #}
<script src="https://umami.paulnicoue.com/script.js"
data-website-id="836d3151-0470-4a49-a511-75851d501e09"
data-domains="julienmonnerie.com"
defer>
</script>
</head>
</head>
<body>
<body>
<div id="app">
{% block header %}
<header>
<div class="header__logo">
{{ svg('icons/logo.svg') | raw }}
</div>
</header>
{% endblock %}
{% block header %}
<header>
<div class="header__logo"></div>
</header>
{% endblock %}
{% block main %}
{% endblock %}
{% block main %}
{% endblock %}
{% block footer %}
<footer>
<a class="footer__link"
href="{{ instagram }}"
target="_blank"
title="Go to {{ site.title }}'s Instagram profile">
{{ svg('icons/instagram.svg') | raw }}
</a>
<a class="footer__link"
href="mailto:{{ email }}"
target="_blank"
title="Write an email to {{ site.title }}">
{{ svg('icons/apple-mail.svg') | raw }}
</a>
</footer>
{% endblock %}
{% block footer %}
<footer>
<a class="footer__link"
href="{{ instagram }}"
target="_blank"
aria-label="Go to {{ site.title }}'s Instagram profile">
{{ svg('images/remix-instagram-fill.svg') | raw }}
</a>
<a class="footer__link"
href="mailto:{{ email }}"
target="_blank"
aria-label="Write an email to {{ site.title }}">
{{ svg('images/remix-mail-fill.svg') | raw }}
</a>
</footer>
{% endblock %}
</body>
</div>
</body>
</html>