eggy/public
1
0
Fork 0
Code Issues 7 Pull Requests 1 Releases Wiki Activity

feat: highlight on hover for most els

Browse Source
This commit is contained in:
eggy 2023-01-28 15:59:29 -05:00
parent 577e00a870
commit a0920dfe0f
6 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app.vue
View File

@ -4,7 +4,7 @@
</NuxtLayout>
</template>
<style>
<style lang="scss">
* {
box-sizing: border-box;
/* for that cool wave dark mode effect */
@ -29,28 +29,44 @@ div#__nuxt {
--bg: #091a28;
}
.prose h2 > a,
.prose h3 > a,
.prose h4 > a,
.prose h5 > a,
.prose h6 > a {
.prose {
/*
override default tailwind styles
these have a default specificity of 0, 4, 0 so !important is basically the only way
*/
@apply font-bold no-underline !important;
h2,
h3,
h4,
h5,
h6 {
& > a {
font-weight: bold !important;
text-decoration: none !important;
}
}
}
article .prose h2 > a:hover::before,
article .prose h3 > a:hover::before,
article .prose h4 > a:hover::before,
article .prose h5 > a:hover::before,
article .prose h6 > a:hover::before {
.prose article {
h2,
h3,
h4,
h5,
h6 {
& > a:hover {
@apply hover:text-blue-700 dark:hover:text-blue-400;
&::before {
content: "#";
position: absolute;
left: -2rem;
opacity: 0.5;
left: -2rem;
font-style: italic;
}
}
}
a:hover {
@apply hover:text-blue-700 dark:hover:text-blue-400;
}
}
</style>

8
components/BlogStatBox.vue
View File

@ -11,7 +11,7 @@ const latest = docs.at(-1) as BlogParsedContent;
</script>
<template>
<div class="prose dark:prose-invert flex">
<div class="prose dark:prose-invert flex onhover">
<HomeStatBox
:href="latest._path"
color="lightblue"
@ -46,8 +46,12 @@ const latest = docs.at(-1) as BlogParsedContent;
</div>
</template>
<style scoped>
<style scoped lang="scss">
h2 {
overflow-wrap: break-word;
}
div.onhover:hover h2 {
@apply text-blue-700 dark:text-blue-400;
}
</style>

4
components/ProjectCard.vue
View File

@ -56,6 +56,10 @@ const imgUrl = props.project.img
width: 100%;
}
.project-anchor:hover h3 {
@apply text-blue-700 dark:text-blue-400;
}
.card {
border: 0.2rem solid pink;
background: white;

6
components/StoryStatBox.vue
View File

@ -11,7 +11,7 @@ const latest = docs.at(-1) as StoryParsedContent;
</script>
<template>
<div class="prose dark:prose-invert flex">
<div class="prose dark:prose-invert flex onhover">
<HomeStatBox
:href="latest._path"
color="lightgreen"
@ -50,4 +50,8 @@ const latest = docs.at(-1) as StoryParsedContent;
h2 {
overflow-wrap: break-word;
}
div.onhover:hover h2 {
@apply text-blue-700 dark:text-blue-400;
}
</style>

3
package.json
View File

@ -7,15 +7,16 @@
"preview": "nuxt preview"
},
"devDependencies": {
"@funken-studio/sitemap-nuxt-3": "^4.0.4",
"@nuxt/content": "^2.3.0",
"@nuxtjs/color-mode": "^3.2.0",
"@funken-studio/sitemap-nuxt-3": "^4.0.4",
"@nuxtjs/tailwindcss": "^6.2.0",
"@tailwindcss/typography": "^0.5.2",
"nuxt": "^3.1.1",
"reading-time": "^2.0.0-1",
"rehype-katex": "^6.0.2",
"remark-math": "^5.1.1",
"sass": "^1.57.1",
"sitemap": "^7.1.1",
"typescript": "^4.7.4",
"unist-util-visit": "^4.1.0",

18
yarn.lock
View File

@ -1671,7 +1671,7 @@ chardet@^0.7.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chokidar@^3.5.1, chokidar@^3.5.3:
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1, chokidar@^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@ -3070,6 +3070,11 @@ ignore@^5.2.0, ignore@^5.2.4:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
immutable@^4.0.0:
version "4.2.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.2.tgz#2da9ff4384a4330c36d4d1bc88e90f9e0b0ccd16"
integrity sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==
import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@ -5514,6 +5519,15 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass@^1.57.1:
version "1.57.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.57.1.tgz#dfafd46eb3ab94817145e8825208ecf7281119b5"
integrity sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
sax@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@ -5679,7 +5693,7 @@ socket.io-parser@~4.2.1:
"@socket.io/component-emitter" "~3.1.0"
debug "~4.3.1"
source-map-js@^1.0.1, source-map-js@^1.0.2:
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==