light mode and a few improvements

2024-04-08 22:52:47 -05:00
parent 66ad112d8c
commit ca1283d5a8
42 changed files with 14514 additions and 9654 deletions
--- a/components/IconTag.vue
+++ b/components/IconTag.vue
@@ -1,10 +1,8 @@
 <template>
    <div :aria-label="name"
-        class="font-inter md:text-lg w-fit max-h-9 min-w-fit bg-zinc-800 border border-zinc-700/30 py-1 px-2 rounded shadow flex items-center"
-        :class="(isTag) ? 'select-none' : 'select-text'"
-        :style="(size) ? 'font-size: ' + size + 'px;' : ''">
-        <Icon :size="(size) ? size : '20'"
-            class="mr-2"
+        class="font-inter md:text-lg w-fit max-h-9 min-w-fit dark:bg-obsidian-night bg-[hsl(270,68%,95.47%)] border border-soft-lilac dark:border-midnight-slate/30 py-1 px-2 rounded shadow flex items-center"
+        :class="(isTag) ? 'select-none' : 'select-text'" :style="(size) ? 'font-size: ' + size + 'px;' : ''">
+        <Icon :size="(size) ? size : '20'" class="mr-2"
            :name="(isTag) ? ('logos:' + (tagMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase())) : iconName" />
        {{ name }}
    </div>
@@ -12,7 +10,7 @@

 <style scoped>
 .font-inter {
-	font-family: 'Inter', arial, helvetica, sans-serif;
+    font-family: 'Inter', arial, helvetica, sans-serif;
 }
 </style>

--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -1,9 +1,97 @@
+<script setup lang="ts">
+let colorMode = useColorMode();
+
+const changeTheme = () => {
+	if (colorMode.preference === "dark") {
+		// from dark => light
+		colorMode.preference = "light"
+		document.documentElement.classList.remove("dark");
+	} else if (colorMode.preference === "light") {
+		// from light => system
+		colorMode.preference = "system";
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			document.documentElement.classList.add("dark");
+		} else {
+			document.documentElement.classList.remove("dark");
+		}
+	} else {
+		// from system => dark
+		colorMode.preference = "dark";
+		document.documentElement.classList.add("dark");
+	}
+
+	return;
+}
+
+</script>
+
 <template>
-	<nav class="px-2 py-4 w-full">
-		<ul class="flex gap-x-3 font-semibold">
-			<li class="absolute w-fit -translate-x-full top-0 px-2 py-4 bg-[#191819] opacity-0 focus-within:translate-x-0 focus-within:opacity-100"><a class="text-white" href="#main">Skip to content</a></li>
-			<li><nuxt-link class="text-white" to="/">Home</nuxt-link></li>
-			<li><nuxt-link class="text-white" to="/blog">Blog</nuxt-link></li>
-		</ul>
+	<nav class="h-16 z-10 w-full">
+		<div class="px-6 max-w-7xl grid gap-2 grid-cols-12 ms-auto me-auto h-full justify-evenly">
+			<div class="ml-0 col-span-6 sm:col-span-4 flex items-center">
+				<ul class="flex gap-x-8">
+					<li
+						class="absolute w-fit -translate-x-full top-0 px-2 py-4 bg-soft-lavender dark:bg-midnight text-deep-indigo dark:text-white opacity-0 focus-within:translate-x-0 focus-within:opacity-100">
+						<a href="#main">Skip to content</a>
+					</li>
+					<li>
+						<NuxtLink to="/">
+							Home
+						</NuxtLink>
+					</li>
+					<li>
+						<NuxtLink to="/blog">
+							Blog
+						</NuxtLink>
+					</li>
+				</ul>
+			</div>
+			<div class="mr-0 col-span-4 items-center hidden sm:flex"> </div>
+			<div class="mr-0 col-span-6 sm:col-span-4 flex items-center justify-end">
+				<ul class="flex gap-x-4">
+					<li>
+						<a href="https://www.github.com/juls0730">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21" />
+							</svg>
+						</a>
+					</li>
+					<li>
+						<a href="https://x.com/julie4055_">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+									stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
+							</svg>
+						</a>
+					</li>
+					<li>
+						<button @click="changeTheme">
+							<div v-if="$colorMode.preference === 'dark'">
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+									<path fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2"
+										d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z" />
+								</svg>
+							</div>
+							<div v-else-if="$colorMode.preference === 'light'">
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+									<path fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2"
+										d="M14.828 14.828a4 4 0 1 0-5.656-5.656a4 4 0 0 0 5.656 5.656m-8.485 2.829l-1.414 1.414M6.343 6.343L4.929 4.929m12.728 1.414l1.414-1.414m-1.414 12.728l1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2" />
+								</svg>
+							</div>
+							<div v-else>
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
+									<path fill="currentColor"
+										d="M208 36H48a28 28 0 0 0-28 28v112a28 28 0 0 0 28 28h160a28 28 0 0 0 28-28V64a28 28 0 0 0-28-28Zm4 140a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V64a4 4 0 0 1 4-4h160a4 4 0 0 1 4 4Zm-40 52a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12Z" />
+								</svg>
+							</div>
+						</button>
+					</li>
+				</ul>
+			</div>
+		</div>
 	</nav>
