Build app

assets/css/abstracts/_variables.scss

@@ -13,7 +13,11 @@ $default-line-height: 1.15;
 $black: #000;
 $white: #fff;
 
-// ----- DIMENSIONS
+// ----- DIMENSIONS (viewport range for fluid dimensions: 48rem <=> 120rem)
+
+// Media queries
+$tablet-media-query: 48rem; // => 768px
+$desktop-media-query: 62rem; // => 992px
 
 // Content
 $content-width-xs: 40rem; // => 640px
@@ -22,18 +26,15 @@ $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-portrait-width: clamp(2rem, 1.333rem + 1.389vw, 3rem); // Viewport range: 48rem <=> 120rem
-$logo-landscape-width: calc($logo-portrait-width * 2);
+$logo-width-portrait: clamp(2rem, 1.333rem + 1.389vw, 3rem);
+$logo-width-landscape: calc($logo-width-portrait * 2);
 
-// Icons
-$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
+// Sidebars
+$sidebar-width-portrait: calc($logo-width-portrait + clamp(1rem, -4.333rem + 11.111vw, 9rem));
+$sidebar-width-landscape: calc($logo-width-landscape + clamp(1rem, -4.333rem + 11.111vw, 9rem));
+$sidebar-padding-y: clamp(0.75rem, 0.25rem + 1.042vw, 1.5rem);
 
-// Media queries
-$tablet-media-query: 48rem; // => 768px
-$desktop-media-query: 62rem; // => 992px
+// Main
+$main-padding-y-portrait: calc(($sidebar-padding-y * 2) + ($logo-width-portrait * 2));
+$main-padding-y-landscape: calc(($sidebar-padding-y * 2) + ($logo-width-landscape / 2));

assets/css/base/_base.scss

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

assets/css/pages/_cv.scss

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

site/blueprints/sections/site_info.yml

@@ -24,18 +24,3 @@ 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,14 +6,8 @@ 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,27 +45,6 @@
             {% 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>