feat: add articles section

sass/parts/_anchor.scss

@@ -8,14 +8,14 @@ h3,
 h4,
 h5,
 h6 {
-    &>a {
+    &>a.zola-anchor {
         visibility: hidden;
         opacity: 0;
         transition: visibility 0s, opacity 0.5s linear;
     }
 
     &:hover {
-        &>a {
+        &>a.zola-anchor {
             visibility: visible;
             opacity: 1;
         }

sass/parts/_articles.scss

@@ -0,0 +1,34 @@
+ul.articles {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+
+    .title {
+        margin: 0;
+
+        &>a {
+            color: var(--text);
+            text-decoration: none;
+
+            &:visited {
+                color: var(--lavender);
+            }
+
+            &:hover {
+                color: var(--sky);
+            }
+        }
+    }
+
+    .date {
+        color: var(--subtext0);
+    }
+
+    a.read-more {
+        color: var(--overlay1);
+    }
+}

sass/styles.scss

@@ -2,6 +2,7 @@
 @use 'theme';
 @use 'shortcodes/callout';
 @use 'parts/anchor';
+@use 'parts/articles';
 @use 'parts/code';
 @use 'parts/footnote';
 @use 'parts/misc';
@@ -29,14 +30,14 @@ body {
     margin: 0;
 }
 
-article {
+main {
     max-width: calc(var(--main-width) - 12rem);
     margin-left: auto;
     margin-right: auto;
 }
 
 @media only screen and (max-width: $smartphone) {
-    article {
+    main {
         max-width: var(--main-width);
     }
 }
@@ -46,8 +47,13 @@ h1 {
     font-weight: medium;
     margin-top: 2rem;
     margin-bottom: 1rem;
+
+    &.section-title {
+        font-size: 3rem;
+    }
 }
 
+
 h2 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
@@ -90,6 +96,10 @@ h6 {
     h1 {
         font-size: 1.5rem;
         margin-top: 1.3rem;
+
+        &.section-title {
+            font-size: 2.2rem;
+        }
     }
 
     h2 {