Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dracula #14

Merged
merged 3 commits into from
Dec 23, 2023
Merged

Dracula #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56653b3
installed dracula
angusgoody Dec 23, 2023
5d858c6
changed dark mode colours
angusgoody Dec 23, 2023
6652142
more colour updates
angusgoody Dec 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified bun.lockb
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion components/AboutShell.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 1 addition & 5 deletions components/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]"

Expand All @@ -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(() => [
Expand All @@ -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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>


Expand All @@ -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="[
Expand All @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions components/BlockShell.vue
View file
Open in desktop
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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/TextSection.vue
View file
Open in desktop
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">
Expand Down
4 changes: 2 additions & 2 deletions components/TitleAndSubtitle.vue
View file
Open in desktop
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({
Expand Down
2 changes: 1 addition & 1 deletion components/buttons/DarkToggle.vue
View file
Open in desktop
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`"
>
Expand Down
2 changes: 1 addition & 1 deletion components/education/EducationBlock.vue
View file
Open in desktop
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>
Expand Down
8 changes: 4 additions & 4 deletions components/education/EducationRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/employment/EmploymentBlock.vue
View file
Open in desktop
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>
Expand Down
6 changes: 3 additions & 3 deletions components/employment/EmploymentRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/project/ProjectBreadcrumb.vue
View file
Open in desktop
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>
Expand Down
12 changes: 6 additions & 6 deletions components/project/ProjectCard.vue
View file
Open in desktop
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">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions components/project/ProjectShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'"
Expand Down
2 changes: 1 addition & 1 deletion components/skills/SkillsBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading