From e3eede4d496a4a8b8f9ad870d195a189dcc065bd Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Tue, 23 Jan 2024 20:26:14 -0800
Subject: [PATCH 1/3] refactor to use text-secondary

---
 .github/ISSUE_TEMPLATE/new-gallery-post.md | 1 +
 src/lib/components/Header.svelte           | 2 +-
 src/lib/components/Icon.svelte             | 4 ++--
 src/lib/components/PostItem.svelte         | 2 +-
 src/lib/components/ProjectItem.svelte      | 2 +-
 src/lib/components/Slice.svelte            | 3 ++-
 src/lib/content.js                         | 3 ++-
 src/routes/(main)/gallery/+page.svelte     | 8 ++++++--
 src/tailwind.css                           | 5 +++++
 9 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/new-gallery-post.md b/.github/ISSUE_TEMPLATE/new-gallery-post.md
index 5e95b74..0afa1ac 100644
--- a/.github/ISSUE_TEMPLATE/new-gallery-post.md
+++ b/.github/ISSUE_TEMPLATE/new-gallery-post.md
@@ -12,6 +12,7 @@ date: 2022-01-16 00:00:00
 description: "will show underneath title on list page"
 image: upload cover image here
 alt: image alt text
+warn: true
 ***
 
 post content goes here, underneath
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index c5893b3..d794486 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -33,7 +33,7 @@
        class="flex mr-3 h-9 w-9 items-center justify-center rounded-lg"
     >
       <svg
-        class="absolute h-5 w-5 text-red-600 dark:text-yellow-400"
+        class="absolute h-5 w-5 text-secondary"
         width="20"
         height="20"
         viewBox="0 0 20 20"
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index e32c4c5..37fdd06 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -8,8 +8,8 @@
          transition-all duration-200
          ease-in-out hover:ring-2
          bg-transparent
-         text-red-600 ring-red-600
-         dark:text-yellow-400 dark:ring-yellow-400"
+         text-secondary
+         ring-red-600 dark:ring-yellow-400"
   {href}
   aria-label={label}
 >
diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 4fe6322..6b8d88c 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -40,7 +40,7 @@
 <style>
   .post:hover {
     & h2 {
-      @apply text-orange-600 dark:text-yellow-400;
+      @apply text-secondary;
     }
   }
 </style>
diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
index 4633591..beb1f7e 100644
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@@ -21,7 +21,7 @@
 <style>
   .project:hover {
     & p {
-      @apply text-red-600 dark:text-yellow-400;
+      @apply text-secondary;
     }
   }
 </style>
diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte
index 7b56da1..7a74894 100644
--- a/src/lib/components/Slice.svelte
+++ b/src/lib/components/Slice.svelte
@@ -3,6 +3,7 @@
   export let date = false
   export let prose = true
   export let full = false
+  export let warn = false
 
 
   let sliceClasses = "slice mb-6 grid w-full grid-cols-4 gap-4 py-8 md:mb-8 md:gap-8 md:py-12 lg:gap-12 xl:gap-16"
@@ -29,7 +30,7 @@
 		"
       >
         <a href="#{title}" class="slice-title">
