eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Add the {{r}} shortcode that renders a subreddit as a subtle (color only on hover) link, in monospace with no background

Browse source
This commit is contained in:
Eryn Wells 2023-01-07 09:42:56 -08:00
parent 87e60d53f6
commit 4ca71181c7
2 changed files with 22 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

20
assets/styles/root.css
View file

@ -117,7 +117,17 @@ a:hover {
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.12em; text-underline-offset: 0.12em;
} }
a:visited { color: none; } a:visited { color: rgb(var(--mid-blue)); }
a.hover-only {
color: var(--html-color);
transition: color 0.2s;
}
a.hover-only:hover {
color: rgb(var(--mid-blue));
text-decoration: underline;
transition: color 0.2s;
}
blockquote { blockquote {
border-inline-start: 4px solid var(--separator-color); border-inline-start: 4px solid var(--separator-color);
@ -138,6 +148,14 @@ code {
padding-inline: 0.6rem; padding-inline: 0.6rem;
} }
code.nobg {
background: none;
border-radius: 0;
display: inline-block;
margin: 0;
padding: 0;
}
figcaption { figcaption {
font-size: 75%; font-size: 75%;
line-height: var(--body-line-height); line-height: var(--body-line-height);

3
layouts/shortcodes/r.html Normal file
View file

@ -0,0 +1,3 @@
{{- $subreddit := .Get 0 -}}
<a class="hover-only" href="https://reddit.com/r/{{ $subreddit }}"><code class="nobg">r/{{ $subreddit }}</code></a>
{{- "" -}}