.

public/css/main.css

@@ -6,76 +6,86 @@
 }
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  line-height: 1.6;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.7;
   background-color: var(--bg);
   color: var(--fg);
-  padding: 0 1rem;
-  /* layout */
-  max-width: 700px;
+  padding: 0 1.5rem;
+  max-width: 650px;
   margin: 0 auto;
 }
 
-body a {
-  color: magenta;
+a {
+  color: var(--fg);
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+  text-underline-offset: 3px;
 }
 
-body pre {
-  padding:1rem;
-  margin-bottom: 1rem;
+a:hover {
+  text-decoration-color: var(--fg);
+}
+
+pre {
+  padding: 1rem;
+  margin: 1.5rem 0;
+  overflow-x: auto;
 }
 
 /* ===== Typography ===== */
 h1, h2, h3, h4 {
-  line-height: 1.3;
-  font-weight: 600;
-  margin: 1.5rem 0 0.75rem;
+  font-weight: 500;
+  margin: 2rem 0 1rem;
+  line-height: 1.4;
 }
 
+h1 { font-size: 1.75rem; }
+h2 { font-size: 1.4rem; }
+h3 { font-size: 1.2rem; }
+
 p {
-  margin-top: 1.3rem;
-  margin-bottom: 1.3rem;
+  margin: 1rem 0;
 }
 
-/* ===== Images ===== */
 img {
   max-width: 100%;
   height: auto;
-  border-radius: 5px;
 }
 
 /* ===== Navigation ===== */
-nav {
+nav.navbar {
+  padding: 2rem 0;
   display: flex;
-  /* justify-content: space-between; */
-  /* align-items: center; */
-  /* padding: 1rem 0; */
-  /* flex-wrap: wrap; */
+  gap: 1.5rem;
+  font-size: 1.3rem;
 }
 
 nav a {
-  margin-right: 1.5rem;
-  font-size: 3rem;
   text-decoration: none;
+  color: var(--fg);
 }
 
-.home {
+nav a:hover {
+  text-decoration: underline;
 }
 
 .toggle-button {
-  font-size: 3rem;
+  background: none;
   border: none;
-  background-color: var(--bg);
   cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0;
 }
 
+/* ===== Search ===== */
 #search {
   width: 100%;
-  background-color: var(--bg);
+  background: transparent;
   color: var(--fg);
   border: 1px solid var(--fg);
-  padding: 1rem;
-  margin-bottom: 1.3rem;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  font-size: 1rem;
 }
 
 #results li {
@@ -83,37 +93,54 @@ nav a {
   margin-bottom: 1rem;
 }
 
-/* archive tree */
+/* ===== Featured Post ===== */
+.featured {
+  margin-bottom: 3rem;
+}
 
+.featured h2 {
+  margin-top: 0;
+}
+
+.featured .date {
+  opacity: 0.6;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+/* ===== Archive Tree ===== */
 .tree, .tree ul {
   list-style: none;
   margin: 0;
-  position: relative;
+  padding-left: 1rem;
 }
 
-.tree ul {
-  margin-left: 0.5rem;
+.tree > li {
+  margin: 0.5rem 0;
 }
 
 .tree li {
-  margin: 0;
-  padding: 0.25rem 0 0.25rem 1rem;
   position: relative;
 }
 
-.tree li::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-left: 1px solid var(--fg);
-  border-bottom: 1px solid var(--fg);
-  width: 1rem;
-  height: 1rem;
+.tree .folder {
+  font-weight: 500;
 }
 
+.tree a {
+  text-decoration: none;
+}
+
+.tree a:hover {
+  text-decoration: underline;
+}
+
+/* ===== Footer ===== */
 footer {
-  padding-bottom: 2rem;
+  margin-top: 4rem;
+  padding: 2rem 0;
+  opacity: 0.5;
+  font-size: 0.9rem;
 }
 
 /* ===== Responsive ===== */
@@ -121,7 +148,4 @@ footer {
   body {
     padding: 0 2rem;
   }
-  nav {
-    flex-wrap: nowrap;
-  }
 }