assets/css/abstracts/_variables.scss

@@ -13,11 +13,7 @@ $default-line-height: 1.15;
 $black: #000;
 $white: #fff;
 
-// ----- DIMENSIONS (viewport range for fluid dimensions: 48rem <=> 120rem)
+// ----- DIMENSIONS
-
-// Media queries
-$tablet-media-query: 48rem; // => 768px
-$desktop-media-query: 62rem; // => 992px
 
 // Content
 $content-width-xs: 40rem; // => 640px
@@ -26,15 +22,18 @@ $content-width-m: 80rem; // => 1280px
 $content-width-l: 100rem; // => 1600px
 $content-width-xl: 120rem; // => 1920px
 
+// Sidebar
+$sidebar-padding-x: clamp(0.75rem, -0.75rem + 3.125vw, 3rem); // Viewport range: 48rem <=> 120rem
+$sidebar-padding-y: clamp(0.75rem, 0.25rem + 1.042vw, 1.5rem); // Viewport range: 48rem <=> 120rem
+
 // Logo
-$logo-width-portrait: clamp(2rem, 1.333rem + 1.389vw, 3rem);
+$logo-portrait-width: clamp(2rem, 1.333rem + 1.389vw, 3rem); // Viewport range: 48rem <=> 120rem
-$logo-width-landscape: calc($logo-width-portrait * 2);
+$logo-landscape-width: calc($logo-portrait-width * 2);
 
-// Sidebars
+// Icons
-$sidebar-width-portrait: calc($logo-width-portrait + clamp(1rem, -4.333rem + 11.111vw, 9rem));
+$icon-size: clamp(2rem, 1.667rem + 0.694vw, 2.5rem); // Viewport range: 48rem <=> 120rem
-$sidebar-width-landscape: calc($logo-width-landscape + clamp(1rem, -4.333rem + 11.111vw, 9rem));
+$icon-spacing: clamp(0.25rem, 0.083rem + 0.347vw, 0.5rem); // Viewport range: 48rem <=> 120rem
-$sidebar-padding-y: clamp(0.75rem, 0.25rem + 1.042vw, 1.5rem);
 
-// Main
+// Media queries
-$main-padding-y-portrait: calc(($sidebar-padding-y * 2) + ($logo-width-portrait * 2));
+$tablet-media-query: 48rem; // => 768px
-$main-padding-y-landscape: calc(($sidebar-padding-y * 2) + ($logo-width-landscape / 2));
+$desktop-media-query: 62rem; // => 992px

assets/css/base/_base.scss

@@ -15,6 +15,7 @@ body {
 a {
     color: $black;
     text-decoration: underline;
+    text-underline-position: under;
 
     &:focus-visible {
         outline: 1px dashed $black;
@@ -42,16 +43,12 @@ body {
     #app {
         position: relative;
         display: grid;
-        grid-template-columns: $sidebar-width-portrait minmax(min-content, $content-width-m) $sidebar-width-portrait;
+        grid-template-columns: 1fr minmax(min-content, $content-width-m) 1fr;
-        justify-content: space-evenly;
+        justify-content: center;
         justify-items: center;
         width: 100%;
         max-width: $content-width-xl;
 
-        @media (orientation: landscape) {
-            grid-template-columns: $sidebar-width-landscape minmax(min-content, $content-width-m) $sidebar-width-landscape;
-        }
-
         header {
             grid-column: 1;
             display: flex;
@@ -62,19 +59,19 @@ body {
             width: 100%;
             height: 100vh; // Fallback in case dvh unit is not supported
             height: 100dvh;
-            padding: $sidebar-padding-y 0;
+            padding: $sidebar-padding-y $sidebar-padding-x;
 
             .header__logo {
                 display: block;
                 position: relative;
-                width: $logo-width-portrait;
+                width: $logo-portrait-width;
                 aspect-ratio: calc(1 / 2);
                 background-image: url("/public/images/signature-portrait.svg");
                 background-size: contain;
                 background-position: center;
 
                 @media (orientation: landscape) {
-                    width: $logo-width-landscape;
+                    width: $logo-landscape-width;
                     aspect-ratio: calc(2 / 1);
                     background-image: url("/public/images/signature-landscape.svg");
                 }
@@ -86,10 +83,44 @@ body {
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: $main-padding-y-portrait 0;
+            padding: calc(($sidebar-padding-y * 2) + ($logo-portrait-width * 2)) 0;
 
             @media (orientation: landscape) {
-                padding: $main-padding-y-landscape 0;
+                padding: calc(($sidebar-padding-y * 2) + ($logo-landscape-width / 2)) 0;
+            }
+        }
+
+        footer {
+            grid-column: 3;
+            position: sticky;
+            top: 0;
+            width: 100%;
+            height: 100vh; // Fallback in case dvh unit is not supported
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: center;
+            gap: $icon-spacing;
+            padding: $sidebar-padding-y $sidebar-padding-x;
+
+            @media (orientation: landscape) {
+                flex-direction: row;
+                justify-content: center;
+                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%;
+                }
             }
         }
     }

assets/css/pages/_cv.scss

@@ -13,16 +13,19 @@
     .cv__content {
         display: grid;
         grid-template-columns: auto 1fr;
-        gap: 0.5rem;
+        column-gap: 0.5rem;
+        row-gap: 1rem;
         max-width: $content-width-s;
 
         > h2 {
             grid-column: 1 / span 2;
-            margin: 0.5rem 0;
+            font-size: 1rem;
+            font-weight: 700;
         }
 
         > h3 {
             grid-column: 1 / span 1;
+            font-weight: 700;
         }
 
         > p {

assets/css/pages/_home.scss

@@ -53,7 +53,7 @@
             .home__image-caption {
                 display: table-caption;
                 caption-side: bottom;
-                margin: 0.25rem 0 0;
+                margin: 0.5rem 0 0;
             }
         }
     }

site/blueprints/sections/site_info.yml

@@ -24,3 +24,18 @@ fields:
             - '|'
             - clear
         required: true
+    instagram:
+        label:
+            en: Instagram account
+            fr: Compte Instagram
+        type: url
+        icon: instagram
+        required: true
+        width: 1/2
+    email:
+        label:
+            en: Email
+            fr: Adresse e-mail
+        type: email
+        required: true
+        width: 1/2

site/controllers/site.php

@@ -6,8 +6,14 @@ return function ($site) {
     $logoHref = $site->url();
     $logoAriaLabel = "Go to {$site->title()}'s home page";
 
+    // Get contact fields content
+    $email = $site->email();
+    $instagram = $site->instagram();
+
     // Return data
     return compact(
+        'email',
+        'instagram',
         'logoAriaLabel',
         'logoHref',
     );

site/templates/base.twig

@@ -45,6 +45,27 @@
             {% block main %}
             {% endblock %}
 
+            {% block footer %}
+                <footer>
+                    {% if instagram.isNotEmpty %}
+                        <a class="footer__link footer__instagram-link"
+                           href="{{ instagram }}"
+                           target="_blank"
+                           aria-label="Go to {{ site.title }}'s Instagram profile">
+                            {{ svg('images/feather-instagram-custom.svg') | raw }}
+                        </a>
+                    {% endif %}
+                    {% if email.isNotEmpty %}
+                        <a class="footer__link footer__mail-link"
+                           href="mailto:{{ email }}"
+                           target="_blank"
+                           aria-label="Write an email to {{ site.title }}">
+                            {{ svg('images/feather-mail-custom.svg') | raw }}
+                        </a>
+                    {% endif %}
+                </footer>
+            {% endblock %}
+
         </div>
 
     </body>