-          {title}
+          {title}{#if warn}*{/if}
         </a>
         {#if date}
         <span class="text-unshadow text-base text-slate-500 dark:text-gray-600">
diff --git a/src/lib/content.js b/src/lib/content.js
index 896ce1d..16fce4f 100644
--- a/src/lib/content.js
+++ b/src/lib/content.js
@@ -111,7 +111,8 @@ function parseIssue(issue, label) {
         type: 'gallery',
         ...base,
         alt: data.alt,
-        images: data.images
+        images: data.images,
+        warn: data.warn || false
       }
       break
     case 'Published':
diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
index 2f0935e..ccc1530 100644
--- a/src/routes/(main)/gallery/+page.svelte
+++ b/src/routes/(main)/gallery/+page.svelte
@@ -27,18 +27,22 @@
       details, photos<sup>*</sup>, etc. from past adventures
     </p>
     <p class="text-sm text-accent mt-2">
-      <sup>*</sup>advance warning many of the pages are very image heavy
+      * advance warning many of the pages are very image heavy
     </p>
   </Slice>
 
   {#each items as trip}
-    <Slice title={trip.title} date={trip.date}>
+    <Slice title={trip.title} date={trip.date} warn={trip.warn}>
       <a href="/gallery/{trip.slug}" style="display: inline-block" class="not-prose w-full">
         <img src={trip.image} alt={trip.alt} class="gallery-image" loading="lazy" />
         {'>> ' + trip.description + ' <<'}
       </a>
     </Slice>
   {/each}
+
+  <p class="text-sm text-accent my-12 mx-12">
+    * seriously, this page has at least <span class="text-secondary">40 MB</span> worth of images.
+  </p>
 </section>
 
 <style>
diff --git a/src/tailwind.css b/src/tailwind.css
index a3a7dce..f2ca427 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -5,6 +5,7 @@
   body {
     --brand-accent: theme('colors.sky.600');
     --brand-alternate: theme('colors.orange.300');
+    --brand-secondary: theme('colors.red.600');
 
     /* https://ishadeed.com/article/defensive-css */
     overflow-wrap: break-word;
@@ -14,6 +15,7 @@
   .dark body {
     --brand-accent: theme('colors.blue.300');
     --brand-alternate: theme('colors.indigo.700');
+    --brand-secondary: theme('colors.yellow.400');
   }
   :root {
     accent-color: var(--brand-accent);
@@ -34,6 +36,9 @@
   .text-accent {
     color: var(--brand-accent);
   }
+  .text-secondary {
+    color: var(--brand-secondary);
+  }
 
   :is(
       ::-webkit-calendar-picker-indicator,

From 4a3ab9efcd0862840fa6ffe6d0550982a87e1a71 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Tue, 23 Jan 2024 21:44:42 -0800
Subject: [PATCH 2/3] update footer icons, gallery warning

---
 src/lib/components/Footer.svelte              | 78 ++++++++++---------
 src/lib/components/Slice.svelte               |  8 +-
 src/lib/siteConfig.js                         |  4 +-
 src/routes/(main)/+page.svelte                |  4 +-
 src/routes/(main)/[slug=string]/+page.svelte  |  4 +-
 src/routes/(main)/gallery/+page.svelte        |  8 +-
 src/routes/(main)/gallery/[slug]/+page.svelte |  4 +-
 src/routes/(main)/work/+page.svelte           |  2 +-
 src/routes/(main)/work/[slug]/+page.svelte    |  4 +-
 vite.config.js                                |  1 +
 10 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 1a7058d..7759c5d 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,7 +1,7 @@
 <script>
   import Icon from '$lib/components/Icon.svelte'
   import NavLink from '$lib/components/NavLink.svelte'
-  import { MY_TWITTER_HANDLE, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
+  import { TWITTER_ID, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
 
   let isDark = false
   if (typeof localStorage !== 'undefined') {
@@ -23,7 +23,7 @@
   <div
     class="grid grid-cols-4 gap-4 md:mx-4 md:gap-8 lg:mx-12 lg:gap-12 xl:gap-16"
   >
-    <div class="col-span-3 md:col-span-2">
+    <div class="col-span-2 md:col-span-2">
       <NavLink href="/blog">Posts</NavLink>
       <NavLink href="/gallery">Gallery</NavLink>
       <NavLink href="/work">Work</NavLink>
@@ -31,7 +31,7 @@
       <NavLink href="/blogroll">Blogroll</NavLink>
     </div>
 
-    <div class="col-span-1 text-right md:col-span-2 md:col-start-4">
+    <div class="col-span-2 text-right md:col-start-4">
       <Icon href={`/rss.xml`} label="RSS">
         <svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
           <circle cx="68" cy="189" r="24"/>
@@ -40,7 +40,7 @@
         </svg>
       </Icon>
 
-      <Icon href={`https://twitter.com/${MY_TWITTER_HANDLE}`} label="Twitter">
+      <Icon href={`https://twitter.com/${TWITTER_ID}`} label="Twitter">
         <svg viewBox="0 0 512 512" class="h-12 w-12 p-1" fill="currentColor">
           <path
             d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"
@@ -48,39 +48,11 @@
         </svg>
       </Icon>
 
-      <Icon href={`https://www.last.fm/user/${LASTFM_ID}`} label="last.fm">
-        <svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
-          <path d="M102.9,158.4c-4.9,4.4-14.4,13.3-30.3,13.3C54,171.8,36,155.4,36,129.3c0-33.5,21.5-44.3,38-44.3c23.8,0,29,14.4,35.5,34.2l8.7,27.2c8.6,26.4,24.9,47.7,71.6,47.7c33.5,0,56.2-10.4,56.2-37.6c0-22.1-12.5-33.5-35.7-39l-17.3-3.8c-11.9-2.7-15.4-7.6-15.4-15.8c0-9.3,7.3-14.7,19.2-14.7c13,0,20,4.9,21.1,16.6l27-3.3C242.7,72,226,61.9,198.4,61.9c-24.3,0-48.1,9.3-48.1,39c0,18.5,8.9,30.2,31.4,35.7l18.4,4.4c13.8,3.3,18.4,9,18.4,16.9c0,10.1-9.7,14.2-28.1,14.2c-27.3,0-41-14.4-47.5-34.3l-8.9-27.2C122.5,75,109.1,61.9,73.2,61.9C41.1,61.9,10,87.3,10,130.3c0,41.4,29.9,63.8,61.3,63.8c22.7,0,34.2-8,39.9-12.1L102.9,158.4z"/>
+      <!-- <Icon href={`https://instagram.com/${TWITTER_ID}`} label="Instagram">
+        <svg class="h-12 w-12 p-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6ZM6 4C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12ZM17.5 8C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5C16 7.32843 16.6716 8 17.5 8Z" fill="currentColor"/>
         </svg>
-      </Icon>
-
-      <Icon href={`https://letterboxd.com/${LETTERBOXD_ID}/`} label="Letterboxd">
-        <svg viewBox="0 0 500 500" class="h-12 w-12 p-1" fill="currentColor">
-          <defs>
-            <rect id="path-1" x="0" y="0" width="129.847328" height="141.443299"></rect>
-            <rect id="path-3" x="0" y="0" width="129.847328" height="141.443299"></rect>
-          </defs>
-          <g id="letterboxd-decal-dots-neg-mono" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g id="Dots" transform="translate(61.000000, 180.000000)">
-              <ellipse id="Green" fill="currentColor" cx="189" cy="70" rx="70.0786517" ry="70"></ellipse>
-              <g id="Blue" transform="translate(248.152672, 0.000000)">
-                <mask id="mask-2" fill="white">
-                  <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="Mask"></g>
-                <ellipse fill="currentcolor" mask="url(#mask-2)" cx="59.7686766" cy="70" rx="70.0786517" ry="70"></ellipse>
-              </g>
-              <g id="Orange">
-                  <mask id="mask-4" fill="white">
-                    <use xlink:href="#path-3"></use>
-                  </mask>
-                  <g id="Mask"></g>
-                  <ellipse fill="currentColor" mask="url(#mask-4)" cx="70.0786517" cy="70" rx="70.0786517" ry="70"></ellipse>
-              </g>
-            </g>
-          </g>
-        </svg>
-      </Icon>
+      </Icon> -->
 
       <Icon href={`https://github.com/${GH_USER}`} label="Github">
         <svg
@@ -117,6 +89,40 @@
           />
         </svg>
       </Icon>
+
+      <Icon href={`https://www.last.fm/user/${LASTFM_ID}`} label="last.fm">
+        <svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
+          <path d="M102.9,158.4c-4.9,4.4-14.4,13.3-30.3,13.3C54,171.8,36,155.4,36,129.3c0-33.5,21.5-44.3,38-44.3c23.8,0,29,14.4,35.5,34.2l8.7,27.2c8.6,26.4,24.9,47.7,71.6,47.7c33.5,0,56.2-10.4,56.2-37.6c0-22.1-12.5-33.5-35.7-39l-17.3-3.8c-11.9-2.7-15.4-7.6-15.4-15.8c0-9.3,7.3-14.7,19.2-14.7c13,0,20,4.9,21.1,16.6l27-3.3C242.7,72,226,61.9,198.4,61.9c-24.3,0-48.1,9.3-48.1,39c0,18.5,8.9,30.2,31.4,35.7l18.4,4.4c13.8,3.3,18.4,9,18.4,16.9c0,10.1-9.7,14.2-28.1,14.2c-27.3,0-41-14.4-47.5-34.3l-8.9-27.2C122.5,75,109.1,61.9,73.2,61.9C41.1,61.9,10,87.3,10,130.3c0,41.4,29.9,63.8,61.3,63.8c22.7,0,34.2-8,39.9-12.1L102.9,158.4z"/>
+        </svg>
+      </Icon>
+
+      <Icon href={`https://letterboxd.com/${LETTERBOXD_ID}/`} label="Letterboxd">
+        <svg viewBox="0 0 500 500" class="h-12 w-12 p-1" fill="currentColor">
+          <defs>
+            <rect id="path-1" x="0" y="0" width="129.847328" height="141.443299"></rect>
+            <rect id="path-3" x="0" y="0" width="129.847328" height="141.443299"></rect>
+          </defs>
+          <g id="letterboxd-decal-dots-neg-mono" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="Dots" transform="translate(61.000000, 180.000000)">
+              <ellipse id="Green" fill="currentColor" cx="189" cy="70" rx="70.0786517" ry="70"></ellipse>
+              <g id="Blue" transform="translate(248.152672, 0.000000)">
+                <mask id="mask-2" fill="white">
+                  <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Mask"></g>
+                <ellipse fill="currentcolor" mask="url(#mask-2)" cx="59.7686766" cy="70" rx="70.0786517" ry="70"></ellipse>
+              </g>
+              <g id="Orange">
+                  <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                  </mask>
+                  <g id="Mask"></g>
+                  <ellipse fill="currentColor" mask="url(#mask-4)" cx="70.0786517" cy="70" rx="70.0786517" ry="70"></ellipse>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </Icon>
     </div>
   </div>
 </footer>
diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte
index 7a74894..1bebe80 100644
--- a/src/lib/components/Slice.svelte
+++ b/src/lib/components/Slice.svelte
@@ -24,13 +24,9 @@
 <div class={sliceClasses}>
   {#if title}
     <div class="col-span-4 md:col-span-1">
-      <h2
-        class="sticky top-4 mb-2 text-xl font-bold
-							 text-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300
-		"
-      >
+      <h2 class="sticky top-4 mb-2 text-xl font-boldtext-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300">
         <a href="#{title}" class="slice-title">
-          {title}{#if warn}*{/if}
+          {title}{#if warn}<a href="#warning" class="text-secondary">*</a>{/if}
         </a>
         {#if date}
         <span class="text-unshadow text-base text-slate-500 dark:text-gray-600">
diff --git a/src/lib/siteConfig.js b/src/lib/siteConfig.js
index fbd02a9..3ce4992 100644
--- a/src/lib/siteConfig.js
+++ b/src/lib/siteConfig.js
@@ -6,10 +6,10 @@ export const SITE_TITLE = 'heffner.dev'
 export const SITE_DESCRIPTION = 'personal site of tanner heffner'
 export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev'
 
-export const MY_TWITTER_HANDLE = 'foodpyramids'
+export const TWITTER_ID = 'foodpyramids'
 export const LETTERBOXD_ID = 'tjheffner'
 export const LASTFM_ID = 'lob_'
-export const STEAM_ID = ''
+// export const STEAM_ID = ''
 
 export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
 export const GH_PUBLISHED_TAGS = ['Published']
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index 03551b2..ca08c1f 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -7,7 +7,7 @@
     SITE_TITLE,
     SITE_DESCRIPTION,
     DEFAULT_OG_IMAGE,
-    MY_TWITTER_HANDLE,
+    TWITTER_ID,
   } from '$lib/siteConfig'
 </script>
 
@@ -26,7 +26,7 @@
   <meta property="og:description" content={SITE_DESCRIPTION} />
   <meta property="og:image" content={DEFAULT_OG_IMAGE} />
   <meta name="twitter:card" content="summary" />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={SITE_TITLE} />
   <meta name="twitter:description" content={SITE_DESCRIPTION} />
   <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
diff --git a/src/routes/(main)/[slug=string]/+page.svelte b/src/routes/(main)/[slug=string]/+page.svelte
index bbab2ba..1ebf921 100644
--- a/src/routes/(main)/[slug=string]/+page.svelte
+++ b/src/routes/(main)/[slug=string]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { page } from '$app/stores'
-  import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
+  import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
   import Comments from '$lib/components/Comments.svelte'
   import 'prism-themes/themes/prism-shades-of-purple.min.css'
 
@@ -23,7 +23,7 @@
   <meta property="og:title" content={json.title} />
   <meta name="Description" content={json.description} />
   <meta property="og:description" content={json.description} />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={json.title} />
   <meta name="twitter:description" content={json.description} />
   {#if json.image}
diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
index ccc1530..e0478b4 100644
--- a/src/routes/(main)/gallery/+page.svelte
+++ b/src/routes/(main)/gallery/+page.svelte
@@ -20,13 +20,13 @@
 
 <section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
   <Slice>
-    <h1 class="mb-6 text-3xl font-bold tracking-tight text-accent md:text-5xl">
+    <h1 class="mb-6 text-3xl font-bold tracking-tight text-shadow md:text-5xl">
       Gallery
     </h1>
     <p class="text-xl font-semibold text-accent">
-      details, photos<sup>*</sup>, etc. from past adventures
+      details, photos<sup class="text-secondary">*</sup>, etc. from past adventures
     </p>
-    <p class="text-sm text-accent mt-2">
+    <p class="text-sm text-secondary mt-2">
       * advance warning many of the pages are very image heavy
     </p>
   </Slice>
@@ -40,7 +40,7 @@
     </Slice>
   {/each}
 
-  <p class="text-sm text-accent my-12 mx-12">
+  <p id="warning" class="text-sm text-secondary my-12 mx-0 md:mx-4 lg:mx-12">
     * seriously, this page has at least <span class="text-secondary">40 MB</span> worth of images.
   </p>
 </section>
diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte
index f4d8ee3..9f08d74 100644
--- a/src/routes/(main)/gallery/[slug]/+page.svelte
+++ b/src/routes/(main)/gallery/[slug]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { page } from '$app/stores'
-  import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
+  import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
   import Comments from '$lib/components/Comments.svelte'
   import 'prism-themes/themes/prism-shades-of-purple.min.css'
 
@@ -23,7 +23,7 @@
   <meta property="og:title" content={json.title} />
   <meta name="Description" content={json.description} />
   <meta property="og:description" content={json.description} />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={json.title} />
   <meta name="twitter:description" content={json.description} />
   {#if json.image}
diff --git a/src/routes/(main)/work/+page.svelte b/src/routes/(main)/work/+page.svelte
index 09789c8..3cbdcfa 100644
--- a/src/routes/(main)/work/+page.svelte
+++ b/src/routes/(main)/work/+page.svelte
@@ -32,7 +32,7 @@
 
 <section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
   <Slice>
-    <h1 class="mb-6 text-3xl font-bold tracking-tight text-accent md:text-5xl">
+    <h1 class="mb-6 text-3xl font-bold tracking-tight text-shadow md:text-5xl">
       Past work
     </h1>
     <p class="text-xl font-semibold text-accent">
diff --git a/src/routes/(main)/work/[slug]/+page.svelte b/src/routes/(main)/work/[slug]/+page.svelte
index 3c84ccc..2a8d353 100644
--- a/src/routes/(main)/work/[slug]/+page.svelte
+++ b/src/routes/(main)/work/[slug]/+page.svelte
@@ -4,7 +4,7 @@
 
   const { content, name, date, description, image, url } = data
 
-  import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
+  import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
   import GetInTouch from '$lib/components/GetInTouch.svelte'
 </script>
 
@@ -17,7 +17,7 @@
   <meta name="Description" content={description} />
   <meta property="og:description" content={description} />
   <meta name="twitter:card" content={'summary'} />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={name} />
   <meta name="twitter:description" content={description} />
   {#if image}
diff --git a/vite.config.js b/vite.config.js
index 64d31cd..77b6ad9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,7 @@ const config = {
   plugins: [sveltekit(), rawFonts(['.ttf'])],
 }
 
+// this is for using local fonts in OG images
 function rawFonts(ext) {
   return {
     name: 'vite-plugin-raw-fonts',

From 26801886eebb0cece44c3167ab3eeca65bec22f5 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Tue, 23 Jan 2024 23:37:41 -0800
Subject: [PATCH 3/3] update styles slightly, blog page mostly

---
 src/lib/components/PostItem.svelte     |  4 ++--
 src/lib/components/Slice.svelte        |  4 +---
 src/routes/(main)/gallery/+page.svelte |  4 ++++
 src/tailwind.css                       | 14 +++++++-------
 tailwind.config.cjs                    |  1 +
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 6b8d88c..d9b7fc9 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -26,9 +26,9 @@
         <span
           class="
           w-fit rounded-full
-          bg-orange-300 px-2
+          bg-alternate dark:bg-secondary px-2
           py-1 text-xs font-bold
-          text-red-600 text-white md:px-4 dark:bg-lime-600 dark:text-gray-900
+          text-red-600 text-white md:px-4 dark:text-gray-900
         ">
           {item.category}
         </span>
diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte
index 1bebe80..896cb99 100644
--- a/src/lib/components/Slice.svelte
+++ b/src/lib/components/Slice.svelte
@@ -5,7 +5,6 @@
   export let full = false
   export let warn = false
 
-
   let sliceClasses = "slice mb-6 grid w-full grid-cols-4 gap-4 py-8 md:mb-8 md:gap-8 md:py-12 lg:gap-12 xl:gap-16"
   let slotWrapperClasses = 'w-full md:w-2/3 md:ml-4 lg:ml-12'
   if (title && prose) {
@@ -24,7 +23,7 @@
 <div class={sliceClasses}>
   {#if title}
     <div class="col-span-4 md:col-span-1">
-      <h2 class="sticky top-4 mb-2 text-xl font-boldtext-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300">
+      <h2 class="sticky top-4 mb-2 text-xl font-bold text-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300">
         <a href="#{title}" class="slice-title">
           {title}{#if warn}<a href="#warning" class="text-secondary">*</a>{/if}
         </a>
@@ -38,7 +37,6 @@
   {/if}
   <div class={title ? 'col-span-4 md:col-span-3 xl:col-span-2' : 'col-span-4'}>
     <p class={slotWrapperClasses}>
-      <!-- <p class="{title ? 'prose prose-lg prose-slate dark:prose-invert' : 'w-full md:w-2/3 md:ml-4 lg:ml-12'}"> -->
       <slot />
     </p>
   </div>
diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
index e0478b4..dec5852 100644
--- a/src/routes/(main)/gallery/+page.svelte
+++ b/src/routes/(main)/gallery/+page.svelte
@@ -37,6 +37,10 @@
         <img src={trip.image} alt={trip.alt} class="gallery-image" loading="lazy" />
         {'>> ' + trip.description + ' <<'}
       </a>
+
+      {#if trip.title === 'Japan'}
+      <p class="text-secondary font-bold text-xs">The above link has <strong>>150 MB</strong> worth of images. Please be on wifi.</p>
+      {/if}
     </Slice>
   {/each}
 
diff --git a/src/tailwind.css b/src/tailwind.css
index f2ca427..9a982d6 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -14,7 +14,7 @@
   }
   .dark body {
     --brand-accent: theme('colors.blue.300');
-    --brand-alternate: theme('colors.indigo.700');
+    --brand-alternate: theme('colors.lime.700');
     --brand-secondary: theme('colors.yellow.400');
   }
   :root {
@@ -91,7 +91,7 @@
   .footer-link,
   .prose a {
     @apply from-red-600 to-red-600 dark:from-yellow-400 dark:to-yellow-400;
-    @apply text-red-600 hover:text-sky-200 dark:text-yellow-400 dark:hover:text-slate-900;
+    @apply text-secondary hover:text-sky-200 dark:hover:text-slate-900;
 
     cursor: pointer;
     text-decoration: none;
@@ -121,14 +121,14 @@
 /* filters on /blog page */
 .filter {
   @apply m-1 inline-block whitespace-nowrap rounded rounded-md px-4 py-2;
-  @apply border-red-600 bg-sky-600 font-bold text-orange-100;
+  @apply border-secondary bg-alternate text-secondary font-bold;
   @apply dark:border-slate-600 dark:bg-gray-800 dark:text-gray-100;
-  @apply ring-sky-600 transition-all duration-200 ease-in-out hover:ring-2 dark:ring-lime-700;
+  @apply ring-secondary transition-all duration-200 ease-in-out hover:ring-2;
 }
 .activefilter {
-  @apply border-red-600 bg-orange-300 text-red-600;
-  @apply dark:border-slate-600 dark:bg-blue-300 dark:text-slate-800;
-  @apply ring-yellow-400 dark:ring-yellow-800;
+  @apply border-secondary bg-accent text-orange-100;
+  @apply dark:border-slate-600 dark:bg-secondary dark:text-slate-900;
+  @apply ring-accent dark:ring-secondary;
 }
 
 /* Cleanup styles for markdown headers */
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6da8c99..8767425 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -10,6 +10,7 @@ module.exports = {
       colors: {
         accent: 'var(--brand-accent)',
         alternate: 'var(--brand-alternate)',
+        secondary: 'var(--brand-secondary)',
       },
       typography: (theme) => ({
         DEFAULT: {