light and dark mode styling, section titles & underlines and fix css …

…warning
BrandonWingerAir · Jan 3, 2024 · 17e84b6 · 17e84b6
1 parent af7870b
commit 17e84b6
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 54 deletions.
diff --git a/app.vue b/app.vue
@@ -31,7 +31,7 @@
 }
 
 .transparent-bg-gray {
-  background: rgba(255, 255, 255, 0.65);
+  background: rgba(255, 255, 255, 0.6);
   border-radius: 5px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
@@ -41,7 +41,7 @@
 
 /* Dark Mode Backgrounds */
 .dark-mode .transparent-bg {
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.6);
   border-radius: 5px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
@@ -59,14 +59,23 @@
 }
 
 .dark-mode .transparent-bg-gray {
-  background: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: 5px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.25);
 }
 
+/* 1px Borders */
+.border-t-1 {
+  border-top-width: 1px;
+}
+
+.border-b-1 {
+  border-bottom-width: 1px;
+}
+
 /* Slug pages heading rule & list icons */
 .prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border-color: #bdbdbd;

diff --git a/components/BlogPosts.vue b/components/BlogPosts.vue
@@ -3,20 +3,24 @@
     <div 
       v-for="post in props.posts"
       :key="post.slug"
-      class="bg-white rounded-lg shadow-md overflow-hidden hover:opacity-75 dark:hover:opacity-85"
+      class="bg-white dark:bg-black rounded-lg shadow-md overflow-hidden hover:opacity-75 dark:hover:opacity-85"
     >
       <NuxtLink :to="post._path">
         <img :src="`${config.public.baseURL}/images/blog/${post.cover}`" alt="Blog Post Cover Image" class="w-full h-48 object-cover">
       </NuxtLink>
+
       <div class="p-6">
-        <h2 class="text-xl font-bold mb-2 dark:text-neutral-900">{{ post.title }}</h2>
-        <p class="text-gray-700 mb-4">{{ post.description }}</p>
-        <NuxtLink
-          :to="post._path"
-          class="inline-block bg-blue-500 hover:bg-blue-700 text-white pt-2 pb-3 px-4 rounded float-right mb-8"
-        >
-          Read More
-        </NuxtLink>
+        <h2 class="text-xl font-bold dark:text-neutral-200 mb-2">{{ post.title }}</h2>
+        <p class="text-gray-700 dark:text-neutral-400 mb-6">{{ post.description }}</p>
+
+        <div class="flex justify-center">
+          <NuxtLink
+            :to="post._path"
+            class="bg-sky-500 hover:bg-sky-600 text-white pt-2 pb-3 px-4 rounded mb-2"
+          >
+            Read Article
+          </NuxtLink>
+        </div>
       </div>
     </div>
   </section>

diff --git a/components/CaseStudies.vue b/components/CaseStudies.vue
@@ -3,20 +3,23 @@
     <div 
       v-for="study in props.studies"
       :key="study.slug"
-      class="bg-white rounded-lg shadow-md overflow-hidden hover:opacity-75 dark:hover:opacity-85"
+      class="bg-white dark:bg-black rounded-lg shadow-md overflow-hidden hover:opacity-75 dark:hover:opacity-85"
     >
       <NuxtLink :to="study._path">
         <img :src="`${config.public.baseURL}/images/studies/${study.cover}`" alt="Blog Post Cover Image" class="w-full h-48 object-cover">
       </NuxtLink>
       <div class="p-6">
-        <h2 class="text-xl font-bold mb-2 dark:text-neutral-900">{{ study.title }}</h2>
-        <p class="text-gray-700 mb-4">{{ study.description }}</p>
-        <NuxtLink
-          :to="study._path"
-          class="inline-block bg-blue-500 hover:bg-blue-700 text-white pt-2 pb-3 px-4 rounded float-right mb-8"
-        >
-          View Details
-        </NuxtLink>
+        <h2 class="text-xl font-bold dark:text-neutral-200 mb-2">{{ study.title }}</h2>
+        <p class="text-gray-700 dark:text-neutral-400 mb-6">{{ study.description }}</p>
+
+        <div class="flex justify-center">
+          <NuxtLink
+            :to="study._path"
+            class="inline-block bg-sky-500 hover:bg-sky-600 hover:bg-blue-700 text-white pt-2 pb-3 px-4 rounded mb-2"
+          >
+            View Details
+          </NuxtLink>
+        </div>
       </div>
     </div>
   </section>

