added README and pages, updated css and improved navbar workflow

assets/css/main.css

@@ -27,6 +27,7 @@ h1, h2, h3, h4, h5 {
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     color: #1a1a1a;
+    text-align: left;
 }
 
 p {
@@ -170,7 +171,7 @@ li .dropdown-item-mobile {
     margin: 0 auto;
     padding: 3rem 0 0 0;
     hyphens: auto;
-    text-align: justify;
+    text-align: left;
     line-height: 1.8;
     color: #191A23;
 }
@@ -185,6 +186,7 @@ li .dropdown-item-mobile {
     border-radius: 8px;
     padding: 5px 10px;
     display: inline-block;
+    box-shadow: 0 4px 0 0 #191A23;
 }
 
 #markdown h1::before {
@@ -277,14 +279,11 @@ li .dropdown-item-mobile {
 }
 
 #markdown code {
-    background-color: #2e2e2e;
-    border-radius: 5px;
-    padding: 10px 20px;
-    font-family: 'Courier New', Courier, monospace;
-    color: #ff7b72;
-    display: block;
-    margin: 0 auto;
-    text-align: center;
+    background-color: #f2f2f2;
+    color: #191A23;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 1.05rem;
 }
 
 #markdown img {
@@ -369,8 +368,44 @@ li .dropdown-item-mobile {
     }
 }
 
+
 @media (min-width: 992px) {
     .dropdown-item-mobile {
         display: none !important;
     }
 }
+
+@media (max-width: 576px) {
+    #markdown {
+        padding: 2rem 0 0 0;
+    }
+
+    #markdown h1 {
+        font-size: 1.8rem;
+    }
+
+    #markdown h2 {
+        font-size: 1.6rem;
+    }
+
+    #markdown h3 {
+        font-size: 1.4rem;
+    }
+
+    #markdown h4 {
+        font-size: 1.2rem;
+    }
+
+    #markdown h5 {
+        font-size: 1.1rem;
+    }
+
+    #markdown h6 {
+        font-size: 1rem;
+    }
+
+    #markdown p,
+    #markdown li {
+        font-size: 1rem;
+    }
+}

assets/css/shortcodes.css

@@ -8,7 +8,8 @@
 }
 
 #markdown .profile-image {
-    flex: 0 0 150px;
+    flex: 0 0 10rem;
+    max-width: 15rem;
 }
 
 #markdown .profile-image img {
@@ -19,4 +20,16 @@
 
 #markdown .profile-content {
     flex: 1;
+}
+
+@media (max-width: 768px) {
+    #markdown .profile {
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    #markdown .profile-content {
+        text-align: center;
+    }
 }