Update CSS text variables

src/assets/css/src/0.2.variables.css

@@ -39,10 +39,10 @@
   --space-2xl: 2rem;   /* 32px */
 
   /* Type scale */
-  --text-sm: 0.75rem;   /* 12px */
-  --text-md: 0.875rem;  /* 14px */
-  --text-lg: 0.9375rem; /* 16px */
-  --text-xl: 1.5rem;    /* 24px */
+  --text-xs: .75rem;  /* 12px */
+  --text-sm: .875rem; /* 14px */
+  --text-md: 1rem;     /* 16px */
+  --text-lg: 1.5rem;   /* 24px */
 
   /* Leading */
   --leading-none: 1;

src/assets/css/src/2.blocks.button.css

@@ -9,7 +9,7 @@
   padding: var(--space-md) var(--space-lg);
   text-align: center;
   text-decoration: none;
-  font-size: var(--text-md);
+  font-size: var(--text-sm);
   line-height: var(--leading-md);
   font-weight: 500;
   border-radius: var(--rounded-md);

src/assets/css/src/2.blocks.pill.css

@@ -8,7 +8,7 @@
   padding: var(--space-xs) var(--space-md);
   text-align: center;
   text-decoration: none;
-  font-size: var(--text-md);
+  font-size: var(--text-sm);
   font-weight: 500;
   border-radius: var(--rounded-full);
   background-color: var(--background, var(--color-primary-100));

src/assets/css/src/3.utilities.text.css

@@ -21,22 +21,17 @@
 
 /* Font sizes */
 
-.text-sm { 
-  font-size: 1rem;
-  font-size: var(--text-sm);
-  line-height: 1.5; /* 24px */
-}
-.text-md {
-  font-size: var(--text-md);
+.text-sm {
+  font-size: var(--text-sm); /* 14px */
   line-height: 1.4285714286; /* 20px */
 }
-.text-lg { 
-  font-size: var(--text-lg);
+.text-md {
+  font-size: var(--text-md); /* 16px */
   line-height: 1.5; /* 24px */
 }
-.text-xl {
-  font-size: var(--text-xl);
-  line-height: 1.111;
+.text-lg { 
+  font-size: var(--text-lg); /* 24px */
+  line-height: 1.5; /* 36px */
 }
 
 

src/components/Menu.vue

@@ -30,7 +30,7 @@
 	</aside>
 </template>
 
-<style>
+<style scoped>
 
 	button[aria-controls="menu"] {
 		position: fixed;
@@ -91,6 +91,7 @@
 		content: attr(data-count);
 		display: inline-block;
 		color: var(--color-primary);
+		font-size: var(--text-sm);
 		font-weight: 500;
 		margin-left: auto;
 	}

src/views/Home.vue

@@ -2,11 +2,12 @@
   <h1 class="sr-only">{{ data.content.title }}</h1>
   <div class="with-sidebar">  
     <Menu />
-    <!-- TODO: convert to Tabs.vue component -->
+    <!-- TODO: convert to TabList.vue component -->
     <main>
       <h2 id="tabslist" class="sr-only">Projets</h2>
       <header role="tablist"
               aria-labelledby="tablist">
+        <!-- Tab.vue -->
         <button id="projets-en-cours-label"
                 type="button"
                 role="tab"
@@ -30,6 +31,7 @@
           <span class="count">8</span>
         </button>
       </header>
+      <!-- TabPanel.vue -->
       <section id="projets-en-cours"
                role="tabpanel"
                tabindex="0"
@@ -78,7 +80,7 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 
   /* TABS */
 
@@ -99,7 +101,7 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    font-size: var(--text-lg);
+    font-size: var(--text-md);
     border-radius: var(--rounded-full);
     background-color: var(--background, var(--color-background));
     color: var(--color, var(--color-text));
@@ -119,6 +121,7 @@
     font-family: var(--font-serif);
   }
   [role="tab"] .count {
+    font-size: var(--text-sm);
     font-weight: 500;
   }
 
@@ -160,7 +163,7 @@
   }
   .project-item h3 {
     font-family: var(--font-serif);
-    font-size: var(--text-xl);
+    font-size: var(--text-lg);
     margin-bottom: var(--space-sm);
   }
   .project-item p {