diff --git a/components/EstimateLinkBtn.vue b/components/EstimateLinkBtn.vue
@@ -6,9 +6,9 @@
   >
     <button 
       type="button" 
-      class="w-42 h-14 text-gray-900 dark:text-gray-100 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-sm px-5 py-1 me-2 mb-2 dark:bg-neutral-900 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-400 opacity-90 border-neutral-800"
+      class="w-42 h-14 text-gray-900 dark:text-gray-100 bg-white hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-sm px-5 py-1 me-2 mb-2 dark:bg-neutral-900 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-400 opacity-90 dark:opacity-100 border-neutral-800"
     >
-      <Icon name="uil:calculator" size="1.5rem" class="text-cyan-600 mr-1"/> Time & Cost Estimate Calculator
+      <Icon name="uil:calculator" size="1.5rem" class="text-cyan-500 mr-1"/> Time & Cost Estimate Calculator
     </button>
   </a>
 </template>

diff --git a/components/Site/SiteFooter.vue b/components/Site/SiteFooter.vue
@@ -1,21 +1,21 @@
 <template>
-  <footer class="bg-gray-800">
-    <section class="h-40 md:h-24 lg:h-17 mx-auto max-w-7xl px-2 sm:px-4 lg:py-6 text-gray-300 flex flex-row items-center grid md:grid-cols-3 grid-rows-2 md:grid-rows-1">
+  <footer class="bg-neutral-100 dark:bg-gray-800 border-t-1 border-t-gray-900">
+    <section class="h-40 md:h-24 lg:h-20 mx-auto max-w-7xl px-2 sm:px-4 lg:py-2 text-black dark:text-gray-300 flex flex-row items-center grid md:grid-cols-3 grid-rows-2 md:grid-rows-1">
       <p class="ml-2 lg:ml-3 justify-self-center md:justify-self-start">&copy; Brandon Winger-Air | 2023.</p>
 
       <a href="https://streamelements.com/brandonwinger-air/tip" target="_blank" class="justify-self-center">
         <button 
           type="button" 
           id="contribute-btn"
-          class="w-42 h-10 text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-4 focus:ring-sky-300 font-semibold rounded-md text-sm px-5 py-1 opacity-90 border-slate-400 mb-5 sm:mb-0 ml-1 lg:ml-0"
+          class="w-42 h-10 text-white bg-sky-500 hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-700 focus:outline-none focus:ring-4 focus:ring-sky-300 font-semibold rounded-md text-sm px-5 py-1 opacity-90 border-slate-600 dark:border-slate-400 mb-5 sm:mb-0 ml-1 lg:ml-0"
         >
-          Support future development <Icon name="uil:coffee" size="1.5rem" class="text-amber-900 hover:text-amber-300"/>
+          Support future development <Icon name="uil:coffee" size="1.5rem" class="text-amber-900 hover:text-amber-400"/>
         </button>
       </a>
 
       <div class="justify-self-center md:justify-self-end flex flex-row justify-center gap-4 mr-5 mb-4 sm:mb-0">
         <a v-for="link in links" :key="link.name" :href="link.href" target="_blank">
-          <Icon :name="link.icon" size="1.5rem" class="text-gray-300"/>
+          <Icon :name="link.icon" size="1.5rem" class="text-gray-900 dark:text-gray-300"/>
         </a>
       </div>
     </section>

diff --git a/components/Site/SiteHeader.vue b/components/Site/SiteHeader.vue
@@ -1,34 +1,43 @@
 <template>
