update styles slightly, blog page mostly

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>

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>

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}
 

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 */

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: {