simplify colors

content/projects/personal-site.yml

@@ -2,4 +2,4 @@ title: Personal Site
 description: A portfolio/ blog for myself. Built with Rust, HTMX, AlpineJs, and Tailwindcss.
 href: /
 display_link: r00ks.io
-image: 00.png
+image: favicon-32x32.png

src/styles/styles.css

@@ -18,7 +18,7 @@
   }
 
   .prose a:hover {
-    color: theme("colors.secondary.600");
+    color: theme("colors.secondary.400");
   }
 
   @media (prefers-color-scheme: dark) {
@@ -27,7 +27,7 @@
     }
 
     .prose a:hover {
-      color: theme("colors.secondary.300");
+      color: theme("colors.secondary.500");
     }
   }
 

tailwind.config.js

@@ -9,11 +9,8 @@ module.exports = {
       colors: {
         primary: colors.slate,
         secondary: {
-          200: "#93BEFF",
-          300: "#93BEFF",
-          400: "#2D7EF9",
-          500: "#0f6fff",
-          600: "#0f6fff",
+          400: "#ffa86a",
+          500: "#ffa86a",
         },
       },
       textShadow: {

templates/includes/footer.html

@@ -36,6 +36,6 @@
     </div>
   </div>
   <div
-    class="absolute bottom-0 w-full left-0 h-2 sm:h-4 bg-gradient-to-r from-emerald-500 via-teal-500 to-secondary-500"
+    class="absolute bottom-0 w-full left-0 h-2 sm:h-4 bg-secondary-500"
   ></div>
 </footer>

templates/includes/pagination.html

@@ -4,7 +4,7 @@
   <div class="-mt-px flex w-0 flex-1">
     {% if pagination.current == 0 %}{% else %}
     <a
-      class="group inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-300 dark:hover:border-secondary-600 hover:text-secondary-500 cursor-pointer"
+      class="group inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-400 dark:hover:border-secondary-500 hover:text-secondary-500 cursor-pointer"
       href="{{ pagination.previous }}#"
       hx-target="#outerReach"
       hx-swap="outerHTML transition:true show:body:top"
@@ -28,7 +28,7 @@
   <div class="hidden md:-mt-px md:flex">
     {% for page in pagination.pages %}
     <a
-      class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-300 dark:hover:border-secondary-600 hover:text-secondary-500 dark:hover:text-secondary-400 {% if pagination.current == page %} text-primary-400{% endif %} cursor-pointer"
+      class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-400 dark:hover:border-secondary-500 hover:text-secondary-500 dark:hover:text-secondary-400 {% if pagination.current == page %} text-primary-400{% endif %} cursor-pointer"
       href="/bl0g?page={{ page }}#"
       hx-target="#outerReach"
       hx-swap="outerHTML transition:true show:body:top"
@@ -39,7 +39,7 @@
   <div class="-mt-px flex w-0 flex-1 justify-end">
     {% if pagination.current == pagination.pages_len %}{% else %}
     <a
-      class="group inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-300 dark:hover:border-secondary-600 hover:text-secondary-500 dark:hover:text-secondary-400 cursor-pointer"
+      class="group inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-400 dark:hover:border-secondary-500 hover:text-secondary-500 dark:hover:text-secondary-400 cursor-pointer"
       href="{{ pagination.next }}#"
       hx-target="#outerReach"
       hx-swap="outerHTML transition:true show:body:top"

templates/includes/work.html

@@ -13,18 +13,7 @@ <h2 class="text-black dark:text-white lg:hidden font-bold">
               <div
                 class="flex justify-start items-center font-bold group-hover:text-secondary-400 mb-2"
               >
-                <div class="mr-2" style="min-width: 32px">
-                  <img
-                    alt="logo for {{ job.company }}"
-                    loading="lazy"
-                    width="32"
-                    height="32"
-                    decoding="async"
-                    data-nimg="1"
-                    class="h-7 w-7 min-w-8 rounded-full"
-                    style="color: transparent"
-                    src="/assets/images/{{ job.image }}"
-                  />
+                <div class="rounded-full bg-secondary-400 h-4 w-4 mr-2">
                 </div>
                 <div>{{ job.company }}</div>
                 <div>

templates/partials/post.html

@@ -2,7 +2,7 @@
   <div class="max-w-2xl m-auto mb-[-44px] min-h-screen">
     <div
       x-data="{offset: '0%'}"
-      class="transition h-2 sm:h-3 fixed top-0 left-0 bg-gradient-to-l from-secondary-500 via-teal-500 to-emerald-500 rounded"
+      class="transition h-2 sm:h-3 fixed top-0 left-0 bg-secondary-500 rounded"
       :style="{ width: offset}"
       :class="{ 'sm:hidden': !atTop }"
       @scroll.window="offset = (window.pageYOffset / (document.body.scrollHeight - window.innerHeight) * 100).toString() + '%'"

templates/projects.html

@@ -12,18 +12,8 @@ <h1 class="text-2xl sm:text-3xl mt-28">
         >
           <div>
             <div
-              class="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white ring-1 ring-primary-900/5 dark:border dark:border-primary-700/50 dark:bg-primary-800 dark:ring-0"
+              class="bg-secondary-400 relative z-10 flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-primary-900/5 dark:border dark:border-primary-700/50 dark:ring-0"
             >
-              <img
-                alt="logo for the MCW fish app"
-                loading="lazy"
-                width="32"
-                height="32"
-                decoding="async"
-                class="h-8 w-8"
-                style="color: transparent"
-                src="/assets/images/{{ project.image }}"
-              />
             </div>
             <h2
               class="mt-6 text-base font-semibold text-primary-800 dark:text-primary-100"