fix: make heading links look nicer

This commit is contained in:
eggy 2022-12-31 20:27:53 -05:00
parent d7f0cfe8f7
commit 806bb9b760

31
app.vue
View File

@ -28,4 +28,35 @@ div#__nuxt {
--text-color: #ebf4f1; --text-color: #ebf4f1;
--bg: #091a28; --bg: #091a28;
} }
.icon.icon-link {
@apply absolute opacity-0 h-4 -ml-6 w-10 bg-no-repeat;
background-image: url("/icons/link.svg");
margin-top: 6px;
}
.prose h2 > a,
.prose h3 > a,
.prose h4 > a,
.prose h5 > a,
.prose h6 > a {
/*
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;
}
.prose h2 > a:hover::before,
.prose h3 > a:hover::before,
.prose h4 > a:hover::before,
.prose h5 > a:hover::before,
.prose h6 > a:hover::before {
content: "#";
position: absolute;
left: -2rem;
opacity: 0.5;
font-style: italic;
}
</style> </style>