Refactor title to nav

style/nav.css

@@ -0,0 +1,30 @@
+@layer components {
+    nav {
+        @apply flex flex-wrap flex-row justify-between items-center py-5;
+        @apply mx-auto max-w-3xl;
+        @apply font-semibold;
+
+        & > .nav-mobile {
+            @apply md:hidden scale-125;
+        }
+
+        & > .nav-home {
+            @apply uppercase font-semibold text-lg;
+        }
+
+        & > .nav-links {
+            @apply hidden flex-row gap-5 md:h-auto md:flex;
+
+            &.open {
+                @apply max-md:flex max-md:flex-col max-md:w-full max-md:my-5 max-md:py-5 max-md:border-y-2;
+            }
+        }
+
+        & a {
+            @apply transition-colors duration-500;
+            &:hover {
+                @apply text-primary underline;
+            }
+        }
+    }
+}

style/portfolio.css

@@ -9,6 +9,10 @@
 @import './social_links.css';
 @import './tag.css';
 @import './timeline.css';
-@import './title.css';
 @import './top_component.css';
-/*@import './mermaid.css';*/
+@import './nav.css';
+/*@import './mermaid.css';*/
+
+body {
+    @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface px-10;
+}

style/post.css

@@ -1,32 +1,31 @@
 @layer components {
     .posts, .post {
-        @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
-        @apply min-h-screen p-5;
+        @apply min-h-screen;
 
         & h1 {
-            @apply text-5xl;
-        }
-
-        & h2 {
             @apply text-4xl;
         }
 
-        & h3 {
+        & h2 {
             @apply text-3xl;
         }
 
-        & h4 {
+        & h3 {
             @apply text-2xl;
         }
 
-        & h5 {
+        & h4 {
             @apply text-xl;
         }
 
-        & h6 {
+        & h5 {
             @apply text-lg;
         }
 
+        & h6 {
+            @apply text-base;
+        }
+
         & h1, & h2, & h3, & h4, & h5, & h6 {
             @apply my-3 font-bold;
         }
@@ -36,25 +35,39 @@
         }
 
         & ul li {
-            @apply list-disc list-inside;
+            @apply list-disc list-inside ml-5;
         }
 
         & ol li {
-            @apply list-decimal list-inside;
+            @apply list-decimal list-inside ml-5;
+        }
+
+        & a {
+            @apply text-primary;
         }
 
         & blockquote {
-            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3;
+            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3 bg-primary/5 dark:bg-dark_primary/5;
         }
 
         & .tags_list {
             @apply flex flex-row flex-wrap gap-2;
         }
+
+        & code {
+            @apply bg-primary/10 dark:bg-dark_primary/10 rounded-md p-1;
+        }
+
+        /* Fix useless padding */
+        & pre code {
+            @apply p-0;
+        }
     }
 
     .posts {
         & > .posts__cards {
-            @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
+            @apply grid grid-cols-1 gap-5 md:grid-cols-2;
+            @apply mx-auto max-w-3xl;
 
             & > div {
                 @apply rounded-xl overflow-hidden relative;

style/title.css

@@ -1,9 +0,0 @@
-@layer components {
-    header {
-        @apply flex flex-col md:flex-row items-center justify-between p-5;
-
-        & h1 {
-            @apply my-3 font-bold text-center text-6xl mb-5 flex-1;
-        }
-    }
-}

style/top_component.css

@@ -3,14 +3,14 @@
         @apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
 
         & > div {
-            @apply flex-1 p-10;
+            @apply flex-1;
         }
 
         & > .top_component__image {
-            @apply flex justify-center items-center;
+            @apply flex justify-center items-center px-5;
 
             & > img {
-                @apply mx-auto rounded-lg;
+                @apply rounded-lg w-full;
             }
         }