Merge pull request #196 from uclaacm/blog-post-styling

fixed some styling for blog posts
uclaacm · Dec 2, 2024 · 8a09ff9 · 8a09ff9
2 parents 9922507 + 6ebc68f
commit 8a09ff9
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/styles/Post.module.scss b/styles/Post.module.scss
@@ -1,5 +1,55 @@
 .post {
   padding: 3rem 20% 10rem 20%;
+  line-height: 1.5;
+
+  a {
+    text-decoration: underline;
+    color: var(--cyber-gold);
+    overflow-wrap: break-word;
+    &:hover {
+      cursor: pointer;
+      color: var(--flag-pink);
+    }
+  }
+
+  li {
+    margin-left: 1.25rem;
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+
+  ol {
+    margin-left: 1.25rem;
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+
+  ul {
+    margin-left: 1.25rem;
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+
+  /* Only top-level ul and ol elements */
+  *:not(li) > ul {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  *:not(li) > ol {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  code:not([class]) {
+    background: var(--soft-lazer);
+  }
+
+  // Override link styles
+  a:has(.category) {
+    text-decoration: none;
+    color: white;
+  }
 
   .category {
     background-color: var(--flag-pink);
@@ -40,9 +90,25 @@
 
   img {
     width: 80%;
-    margin: 0 auto 2rem auto;
+    margin: 2rem auto 2rem auto;
     display: block;
   }
+
+  pre {
+    margin-top: 0.6rem;
+    margin-bottom: 0.6rem;
+    overflow-x: scroll;
+  }
+
+  h3 {
+    margin-top: 0.6rem;
+    margin-bottom: 0.6rem;
+  }
+
+  h4 {
+    margin-top: 0.6rem;
+    margin-bottom: 0.6rem;
+  }
 }
 
 .categorydate {

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -131,6 +131,12 @@ strong {
 
   h3 {
     color: var(--cyber-gold);
+    font-size: 1.5rem;
+  }
+
+  h4 {
+    color: var(--cyber-gold);
+    font-size: 1.25rem;
   }
 
   blockquote {