From 0b5846e0300609956baaed329ef73bc2c2ee2f48 Mon Sep 17 00:00:00 2001
From: Bobby <bobbysebolao@gmail.com>
Date: Sat, 27 Nov 2021 00:42:22 +0000
Subject: [PATCH] Add knight mode styling to home page

---
 src/app.css                        |   4 +
 src/lib/footer/Footer.svelte       |  15 +
 src/lib/header/Header.svelte       | 446 +++++++++++++++++++++++++----
 src/lib/home/ProjectSummary.svelte | 170 +++++++++--
 src/routes/__layout.svelte         |  27 ++
 src/routes/index.svelte            |  16 ++
 src/routes/todos/index.svelte      | 410 +++++++++++++-------------
 7 files changed, 817 insertions(+), 271 deletions(-)

diff --git a/src/app.css b/src/app.css
index 1803087..2d22617 100644
--- a/src/app.css
+++ b/src/app.css
@@ -31,6 +31,9 @@
   /* Night theme hover states */
   --night-hover-light: #707993;
   --night-hover-dark: #10161d;
+
+  /* Knight theme */
+  --knight-off-white: #f8e098;
 }
 
 body {
@@ -43,6 +46,7 @@ body {
   background-attachment: fixed;
   background-position: center center;
   padding: 20px;
+  box-sizing: border-box;
 }
 
 p {
diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte
index 97c433d..6cd9776 100644
--- a/src/lib/footer/Footer.svelte
+++ b/src/lib/footer/Footer.svelte
@@ -36,6 +36,21 @@
       background: var(--night-light);
       color: var(--neutral-white);
     }
+    &.knight {
+      background: var(--knight-off-white);
+      box-shadow: none;
+      &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        top: 100%;
+        left: 0px;
+        width: 100%;
+        height: 20px;
+        background-image: url(/static/parchment-edge.svg);
+        transform: rotate(180deg);
+      }
+    }
 
     .social-icons {
       width: 300px;
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index 94f4f62..33afc46 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -35,10 +35,10 @@
         >
           <a sveltekit:prefetch href="/" on:click={() => setActiveTab("home")}
             >HOME
-            <div class="tabRibbonStylingBottom" />
+            <div class="home tabRibbonStylingBottom" />
           </a>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
+          <div class="home tabRibbonStylingInner" />
         </li>
         <li
           class="about {active_display_modes.join(' ')}"
@@ -49,10 +49,10 @@
             href="/about"
             on:click={() => setActiveTab("about")}
             >ABOUT
-            <div class="tabRibbonStylingBottom" />
+            <div class="about tabRibbonStylingBottom" />
           </a>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
+          <div class="about tabRibbonStylingInner" />
         </li>
         <li
           class="work {active_display_modes.join(' ')}"
@@ -63,10 +63,10 @@
             href="/work"
             on:click={() => setActiveTab("work")}
             >WORK
-            <div class="tabRibbonStylingBottom" />
+            <div class="work tabRibbonStylingBottom" />
           </a>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
+          <div class="work tabRibbonStylingInner" />
         </li>
         <li
           class="blog {active_display_modes.join(' ')}"
@@ -78,10 +78,10 @@
             href="/blog"
             on:click={() => setActiveTab("blog")}
             >BLOG
-            <div class="tabRibbonStylingBottom" />
+            <div class="blog tabRibbonStylingBottom" />
           </a>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
+          <div class="blog tabRibbonStylingInner" />
         </li>
       </ul>
       <ul class="tabGroup displayModes">
@@ -94,8 +94,8 @@
             <use xlink:href="#moonIcon" />
           </svg>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
-          <div class="tabRibbonStylingBottom" />
+          <div class="{active_tab} tabRibbonStylingInner" />
+          <div class="{active_tab} tabRibbonStylingBottom" />
         </li>
         <li
           class="knightModeControl {active_tab} {active_display_modes.join(
@@ -108,8 +108,8 @@
             <use xlink:href="#knightIcon" />
           </svg>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
-          <div class="tabRibbonStylingBottom" />
+          <div class="{active_tab} tabRibbonStylingInner" />
+          <div class="{active_tab} tabRibbonStylingBottom" />
         </li>
         <li
           class="spriteModeControl {active_tab} {active_display_modes.join(
@@ -122,8 +122,8 @@
             <use xlink:href="#tetrisSprite" />
           </svg>
           <div class="tabRibbonStylingOuter" />
-          <div class="tabRibbonStylingInner" />
-          <div class="tabRibbonStylingBottom" />
+          <div class="{active_tab} tabRibbonStylingInner" />
+          <div class="{active_tab} tabRibbonStylingBottom" />
         </li>
       </ul>
     </div>
@@ -195,6 +195,18 @@
       &.active::after {
         transform: translateY(3px);
       }
+      &.home {
+        background: var(--postit-green);
+      }
+      &.about {
+        background: var(--postit-yellow);
+      }
+      &.work {
+        background: var(--postit-blue);
+      }
+      &.blog {
+        background: var(--postit-pink);
+      }
       &.night {
         background-color: var(--night-light);
         color: #fdfdfd;
@@ -208,6 +220,218 @@
           box-shadow: -2px 2px 0 var(--night-light);
         }
       }
