Improve responsive, icons, refactor search, update readme

1 files changed, 129 insertions, 4 deletions

diff --git a/src/input.css b/src/input.css
index b2fd6a9..8cd7f3e 100755
--- a/src/input.css
+++ b/src/input.css
@@ -2,10 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ARTICLES BASIC ELEMENTS */
+/* POST BASIC ELEMENTS */
 
 article .page-content {
-  @apply text-lg;
+  @apply text-base md:text-lg;
 }
 
 /** Pre */
@@ -104,18 +104,47 @@ p > code, p > strong > code, li > code, li > strong > code {
 
 @layer utilities {
 
+  /** Main nav */
+
+  #navMenuToggleBtn {
+    position: absolute;
+    left: -100vw;
+  }
+
+  #navMenuToggleBtn:checked + label {
+    background: white;
+    padding: 0.375rem;
+    border-radius: 0.5rem;
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  #navMenuToggleBtn:checked ~ #navMenu {
+    display: block;
+  }
+
   /** Home map */
 
   #map-container {
     background-image: url('/images/map.svg');
     background-repeat: no-repeat;
-    background-position: center;
+    background-position: left;
     background-size: cover;
     background-attachment: fixed;
     height: 70vh;
   }
 
-  /** Global ToC */
+  @media screen and (max-width: 768px) {
+    #map-container {
+      background-position: 25%;
+      background-size: auto;
+      background-attachment: scroll;
+      height: 50vh;
+    }
+  }
+
+  /** Documentation */
   #global_toc .deploySubMenu {
     position: absolute;
     left: -100vw;
@@ -129,4 +158,100 @@ p > code, p > strong > code, li > code, li > strong > code {
     transform: rotate(0deg);
   }
 
+  #documentation-section .page-content {
+    line-height: 1.9rem;
+  }
+
+  #documentation-section .page-content p + p {
+    margin-top: 1.15rem;
+  }
+
+  #documentation-section .page-content h1,
+  #documentation-section .page-content h2,
+  #documentation-section .page-content h3 {
+    margin-top: 2.85rem;
+  }
+  #documentation-section .page-content h4,
+  #documentation-section .page-content h5,
+  #documentation-section .page-content h6 {
+    margin-top: 2rem;
+    font-weight: 600;
+  }
+
+  #documentation-section .page-content ul {
+    list-style-type: "➡";
+    padding-left: 1.25rem;
+  }
+
+  #documentation-section .page-content ol {
+    padding-left: 1.25rem;
+  }
+
+  #documentation-section .page-content ul li,
+  #documentation-section .page-content ol li {
+    padding-left: 0.95rem;
+  }
+  #documentation-section .page-content ul li ul,
+  #documentation-section .page-content ul li ol,
+  #documentation-section .page-content ol li ul,
+  #documentation-section .page-content ol li ol {
+    padding-left: 0rem;
+  }
+
+  #documentation-section .page-content ul li ul,
+  #documentation-section .page-content ol li ul {
+    list-style-type: "➜";
+  }
+
+  @media screen and (max-width: 768px) {
+    #documentation-section .page-content p {
+      font-size: 0.95rem;
+    }
+    #documentation-section .page-content p + p {
+      margin-top: 0.75rem;
+    }
+    #documentation-section .page-content code {
+      font-size: 0.9rem;
+    }
+    #documentation-section .page-content pre {
+      overflow-x: scroll;
+      font-size: 0.95rem;
+    }
+    #documentation-section .page-content ul {
+      padding-left: 0.25rem;
+    }
+    #documentation-section .page-content ul li {
+      font-size: 0.95rem;
+      padding-left: 0.75rem;
+    }
+    #documentation-section .page-content ul li a {
+      font-size: 0.95rem;
+    }
+  }
+
+  /** Blog */
+
+  #blogpost-section .page-content p + p,
+  #blogpost-section .page-content p + #continue-reading + p {
+    margin-top: 2rem;
+  }
+  #blogpost-section .page-content #continue-reading {
+    margin: 2rem 0;
+  }
+
+  #blogpost-section .page-content ul {
+    list-style-type: "➡";
+    padding-left: 1.25rem;
+    margin: 2rem 0;
+  }
+
+  #blogpost-section .page-content ul li {
+    padding-left: 0.95rem;
+  }
+  
+  #blogpost-section img {
+    display: inline-block;
+    margin: 2.75rem 0;
+  }
+
 }
\ No newline at end of file