ui changes

rogancodes · Nov 19, 2024 · f2b8405 · f2b8405
1 parent 90c1e67
commit f2b8405
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 31 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,10 +1,10 @@
-<header class="text-xl italic font-bold text-slate-600">
-  <div class="max-w-5xl mx-auto h-16 flex justify-between md:space-x-8">
+<header class="text-xl font-bold text-gray-100">
+  <div class="max-w-5xl mx-auto h-20 px-4 flex justify-between md:space-x-8">
     <a rel="noopener noreferrer" href="/" class="flex items-center px-4 text-3xl"> rogan.codes</a>
     <ul class="items-stretch hidden space-x-3 md:flex">
       {% for item in site.data.navigation %}
       <li class="flex">
-        <a rel="noopener noreferrer" href="{{ item.link }}" class="flex items-center px-3 {% if page.url == item.link %} text-violet-600 underline decoration-solid {% endif %}">
+        <a rel="noopener noreferrer" href="{{ item.link }}" class="flex items-center px-3 {% if page.url == item.link %} underline decoration-solid {% endif %}">
           {{ item.name }}
         </a>
       </li>
@@ -13,16 +13,17 @@
     <div x-data="{ isOpen: false }" class="relative md:hidden inline-block">
       <!-- Dropdown toggle button -->
       <button @click="isOpen = !isOpen" class="relative z-10 block p-5">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-100">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
         </svg>
       </button>
 
       <div x-show="isOpen" @click.away="isOpen = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" class="absolute right-0 z-20 w-36 py-2 mt-2 origin-top-right rounded-md shadow-xl bg-white">
         {% for item in site.data.navigation %}
-          <a href="{{ item.link }}" class="block px-4 py-3 text-sm hover:bg-gray-200">{{ item.name }}</a>
+          <a href="{{ item.link }}" class="block px-4 py-3 text-sm hover:bg-gray-300 text-gray-900">{{ item.name }}</a>
         {% endfor %}
       </div>
     </div>
   </div>
 </header>
+<hr>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,9 +10,9 @@
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
   </head>
-  <body class="container mx-auto jetbrains-mono circuit-pattern leading-loose dark:bg-white repeat-pattern font-semibold">
+  <body class="antialiased mx-auto jetbrains-mono leading-loose bg-gray-900 font-semibold text-gray-100">
     {% include header.html %}
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl mx-auto py-12">
       {{ content }}
     </div>
   </body>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,6 +1,9 @@
 ---
 layout: default
 ---
-<div class="prose">
+<div class="prose max-w-none px-10 prose-invert">
+  <p class="text-4xl underline">
+    {{ page.title}}
+  </p>
   {{ content }}
 </div>
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/blog.html b/blog.html
@@ -4,18 +4,18 @@
 permalink: /
 ---
 <section>
-  <div class="container max-w-5xl px-4 py-12 mx-auto">
+  <div class="container max-w-5xl mx-auto px-4">
     <div class="grid gap-4 mx-4 sm:grid-cols-12">
       <div class="col-span-12 sm:col-span-3">
-        <div class="text-center sm:text-left mb-7 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-indigo-600">
+        <div class="text-center sm:text-left mb-7 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-gradient-to-r from-cyan-500 to-blue-500">
           <h3 class="text-3xl font-semibold">Tags</h3>
         </div>
         <div class="mb-7 col-span-12 sm:col-span-9 flex justify-center">
           <div class="flex flex-wrap">
             {% for tag in site.tags %}
               <span class="mb-2 px-2">
-                <a class="-mx-1.5 -my-1 flex items-center gap-3 rounded-lg px-1.5 py-1 text-[0.8125rem] font-semibold leading-6 text-slate-900 transition hover:bg-slate-900/[0.03]" href="{{ item.link }}">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+                <a class="-mx-1.5 -my-1 flex items-center gap-3 rounded-lg px-1.5 py-1 text-[0.8125rem] font-semibold leading-6 text-gray-100 transition hover:bg-slate-900/[0.03]" href="{{ item.link }}">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 fill-gray-500">
                     <path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v2.879a2.5 2.5 0 0 0 .732 1.767l4.5 4.5a2.5 2.5 0 0 0 3.536 0l2.878-2.878a2.5 2.5 0 0 0 0-3.536l-4.5-4.5A2.5 2.5 0 0 0 7.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                   </svg>
                   {{ tag[0] }}
@@ -28,24 +28,21 @@ <h3 class="text-3xl font-semibold">Tags</h3>
       <div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
         <div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:bg-stone-400">
           {% for post in site.posts %}
