assort

Sup2point0 · Jul 12, 2024 · 6d5c705 · 6d5c705
1 parent 9fd6eaf
commit 6d5c705
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 14 deletions.
diff --git a/.site/src/modules/stores/nav.ts b/.site/src/modules/stores/nav.ts
@@ -12,5 +12,5 @@ export class NavData {
 }
 
 
-const nav = persisted("assort-nav", new NavData());
+const nav = persisted<NavData>("assort-nav", new NavData());
 export default nav;
diff --git a/.site/src/parts/core/Nav.svelte b/.site/src/parts/core/Nav.svelte
@@ -5,7 +5,7 @@ import { base } from "$app/paths";
 import NavLink from "#parts/core/NavLink.svelte";
 import NavButton from "#parts/ext/NavButton.svelte";
 
-import navOpen from "#modules/stores/nav";
+import nav from "#modules/stores/nav";
 
 
 function redirectRandomPage() {
@@ -18,7 +18,7 @@ function redirectRandomPage() {
 </script>
 
 
-{#if $navOpen}
+{#if $nav.open}
   <nav>
     <section id="top">
       <img alt="Assort" src="{base}/assort-block.png">

diff --git a/.site/src/parts/ext/NavButton.svelte b/.site/src/parts/ext/NavButton.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 
-import navOpen from "#modules/stores/nav";
+import nav from "#modules/stores/nav";
 
 export let action: "open" | "close" | "top";
 
 
 const callbacks = {
-  open: () => navOpen.set(val => true),
+  open: () => nav.update(data => {data.open = true; return data}),
+  close: () => nav.update(data => {data.open = false; return data}),
 }
 
 const icons = {

diff --git a/.site/src/styles/mixins/~interact.scss b/.site/src/styles/mixins/~interact.scss
@@ -21,11 +21,6 @@
     background-color: $col-back-hover;
     cursor: pointer;
   }
-
-  &:focus {
-    background-color: $col-back-hover;
-    cursor: pointer;
-  }
 
   &:active {
     background-color: $col-back-active;

diff --git a/.site/src/styles/pages/default.scss b/.site/src/styles/pages/default.scss
@@ -1,6 +1,7 @@
 @use './src/styles/~nova' as *;
 @use './src/styles/~variables' as *;
 @use './src/styles/mixins/~fonts' as *;
+@use './src/styles/mixins/~anim' as *;
 @use './src/styles/mixins/~interact' as *;
 @use './src/styles/mixins/~decorate' as *;
 @use './src/styles/links' as *;
@@ -29,7 +30,7 @@ h2 {
 }
 
 h3 {
-  margin: 1.5em 0 1em;
+  margin: 1.5em 0 0.75em;
   font-weight: 350;
   font-size: 150%;
   color: $blue-deep;
@@ -42,6 +43,7 @@ p {
   margin: 1em 0;
   @include font-body;
   font-weight: 400;
+  color: $col-text;
   line-height: 150%;
 }
 
@@ -63,6 +65,7 @@ ul {
 li {
   @include font-body;
   line-height: 150%;
+  color: $col-text;
 }
 
 table {
@@ -84,6 +87,7 @@ th {
 td {
   @include font-body;
   font-weight: 400;
+  color: $col-text;
 }
 
 th {
@@ -95,24 +99,39 @@ th {
 blockquote {
   margin: 0;
   padding-left: 1em;
-  color: $col-text-deut;
   border-left: 2px solid $col-line;
-}
 
-details[open] {
+  p {
+    color: $col-text-deut;
+  }
+}
 
+details > :not(summary) {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+details[open] > :not(summary) {
+  opacity: 1;
+  transition: opacity 0.5s ease-out;
 }
 
 summary {
   max-width: 10em;
   margin-top: 1rem;
   padding: 0.25em 0.5em;
+  vertical-align: middle;
   border-radius: 0.5em;
   @include interactive;
 
   &::marker {
+    margin: 0;
+    padding: 0;
     font-size: 75%;
   }
+
+  > p, b {
+    padding-left: 0.5em;
+  }
 }