Skip to content

Commit

Permalink
Dracula (#14)
Browse files Browse the repository at this point in the history
* installed dracula

* changed dark mode colours

* more colour updates
angusgoody authored Dec 23, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 2cdf6f1 commit f0cd38d
Showing 21 changed files with 49 additions and 66 deletions.
Binary file modified bun.lockb
Binary file not shown.
2 changes: 1 addition & 1 deletion components/AboutShell.vue
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
>
<div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
<h2
class="text-lg font-semibold text-lunar-700 dark:text-lunar-300"
class="text-lg font-semibold text-lunar-700 dark:text-buffy-100"
>
<slot name="title"></slot>
</h2>
6 changes: 3 additions & 3 deletions components/AppFooter.vue
Original file line number Diff line number Diff line change
@@ -7,17 +7,17 @@
>
<div>
<span
class="text-sm text-evening-sea-900 sm:text-center dark:text-evening-sea-200"
class="text-sm text-evening-sea-900 sm:text-center dark:text-blade-200"
>© {{ new Date().getFullYear() }} Angus Goody
</span>
</div>

<div>
<div class="grid grid-flow-col gap-4">
<a v-if="footerData?.github" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-lunar-200 dark:hover:text-evening-sea-100" :href="footerData.github" target="_blank">
<a v-if="footerData?.github" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-dracula-100 dark:hover:text-dracula-200" :href="footerData.github" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="fill-current"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>

<a v-if="footerData?.linkedin" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-lunar-200 dark:hover:text-evening-sea-100" :href="footerData.linkedin" target="_blank">
<a v-if="footerData?.linkedin" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-dracula-100 dark:hover:text-dracula-200" :href="footerData.linkedin" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="fill-current"><title>Linkedin</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
</div>
</div>
6 changes: 1 addition & 5 deletions components/AppHeader.vue
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@
:key="item.id"
:to="item.href"
:class="[
item.current ? 'text-evening-sea-600 dark:text-evening-sea-400' : 'text-zinc-600 dark:text-zinc-200 dark:hover:text-lunar-300 hover:text-lunar-600',
item.current ? 'text-evening-sea-600 dark:text-blade-300' : 'text-zinc-600 dark:text-zinc-200 dark:hover:text-dracula-200 hover:text-lunar-600',
'px-3 py-2 transition'
]"

