feat: trying a new font

README.md

@@ -10,6 +10,7 @@ The contents are **my own personal thoughts and opinions**. Images and videos th
 
 - [Nuxt 3](https://nuxt.com/) - main application framework based on [Vue 3](https://vuejs.org/)
   - [@nuxt/content](https://content.nuxtjs.org/) - module to easily integrate content from `markdown` files
+  - [@nuxt/google-fonts](https://google-fonts.nuxtjs.org/) - module to easily integrate Google Fonts
   - [@nuxt/studio](https://nuxt.studio/) - module to enable the integration with the Nuxt Studio editing UI
 - [vanilla CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - every style has been written using regular CSS syntax, leveraging [Vue's CSS Module](https://vuejs.org/api/sfc-css-features.html#css-modules) support
 - [remark-reading-time](https://www.npmjs.com/package/remark-reading-time) - Medium's like reading time estimation

components/Header.vue

@@ -82,7 +82,7 @@ header {
         width: 2.5rem;
         height: 2.5rem;
         color: var(--white);
-        border: 1px solid var(--primary);
+        border: 2px solid var(--primary);
         transition: box-shadow 0.2s ease-in-out;
 
         &:hover {

components/Search.vue

@@ -52,7 +52,7 @@ form {
     font-size: 1rem;
     line-height: 1.5rem;
     border: 1px solid var(--primary);
-    border-radius: 2px;
+    /* border-radius: 2px; */
 
     @media (min-width: 768px) {
       max-width: 36rem;

content/spotify-10.md

@@ -1,6 +1,6 @@
 ---
 title: Un decennio con Spotify
-date: '2023-12-02'
+date: "2023-12-02"
 tags:
   - spotify
   - musica
@@ -12,7 +12,7 @@ images:
   - https://cdn.midjourney.com/5d262b82-3661-4277-adeb-032dded3a845/0_0.webp
 ---
 
-![Il prompt Midjourney per generare questa immagine è stato: "person listening to music with earphones, green ambient light --ar 16:9 --v 5.2"](https://cdn.midjourney.com/5d262b82-3661-4277-adeb-032dded3a845/0_0.webp) _Il prompt Midjourney per generare questa immagine è stato: "person listening to music with earphones, green ambient light --ar 16:9 --v 5.2"_
+![Il prompt Midjourney per generare questa immagine è stato: "person listening to music with earphones, green ambient light --ar 16:9 --v 5.2"](https://cdn.midjourney.com/5d262b82-3661-4277-adeb-032dded3a845/0_0.webp) <small>_Il prompt Midjourney per generare questa immagine è stato: "person listening to music with earphones, green ambient light --ar 16:9 --v 5.2"_</small>
 
 Con il 2023 che giunge alla conclusione, ho realizzato che sono passati 10 anni dall'arrivo di Spotify in Italia (_se non mi ricordo male era ottobre del 2013_), e come mia abitudine mi sono fermato un attimo a pensarci su e riguardare indietro.
 
@@ -61,7 +61,6 @@ Come già accennato, se l’era dell’iPod è stata quella che ci ha fatto inte
 
 10 anni nel mondo della tecnologia equivalgono a un'era geologica, ecco perché preferisco condensare nella timeline qui sotto i pochi momenti che sono stati significativi per me in questa decade di Spotify:
 
-
 ::timeline{items="(ottobre) 2013 - Spotify apre il servizio in Italia, (fine) 2013 - Arrivano gli album, 2015 - i Beatles su Spotify, 2016 - ho inziato a salvarmi ogni playlist Wrapped, 2018 - passaggio ad account Family, 2022 - il Daily Drive, 2023 - demo del 'DJ personale' generato con machine learning e modelli vocali arriverà per davvero?"}
 ::
 

nuxt.config.ts

@@ -9,8 +9,15 @@ export default defineNuxtConfig({
     "@nuxthq/studio",
     "@nuxt/image",
     "@nuxt/test-utils/module",
+    "@nuxtjs/google-fonts",
   ],
 
+  googleFonts: {
+    families: {
+      Lexend: [300, 400, 700, 800],
+    },
+  },
+
   experimental: {
     componentIslands: true,
   },

package.json

@@ -17,6 +17,7 @@
     "@nuxt/image": "1.9.0",
     "@nuxt/test-utils": "3.15.4",
     "@nuxthq/studio": "2.2.1",
+    "@nuxtjs/google-fonts": "3.2.0",
     "@vue/test-utils": "2.4.6",
     "nuxt": "3.15.4",
     "remark-reading-time": "2.0.1",
@@ -27,4 +28,4 @@
   "dependencies": {
     "modern-normalize": "3.0.1"
   }
-}
+}

styles/typography.css

@@ -1,6 +1,7 @@
 
 html {
   background-color: var(--bg);
+  font-family: "Lexend", sans-serif;
 }
 
 /* TYPOGRAPHY ELEMENTS */
@@ -25,8 +26,8 @@ h1 {
 }
 
 h2 {
-  font-weight: 600;
-  font-size: 1.5rem;
+  font-weight: 700;
+  font-size: 1.7rem;
   line-height: 2rem;
 }
 
@@ -51,6 +52,7 @@ a {
   }
 
   & p {
+    font-size: 1.125rem;
     margin: var(--sp-3) 0;
   }
 
@@ -60,6 +62,7 @@ a {
     padding-left: var(--sp-3);
 
     & li {
+      font-size: 1.125rem;
       margin: var(--sp-1) 0;
       padding-left: var(--sp-1);
     }
@@ -110,4 +113,13 @@ a {
     border-top: 1px solid var(--border);
     margin: var(--sp-4) 0;
   }
+
+  & small {
+    font-size: 0.9rem;
+    font-weight: 300;
+  }
+
+  & strong {
+    font-weight: 800;
+  }
 }