From 9d15a6ebd65c50831d20cce67141436c9b13344d Mon Sep 17 00:00:00 2001
From: Alexis Fourmaux <fourmaux.alexis.perso@ungol.fr>
Date: Sat, 17 May 2025 00:37:16 +0200
Subject: [PATCH] feat: improve global responsivity

---
 sass/_constants.scss          |  1 +
 sass/_mixins.scss             | 14 +++++++++++++
 sass/_theme.scss              |  2 ++
 sass/parts/_navbar.scss       | 26 +++++++++--------------
 sass/parts/_page_title.scss   | 16 ++++++++++++++
 sass/shortcodes/_callout.scss | 24 +++++++++++++++++----
 sass/styles.scss              | 39 ++++++++++++++++++++++++++++++++++-
 7 files changed, 101 insertions(+), 21 deletions(-)
 create mode 100644 sass/_constants.scss
 create mode 100644 sass/_mixins.scss

diff --git a/sass/_constants.scss b/sass/_constants.scss
new file mode 100644
index 0000000..653405d
--- /dev/null
+++ b/sass/_constants.scss
@@ -0,0 +1 @@
+$smartphone: 750px;
\ No newline at end of file
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
new file mode 100644
index 0000000..2c6d662
--- /dev/null
+++ b/sass/_mixins.scss
@@ -0,0 +1,14 @@
+@mixin link($color, $hover-color: $color, $visited-color: $color) {
+    a {
+        color: $color;
+        text-decoration: none;
+
+        &:visited {
+            color: $visited-color;
+        }
+
+        &:hover {
+            color: $hover-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/sass/_theme.scss b/sass/_theme.scss
index 0cfe2cd..68347a8 100644
--- a/sass/_theme.scss
+++ b/sass/_theme.scss
@@ -2,6 +2,8 @@
 @use 'colors/catppuccin-latte' as light;
 @use 'fonts';
 
+$smartphone: 750px;
+
 :root {
   --pink: #{light.$pink};
   --mauve: #{light.$mauve};
diff --git a/sass/parts/_navbar.scss b/sass/parts/_navbar.scss
index fd328cb..2d9213d 100644
--- a/sass/parts/_navbar.scss
+++ b/sass/parts/_navbar.scss
@@ -1,17 +1,6 @@
-@mixin header_link($color, $hover-color) {
-    a {
-        color: $color;
-        text-decoration: none;
+@use '../constants' as *;
+@use '../mixins' as *;
 
-        &:visited {
-            color: $color;
-        }
-
-        &:hover {
-            color: $hover-color;
-        }
-    }
-}
 
 header {
     background-color: var(--crust);
@@ -37,12 +26,12 @@ nav {
         font-size: 2.5rem;
         font-weight: 100;
         text-transform: uppercase;
-        @include header_link(var(--text), var(--text));
+        @include link(var(--text), var(--text));
     }
 
     .nav-bar {
         flex: 1 auto;
-        @include header_link(var(--subtext1), var(--subtext0));
+        @include link(var(--subtext1), var(--subtext0));
         font-size: 1.2rem;
         text-transform: lowercase;
     }
@@ -70,7 +59,11 @@ nav {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: $smartphone) {
+    header {
+        margin-bottom: 1.5rem;
+    }
+
     nav {
         max-width: 100%;
         flex-direction: column;
@@ -83,6 +76,7 @@ nav {
 
         .home-title {
             text-align: center;
+            font-size: 1.8rem;
         }
     }
 }
\ No newline at end of file
diff --git a/sass/parts/_page_title.scss b/sass/parts/_page_title.scss
index c5cfbb5..923af55 100644
--- a/sass/parts/_page_title.scss
+++ b/sass/parts/_page_title.scss
@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 section {
     &.title {
         margin-bottom: 4rem;
@@ -47,4 +49,18 @@ section {
             }
         }
     }
+}
+
+@media only screen and (max-width: $smartphone) {
+    section.title {
+        margin-bottom: 2.5rem;
+
+        h1.title {
+            font-size: 2.2rem;
+        }
+
+        p.subtitle {
+            font-size: 1.3rem;
+        }
+    }
 }
\ No newline at end of file
diff --git a/sass/shortcodes/_callout.scss b/sass/shortcodes/_callout.scss
index 4ee9900..f50eb75 100644
--- a/sass/shortcodes/_callout.scss
+++ b/sass/shortcodes/_callout.scss
@@ -1,13 +1,26 @@
+@use '../constants' as *;
+
 @mixin callout-customization($type, $color, $text-icon) {
     &[type="#{$type}"] {
         &>.callout-content {
             border-color: var(#{$color});
             background-color: color-mix(in srgb, var(#{$color}), transparent 90%);
+
+            @media only screen and (max-width: $smartphone) {
+                &::before {
+                    content: $text-icon;
+                    color: var(#{$color});
+                    float: left;
+                    margin-right: .5rem;
+                }
+            }
         }
 
-        &::before {
-            content: $text-icon;
-            color: var(#{$color});
+        @media only screen and (min-width: $smartphone) {
+            &::before {
+                content: $text-icon;
+                color: var(#{$color});
+            }
         }
     }
 }
@@ -33,9 +46,12 @@
         text-align: initial;
         vertical-align: middle;
         display: inline-block;
-        width: 85%;
         padding: 1.25rem;
 
+        @media only screen and (min-width: $smartphone) {
+            width: 85%;
+        }
+
         &>p {
             margin: 0;
         }
diff --git a/sass/styles.scss b/sass/styles.scss
index 21c9553..9a81197 100644
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -1,3 +1,4 @@
+@use 'constants' as *;
 @use 'theme';
 @use 'shortcodes/callout';
 @use 'parts/anchor';
@@ -34,7 +35,7 @@ article {
     margin-right: auto;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: $smartphone) {
     article {
         max-width: var(--main-width);
     }
@@ -84,6 +85,42 @@ h6 {
     overflow-wrap: break-word;
 }
 
+@media only screen and (max-width: $smartphone) {
+
+    h1 {
+        font-size: 1.5rem;
+        margin-top: 1.3rem;
+    }
+
+    h2 {
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+        font-weight: medium;
+    }
+
+    h3 {
+        font-size: 1.1rem;
+        margin-bottom: .6rem;
+        font-weight: medium;
+    }
+
+    h4 {
+        font-size: 1rem;
+        font-weight: medium;
+    }
+
+    h5 {
+        font-size: .9rem;
+        font-weight: 700;
+    }
+
+    h6 {
+        font-size: .9rem;
+        font-weight: 300;
+    }
+}
+
+
 p {
     margin-top: 1.25rem;
     margin-bottom: 1.25rem;