@@ -46,7 +46,6 @@
<script setup lang="ts">
import AppMobileMenu from "~/components/AppMobileMenu.vue";
const route = useRoute();
import {HomeIcon, FolderIcon, UserCircleIcon} from "@heroicons/vue/24/outline";
import { computed } from 'vue';
const navigation = computed(() => [
@@ -55,21 +54,18 @@ const navigation = computed(() => [
name: "Home",
href: "/",
current: route.name === 'index',
icon: HomeIcon,
},
{
id: 2,
name: "Projects",
href: "/projects",
current: route.name === 'projects',
icon: FolderIcon,
},
{
id: 3,
name: "About",
href: "/about",
current: route.name === 'about',
icon: UserCircleIcon,
},
]);
</script>
29 changes: 7 additions & 22 deletions components/AppMobileMenu.vue
Original file line number Diff line number Diff line change
@@ -46,27 +46,26 @@
>
<PopoverPanel
v-slot="{ close }"
class="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-5 dark:bg-ninja-light bg-opacity-90 dark:ring-ninja/50"
class="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-5 dark:bg-nosferatu bg-opacity-90 dark:ring-aro"
>

<div class="flex flex-row-reverse gap-x-5 items-center justify-between">

<PopoverButton
aria-label="Close menu"
type="button"
class="inline-flex items-center w-full p-1 sm:w-10 h-10 justify-center text-sm rounded-lg md:hidden bg-mulberry-200 dark:bg-mulberry-500/50 hover:bg-mulberry-300/80 dark:hover:bg-mulberry-800/80 text-mulberry-800 dark:text-mulberry-200 focus:outline-none focus:ring-2 focus:ring-mulberry-800/40 dark:focus:ring-mulberry-300/60 "
class="inline-flex items-center p-1 w-10 h-10 justify-center text-sm rounded-lg md:hidden bg-mulberry-200 dark:bg-buffy-500/50 hover:bg-mulberry-300/80 dark:hover:bg-buffy-800/80 text-mulberry-800 dark:text-buffy-100 focus:outline-none focus:ring-2 focus:ring-mulberry-800/40 dark:focus:ring-buffy-100/50 "
aria-controls="navbar-cta"
aria-expanded="false"
>
<span class="sr-only">Open main menu</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 hidden sm:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="sm:hidden">Close</span>
</PopoverButton>

<div class="hidden sm:flex">
<p class="p-1 px-2 rounded w-full h-10 text-lg leading-8 dark:text-evening-sea-100 text-evening-sea-800">Menu</p>
<div class="">
<p class="p-1 px-2 rounded w-full h-10 text-lg leading-8 dark:text-blade-200 text-evening-sea-800">Navigation</p>
</div>


@@ -77,22 +76,9 @@
:to="item.href"
:key="item.id"
:class="[
item.current ? 'bg-evening-sea-600 dark:bg-evening-sea-400/60 focus:ring-evening-sea-500/50' : 'bg-lunar-200 dark:bg-evening-sea-100/10 dark:hover:bg-evening-sea-100/20 hover:bg-lunar-300/80 focus:ring-lunar-800/50 dark:focus:ring-evening-sea-200/40',
'group my-2 relative flex items-center gap-x-6 rounded-lg p-4 focus:outline-none focus:ring-2 '
item.current ? 'bg-evening-sea-600 dark:bg-nosferatu-600 focus:ring-evening-sea-500/50 dark:focus:ring-dracula-100/40' : 'bg-lunar-200 dark:bg-nosferatu-800 dark:hover:bg-nosferatu-700 hover:bg-lunar-300/80 focus:ring-lunar-800/50 dark:focus:ring-dracula-200/40',
'group my-2 relative flex items-center gap-x-6 rounded-lg p-3 focus:outline-none focus:ring-2 '
]">
<div :class="[
item.current ? '' : 'dark:bg-inherit ',
'mt-1 flex h-11 w-11 flex-none bg-white items-center justify-center rounded-lg'
]"
>
<component
:is="item.icon"
:class="[
item.current ? 'dark:text-evening-sea-700' : '',
'h-6 w-6 text-evening-sea-800 dark:text-evening-sea-200/70'
]"
aria-hidden="true" />
</div>
<div>
<p
:class="[
@@ -115,7 +101,6 @@
<script setup>
import { Popover, PopoverButton, PopoverPanel, PopoverOverlay } from '@headlessui/vue'
import NuxtLink from "#app/components/nuxt-link.js";
import {PhoneIcon, PlayCircleIcon} from "@heroicons/vue/20/solid";
defineProps({
navItems: {
type: Array,
4 changes: 2 additions & 2 deletions components/BlockShell.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<section class="p-5 rounded-xl bg-zinc-50 dark:bg-lunar-800/20 shadow">
<section class="p-5 rounded-xl bg-zinc-50 dark:bg-aro/30 shadow">

<!-- Top row -->
<div class="flex flex-row items-center justify-start">
@@ -12,7 +12,7 @@

<!-- Slot for the title -->
<div>
<h2 class="text-lg text-evening-sea-900 dark:text-zinc-50 font-bold tracking-tight">
<h2 class="text-lg text-evening-sea-900 dark:text-cullen-50 font-bold tracking-tight">
<slot name="title">

</slot>
2 changes: 1 addition & 1 deletion components/TextSection.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<p class="text-base font-semibold tracking-tight text-evening-sea-800 dark:text-evening-sea-200">
<p class="text-base font-semibold tracking-tight text-evening-sea-800 dark:text-blade-200">
{{ title }}
</p>
<p class="mt-2 text-sm text-lunar-900/80 dark:text-lunar-200/70">
4 changes: 2 additions & 2 deletions components/TitleAndSubtitle.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<h1
class="text-4xl font-bold tracking-tight text-evening-sea-950 dark:text-zinc-100 sm:text-6xl"
class="text-4xl font-bold tracking-tight text-evening-sea-950 dark:text-cullen-50 sm:text-6xl"
>
{{ title }}
</h1>
<p class="mt-4 text-lg leading-8 dark:text-evening-sea-100">{{ subtitle }}</p>
<p class="mt-4 text-lg leading-8 dark:text-dracula-100">{{ subtitle }}</p>
</template>
<script setup lang="ts">
defineProps({
2 changes: 1 addition & 1 deletion components/buttons/DarkToggle.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<button
class="p-2 rounded-full bg-evening-sea-400/20 dark:bg-evening-sea-900 text-evening-sea-800 dark:text-evening-sea-200"
class="p-2 rounded-full bg-evening-sea-400/20 dark:bg-nosferatu-700 text-evening-sea-800 dark:text-morbius-200"
@click="toggleDarkMode"
:title="`Turn on ${currentMode === 'dark' ? 'light' : 'dark'} mode`"
>
2 changes: 1 addition & 1 deletion components/education/EducationBlock.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<BlockShell>
<template #icon>
<AcademicCapIcon class="h-5 w-5 text-evening-sea-900 dark:text-zinc-50" />
<AcademicCapIcon class="h-5 w-5 text-evening-sea-900 dark:text-cullen-50" />
</template>

<template #title>
8 changes: 4 additions & 4 deletions components/education/EducationRow.vue
Original file line number Diff line number Diff line change
@@ -17,16 +17,16 @@
<!-- Employer and Title -->
<div class="flex flex-col justify-start flex-1">
<div
class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
class=" text-evening-sea-900 dark:text-cullen-50 font-semibold tracking-tight"
>
<p>{{ education.school }}</p>
</div>
<div class="flex flex-wrap justify-between">
<div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
<div class="text-sm text-evening-sea-700 dark:text-blade-200">
<span>{{ education.level }}</span>
<span v-if="education.grade" class="ml-2 text-mulberry-700 dark:text-mulberry-300">{{ education.grade }}</span>
<span v-if="education.grade" class="ml-2 text-mulberry-700 dark:text-buffy-100">{{ education.grade }}</span>
</div>
<div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
<div class="text-sm text-evening-sea-700 dark:text-vanHelsing-200">
{{ convertDateToYear(education.start_date) }} -
<span v-if="education.end_date">{{ convertDateToYear(education.end_date, true) }}</span>
</div>
2 changes: 1 addition & 1 deletion components/employment/EmploymentBlock.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<BlockShell>
<template #icon>
<BriefcaseIcon class="h-5 w-5 text-evening-sea-900 dark:text-zinc-50" />
<BriefcaseIcon class="h-5 w-5 text-evening-sea-900 dark:text-cullen-50" />
</template>

<template #title>
6 changes: 3 additions & 3 deletions components/employment/EmploymentRow.vue
Original file line number Diff line number Diff line change
@@ -17,15 +17,15 @@
<!-- Employer and Title -->
<div class="flex flex-col justify-start flex-1">
<div
class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
class="text-evening-sea-900 dark:text-cullen-50 font-semibold tracking-tight"
>
<p>{{ employment.employer }}</p>
</div>
<div class="flex flex-wrap justify-between">
<div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
<div class="text-sm text-evening-sea-700 dark:text-blade-200">
<p>{{ employment.job_title }}</p>
</div>
<div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
<div class="text-sm text-evening-sea-700 dark:text-vanHelsing-200">
<span>{{ convertDateToYear(employment.start_date) }}</span> -
<span v-if="employment.end_date">{{ convertDateToYear(employment.end_date, true) }}</span>
</div>
2 changes: 1 addition & 1 deletion components/project/ProjectBreadcrumb.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<NuxtLink to="/projects" class="inline-flex items-center font-medium text-evening-sea-800 dark:text-evening-sea-200 hover:underline">
<NuxtLink to="/projects" class="inline-flex items-center font-medium text-evening-sea-800 dark:text-aro-300 hover:underline">
<svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0l4-4m-4 4l4 4"/>
</svg>
12 changes: 6 additions & 6 deletions components/project/ProjectCard.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
class="group max-w-sm rounded-lg shadow bg-zinc-100 dark:bg-lunar-900/40 flex flex-col h-full"
:class="project.coming_soon ? '' : ' hover:bg-zinc-50 dark:hover:bg-lunar-900/60'"
class="group max-w-sm rounded-lg shadow bg-zinc-100 dark:bg-aro/80 flex flex-col h-full"
:class="project.coming_soon ? '' : ' hover:bg-zinc-50 dark:hover:bg-aro'"
>
<ProjectLink :project="project" class="flex-1">
<div class="border-b dark:border-lunar-800/20">
@@ -19,15 +19,15 @@
<div class="flex flex-row justify-between">
<div>
<h3
class="text-xl text-evening-sea-900 dark:text-zinc-50 font-semibold tracking-tight"
class="text-xl text-evening-sea-900 dark:text-cullen-50 font-semibold tracking-tight"
>
{{ project.title }}
</h3>
</div>
<div>
<p class="text-lunar-800/80 dark:text-lunar-200/70">
<p class="text-lunar-800/80 dark:text-vanHelsing-100">
<span v-if="!project.coming_soon">{{ formatDate(project.date_created) }}</span>
<span v-else class="group-hover:text-evening-sea-700 dark:group-hover:text-evening-sea-200">Coming soon</span>
<span v-else class="group-hover:text-evening-sea-700 dark:group-hover:text-blade-200">Coming soon</span>
</p>
</div>
</div>
@@ -36,7 +36,7 @@
<div v-if="project.tags" class="flex flex-row justify-start flex-wrap gap-y-3 my-5">
<div v-for="tag in projectTags" class="mr-2">
<span
class="px-2 py-1 text-xs rounded-full bg-mulberry-700 bg-opacity-90 dark:bg-mulberry-200 text-mulberry-50 dark:text-mulberry-800"
class="px-2 py-1 text-xs rounded-full text-mulberry-50 bg-mulberry-700 bg-opacity-90 dark:bg-dracula-200 dark:text-aro-900"
>{{ tag.value.title }}</span
>
</div>
14 changes: 7 additions & 7 deletions components/project/ProjectShow.vue
Original file line number Diff line number Diff line change
@@ -40,33 +40,33 @@
<div class="mx-auto w-full mt-14 max-w-2xl sm:mt-16 lg:col-span-3 lg:row-span-2 lg:row-end-2 lg:mt-0 lg:max-w-none">
<div class="flex flex-col-reverse">
<div class="">
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl text-zinc-700 dark:text-zinc-100">{{ project.title }}</h1>
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl text-zinc-700 dark:text-cullen-50">{{ project.title }}</h1>

<h2 id="information-heading" class="sr-only">Date created</h2>
<p class="mt-2 text-sm text-lunar-700 dark:text-lunar-300 dark:opacity-80">
<p class="mt-2 text-sm text-lunar-700 dark:text-aro-400">
{{ formatDate(project.date_created) }}
</p>
</div>

</div>

<p class="mt-6 text-zinc-600 dark:text-zinc-200 dark:opacity-70">
<p class="mt-6 text-zinc-600 dark:text-aro-100/80 ">
<span v-if="project.medium_description">{{ project.medium_description }}</span>
<span v-else>{{ project.short_description }}</span>

</p>

<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
<a v-if="project.links.web_link" :href="project.links.web_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-evening-sea-600 px-8 py-3 text-base font-medium text-white hover:bg-evening-sea-700 focus:outline-none focus:ring-2 focus:ring-evening-sea-700 focus:ring-offset-2 focus:ring-offset-gray-50">
<a v-if="project.links.web_link" :href="project.links.web_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-evening-sea-600 dark:bg-dracula-300 dark:hover:bg-dracula-400 dark:text-nosferatu-900 px-8 py-3 text-base font-medium text-white hover:bg-evening-sea-700 focus:outline-none focus:ring-2 focus:ring-evening-sea-700 dark:focus:ring-aro-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-nosferatu">
Website
</a>
<a v-if="project.links.git_link" :href="project.links.git_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-lunar-200 px-8 py-3 text-base font-medium text-lunar-800 hover:bg-lunar-300 focus:outline-none focus:ring-2 focus:ring-lunar-500 focus:ring-offset-2 focus:ring-offset-gray-50">
<a v-if="project.links.git_link" :href="project.links.git_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-lunar-200 dark:bg-vonCount-100 dark:hover:bg-vonCount-200 px-8 py-3 text-base font-medium text-lunar-800 hover:bg-lunar-300 focus:outline-none focus:ring-2 focus:ring-lunar-500 dark:focus:ring-vonCount-200 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-nosferatu">
<span>GitHub</span>
</a>
</div>

<div v-if="hasProjectHighlights()" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
<h3 class="text-sm font-medium text-lunar-700 dark:text-lunar-200">Highlights</h3>
<h3 class="text-sm font-semibold text-lunar-700 dark:text-aro-200">Highlights</h3>
<div class="prose prose-sm mt-4 prose-polo dark:prose-invert">
<ul role="list">
<li v-for="highlight in project.highlights" :key="highlight.id">{{ highlight.title }}</li>
@@ -75,7 +75,7 @@
</div>

<div v-if="project.stack" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
<h3 class="text-sm font-medium text-lunar-700 dark:text-lunar-200">Tech stack</h3>
<h3 class="text-sm font-semibold text-lunar-700 dark:text-aro-200">Tech stack</h3>
<div class="my-10 grid grid-cols-4 gap-5">
<div v-for="skill in project.stack" class="mx-auto flex flex-col items-center space-y-3">
<div :class="'w-10 h-10 xs:w-14 xs:h-14 flex flex-col justify-center transition-opacity duration-200 ease-in-out'"
2 changes: 1 addition & 1 deletion components/skills/SkillsBlock.vue
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
<div class="relative mb-10 flex flex-row items-center">
<div class="w-full flex-1 border-t border-gray-300 dark:border-lunar-600/20" />
<div class="">
<h3 class="px-2 text-sm text-gray-500 dark:text-evening-sea-200">{{ category.title }}</h3>
<h3 class="px-2 text-sm text-gray-500 dark:text-vanHelsing-200">{{ category.title }}</h3>
</div>
<div class="w-full flex-1 border-t border-gray-300 dark:border-lunar-600/20" />
</div>
Loading

0 comments on commit f0cd38d

Please sign in to comment.