-  <Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
+  <Disclosure as="nav" class="bg-neutral-100 dark:bg-gray-800 border-b-1 border-b-gray-900" v-slot="{ open }">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div class="relative flex h-16 items-center justify-between">
         <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
-          <!-- Mobile menu button-->
           <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
             <span class="absolute -inset-0.5" />
             <span class="sr-only">Open main menu</span>
             <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
             <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
           </DisclosureButton>
         </div>
+
         <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-          <div class="flex flex-shrink-0 items-center">
-            <!-- <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" /> -->
+          <div class="flex flex-shrink-0 items-center" @click="changeValue">
             💻
           </div>
+
           <div class="hidden sm:ml-6 sm:block">
             <div class="flex space-x-4">
-              <a v-for="item in navigation" :key="item.name" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white uppercase' : 'text-gray-300 hover:bg-gray-700 hover:text-white uppercase', 'rounded-md px-3 py-2 text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</a>
+              <a 
+                v-for="item in navigation" 
+                :key="item.name" 
+                :href="item.href" 
+                :class="[item.current ? 'bg-neutral-200 dark:bg-gray-900 text-black dark:text-white uppercase' : ' text-gray-900 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white uppercase', 'rounded-md px-3 py-2 text-sm font-medium']" 
+                :aria-current="item.current ? 'page' : undefined"
+              >
+                {{ item.name }}
+              </a>
             </div>
           </div>
         </div>
 
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-          <!-- Profile dropdown -->
           <Menu as="div" class="relative ml-3">
             <div>
-              <MenuButton class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
-                <a href="https://brandonwinger-air.com" target="_blank" class="md:uppercase text-white font-light text-base"><span class="hidden md:inline-block">Main</span> Portfolio 💼</a>
+              <MenuButton class="relative flex rounded-full dark:bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                <a href="https://brandonwinger-air.com" target="_blank" class="md:uppercase dark:text-white font-light text-base">
+                  <span class="hidden md:inline-block">Main</span> Portfolio 💼
+                </a>
               </MenuButton>
             </div>
           </Menu>
@@ -38,7 +47,9 @@
 
     <DisclosurePanel class="sm:hidden">
       <div class="space-y-1 px-2 pb-3 pt-2">
-        <DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
+        <DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']" :aria-current="item.current ? 'page' : undefined">
+          {{ item.name }}
+        </DisclosureButton>
       </div>
     </DisclosurePanel>
   </Disclosure>
@@ -58,4 +69,12 @@ const navigation = [
   { name: 'Case Studies', href: `${config.public.baseURL}/studies`, current: route.name.includes('studies') },
   { name: 'About', href: `${config.public.baseURL}/about`, current: route.name == 'about' },
 ]
+
+const colorMode = useColorMode();
+
+function changeValue(){
+  console.log(colorMode.preference)
+    colorMode.preference = "system"
+}
+
 </script>
