Improvements

deminearchiver · May 23, 2024 · efe6dab · efe6dab
1 parent c7771bf
commit efe6dab
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 47 deletions.
diff --git a/app/src/components/footer/Footer.astro b/app/src/components/footer/Footer.astro
@@ -38,7 +38,11 @@ const year = new Date().getFullYear();
 ---
 
 <footer data-pagefind-ignore>
-  <p class="copyright">Copyright &copy; {year} deminearchiver</p>
+  <a
+    class="copyright"
+    href="https://github.com/deminearchiver/website/blob/main/LICENSE">
+      Copyright &copy; {year} deminearchiver
+  </a>
   <ul class="links">
     <li>{
       SOCIAL_LINKS.map(link => (
@@ -69,12 +73,49 @@ const year = new Date().getFullYear();
   }
 
   .copyright {
+    position: relative;
+    text-decoration: none;
+
     font-family: var(--text-body-large-family);
     font-size: var(--text-body-large-size);
     font-weight: var(--text-body-large-weight);
     line-height: var(--text-body-large-line-height);
     letter-spacing: var(--text-body-large-letter-spacing);
     color: var(--color-on-surface-variant);
+    font-variation-settings: "GRAD" 0;
+
+    transition-property: color, font-variation-settings;
+    transition-duration: 300ms;
+    transition-timing-function: var(--easing-standard);
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--color-primary);
+        font-variation-settings: "GRAD" 50;
+      }
+    }
+    &:active {
+      color: var(--color-primary);
+      font-variation-settings: "GRAD" 150;
+    }
+
+    &::after {
+      /* content: "→"; */
+      content: "»";
+      position: absolute;
+      right: calc(-1em + 4px);
+      opacity: 0;
+      scale: 1;
+
+      transition-property: scale, right, opacity;
+      transition-duration: 300ms;
+      transition-timing-function: var(--easing-standard);
+    }
+    &:is(:hover, :active)::after {
+      right: -1em;
+      scale: 1.1;
+      opacity: 1;
+    }
   }
 
   .links {
@@ -118,6 +159,8 @@ const year = new Date().getFullYear();
 
     font-variation-settings: "GRAD" 0;
 
+    outline-color: var(--color-secondary);
+
     transition:
       background-color 15ms linear,
       color 15ms linear,

diff --git a/app/src/content/blog/astro-pagefind-solidjs.mdx b/app/src/content/blog/astro-pagefind-solidjs.mdx
@@ -19,6 +19,7 @@ import ReadMoreIcon from "~icons/material-symbols-rounded/read-more:outlined";
   <>This blog post is **WORK IN PROGRESS**. It may contain unfinished and inaccurate content.</>
   <Button
     slot="action"
+    data-navigate-back
     variant="filled"
     class="not-content"
     href="/blog">

diff --git a/app/src/content/blog/repro.mdx b/app/src/content/blog/repro.mdx
diff --git a/app/src/layouts/Page.astro b/app/src/layouts/Page.astro
@@ -73,6 +73,18 @@ const animation = {
   </body>
 </html>
 
+<script is:inline>
+  document.addEventListener(
+    "astro:before-preparation",
+    event => {
+      const elements = [...document.querySelectorAll(`[data-navigate-back]`)];
+      if(elements.includes(event.sourceElement))
+        event.direction = "back";
+    },
+  );
+</script>
+
+
 <style>
 @keyframes fade-in {
   0%, 30% { opacity: 0; }

diff --git a/app/src/pages/404.astro b/app/src/pages/404.astro
@@ -1,4 +1,5 @@
 ---
+import { Button } from "../components/primitives/button";
 import { IconButton } from "../components/primitives/icon-button";
 import { ThemeSelect } from "../components/theme";
 import Page from "../layouts/Page.astro";
@@ -24,10 +25,12 @@ const pathname = Astro.url.pathname;
       </p>
 
       <div class="action">
-        <IconButton variant="filled" href="/">
-            <ArrowBackIcon />
-        </IconButton>
-        <span>Go back</span>
+        <Button
+          variant="filled"
+          href="/">
+          <ArrowBackIcon slot="leading" width={18} height={18} />
+          Go back
+        </Button>
       </div>
     </div>
   </main>

diff --git a/app/src/pages/blog/[...slug].astro b/app/src/pages/blog/[...slug].astro
@@ -31,7 +31,7 @@ const { Content } = await post.render();
   <Header />
   <main>
     <div class="content">
-      <IconButton class="back" href="/blog">
+      <IconButton class="back" href="/blog" data-navigate-back>
         <ArrowBackIcon width={40} height={40} />
       </IconButton>
       <h1 class="title">{post.data.title}</h1>
@@ -44,18 +44,6 @@ const { Content } = await post.render();
   <Footer />
 </Page>
 
-<script is:inline>
-  document.addEventListener(
-    "astro:before-preparation",
-    event => {
-      const back = document.querySelector(".back");
-      if(event.sourceElement === back) {
-        event.direction = "back";
-      }
-    }
-  );
-</script>
-
 <style>
   main {
     max-width: 960px;

diff --git a/app/src/pages/blog/index.astro b/app/src/pages/blog/index.astro
@@ -35,6 +35,7 @@ const posts = (await getCollection("blog"))
                       </div>
                       <div class="content">
                         <h3 class="title">{post.title}</h3>
+                        {post.description && <p>{post.description}</p>}
                       </div>
                   </a>
                   <div class="authors">
@@ -65,13 +66,9 @@ const posts = (await getCollection("blog"))
 </Page>
 
 <style>
-  main {
-    display: block;
-  }
-
   article {
     width: 100%;
-    max-width: 960px;
+    max-width: 840px;
 
     margin: 64px auto 24px auto;
     padding: 0 24px;
@@ -100,11 +97,6 @@ const posts = (await getCollection("blog"))
       grid-template-columns: repeat(2, 1fr);
     }
   }
-  @media only screen and (min-width: 1200px) {
-    .posts {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
 
   .post {
     width: 100%;
@@ -119,6 +111,7 @@ const posts = (await getCollection("blog"))
   }
 
   .card {
+    position: relative;
     -webkit-tap-highlight-color: transparent;
     width: 100%;
     height: 100%;
@@ -130,19 +123,51 @@ const posts = (await getCollection("blog"))
     align-items: center;
 
     background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
+
     border-radius: 28px;
+    outline: none;
 
     transition: background-color 105ms linear;
 
     @media (hover: hover) {
       &:hover {
         background-color: var(--color-secondary-container);
       }
+
+      &:hover .cover {
+        background-color: var(--color-surface-container-high);
+        color: var(--color-on-surface-variant);
+      }
     }
     &:active {
       background-color: color-mix(in srgb, var(--color-secondary-container), var(--color-on-secondary-container) 10%);
     }
+    &:active .cover {
+      background-color: var(--color-surface-container-highest);
+      color: var(--color-on-surface);
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      z-index: 1;
+      pointer-events: none;
+      border: 1px solid var(--color-outline-variant);
+    }
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      inset: -2px;
+      border-radius: inherit;
+      outline: 3px solid var(--color-secondary);
+      z-index: 1;
+
+      animation-name: focus-grow, focus-shrink;
+      animation-delay: 0ms, 150ms;
+      animation-duration: 150ms, 450ms;
+      animation-timing-function: cubic-bezier(0, 0.2, 0, 1);
+    }
   }
 
   .cover {
@@ -153,15 +178,18 @@ const posts = (await getCollection("blog"))
     place-items: center;
     place-content: center;
 
-    background-color: var(--color-surface-container-highest);
+    background-color: var(--color-surface-container);
     border-radius: 28px;
-    color: color-mix(in srgb, var(--color-on-surface-variant) 38%, transparent)
+    color: color-mix(in srgb, var(--color-on-surface-variant) 38%, transparent);
+    transition-property: background-color, color;
+    transition-duration: 105ms;
+    transition-timing-function: linear;
   }
   .content {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    gap: 8px;
     padding: 24px;
   }
 
@@ -174,6 +202,14 @@ const posts = (await getCollection("blog"))
     letter-spacing: var(--text-headline-small-letter-spacing);
   }
 
+  .description {
+    font-family: var(--text-body-small-family);
+    font-size: var(--text-body-small-size);
+    font-weight: var(--text-body-small-weight);
+    line-height: var(--text-body-small-line-height);
+    letter-spacing: var(--text-body-small-letter-spacing);
+  }
+
   .authors {
     display: flex;
     align-items: center;
@@ -185,11 +221,17 @@ const posts = (await getCollection("blog"))
     -webkit-tap-highlight-color: transparent;
     width: fit-content;
 
+    position: relative;
+
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 
+    padding-block: 8px;
+    padding-inline: 16px 24px;
+    border-radius: 9999px;
+
     font-family: var(--text-label-large-family);
     font-size: var(--text-label-large-size);
     font-weight: var(--text-label-large-weight);
@@ -199,8 +241,7 @@ const posts = (await getCollection("blog"))
     font-variation-settings: "GRAD" 0;
     color: var(--color-on-surface-variant);
 
-    padding: 8px;
-    border-radius: 9999px;
+
 
     transition-property: background-color, color;
     transition-duration: 105ms;
@@ -218,6 +259,20 @@ const posts = (await getCollection("blog"))
       color: var(--color-primary);
       font-variation-settings: "GRAD" 150;
     }
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      inset: -2px;
+      border-radius: inherit;
+      outline: 3px solid var(--color-secondary);
+      z-index: 1;
+
+      animation-name: focus-grow, focus-shrink;
+      animation-delay: 0ms, 150ms;
+      animation-duration: 150ms, 450ms;
+      animation-timing-function: cubic-bezier(0, 0.2, 0, 1);
+    }
   }
 
   .avatar {