+      &.knight {
+        border-radius: 0;
+        font-size: 1.2rem;
+        &::before,
+        &::after {
+          content: "";
+          display: inline-block;
+          position: absolute;
+          top: -15px;
+          width: 0px;
+          height: 0px;
+          border-top: 15px solid transparent;
+          border-bottom: 0px solid transparent;
+          border-radius: 0;
+        }
+        &::before {
+          left: 0px;
+        }
+        &::after {
+          left: 50px;
+          z-index: -1;
+        }
+        &:hover,
+        &.active {
+          &::before,
+          &::after {
+            transform: translateY(0px);
+          }
+        }
+        &.home {
+          &::before {
+            border-left: 50px solid var(--postit-green);
+          }
+          &::after {
+            border-right: 50px solid var(--postit-green);
+          }
+        }
+        &.about {
+          &::before {
+            border-left: 50px solid var(--postit-yellow);
+          }
+          &::after {
+            border-right: 50px solid var(--postit-yellow);
+          }
+        }
+        &.work {
+          &::before {
+            border-left: 50px solid var(--postit-blue);
+          }
+          &::after {
+            border-right: 50px solid var(--postit-blue);
+          }
+        }
+        &.blog {
+          &::before {
+            border-left: 50px solid var(--postit-pink);
+          }
+          &::after {
+            border-right: 50px solid var(--postit-pink);
+          }
+        }
+        a {
+          padding: 25px 10px 15px;
+          &:before {
+            display: inline-block;
+            position: absolute;
+            left: 50px;
+            top: -15px;
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-top: 15px solid #7c7c7c;
+            border-bottom: 15px solid transparent;
+            border-right: 50px solid transparent;
+            z-index: 5;
+          }
+          &:after {
+            display: inline-block;
+            position: absolute;
+            left: 0px;
+            top: -15px;
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-top: 15px solid #7c7c7c;
+            border-bottom: 15px solid transparent;
+            border-left: 50px solid transparent;
+            z-index: 5;
+          }
+        }
+
+        .tabRibbonStylingOuter {
+          &::before {
+            display: inline-block;
+            position: absolute;
+            left: 5px;
+            top: -8px;
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-top: 15px solid transparent;
+            border-bottom: 0px solid transparent;
+            border-left: 50px solid white;
+          }
+          &::after {
+            display: inline-block;
+            position: absolute;
+            left: 45px;
+            top: -8px;
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-top: 15px solid transparent;
+            border-bottom: 0px solid transparent;
+            border-right: 50px solid white;
+          }
+        }
+
+        .tabRibbonStylingInner {
+          &::before {
+            display: inline-block;
+            position: absolute;
+            left: 10px;
+            top: -1px;
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-top: 15px solid transparent;
+            border-bottom: 0px solid transparent;
+          }
+          &::after {
+            display: inline-block;
+            position: absolute;
+            left: 40px;
+            top: -1px;
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-top: 15px solid transparent;
+            border-bottom: 0px solid transparent;
+          }
+          &.home {
+            &::before {
+              border-left: 50px solid var(--postit-green);
+            }
+            &::after {
+              border-right: 50px solid var(--postit-green);
+            }
+          }
+          &.about {
+            &::before {
+              border-left: 50px solid var(--postit-yellow);
+            }
+            &::after {
+              border-right: 50px solid var(--postit-yellow);
+            }
+          }
+          &.work {
+            &::before {
+              border-left: 50px solid var(--postit-blue);
+            }
+            &::after {
+              border-right: 50px solid var(--postit-blue);
+            }
+          }
+          &.blog {
+            &::before {
+              border-left: 50px solid var(--postit-pink);
+            }
+            &::after {
+              border-right: 50px solid var(--postit-pink);
+            }
+          }
+        }
+        .tabRibbonStylingBottom {
+          &::before {
+            display: inline-block;
+            position: absolute;
+            left: 5px;
+            top: 50px;
+            content: "";
+            width: 90px;
+            height: 40px;
+            border-left: 5px solid white;
+            border-right: 5px solid white;
+            box-sizing: border-box;
+          }
+          &::after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: -1;
+            width: 100px;
+            height: 90px;
+            // box-shadow: 5px 10px 10px 0px #000000;
+          }
+          &.home::before {
+            background: var(--postit-green);
+          }
+          &.about::before {
+            background: var(--postit-yellow);
+          }
+          &.work::before {
+            background: var(--postit-blue);
+          }
+          &.blog::before {
+            background: var(--postit-pink);
+          }
+        }
+      }
     }
     &.pages {
       li {
@@ -226,6 +450,32 @@
             }
           }
         }
