Adds base typography

2 files changed, 46 insertions, 37 deletions

diff --git a/public/css/base/typography.css b/public/css/base/typography.css
new file mode 100644
index 0000000..4f33d86
--- /dev/null
+++ b/public/css/base/typography.css
@@ -0,0 +1,46 @@
+:root {
+  font-family: var(--font-sans-serif);
+  font-size: var(--font-size-1);
+  font-weight: 400;
+  letter-spacing: 0.03rem;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: var(--font-size-5);
+  font-weight: 600;
+}
+
+h2 {
+  font-size: var(--font-size-4);
+  font-weight: 500;
+}
+
+h3 {
+  font-size: var(--font-size-3);
+  font-weight: 400;
+}
+
+h4 {
+  font-size: var(--font-size-2);
+  font-weight: 400;
+}
+
+.title,
+.title--small,
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-serif);
+}
+
+.title {
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.title--small {
+  font-size: var(--font-size-2);
+}
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index f359e3f..df43e4a 100644
--- a/public/main.css
+++ b/public/main.css
@@ -4,11 +4,6 @@
 
 :root {
   scroll-behavior: smooth;
-  font-family: var(--font-sans-serif);
-  font-size: var(--font-size-1);
-  font-weight: 400;
-  letter-spacing: 0.03rem;
-  line-height: 1.5;
   color: var(--text-color);
   background-color: var(--background-color);
 }
@@ -40,23 +35,11 @@
   background-color: var(--background-color);
 }
 
-.title,
-.title--small,
-h1,
-h2,
-h3,
-h4 {
-  font-family: var(--font-serif);
-}
-
 .title {
-  font-size: var(--font-size-6);
-  font-weight: 700;
   margin-block-start: var(--spacing-block-sm);
 }
 
 .title--small {
-  font-size: var(--font-size-2);
   margin-block-start: 0;
 }
 
@@ -71,26 +54,6 @@ h1:first {
   margin-block-start: var(--spacing-block-sm);
 }
 
-h1 {
-  font-size: var(--font-size-5);
-  font-weight: 600;
-}
-
-h2 {
-  font-size: var(--font-size-4);
-  font-weight: 500;
-}
-
-h3 {
-  font-size: var(--font-size-3);
-  font-weight: 400;
-}
-
-h4 {
-  font-size: var(--font-size-2);
-  font-weight: 400;
-}
-
 p:not(:first) {
   margin-block-start: var(--spacing-block-md);
 }