zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iamge cmopression and a few small tweaks

Browse Source
This commit is contained in:
Zoe
2022-12-17 23:49:54 -06:00
parent e785c2c36c
commit 7adb93b872
19 changed files with 863 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/Nav.vue
View File

@@ -1,6 +1,7 @@
<template>
<nav class="px-2 py-4">
<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>

6
components/ProjectCard.vue
View File

@@ -13,16 +13,16 @@ export default {
class="text-[#00FFC2]"
:name="headerIcon" />
<div role="links"
class="ml-auto">
class="ml-auto flex">
<a v-if="githubLink"
:href="githubLink"
class="text-zinc-300/80 hover:text-zinc-200 transition-colors duration-300">
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>
<a v-if="externalLink"
:href="externalLink"
class="text-zinc-300/80 hover:text-zinc-200 transition-colors duration-300">
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>

19
components/content/ProseCode.vue
View File

@@ -1,21 +1,24 @@
<template>
<div class="container my-2 bg-neutral-900">
<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">
{{ 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"
@click="copy(code)">
@click="copy(code)" @keypress.space="copy(code)">
<div class="h-6"
v-if="copied">
<Icon size="24" name="tabler:check" />
<Icon size="24"
name="tabler:check" />
</div>
<div class="h-6"
v-else>
<Icon size="24" name="tabler:copy" />
<Icon size="24"
name="tabler:copy" />
</div>
</button>
</div>
@@ -31,9 +34,9 @@ const props = withDefaults(
code?: string;
language?: string | null;
filename?: string | null;
highlights?: Array<number>;
highlights?: Array<any>;
}>(),
{ code: '', language: null, filename: null, highlights: [] }
{ code: '', language: null, filename: null, highlights: undefined }
);
</script>
@@ -49,7 +52,7 @@ const props = withDefaults(
border-radius: 0.5rem;
}
.container:hover .bottom-container {
.container:is(:hover, :focus-within) .bottom-container {
opacity: 1;
pointer-events: all;
}