+        &.knight {
+          font-family: "MedievalSharp", cursive;
+          display: inline;
+          vertical-align: middle;
+          position: relative;
+          top: 3px;
+          margin: 0 2px;
+          padding: 0 0 0 0;
+          width: 100px;
+          box-sizing: border-box;
+          box-shadow: inset 0px 0px 0px 10px white;
+          outline: 5px solid;
+          outline-offset: -5px;
+          &.home {
+            outline-color: var(--postit-green);
+          }
+          &.about {
+            outline-color: var(--postit-yellow);
+          }
+          &.work {
+            outline-color: var(--postit-blue);
+          }
+          &.blog {
+            outline-color: var(--postit-pink);
+          }
+        }
       }
     }
     &.displayModes {
@@ -242,6 +492,106 @@
             box-shadow: -2px 2px 0 var(--night-medium);
           }
         }
+        &.knight {
+          display: block;
+          position: relative;
+          top: 3px;
+          margin: 0px 2px 0px 2px;
+          padding: 20px 20px 20px 20px;
+          background: #afec6a;
+          border-top-left-radius: 0px;
+          border-top-right-radius: 0px;
+          cursor: pointer;
+          //   box-shadow: 5px 0px 10px 1px #000000;
+          box-sizing: border-box;
+          box-shadow: inset 0px 0px 0px 10px white;
+          outline: 5px solid;
+          outline-offset: -5px;
+          &::before {
+            border-left-width: 35px;
+          }
+          &::after {
+            left: 35px;
+            border-right-width: 35px;
+          }
+          &.home {
+            outline-color: var(--postit-green);
+          }
+          &.about {
+            outline-color: var(--postit-yellow);
+          }
+          &.work {
+            outline-color: var(--postit-blue);
+          }
+          &.blog {
+            outline-color: var(--postit-pink);
+          }
+
+          .tabRibbonStylingInner {
+            &::after {
+              left: 25px;
+            }
+            &.home {
+              &::before {
+                border-left: 35px solid var(--postit-green);
+              }
+              &::after {
+                border-right: 35px solid var(--postit-green);
+              }
+            }
+            &.about {
+              &::before {
+                border-left: 35px solid var(--postit-yellow);
+              }
+              &::after {
+                border-right: 35px solid var(--postit-yellow);
+              }
+            }
+            &.work {
+              &::before {
+                border-left: 35px solid var(--postit-blue);
+              }
+              &::after {
+                border-right: 35px solid var(--postit-blue);
+              }
+            }
+            &.blog {
+              &::before {
+                border-left: 35px solid var(--postit-pink);
+              }
+              &::after {
+                border-right: 35px solid var(--postit-pink);
+              }
+            }
+          }
+
+          .tabRibbonStylingOuter {
+            &::before {
+              border-left: 35px solid white;
+            }
+            &::after {
+              left: 30px;
+              border-right: 35px solid white;
+            }
+          }
+          .tabRibbonStylingBottom {
+            &::before {
+              width: 60px;
+            }
+            &.home::before {
+              background: var(--postit-green);
+            }
+            &.about {
+              background: var(--postit-yellow);
+            }
+            &.work {
+              background: var(--postit-blue);
+            }
+            &.blog {
+              background: var(--postit-pink);
+            }
+          }
+        }
       }
       li:nth-child(3) {
         margin-right: 6px;
@@ -251,7 +601,7 @@
       display: block;
       color: inherit;
       text-decoration: none;
-      padding: 15px 10px 15px 10px;
+      padding: 15px 10px;
       line-height: inherit;
     }
     svg {
@@ -290,49 +640,41 @@
     padding: 10px 25px 10px 25px;
     z-index: 0;
     box-shadow: 5px 10px 10px 0px #000000;
-    &.night {
-      background-color: var(--night-medium);
-    }
-  }
-
-  .home {
-    background-color: var(--postit-green);
-    color: var(--postit-green);
-    &::before {
-      box-shadow: 2px 2px 0 var(--postit-green);
-    }
-    &::after {
-      box-shadow: -2px 2px 0 var(--postit-green);
-    }
-  }
+    position: relative;
 
-  .about {
-    background-color: var(--postit-yellow);
-    &::before {
-      box-shadow: 2px 2px 0 var(--postit-yellow);
+    &.home {
+      background-color: var(--postit-green);
     }
-    &::after {
-      box-shadow: -2px 2px 0 var(--postit-yellow);
+    &.about {
+      background-color: var(--postit-yellow);
     }
-  }
-
-  .work {
-    background-color: var(--postit-blue);
-    &::before {
-      box-shadow: 2px 2px 0 var(--postit-blue);
+    &.work {
+      background-color: var(--postit-blue);
     }
-    &::after {
-      box-shadow: -2px 2px 0 var(--postit-blue);
+    &.blog {
+      background-color: var(--postit-pink);
     }
-  }
-
-  .blog {
-    background-color: var(--postit-pink);
-    &::before {
-      box-shadow: 2px 2px 0 var(--postit-pink);
+    &.night {
+      background-color: var(--night-medium);
     }
-    &::after {
-      box-shadow: -2px 2px 0 var(--postit-pink);
+    &.knight {
+      background-color: var(--knight-off-white);
+      border-radius: 0;
+      box-shadow: none;
+      z-index: 1;
+      &:before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        top: -15px;
+        left: 0;
+        width: 100%;
+        height: 20px;
+        background: transparent;
+        background-image: url(/static/parchment-edge.svg);
+        background-position: bottom;
+        box-shadow: none;
+      }
     }
   }
 </style>
diff --git a/src/lib/home/ProjectSummary.svelte b/src/lib/home/ProjectSummary.svelte
index fb3aa0d..c0d2c3f 100644
--- a/src/lib/home/ProjectSummary.svelte
+++ b/src/lib/home/ProjectSummary.svelte
@@ -26,39 +26,54 @@
   const img_url = image.url;
 </script>
 
-<section class="portfolio-project">
+<section class="portfolio-project {active_display_modes.join(' ')}">
   <div
-    class="project-image {active_display_modes.join(' ')}"
+    class="project-image {active_display_modes.join(' ')} {colour}"
     style="background-image: url({img_url})"
-  />
-  <div
-    class="project-bg {active_display_modes.includes('night')
-      ? 'night'
-      : colour}"
   >
-    <div class="project-description">
-      <p class="project-type">{type}</p>
-      <h2 class="project-title">{title}</h2>
-      <p class="project-summary">{description}</p>
-      <p class="project-tech">{tech_stack}</p>
+    <div
+      class="project-image-pseudo {active_display_modes.join(' ')} {colour}"
+    />
+  </div>
+  <div class="project-bg {active_display_modes.join(' ')} {colour}">
+    <div class="project-description {active_display_modes.join(' ')}">
+      <p class="project-type {active_display_modes.join(' ')}">{type}</p>
+      <h2 class="project-title {active_display_modes.join(' ')}">{title}</h2>
+      <p class="project-summary {active_display_modes.join(' ')}">
+        {description}
+      </p>
+      <p class="project-tech {active_display_modes.join(' ')}">{tech_stack}</p>
     </div>
   </div>
 
   <a
     href={cta_url}
     target="_blank"
-    class="project-cta {active_display_modes.includes('night')
-      ? 'night'
-      : colour}">{cta_text}</a
+    class="project-cta {active_display_modes.join(' ')} {colour}">{cta_text}</a
   >
 </section>
 
 <style lang="scss">
   .portfolio-project {
+    font-family: "Lato", sans-serif;
     margin-top: 6.5em;
     position: relative;
     z-index: 0;
 
+    &.knight {
+      &::after {
+        display: inline-block;
+        position: absolute;
+        bottom: 20px;
+        left: 0;
+        content: "";
+        width: 100%;
+        height: 20px;
+        background-image: url(/static/parchment-edge.svg);
+        z-index: -1;
+      }
+    }
+
     .project-image {
       width: 360px;
       height: 448px;
@@ -72,6 +87,80 @@
         background-color: var(--night-hover-light);
         background-blend-mode: multiply;
       }
+      &.knight {
+        &::before {
+          display: inline-block;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          content: "";
+          width: 25px;
+          height: 100%;
+          background-image: url(/static/portfolio-edge-side.svg);
+          background-size: 100% auto;
+          z-index: 5;
+        }
+        &::after {
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: "";
+          transform: rotate(180deg);
+          width: 360px;
+          height: 20px;
+        }
+        &.green::after {
+          background-image: url(/static/portfolio-edge-green.svg);
+        }
+        &.yellow::after {
+          background-image: url(/static/portfolio-edge-yellow.svg);
+        }
+        &.blue::after {
+          background-image: url(/static/portfolio-edge-blue.svg);
+        }
+        &.pink::after {
+          background-image: url(/static/portfolio-edge-pink.svg);
+        }
+        .project-image-pseudo {
+          position: relative;
+          height: 100%;
+          &::before,
+          &::after {
+            display: inline-block;
+            position: absolute;
+            right: 0;
+            content: "";
+            transform: rotate(180deg);
+          }
+          &::before {
+            top: 0;
+            width: 20px;
+            height: calc(100% - 1.7em);
+            background-size: 100% auto;
+            z-index: 5;
+          }
+          &.green::before {
+            background-image: url(/static/portfolio-edge-side-green.svg);
+          }
+          &.yellow::before {
+            background-image: url(/static/portfolio-edge-side-yellow.svg);
+          }
+          &.blue::before {
+            background-image: url(/static/portfolio-edge-side-blue.svg);
+          }
+          &.pink::before {
+            background-image: url(/static/portfolio-edge-side-pink.svg);
+          }
+          &::after {
+            bottom: 0;
+            width: 100%;
+            height: 30px;
+            background-image: url(/static/portfolio-edge.svg);
+            background-size: cover;
+          }
+        }
+      }
     }
 
     .project-bg {
@@ -83,10 +172,6 @@
       z-index: -1;
       border-radius: 5px;
 
-      &.night {
-        background: var(--night-medium);
-      }
-
       &.grey {
         background: var(--neutral-grey);
       }
@@ -106,6 +191,33 @@
       &.pink {
         background: var(--postit-pink);
       }
+      &.night {
+        background: var(--night-medium);
+      }
+      &.knight {
+        &::before,
+        &::after {
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          content: "";
+          transform: rotate(180deg);
+        }
+        &::before {
+          left: 0;
+          width: 100%;
+          height: 20px;
+          background-image: url(/static/parchment-edge.svg);
+        }
+        &::after {
+          left: calc(100% - 20px);
+          width: 20px;
+          height: 100%;
+          background-image: url(/static/parchment-edge-side.svg);
+          background-size: 100% auto;
+          z-index: 5;
+        }
+      }
     }
 
     .project-description {
@@ -120,26 +232,38 @@
       padding: 2em 1.25em 0em 1.25em;
 
       .project-type {
+        font-family: "Permanent Marker", cursive;
         align-self: flex-end;
         text-align: right;
         width: 70%;
         margin: 0 0 0 0;
+        &.knight {
+          font-family: MedievalSharp, cursive;
+        }
       }
 
       .project-title {
+        font-family: "Permanent Marker", cursive;
         margin-top: 24px;
         margin-bottom: 8px;
         text-align: left;
+        &.knight {
+          font-family: MedievalSharp, cursive;
+        }
       }
 
       .project-summary {
-        font-family: "Lato", sans-serif;
         text-align: left;
+        &.knight {
+          font-family: MedievalSharp, cursive;
+        }
       }
 
       .project-tech {
-        font-family: "Lato", sans-serif;
         text-align: left;
+        &.knight {
+          font-family: MedievalSharp, cursive;
+        }
       }
     }
 
@@ -147,6 +271,7 @@
       position: absolute;
       bottom: 0px;
       right: 20px;
+      font-family: "Permanent Marker", cursive;
       font-size: 1.25em;
       padding: 12px 12px;
       text-transform: uppercase;
@@ -178,6 +303,9 @@
         background: var(--postit-pink-hover);
         color: black;
       }
+      &.knight {
+        font-family: MedievalSharp, cursive;
+      }
     }
   }
 </style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7fe56bb..594537c 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -50,6 +50,7 @@
       }
     }
     &.knight {
+      background-color: #7c7c7c;
       background-image: url(/static/desk_background_knight.svg);
     }
     &.sprite {
@@ -72,6 +73,32 @@
       background-color: var(--night-light);
       color: var(--neutral-white);
     }
