1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-07-30 20:47:46 +00:00

code: better link styling

This commit is contained in:
RGBCube 2025-06-02 23:46:18 +03:00
parent c96c59ecf5
commit ab09647f76
Signed by: RGBCube
SSH key fingerprint: SHA256:CzqbPcfwt+GxFYNnFVCqoN5Itn4YFrshg1TrnACpA5M
2 changed files with 36 additions and 19 deletions

View file

@ -160,12 +160,37 @@
}
a {
@apply px-1 pb-0.75;
@apply m-0;
* {
@apply wrap-anywhere;
}
&:not(:has(> code:only-child)) {
@apply px-1;
&:not(.font-mono) {
@apply pb-0.75;
}
}
&:not(:has(h1, h2, h3, h4, h5, h6)) {
@apply inline-block wrap-anywhere text-[red] dark:text-[yellow] border-2
border-[transparent] border-dashed;
&:has(> code:only-child) {
@apply border-dotted;
}
&:hover {
@apply border-[red] dark:border-[yellow];
}
&:active {
@apply border-[fuchsia] dark:border-[springgreen] animate-to-the-future;
}
}
& :where(h1, h2, h3, h4, h5, h6) {
@apply before:underline before:underline-offset-4;
@ -177,19 +202,6 @@
@apply italic text-[red] dark:text-[yellow];
}
}
&:not(:has(h1, h2, h3, h4, h5, h6)) {
@apply inline-block wrap-anywhere text-[red] dark:text-[yellow] border-2
border-[transparent] border-dashed;
&:hover {
@apply border-[red] dark:border-[yellow];
}
&:active {
@apply border-[fuchsia] dark:border-[springgreen] animate-to-the-future;
}
}
}
/* TODO: Make it better. */
@ -210,12 +222,20 @@
@apply border-black dark:border-white;
}
code:not(pre > code) {
@apply border-1 border-dotted px-2 py-0.5 border-black dark:border-white;
a:hover & {
@apply border-transparent;
}
}
pre code, pre code * {
@apply whitespace-pre;
}
div:has(> pre code) {
@apply outline-1 outline-dotted outline-offset-1 outline-[#444] border-1
@apply outline outline-dotted outline-offset-1 outline-[#444] border-1
border-black p-2 bg-[#eee] dark:outline-[#bbb] dark:border-white
dark:bg-[#111];
}

View file

@ -20,12 +20,9 @@ Blog Articles
<ul>
{{ for article of search.pages("type=article", "order=asc date=desc")}}
<li class="flex">
<!-- Nope, m-0 doesn't work! -->
<code style="margin:0" class="pr-1.25">
<a class="text-right" href="{{ article.url }}">
<a class="text-right font-mono" style="margin-right:calc(var(--spacing)*2)" href="{{ article.url }}">
{{ article.date.toISOString().slice(2, 10).replaceAll("-", " ") }}
</a>
</code>
{{ article.title |> md }}
</li>