1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 12:56:21 -04:00
jarv.is/styles/index.css

65 lines
1.4 KiB
CSS

body {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: var(--background-outer);
}
a {
color: var(--link);
text-decoration: none;
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
padding-bottom: 2px;
transition: background-size 0.25s ease-in-out;
background-image: linear-gradient(var(--link-underline), var(--link-underline));
}
a:hover {
background-size: 100% 2px;
}
/* set an anchor's class to `no-underline` to disable all of the above */
a.no-underline {
background: none !important;
padding-bottom: 0;
transition: none;
}
/*
* make SVG icons relative to surrounding text:
* https://github.com/twitter/twemoji#inline-styles
*/
.icon {
display: inline-block;
height: 1.2em;
width: 1.2em;
vertical-align: -0.2em;
}
/* all code */
code {
font-size: 0.925em;
page-break-inside: avoid;
border: 1px solid var(--kinda-light);
}
/* inline code in paragraphs/elsewhere (single backticks) */
:not(pre) code {
padding: 0.1em 0.25em;
}
/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}