wip

assets/index.css

@@ -0,0 +1,116 @@
+/* ----------------------------- */
+/* -------- PWA Styling -------- */
+/* ----------------------------- */
+html,
+body {
+  overscroll-behavior-y: none;
+  margin: 0px;
+}
+
+html {
+  height: calc(100% + env(safe-area-inset-bottom));
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
+    env(safe-area-inset-left);
+}
+
+main {
+  height: calc(100dvh - 4rem - env(safe-area-inset-top));
+}
+
+#container {
+  padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
+}
+
+/* No Scrollbar - IE, Edge, Firefox */
+* {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* No Scrollbar - WebKit */
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* ----------------------------- */
+/* -------- CSS Button  -------- */
+/* ----------------------------- */
+.css-button:checked + div {
+  visibility: visible;
+  opacity: 1;
+}
+
+.css-button + div {
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* ----------------------------- */
+/* ------- User Dropdown ------- */
+/* ----------------------------- */
+#user-dropdown-button:checked + #user-dropdown {
+  visibility: visible;
+  opacity: 1;
+}
+
+#user-dropdown {
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* ----------------------------- */
+/* ----- Mobile Navigation ----- */
+/* ----------------------------- */
+#mobile-nav-button span {
+  transform-origin: 5px 0px;
+  transition:
+    transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+    opacity 0.55s ease;
+}
+
+#mobile-nav-button span:first-child {
+  transform-origin: 0% 0%;
+}
+
+#mobile-nav-button span:nth-last-child(2) {
+  transform-origin: 0% 100%;
+}
+
+#mobile-nav-button input:checked ~ span {
+  opacity: 1;
+  transform: rotate(45deg) translate(2px, -2px);
+}
+
+#mobile-nav-button input:checked ~ span:nth-last-child(3) {
+  opacity: 0;
+  transform: rotate(0deg) scale(0.2, 0.2);
+}
+
+#mobile-nav-button input:checked ~ span:nth-last-child(2) {
+  transform: rotate(-45deg) translate(0, 6px);
+}
+
+#mobile-nav-button input:checked ~ div {
+  transform: none;
+}
+
+@media (min-width: 1024px) {
+  #mobile-nav-button input ~ div {
+    transform: none;
+  }
+}
+
+#menu {
+  top: 0;
+  padding-top: env(safe-area-inset-top);
+  transform-origin: 0% 0%;
+  transform: translate(-100%, 0);
+  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+}
+
+@media (orientation: landscape) {
+  #menu {
+    transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), 0);
+  }
+}

assets/local/index.htm

@@ -25,7 +25,7 @@
     <title>AnthoLume - Local</title>
 
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/assets/style.css" />
+    <link rel="stylesheet" href="/assets/tailwind.css" />
 
     <!-- Libraries -->
     <script src="/assets/lib/jszip.min.js"></script>

assets/reader/index.htm

@@ -17,7 +17,7 @@
     <title>AnthoLume - Reader</title>
 
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/assets/style.css" />
+    <link rel="stylesheet" href="/assets/tailwind.css" />
 
     <!-- Libraries -->
     <script src="/assets/lib/jszip.min.js"></script>
@@ -82,9 +82,13 @@
         id="top-bar"
         class="transition-all duration-200 absolute z-10 bg-gray-100 dark:bg-gray-800 w-full px-2"
       >
-        <div class="max-h-[75vh] w-full flex flex-col items-center justify-around relative dark:text-white">
-	  <div class="h-32">
-            <div class="text-gray-500 absolute top-6 left-4 flex flex-col gap-4">
+        <div
+          class="max-h-[75vh] w-full flex flex-col items-center justify-around relative dark:text-white"
+        >
+          <div class="h-32">
+            <div
+              class="text-gray-500 absolute top-6 left-4 flex flex-col gap-4"
+            >
               <a href="#">
                 <svg
                   width="32"
@@ -152,8 +156,11 @@
                 </div>
               </div>
             </div>
-	  </div>
-	  <div id="toc" class="w-full text-center max-h-[50%] overflow-scroll no-scrollbar"></div>
+          </div>
+          <div
+            id="toc"
+            class="w-full text-center max-h-[50%] overflow-scroll no-scrollbar"
+          ></div>
         </div>
       </div>
 

assets/sw.js

@@ -72,7 +72,8 @@ const PRECACHE_ASSETS = [
   // Main App Assets
   "/manifest.json",
   "/assets/index.js",
-  "/assets/style.css",
+  "/assets/index.css",
+  "/assets/tailwind.css",
   "/assets/common.js",
 
   // Library Assets