feat: improve css (#42)

src/assets/css/custom.css

@@ -1,58 +1,80 @@
+/* Base Typography */
+.content article p {
+  text-align: left;
+}
+
+code {
+  font-size: 1.6rem;
+}
+
+blockquote {
+  line-height: 2.8rem;
+}
+
+/* Links Styling - Dark Theme */
 body.colorscheme-dark article div.post-content a {
   text-decoration: none;
   background-image: linear-gradient(
     transparent,
-    transparent 5px,
-    #c9cacc 5px,
+    transparent 0.5rem,
+    #c9cacc 0.5rem,
     #c9cacc
   );
   background-position: bottom;
-  background-size: 100% 6px;
+  background-size: 100% 0.6rem;
   background-repeat: repeat-x;
 }
 
 body.colorscheme-dark article div.post-content a:hover {
   background-image: linear-gradient(
     transparent,
-    transparent 4px,
-    #ff79c6 4px,
+    transparent 0.5rem,
+    #ff79c6 0.5rem,
     #ff79c6
   );
 }
 
-main .content table {
-  display: block;
-  overflow-x: auto;
+/* Navigation & List Styles */
+.navigation a {
+  font-size: 2rem;
 }
 
-code {
-  font-size: 14px;
+.list ul li .title {
+  font-size: 2rem;
 }
 
-figcaption {
-  h4 {
-    margin: 0;
-    font-style: italic;
-  }
+/* Code Blocks */
+.highlight div,
+.highlight pre {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  border-radius: 1rem;
+  overflow-x: auto;
 }
 
-.content .post .post-meta {
-  .tags {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .tag {
-      line-height: initial;
-    }
-  }
+/* Tables */
+main .content table {
+  display: block;
+  overflow-x: auto;
+  margin: 2rem 0;
 }
 
-@media only screen and (max-width: 768px) {
+/* Mobile Styles */
+@media only screen and (max-width: 76.8rem) {
   .container.post article,
   .post-content {
-    font-size: 16px !important;
-    line-height: 1.5em !important;
+    font-size: 1.6rem !important;
+    line-height: 1.7 !important;
+    text-align: left !important;
+  }
+
+  .navigation a,
+  .list ul li .title {
+    font-size: 1.8rem;
+  }
+
+  .highlight div,
+  .highlight pre {
+    padding: 0.4rem;
   }
 }

src/assets/scss/custom.scss

@@ -33,17 +33,4 @@ $code-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 
 .post-content {
   font-family: "Libre Baskerville", $font-family;
-  font-size: 1.8rem;
-}
-
-.navigation a {
-  font-size: 2rem;
-}
-
-.list ul li .title {
-  font-size: 20px;
-}
-
-blockquote {
-  line-height: 2.8rem;
 }