diff --git a/components/about/AboutContactBtn.vue b/components/about/AboutContactBtn.vue
@@ -60,7 +60,8 @@
   background: -webkit-linear-gradient(left,  rgba(23,23,23,1) 0%,rgba(38,38,38,1) 100%);
   background: linear-gradient(to right,  rgba(23,23,23,1) 0%,rgba(38,38,38,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171717', endColorstr='#262626',GradientType=1 );
-  
+  background-clip: text;
+
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -71,7 +72,8 @@
   background: -webkit-linear-gradient(left,  rgba(250,250,250,1) 0%,rgba(245,245,245,1) 100%);
   background: linear-gradient(to right,  rgba(250,250,250,1) 0%,rgba(245,245,245,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=1 );
-  
+  background-clip: text;
+
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

diff --git a/content/blog/hello-world.md b/content/blog/hello-world.md
@@ -1,6 +1,6 @@
 ---
 title: Hello, World!
-description: This is my very first blog post and I'm so excited to share it with you!
+description: This is a demo blog post with examples of Markdown file syntax.
 date: 2023-12-19
 cover: nasa-Q1p7bh3SHj8-unsplash.jpg
 tags:

diff --git a/pages/about.vue b/pages/about.vue
@@ -22,7 +22,7 @@
         </button>
       </div>
 
-      <hr class="mt-6 mb-4 border-gray-400">
+      <hr class="mt-6 mb-5 border-gray-500">
 
       <AboutDescription/>
       <AboutContactBtn/>

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -8,10 +8,9 @@
   </section>
 
   <section class="transparent-bg p-8">
-    <h2 class="text-2xl md:text-3xl mb-6 font-semibold dark:text-neutral-100">
-      Blog Posts
+    <h2 class="inline-block text-2xl md:text-3xl mb-1 font-semibold dark:text-neutral-100 border-b-1 border-white pb-6">
+      All Blog Posts
     </h2>
-    <hr class="w-36 mb-8">
     <BlogPosts :posts="posts"/>
   </section>
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -9,18 +9,16 @@
   </section>
 
   <section class="transparent-bg p-8 mb-10 dark:text-neutral-100">
-    <h2 class="text-2xl md:text-3xl font-semibold mb-6">
+    <h2 class="inline-block text-2xl md:text-3xl font-semibold mb-2 border-b-1 border-white pb-6">
       Recent Blog Posts
     </h2>
-    <hr class="w-64 mb-8">
     <BlogPosts :posts="posts"/>
   </section>
 
   <section class="transparent-bg p-8 mb-10 dark:text-neutral-100">
-    <h2 class="text-2xl md:text-3xl font-semibold mb-6">
+    <h2 class="inline-block text-2xl md:text-3xl font-semibold mb-2 border-b-1 border-white pb-6">
       Project Case Studies
     </h2>
-    <hr class="w-72 mb-8">
     <CaseStudies :studies="studies"/>
   </section>
 

diff --git a/pages/projects.vue b/pages/projects.vue
@@ -9,10 +9,9 @@
   </section>
 
   <section class="mb-8 transparent-bg p-8">
-    <h2 class="text-2xl md:text-3xl mb-6 font-semibold dark:text-neutral-100">
+    <h2 class="inline-block text-2xl md:text-3xl mb-5 font-semibold dark:text-neutral-100 border-b-1 border-white pb-6">
       Recent Projects
     </h2>
-    <hr class="w-56 mb-4">
 
     <section class="grid md:grid-cols-2 gap-10">
       <div 
@@ -26,6 +25,7 @@
           </h2>
         </a>
         <p class="dark:text-gray-300">{{ project.description }}</p>
+
         <div class="text-white dark:text-neutral-100">
           <button class="rounded-md border-2 border-neutral-100 dark:border-0 bg-sky-500 dark:bg-sky-600 hover:bg-sky-600 dark:hover:bg-sky-500 p-2 pt-1 mt-4 mr-3">
             <a :href="project.homepageUrl" target="_blank">
@@ -38,6 +38,8 @@
             </a>
           </button>
         </div>
+
+        <!-- Additional GitHub Repo Data -->
         <!-- <div class="mt-4">
           <Icon name="uil:star" size="1.1rem" class="text-indigo-700"/> Stars: {{ project.stargazerCount }}
           <Icon name="system-uicons:branch" size="1.1rem" class="text-indigo-700"/> Forks: {{ project.forkCount }}

diff --git a/pages/studies/index.vue b/pages/studies/index.vue
@@ -8,15 +8,14 @@
   </section>
 
   <section class="mb-8 transparent-bg p-8 dark:text-neutral-100">
-    <h2 class="text-2xl md:text-3xl font-semibold mb-4">
-      Case Study
+    <h2 class="inline-block text-2xl md:text-3xl font-semibold mb-6 border-b-1 border-white pb-6">
+      Case Study: Design and Development Projects
     </h2>
 
     <p class="text-lg mb-7">
-      Design choices, features and use cases during my project development.
+      UI/UX decisions, features and use cases during my project development.
     </p>
 
-    <hr class="w-1/2 mb-5">
 
     <CaseStudies :studies="studies"/>
   </section>