+    &.knight {
+      background: var(--knight-off-white);
+      box-shadow: none;
+      font-family: MedievalSharp, cursive;
+      &:before,
+      &:after {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        width: 20px;
+        height: calc(100% + 160px);
+        background-image: url(/static/parchment-edge-side.svg);
+        background-size: 100% auto;
+      }
+      &:before {
+        top: -22px;
+        left: 100%;
+        z-index: 10;
+      }
+      &:after {
+        top: -20px;
+        left: -20px;
+        transform: rotate(180deg);
+        z-index: 5;
+      }
+    }
     &.sprite {
       font-family: "VT323", monospace;
     }
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index b44a1a4..ecbac8f 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -113,5 +113,21 @@
     &.night {
       border: 1px solid var(--neutral-white);
     }
+    &.knight {
+      overflow: visible;
+      border: none;
+      border-top: double #5d5d60;
+      color: #5d5d60;
+      text-align: center;
+      &::after {
+        content: "§";
+        display: inline-block;
+        position: relative;
+        top: -0.7em;
+        font-size: 1.5em;
+        padding: 0 0.25em;
+        background: var(--knight-off-white);
+      }
+    }
   }
 </style>
diff --git a/src/routes/todos/index.svelte b/src/routes/todos/index.svelte
index bdf12af..0725333 100644
--- a/src/routes/todos/index.svelte
+++ b/src/routes/todos/index.svelte
@@ -1,220 +1,234 @@
 <script context="module">
