feat: typography — reusable styling for font ref (#270)

EmptyWork · web-flow · commit 375b5dfd969c · 2025-06-12T11:43:52.000+09:00
feat: `typography` — reusable styling for font ref
diff --git a/src/assets/scss/abstracts/_typography.scss b/src/assets/scss/abstracts/_typography.scss
@@ -0,0 +1,7 @@
+.font-montserrat {
+    font-family: 'Montserrat', sans-serif;
+}
+
+.font-monospace {
+    font-family: monospace, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+}
diff --git a/src/assets/scss/pages/_article.scss b/src/assets/scss/pages/_article.scss
@@ -1,4 +1,5 @@
 @use "../abstracts/mixin" as mix;
+@use "../abstracts/typography";
 
 .article {
   --_l: 20%;
@@ -169,8 +170,8 @@
   code,
   kbd,
   samp {
+    @extend .font-monospace;
     padding: 0 0.3em;
-    font-family: monospace, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
     // font-size: 0.8rem;
     line-height: 1.4;
   }