-</template>
+</template>
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -6,39 +6,26 @@ export default {

 <template>
 	<div
-		class="bg-[#201F20] relative border p-6 col-span-12 sm:col-span-10 sm:col-start-2 md:col-start-auto md:col-span-6 xl:!col-span-4 h-[60vw] max-h-[425px] min-h-[375px] border-zinc-700/30 shadow-md rounded-lg">
-		<div class="flex mb-4 items-center"
-			v-if="headerIcon">
-			<Icon size="64"
-				class="text-[#00FFC2]"
-				:name="headerIcon" />
+		class="dark:bg-dark-slate bg-touched-lavender relative border p-6 col-span-12 sm:col-span-10 sm:col-start-2 md:col-start-auto md:col-span-6 xl:!col-span-4 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
+		<div class="flex mb-4 items-center" v-if="headerIcon">
+			<Icon size="64" class="text-sea-green" :name="headerIcon" />
 			<div class="ml-auto flex">
-				<a v-if="githubLink"
-					:href="githubLink"
-					:aria-label="`${name}'s Gtihub`"
-					class="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
-					<Icon size="38"
-						name="tabler:brand-github" />
+				<a v-if="githubLink" :href="githubLink" :aria-label="`${name}'s Gtihub`"
+					class="dark:text-zinc-300/80 text-deep-indigo/75 dark:hover:text-zinc-200 hover:text-deep-indigo/95 dark:focus:text-zinc-200 focus:text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
+					<Icon size="38" name="tabler:brand-github" />
 				</a>
-				<a v-if="externalLink"
-					:href="externalLink"
-					class="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
-					<Icon size="38"
-						name="tabler:external-link" />
+				<a v-if="externalLink" :href="externalLink"
+					class="dark:text-zinc-300/80 text-deep-indigo/75 dark:hover:text-zinc-200 hover:text-deep-indigo/95 dark:focus:text-zinc-200 focus:text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
+					<Icon size="38" name="tabler:external-link" />
 				</a>
 			</div>
 		</div>
 		<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
-		<div id="body"
-			class="mb-4">
+		<div id="body" class="mb-4">
 			<slot />
 		</div>
-		<div class="flex flex-wrap gap-2 absolute bottom-6"
-			v-if="icons">
-			<IconTag v-for="icon in icons"
-				size="16"
-				:name="icon.name"
-				:iconName="icon.icon"></IconTag>
+		<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons">
+			<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
 		</div>
 	</div>
 </template>
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -1,31 +1,26 @@
 <template>
-	<div
-		class="container my-2 bg-neutral-900">
-		<span v-if="filename"
-			class="filename-text text-xs leading-none tracking-tight text-gray-400 font-jetbrains">
+	<div class="container my-2 dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
+		<span v-if="filename" class="filename-text text-xs leading-none tracking-tight text-gray-400 font-jetbrains">
 			{{ filename }}
 		</span>
-			<slot />
+		<slot />
 		<div class="bottom-container">
 			<div class="copy-container">
-				<button class="rounded hover:bg-zinc-800/60 transition-colors duration-200 flex p-1"
+				<button
+					class="rounded hover:bg-zinc-300/70 dark:hover:bg-zinc-800/60 transition-colors duration-200 flex p-1"
 					@click="copy(code)" @keypress.space="copy(code)">
-					<div class="h-6"
-						v-if="copied">
-						<Icon size="24"
-							name="tabler:check" />
+					<div class="h-6" v-if="copied">
+						<Icon size="24" name="tabler:check" />
 					</div>
-					<div class="h-6"
-						v-else>
-						<Icon size="24"
-							name="tabler:copy" />
+					<div class="h-6" v-else>
+						<Icon size="24" name="tabler:copy" />
 					</div>
 				</button>
 			</div>
 		</div>
 	</div>
 </template>
-  
+
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core';
 const { copy, copied } = useClipboard();
@@ -39,7 +34,7 @@ const props = withDefaults(
 	{ code: '', language: null, filename: null, highlights: undefined }
 );
 </script>
-  
+
 <style scoped>
 .icon {
 	display: block;
--- a/components/content/ProseCodeInline.vue
+++ b/components/content/ProseCodeInline.vue
@@ -1,12 +1,11 @@
 <template>
-	<code>
+	<code class="dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
 		<slot />
 	</code>
 </template>

 <style scoped>
 code {
-	background-color: #252425;
 	border-radius: 0.375rem;
 	font-size: 0.875rem;
 	font-weight: 400;
--- a/components/content/ProseH2.vue
+++ b/components/content/ProseH2.vue
--- a/components/newsletterSignup.vue
+++ b/components/newsletterSignup.vue
@@ -1,9 +0,0 @@
-<template>
-	<div class="bg-[#1f1d1f] px-4 py-4 md:py-6 rounded-lg border border-neutral-800 flex flex-col">
-		<h1 class="mb-2 text-2xl">Get notified</h1>
-			<input type="email"
-				placeholder="Email..."
-				name="email"
-				class="px-4 py-2 my-2 w-full sm:w-4/5 border shadow-sm rounded-md resize-none border-neutral-700 transition-colors bg-zinc-800 focus:border-neutral-500 focus:outline-none placeholder:italic placeholder:text-gray-300 text-white" />
-	</div>
-</template>