-	import { enhance } from '$lib/form';
+  import { enhance } from "$lib/form";
 
-	// see https://kit.svelte.dev/docs#loading
-	export const load = async ({ fetch }) => {
-		const res = await fetch('/todos.json');
+  // see https://kit.svelte.dev/docs#loading
+  export const load = async ({ fetch }) => {
+    const res = await fetch("/todos.json");
 
-		if (res.ok) {
-			const todos = await res.json();
+    if (res.ok) {
+      const todos = await res.json();
 
-			return {
-				props: { todos }
-			};
-		}
+      return {
+        props: { todos },
+      };
+    }
 
-		const { message } = await res.json();
+    const { message } = await res.json();
 
-		return {
-			error: new Error(message)
-		};
-	};
+    return {
+      error: new Error(message),
+    };
+  };
 </script>
 
 <script>
-	import { scale } from 'svelte/transition';
-	import { flip } from 'svelte/animate';
+  import { scale } from "svelte/transition";
+  import { flip } from "svelte/animate";
 
-	export let todos;
+  export let todos;
 
-	async function patch(res) {
-		const todo = await res.json();
+  async function patch(res) {
+    const todo = await res.json();
 
-		todos = todos.map((t) => {
-			if (t.uid === todo.uid) return todo;
-			return t;
-		});
-	}
+    todos = todos.map((t) => {
+      if (t.uid === todo.uid) return todo;
+      return t;
+    });
+  }
 </script>
 
 <svelte:head>