-          <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-indigo-600">
+          <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gradient-to-r from-cyan-500 to-blue-500">
             <a href="{{ post.url }}">
-              <h3 class="text-2xl leading-8 font-semibold tracking-wide text-slate-900 hover:text-indigo-600 hover:underline"> {{ post.title }} </h3>
+              <h3 class="text-2xl leading-8 font-semibold tracking-wide text-gray-100 hover:underline"> {{ post.title }} </h3>
             </a>
-            <time class="text-xs tracking-wide uppercase text-gray-700">{{ post.date | date: "%B %d, %Y"}}</time>
+            <time class="text-xs tracking-wide uppercase text-gray-600">{{ post.date | date: "%B %d, %Y"}}</time>
             <div class="mt-2 flex items-center">
               {% for tag in post.tags %}
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 fill-gray-500">
                 <path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v2.879a2.5 2.5 0 0 0 .732 1.767l4.5 4.5a2.5 2.5 0 0 0 3.536 0l2.878-2.878a2.5 2.5 0 0 0 0-3.536l-4.5-4.5A2.5 2.5 0 0 0 7.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
               </svg>
-              <span class="mx-2 text-sm text-gray-700">
+              <span class="mx-2 text-sm text-gray-100">
                 {{ tag  }}
               </span>
               {% endfor %}
             </div>
-            <div class="mt-3 text-gray-700 leading-6">
-              {{ post.excerpt | remove: '<p>' | remove: '</p>' }}
-            </div>
           </div>
           {% endfor %}
         </div>

diff --git a/oss.html b/oss.html
@@ -3,19 +3,19 @@
 title: OSS
 ---
 
-<section class="text-gray-900">
-  <div class="container max-w-5xl px-4 py-12 mx-auto">
+<section class="text-white">
+  <div class="container max-w-5xl px-4 mx-auto">
     <div class="grid gap-4 mx-4 sm:grid-cols-12">
       <div class="col-span-12 sm:col-span-3">
-        <div class="text-center sm:text-left mb-10 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-indigo-600">
+        <div class="text-center sm:text-left mb-10 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-gradient-to-r from-cyan-500 to-blue-500">
           <h3 class="text-3xl font-semibold">Open Source Software</h3>
           <span class="t ext-sm font-bold tracking-wider uppercase text-gray-600">contributions</span>
         </div>
         {% assign repos = site.data.repos %}
         {% for item in repos %}
           <span class="hidden lg:flex mb-2">
-            <a class="-mx-1.5 -my-1 flex items-center gap-3 rounded-lg px-1.5 py-1 text-[0.8125rem] font-semibold leading-6 text-slate-900 transition hover:text-indigo-600 href="{{ item.link }}">
-              <svg viewBox="0 0 24 24" aria-hidden="true" class="size-6 fill-slate-900">
+            <a class="-mx-1.5 -my-1 flex items-center gap-3 rounded-lg px-1.5 py-1 text-[0.8125rem] font-semibold leading-6 transition hover:underline" href="{{ item.link }}" target="_blank">
+              <svg viewBox="0 0 24 24" aria-hidden="true" class="size-6 fill-slate-100">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path>
               </svg>
               {{ item.repo }}
@@ -27,13 +27,13 @@ <h3 class="text-3xl font-semibold">Open Source Software</h3>
         <div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:bg-stone-400">
           {% assign oss = site.data.oss | sort: "time" | reverse %}
           {% for item in oss %}
-          <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-indigo-600">
-            <a href="{{ item.pr }}">
-              <h3 class="text-xl font-semibold tracking-wide hover:text-indigo-600 hover:underline  "> {{ item.title}} </h3>
+          <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gradient-to-r from-cyan-500 to-blue-500">
+            <a href="{{ item.pr }}" target="_blank">
+              <h3 class="text-2xl font-semibold tracking-wide hover:underline  "> {{ item.title}} </h3>
             </a>
             <time class="text-xs tracking-wide uppercase text-gray-600"> {{ item.date | date: "%B %d, %Y" }}</time>
-            <p class="mt-3 text-gray-700">repository: {{ item.repo }} </p>
-            <p class="mt-3 text-gray-700">status: {{ item.status }} </p>
+            <p class="mt-3 text-gray-300">repository: {{ item.repo }} </p>
+            <p class="text-gray-300">status: {{ item.status }} </p>
           </div>
           {% endfor %}
         </div>