update site styling, fix page styles and remove color mode switcher

BrandonWingerAir · Jan 3, 2024 · e010a8e · e010a8e
1 parent 17e84b6
commit e010a8e
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 26 deletions.
diff --git a/app.vue b/app.vue
@@ -11,6 +11,10 @@
 </template>
 
 <style>
+body {
+  background-color: #000;
+}
+
 /* Transparent Backgrounds */
 .transparent-bg {
   background: rgba(255, 255, 255, 0.35);
@@ -68,6 +72,10 @@
 }
 
 /* 1px Borders */
+.border-1 {
+  border-width: 1px;
+}
+
 .border-t-1 {
   border-top-width: 1px;
 }
@@ -84,4 +92,10 @@
 .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
   color: #000
 }
+
+@media screen and (min-width: 640px) {
+  .nav-border-thin {
+    border-width: 1px;
+  }
+}
 </style>
diff --git a/components/Site/SiteFooter.vue b/components/Site/SiteFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="bg-neutral-100 dark:bg-gray-800 border-t-1 border-t-gray-900">
+  <footer class="bg-neutral-100 dark:bg-gray-800 border-t-2 nav-border-thin border-t-neutral-900 md: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>
 

diff --git a/components/Site/SiteHeader.vue b/components/Site/SiteHeader.vue
@@ -1,9 +1,9 @@
 <template>
-  <Disclosure as="nav" class="bg-neutral-100 dark:bg-gray-800 border-b-1 border-b-gray-900" v-slot="{ open }">
+  <Disclosure as="nav" class="bg-neutral-100 dark:bg-gray-800 border-b-2 nav-border-thin border-b-neutral-900 md: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">
-          <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">
+          <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 dark: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" />
@@ -12,8 +12,8 @@
         </div>
 
         <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-          <div class="flex flex-shrink-0 items-center" @click="changeValue">
-            💻
+          <div class="flex flex-shrink-0 items-center">
+            <a :href="navigation[0].href">💻</a>
           </div>
 
           <div class="hidden sm:ml-6 sm:block">
@@ -22,7 +22,7 @@
                 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']" 
+                :class="[item.current ? 'bg-neutral-200 dark:bg-gray-900 text-black dark:text-white uppercase font-bold' : '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']" 
                 :aria-current="item.current ? 'page' : undefined"
               >
                 {{ item.name }}
@@ -34,8 +34,8 @@
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
           <Menu as="div" class="relative ml-3">
             <div>
-              <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">
+              <MenuButton class="relative flex rounded-md bg-orange-400 hover:bg-orange-500 border-1 border-neutral-800 md:border-neutral-700 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 pt-1 pb-2 px-2 md:px-3">
+                <a href="https://brandonwinger-air.com" target="_blank" class="md:uppercase text-base font-semibold text-neutral-100">
                   <span class="hidden md:inline-block">Main</span> Portfolio 💼
                 </a>
               </MenuButton>
@@ -47,7 +47,7 @@
 
     <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">
+        <DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href" :class="[item.current ? 'bg-neutral-700 dark:bg-gray-900 text-white' : 'dark:text-gray-300 hover:bg-neutral-300 dark: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>
@@ -69,12 +69,4 @@ 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/nuxt.config.ts b/nuxt.config.ts
@@ -32,7 +32,8 @@ export default defineNuxtConfig({
     head: {
       title: 'Brandon Winger-Air | Dev Blog & Portfolio',
       meta: [
-        { name: 'description', content: 'Website & Web Application development/design blog + portfolio with tools, guides, tutorial and course resources for developers' }
+        { name: 'description', content: 'Website & Web Application development/design blog + portfolio with tools, guides, tutorial and course resources for developers' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
       ],
     }
   },

diff --git a/pages/about.vue b/pages/about.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="grid md:grid-cols-2 mb-4 md:mb-5">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-4">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-4">
       🖱️ Website Dev /
       <span class="font-semibold">About</span>
     </h1>

diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mb-8 md:mb-7">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-6">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-6">
       🖱️ Website Dev /
       <span class="font-semibold">Blog</span>
     </h1>

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mb-8 md:mb-7">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-6">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-7">
       🖱️ Website Dev /
       <span class="font-semibold">Blog</span>
     </h1>

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="grid md:grid-cols-2 mb-4 md:mb-5">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-4">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-4">
       🖱️ Website Dev /
       <span class="font-semibold">Home</span>
     </h1>
@@ -9,7 +9,7 @@
   </section>
 
   <section class="transparent-bg p-8 mb-10 dark:text-neutral-100">
-    <h2 class="inline-block text-2xl md:text-3xl font-semibold mb-2 border-b-1 border-white pb-6">
+    <h2 class="inline-block text-2xl md:text-3xl font-semibold mb-1 border-b-1 border-white pb-6">
       Recent Blog Posts
     </h2>
     <BlogPosts :posts="posts"/>

diff --git a/pages/projects.vue b/pages/projects.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="grid md:grid-cols-2 mb-4 md:mb-5">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-4">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-4">
       🖱️ Website Dev /
       <span class="font-semibold">Projects</span>
     </h1>

diff --git a/pages/studies/[...slug].vue b/pages/studies/[...slug].vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mb-8 md:mb-7">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-6">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-6">
       🖱️ Website Dev /
       <span class="font-semibold">Studies</span>
     </h1>

diff --git a/pages/studies/index.vue b/pages/studies/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mb-8 md:mb-7">
-    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-6">
+    <h1 class="text-3xl md:text-5xl mt-11 mb-7">
       🖱️ Website Dev /
       <span class="font-semibold">Studies</span>
     </h1>