-	<title>Todos</title>
+  <title>Todos</title>
 </svelte:head>
 
 <div class="todos">
-	<h1>Todos</h1>
-
-	<form
-		class="new"
-		action="/todos.json"
-		method="post"
-		use:enhance={{
-			result: async (res, form) => {
-				const created = await res.json();
-				todos = [...todos, created];
-
-				form.reset();
-			}
-		}}
-	>
-		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
-	</form>
-
-	{#each todos as todo (todo.uid)}
-		<div
-			class="todo"
-			class:done={todo.done}
-			transition:scale|local={{ start: 0.7 }}
-			animate:flip={{ duration: 200 }}
-		>
-			<form
-				action="/todos/{todo.uid}.json?_method=patch"
-				method="post"
-				use:enhance={{
-					pending: (data) => {
-						todo.done = !!data.get('done');
-					},
-					result: patch
-				}}
-			>
-				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
-				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
-			</form>
-
-			<form
-				class="text"
-				action="/todos/{todo.uid}.json?_method=patch"
-				method="post"
-				use:enhance={{
-					result: patch
-				}}
-			>
-				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
-				<button class="save" aria-label="Save todo" />
-			</form>
-
-			<form
-				action="/todos/{todo.uid}.json?_method=delete"
-				method="post"
-				use:enhance={{
-					pending: () => (todo.pending_delete = true),
-					result: () => {
-						todos = todos.filter((t) => t.uid !== todo.uid);
-					}
-				}}
-			>
-				<button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
-			</form>
-		</div>
-	{/each}
+  <h1>Todos</h1>
+
+  <form
+    class="new"
+    action="/todos.json"
+    method="post"
+    use:enhance={{
+      result: async (res, form) => {
+        const created = await res.json();
+        todos = [...todos, created];
+
+        form.reset();
+      },
+    }}
+  >
+    <input
+      name="text"
+      aria-label="Add todo"
+      placeholder="+ tap to add a todo"
+    />
+  </form>
+
+  {#each todos as todo (todo.uid)}
+    <div
+      class="todo"
+      class:done={todo.done}
+      transition:scale|local={{ start: 0.7 }}
+      animate:flip={{ duration: 200 }}
+    >
+      <form
+        action="/todos/{todo.uid}.json?_method=patch"
+        method="post"
+        use:enhance={{
+          pending: (data) => {
+            todo.done = !!data.get("done");
+          },
+          result: patch,
+        }}
+      >
+        <input type="hidden" name="done" value={todo.done ? "" : "true"} />
+        <button
+          class="toggle"
+          aria-label="Mark todo as {todo.done ? 'not done' : 'done'}"
+        />
+      </form>
+
+      <form
+        class="text"
+        action="/todos/{todo.uid}.json?_method=patch"
+        method="post"
+        use:enhance={{
+          result: patch,
+        }}
+      >
+        <input
+          aria-label="Edit todo"
+          type="text"
+          name="text"
+          value={todo.text}
+        />
+        <button class="save" aria-label="Save todo" />
+      </form>
+
+      <form
+        action="/todos/{todo.uid}.json?_method=delete"
+        method="post"
+        use:enhance={{
+          pending: () => (todo.pending_delete = true),
+          result: () => {
+            todos = todos.filter((t) => t.uid !== todo.uid);
+          },
+        }}
+      >
+        <button
+          class="delete"
+          aria-label="Delete todo"
+          disabled={todo.pending_delete}
+        />
+      </form>
+    </div>
+  {/each}
 </div>
 
 <style>
-	.todos {
-		width: 100%;
-		max-width: var(--column-width);
-		margin: var(--column-margin-top) auto 0 auto;
-		line-height: 1;
-	}
-
-	.new {
-		margin: 0 0 0.5rem 0;
-	}
-
-	input {
-		border: 1px solid transparent;
-	}
-
-	input:focus-visible {
-		box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
-		border: 1px solid #ff3e00 !important;
-		outline: none;
-	}
-
-	.new input {
-		font-size: 28px;
-		width: 100%;
-		padding: 0.5em 1em 0.3em 1em;
-		box-sizing: border-box;
-		background: rgba(255, 255, 255, 0.05);
-		border-radius: 8px;
-		text-align: center;
-	}
-
-	.todo {
-		display: grid;
-		grid-template-columns: 2rem 1fr 2rem;
-		grid-gap: 0.5rem;
-		align-items: center;
-		margin: 0 0 0.5rem 0;
-		padding: 0.5rem;
-		background-color: white;
-		border-radius: 8px;
-		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
-		transform: translate(-1px, -1px);
-		transition: filter 0.2s, transform 0.2s;
-	}
-
-	.done {
-		transform: none;
-		opacity: 0.4;
-		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
-	}
-
-	form.text {
-		position: relative;
-		display: flex;
-		align-items: center;
-		flex: 1;
-	}
-
-	.todo input {
-		flex: 1;
-		padding: 0.5em 2em 0.5em 0.8em;
-		border-radius: 3px;
-	}
-
-	.todo button {
-		width: 2em;
-		height: 2em;
-		border: none;
-		background-color: transparent;
-		background-position: 50% 50%;
-		background-repeat: no-repeat;
-	}
-
-	button.toggle {
-		border: 1px solid rgba(0, 0, 0, 0.2);
-		border-radius: 50%;
-		box-sizing: border-box;
-		background-size: 1em auto;
-	}
-
-	.done .toggle {
-		background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-	}
-
-	.delete {
-		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-		opacity: 0.2;
-	}
-
-	.delete:hover,
-	.delete:focus {
-		transition: opacity 0.2s;
-		opacity: 1;
-	}
-
-	.save {
-		position: absolute;
-		right: 0;
-		opacity: 0;
-		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
-	}
-
-	.todo input:focus + .save,
-	.save:focus {
-		transition: opacity 0.2s;
-		opacity: 1;
-	}
+  .todos {
+    width: 100%;
+    max-width: var(--column-width);
+    margin: var(--column-margin-top) auto 0 auto;
+    line-height: 1;
+  }
+
+  .new {
+    margin: 0 0 0.5rem 0;
+  }
+
+  input {
+    border: 1px solid transparent;
+  }
+
+  input:focus-visible {
+    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ff3e00 !important;
+    outline: none;
+  }
+
+  .new input {
+    font-size: 28px;
+    width: 100%;
+    padding: 0.5em 1em 0.3em 1em;
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    text-align: center;
+  }
+
+  .todo {
+    display: grid;
+    grid-template-columns: 2rem 1fr 2rem;
+    grid-gap: 0.5rem;
+    align-items: center;
+    margin: 0 0 0.5rem 0;
+    padding: 0.5rem;
+    background-color: white;
+    border-radius: 8px;
+    transform: translate(-1px, -1px);
+    transition: filter 0.2s, transform 0.2s;
+  }
+
+  .done {
+    transform: none;
+    opacity: 0.4;
+  }
+
+  form.text {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  .todo input {
+    flex: 1;
+    padding: 0.5em 2em 0.5em 0.8em;
+    border-radius: 3px;
+  }
+
+  .todo button {
+    width: 2em;
+    height: 2em;
+    border: none;
+    background-color: transparent;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+  }
+
+  button.toggle {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    box-sizing: border-box;
+    background-size: 1em auto;
+  }
+
+  .done .toggle {
+    background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  }
+
+  .delete {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    opacity: 0.2;
+  }
+
+  .delete:hover,
+  .delete:focus {
+    transition: opacity 0.2s;
+    opacity: 1;
+  }
+
+  .save {
+    position: absolute;
+    right: 0;
+    opacity: 0;
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+  }
+
+  .todo input:focus + .save,
+  .save:focus {
+    transition: opacity 0.2s;
+    opacity: 1;
+  }
 </style>