From a240c3a016feaba6142a0b49120020a0d3eb32d6 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 4 Sep 2024 18:52:12 +0200
Subject: [PATCH] Update CSS space variables names: use numbers instead of
 T-shirts sizes

---
 src/assets/css/src/0.2.variables.css          |  17 +--
 src/assets/css/src/1.0.global.css             |  46 +++----
 src/assets/css/src/1.3.compositions.flex.css  |   4 +-
 .../css/src/1.4.compositions.with-sidebar.css |   2 +-
 src/assets/css/src/2.blocks.button.css        |   2 +-
 src/assets/css/src/2.blocks.header.css        |   2 +-
 src/assets/css/src/2.blocks.pill.css          |   6 +-
 src/assets/css/src/3.utilities.spacing.css    | 116 +++++++++---------
 src/components/Project.vue                    |   4 +-
 src/components/Tabs.vue                       |  10 +-
 10 files changed, 106 insertions(+), 103 deletions(-)

diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index 7bddd84..98a4a93 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/src/assets/css/src/0.2.variables.css
@@ -30,13 +30,14 @@
   --color-disabled: var(--color-grey-400);
 
   /* Space scale */
-  --space:     .275em; /* typographic space */
-  --space-xs:  .25rem; /* 4px */
-  --space-sm:  .5rem;  /* 8px */
-  --space-md:  .75rem; /* 12px */
-  --space-lg:  1rem;   /* 16px */
-  --space-xl:  1.5rem; /* 24px */
-  --space-2xl: 2rem;   /* 32px */
+  --space-1: .275em; /* typographic space */
+  --space-4: .25rem;
+  --space-8: .5rem;
+  --space-12: .75rem;
+  --space-16: 1rem;
+  --space-24: 1.5rem;
+  --space-32: 2rem;
+  --space-40: 2.5rem;
 
   /* Type scale */
   --text-xs: .75rem;  /* 12px */
@@ -59,7 +60,7 @@
   --sidebar-width: 22.25rem; /* 356px */
   --flow-space: 1rem;
   --auto-grid-placement: auto-fill;
-  --gap: var(--space-lg);
+  --gap: var(--space-16);
 
   /* Borders */
   --rounded-xs: 1px;
diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index b41d9bd..b7870a4 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -15,8 +15,8 @@ body {
   -webkit-font-feature-settings: "liga", "clig"; 
   font-feature-settings: "liga", "clig";
   background-color: var(--color-grey-50);
-  color: var(--color-text, black);
-  padding: 2rem var(--gutter);
+  color: var(--color-text, currentColor);
+  padding: var(--gutter);
 }
 
 /* If an element is [hidden] it needs to be max priority */
