wip

2025-08-17 17:04:27 -04:00
parent f9f23f2d3f
commit 2eed0d9021
72 changed files with 2713 additions and 100 deletions
--- a/assets/index.css
+++ b/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);
+  }
+}