@@ -64,7 +64,7 @@ h6 > a {
 
 *:not(.sr-only) + h2,
 *:not(.sr-only) + h3 {
-  margin-top: var(--space-xs);
+  margin-top: var(--space-4);
 }
 
 
@@ -90,7 +90,7 @@ blockquote {
   padding-left: 0;
 }
 blockquote > * {
-  padding-left: var(--space-md);
+  padding-left: var(--space-12);
 }
 
 
@@ -104,7 +104,7 @@ hr {
 
 hr,
 hr + * {
-  --flow-space: var(--space-xs);
+  --flow-space: var(--space-4);
 }
 
 /* Sub and sup */
@@ -126,6 +126,9 @@ sup {
 
 /* Details */
 
+details {
+  position: relative;
+}
 summary {
   -webkit-appearance: none;
   list-style: none;
@@ -140,22 +143,21 @@ summary::marker {
  display: none; 
  content: "";
 }
-summary::before {
-  content: '+';
-  margin-right: var(--space);
+summary::after {
+  content: "";
+  display: inline-block;
+  width: 3rem;
+  height: 3rem;
+  background-color: var(--color-background);
+  background-image: var(--icon-summary);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem;
+  position: absolute;
+  right: 0;
 }
-summary + p {
-  margin-top: 0;
-}
-summary + .gallery,
-summary + figure {
-  margin-top: .5em;
-}
-details > *:last-child {
-  margin-bottom: var(--space-xs);
-}
-details[open] > summary::before {
-  content: '−';
+details[open] > summary::after {
+  transform: rotate(180deg);
 }
 
 
@@ -175,7 +177,7 @@ figcaption::before {
   margin-left: var(--gap);
 }
 figure + p {
-  margin-top: var(--space-xs);
+  margin-top: var(--space-4);
 }
 
 video {
@@ -234,7 +236,7 @@ a.link-full:focus-visible::after {
 
 form {
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--space-4);
 }
 input {
   font: inherit;
diff --git a/src/assets/css/src/1.3.compositions.flex.css b/src/assets/css/src/1.3.compositions.flex.css
index 3793321..ea72ab1 100644
--- a/src/assets/css/src/1.3.compositions.flex.css
+++ b/src/assets/css/src/1.3.compositions.flex.css
@@ -6,6 +6,6 @@
   flex-wrap: var(--wrap, wrap);
   align-items: var(--items, center);
   justify-content: var(--justify, flex-start);
-  column-gap: var(--column-gap, var(--gutter, var(--space-sm)));
-  row-gap: var(--row-gap, var(--gutter, var(--space-sm)));
+  column-gap: var(--column-gap, var(--gutter, var(--space-8)));
+  row-gap: var(--row-gap, var(--gutter, var(--space-8)));
 }
diff --git a/src/assets/css/src/1.4.compositions.with-sidebar.css b/src/assets/css/src/1.4.compositions.with-sidebar.css
index c83a7d4..5c36206 100644
--- a/src/assets/css/src/1.4.compositions.with-sidebar.css
+++ b/src/assets/css/src/1.4.compositions.with-sidebar.css
@@ -3,7 +3,7 @@
 .with-sidebar {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-2xl);
+  gap: var(--space-32);
 }
 
 .with-sidebar > :first-child {
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index abd3a4b..45246ba 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -6,7 +6,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: var(--space-md) var(--space-lg);
+  padding: var(--space-12) var(--space-16);
   text-align: center;
   text-decoration: none;
   font-size: var(--text-sm);
diff --git a/src/assets/css/src/2.blocks.header.css b/src/assets/css/src/2.blocks.header.css
index 2f5d61b..11427cd 100644
--- a/src/assets/css/src/2.blocks.header.css
+++ b/src/assets/css/src/2.blocks.header.css
@@ -6,6 +6,6 @@
 	align-items: flex-start;
 	min-height: var(--header-height);
 	padding: 0 var(--gutter);
-	margin-bottom: var(--space-xl);
+	margin-bottom: var(--space-24);
 }
 
diff --git a/src/assets/css/src/2.blocks.pill.css b/src/assets/css/src/2.blocks.pill.css
index d50d443..b6d74ff 100644
--- a/src/assets/css/src/2.blocks.pill.css
+++ b/src/assets/css/src/2.blocks.pill.css
@@ -4,8 +4,8 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-xs) var(--space-md);
+  gap: var(--space-8);
+  padding: var(--space-4) var(--space-12);
   text-align: center;
   text-decoration: none;
   font-size: var(--text-sm);
@@ -22,6 +22,6 @@
 }
 
 .pill[data-icon] {
-  padding: var(--space-sm) var(--space-lg);
+  padding: var(--space-8) var(--space-16);
 }
 
diff --git a/src/assets/css/src/3.utilities.spacing.css b/src/assets/css/src/3.utilities.spacing.css
index 3940817..a431dd2 100644
--- a/src/assets/css/src/3.utilities.spacing.css
+++ b/src/assets/css/src/3.utilities.spacing.css
@@ -5,80 +5,80 @@
 .m-0     { margin: 0 }
 
 .mb-0    { margin-bottom: 0                }
-.mb-xs   { margin-bottom: var(--space-xs)  }
-.mb-sm   { margin-bottom: var(--space-sm)  }
-.mb-md   { margin-bottom: var(--space-md)  }
-.mb-lg   { margin-bottom: var(--space-lg)  }
-.mb-xl   { margin-bottom: var(--space-xl)  }
-.mb-2xl  { margin-bottom: var(--space-2xl) }
+.mb-xs   { margin-bottom: var(--space-4)  }
+.mb-sm   { margin-bottom: var(--space-8)  }
+.mb-md   { margin-bottom: var(--space-12)  }
+.mb-lg   { margin-bottom: var(--space-16)  }
+.mb-xl   { margin-bottom: var(--space-24)  }
+.mb-2xl  { margin-bottom: var(--space-32) }
 
 .ml-auto { margin-left: auto            }
-.ml-xs   { margin-left: var(--space-xs) }
-.ml-sm   { margin-left: var(--space-sm) }
-.ml-md   { margin-left: var(--space-md) }
-.ml-lg   { margin-left: var(--space-lg) }
-.ml-xl   { margin-left: var(--space-xl) }
+.ml-xs   { margin-left: var(--space-4) }
+.ml-sm   { margin-left: var(--space-8) }
+.ml-md   { margin-left: var(--space-12) }
+.ml-lg   { margin-left: var(--space-16) }
+.ml-xl   { margin-left: var(--space-24) }
 
 .mr-auto { margin-right: auto            }
-.mr-xs   { margin-right: var(--space-xs) }
-.mr-sm   { margin-right: var(--space-sm) }
-.mr-md   { margin-right: var(--space-md) }
-.mr-lg   { margin-right: var(--space-lg) }
-.mr-xl   { margin-right: var(--space-xl) }
+.mr-xs   { margin-right: var(--space-4) }
+.mr-sm   { margin-right: var(--space-8) }
+.mr-md   { margin-right: var(--space-12) }
+.mr-lg   { margin-right: var(--space-16) }
+.mr-xl   { margin-right: var(--space-24) }
 
 .-mt-px  { margin-top: -1px             }
 .mt-0    { margin-top: 0                }
-.mt-xs   { margin-top: var(--space-xs)  }
-.mt-sm   { margin-top: var(--space-sm)  }
-.mt-md   { margin-top: var(--space-md)  }
-.mt-lg   { margin-top: var(--space-lg)  }
-.mt-xl   { margin-top: var(--space-xl)  }
-.mt-2xl  { margin-top: var(--space-2xl) }
+.mt-xs   { margin-top: var(--space-4)  }
+.mt-sm   { margin-top: var(--space-8)  }
+.mt-md   { margin-top: var(--space-12)  }
+.mt-lg   { margin-top: var(--space-16)  }
+.mt-xl   { margin-top: var(--space-24)  }
+.mt-2xl  { margin-top: var(--space-32) }
 
 .mx-px   { margin-left: 1px             ; margin-right: 1px              }
-.mx-xs   { margin-left: var(--space-xs) ; margin-right: var(--space-xs)  }
-.mx-sm   { margin-left: var(--space-sm) ; margin-right: var(--space-sm)  }
-.mx-md   { margin-left: var(--space-md) ; margin-right: var(--space-md)  }
-.mx-lg   { margin-left: var(--space-lg) ; margin-right: var(--space-lg)  }
-.mx-xl   { margin-left: var(--space-xl) ; margin-right: var(--space-xl)  }
-.mx-2xl  { margin-left: var(--space-2xl); margin-right: var(--space-2xl) }
+.mx-xs   { margin-left: var(--space-4) ; margin-right: var(--space-4)  }
+.mx-sm   { margin-left: var(--space-8) ; margin-right: var(--space-8)  }
+.mx-md   { margin-left: var(--space-12) ; margin-right: var(--space-12)  }
+.mx-lg   { margin-left: var(--space-16) ; margin-right: var(--space-16)  }
+.mx-xl   { margin-left: var(--space-24) ; margin-right: var(--space-24)  }
+.mx-2xl  { margin-left: var(--space-32); margin-right: var(--space-32) }
 
-.my-xs   { margin-top: var(--space-xs) ; margin-bottom: var(--space-xs)  }
-.my-sm   { margin-top: var(--space-sm) ; margin-bottom: var(--space-sm)  }
-.my-md   { margin-top: var(--space-md) ; margin-bottom: var(--space-md)  }
-.my-lg   { margin-top: var(--space-lg) ; margin-bottom: var(--space-lg)  }
-.my-xl   { margin-top: var(--space-xl) ; margin-bottom: var(--space-xl)  }
-.my-2xl  { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl) }
+.my-xs   { margin-top: var(--space-4) ; margin-bottom: var(--space-4)  }
+.my-sm   { margin-top: var(--space-8) ; margin-bottom: var(--space-8)  }
+.my-md   { margin-top: var(--space-12) ; margin-bottom: var(--space-12)  }
+.my-lg   { margin-top: var(--space-16) ; margin-bottom: var(--space-16)  }
+.my-xl   { margin-top: var(--space-24) ; margin-bottom: var(--space-24)  }
+.my-2xl  { margin-top: var(--space-32); margin-bottom: var(--space-32) }
 
 
 /* Padding */
 
 .pl-0 	 { padding-left: 0 }
 
-.pt-xs   { padding-top: var(--space-xs)  }
-.pt-sm   { padding-top: var(--space-sm)  }
-.pt-md   { padding-top: var(--space-md)  }
-.pt-lg   { padding-top: var(--space-lg)  }
-.pt-xl   { padding-top: var(--space-xl)  }
-.pt-2xl  { padding-top: var(--space-2xl) }
+.pt-xs   { padding-top: var(--space-4)  }
+.pt-sm   { padding-top: var(--space-8)  }
+.pt-md   { padding-top: var(--space-12)  }
+.pt-lg   { padding-top: var(--space-16)  }
+.pt-xl   { padding-top: var(--space-24)  }
+.pt-2xl  { padding-top: var(--space-32) }
 
-.pb-xs   { padding-bottom: var(--space-xs)  }
-.pb-sm   { padding-bottom: var(--space-sm)  }
-.pb-md   { padding-bottom: var(--space-md)  }
-.pb-lg   { padding-bottom: var(--space-lg)  }
-.pb-xl   { padding-bottom: var(--space-xl)  }
-.pb-2xl  { padding-bottom: var(--space-2xl) }
+.pb-xs   { padding-bottom: var(--space-4)  }
+.pb-sm   { padding-bottom: var(--space-8)  }
+.pb-md   { padding-bottom: var(--space-12)  }
+.pb-lg   { padding-bottom: var(--space-16)  }
+.pb-xl   { padding-bottom: var(--space-24)  }
+.pb-2xl  { padding-bottom: var(--space-32) }
 
-.px-xs   { padding-left: var(--space-xs) ; padding-right: var(--space-xs)  }
-.px-sm   { padding-left: var(--space-sm) ; padding-right: var(--space-sm)  }
-.px-md   { padding-left: var(--space-md) ; padding-right: var(--space-md)  }
-.px-lg   { padding-left: var(--space-lg) ; padding-right: var(--space-lg)  }
-.px-xl   { padding-left: var(--space-xl) ; padding-right: var(--space-xl)  }
-.px-2xl  { padding-left: var(--space-2xl); padding-right: var(--space-2xl) }
+.px-xs   { padding-left: var(--space-4) ; padding-right: var(--space-4)  }
+.px-sm   { padding-left: var(--space-8) ; padding-right: var(--space-8)  }
+.px-md   { padding-left: var(--space-12) ; padding-right: var(--space-12)  }
+.px-lg   { padding-left: var(--space-16) ; padding-right: var(--space-16)  }
+.px-xl   { padding-left: var(--space-24) ; padding-right: var(--space-24)  }
+.px-2xl  { padding-left: var(--space-32); padding-right: var(--space-32) }
 
-.py-xs   { padding-top: var(--space-xs) ; padding-bottom: var(--space-xs)  }
-.py-sm   { padding-top: var(--space-sm) ; padding-bottom: var(--space-sm)  }
-.py-md   { padding-top: var(--space-md) ; padding-bottom: var(--space-md)  }
-.py-lg   { padding-top: var(--space-lg) ; padding-bottom: var(--space-lg)  }
-.py-xl   { padding-top: var(--space-xl) ; padding-bottom: var(--space-xl)  }
-.py-2xl  { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) }
+.py-xs   { padding-top: var(--space-4) ; padding-bottom: var(--space-4)  }
+.py-sm   { padding-top: var(--space-8) ; padding-bottom: var(--space-8)  }
+.py-md   { padding-top: var(--space-12) ; padding-bottom: var(--space-12)  }
+.py-lg   { padding-top: var(--space-16) ; padding-bottom: var(--space-16)  }
+.py-xl   { padding-top: var(--space-24) ; padding-bottom: var(--space-24)  }
+.py-2xl  { padding-top: var(--space-32); padding-bottom: var(--space-32) }
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 1685d3e..d5b8c34 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -40,7 +40,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
 .project-item h3 {
   font-family: var(--font-serif);
   font-size: var(--text-lg);
-  margin-bottom: var(--space-sm);
+  margin-bottom: var(--space-8);
 }
 .project-item p {
   font-size: var(--text-sm);
@@ -61,7 +61,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
   --color: var(--color-primary-100);
   flex: 1 1 0%;
   display: flex;
-  gap: var(--space-lg);
+  gap: var(--space-16);
   margin-top: -2.75rem;
   position: relative;
 }
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 0f05870..c7281a8 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -54,15 +54,15 @@ function changeTab(tabId) {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  margin: 0 auto var(--space-md);
+  margin: 0 auto var(--space-12);
   border-radius: var(--rounded-full);
-  min-height: 60px;
+  height: 3.75rem; /* 60px */
 }
 
 [role="tab"] {
   --tab-height: 2.5rem;
-  --tab-py: var(--space-md);
-  --tab-px: var(--space-lg);
+  --tab-py: var(--space-12);
+  --tab-px: var(--space-16);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -74,7 +74,7 @@ function changeTab(tabId) {
   padding: var(--tab-py) var(--tab-px);
   margin: 0;
   cursor: pointer;
-  gap: var(--space-lg);
+  gap: var(--space-16);
   height: var(--tab-height);
 }
 [role="tab"]:focus,