website/assets/scss/extend.scss

133 lines
2.2 KiB
SCSS
Raw Normal View History

2023-02-20 11:04:13 +00:00
// This is copied from https://stackoverflow.com/a/19721069.
2023-02-25 00:02:05 +00:00
$tooltip-size: 5em;
$line-height: 1.45;
2023-02-20 11:04:13 +00:00
@import "animations";
2023-04-07 08:05:23 +00:00
@import "asciidoctor";
2020-11-05 04:34:37 +00:00
:root {
2021-01-20 07:01:56 +00:00
--body-family: "Source Serif Pro", "IBM Plex Serif", "Noto Serif", serif;
--header-family: "Source Sans Pro", "IBM Plex Sans", "Noto Sans", sans-serif;
--mono-family: "Source Code Pro", "IBM Plex Mono", "Noto Mono", monospace;
2023-05-03 05:35:45 +00:00
overflow-wrap: break-word;
2023-02-21 04:07:01 +00:00
}
2023-02-20 17:05:07 +00:00
// Base styles.
2023-05-02 04:06:49 +00:00
table tr td > p {
margin-top: 1em;
}
2023-04-07 08:05:23 +00:00
2023-11-09 06:28:44 +00:00
a:hover { color: var(--base0B); }
2023-05-02 04:06:49 +00:00
ul,
ol {
2023-04-04 11:31:19 +00:00
margin: 1em 0 0;
}
pre {
margin-bottom: 0;
}
button {
border: var(--border-style);
}
2023-02-25 00:02:05 +00:00
hr {
2023-02-27 10:21:58 +00:00
border-color: var(--foreground);
2023-02-25 00:02:05 +00:00
}
2023-03-18 10:34:56 +00:00
kbd {
font-size: 0.9em;
}
2023-02-25 00:02:05 +00:00
main > article {
line-height: $line-height;
}
2020-11-06 22:16:12 +00:00
// Layouts
2023-04-04 11:31:19 +00:00
.site__socials {
list-style: none;
padding-left: 0;
}
2023-11-09 06:28:44 +00:00
.site__social-icon:hover { color: var(--base0B); }
2023-03-18 10:34:56 +00:00
.site__links--content,
2023-03-12 01:48:16 +00:00
.site__socials--content {
2023-03-18 10:34:56 +00:00
margin: 1em 0 0;
padding: 0;
2023-04-09 09:48:10 +00:00
gap: 1em;
2023-03-18 10:34:56 +00:00
display: flex;
width: 100%;
justify-content: space-around;
2023-04-04 11:31:19 +00:00
flex-flow: row wrap;
2023-03-12 01:48:16 +00:00
}
2023-05-02 04:06:49 +00:00
.site__links--content > * {
flex-basis: 20;
}
2023-03-12 01:48:16 +00:00
2021-01-21 21:07:48 +00:00
article.post {
padding: 0.5em;
background: var(--base01);
}
2021-02-01 04:34:15 +00:00
// Custom layouts
#logo {
2023-05-03 05:35:45 +00:00
--size: $tooltip-size;
2023-02-20 11:04:13 +00:00
display: flex;
align-items: center;
justify-content: center;
2023-05-03 05:35:45 +00:00
height: var(--size);
width: var(--size);
2023-02-20 11:04:13 +00:00
svg {
--size: 4em;
height: var(--size);
width: var(--size);
fill: var(--base0C);
2023-02-20 11:04:13 +00:00
position: relative;
2023-03-06 16:35:19 +00:00
animation: rainbow 3s infinite, pulse 2s alternate infinite,
bounce 0.6s ease-in-out alternate infinite;
2023-02-20 11:04:13 +00:00
}
}
[data-tooltip] {
&::before {
--scale: 0;
background: var(--base01);
content: attr(data-tooltip);
font-size: 0.8em;
padding: 0.5em;
position: absolute;
2023-03-06 16:35:19 +00:00
transform: translateY(var(--translate-y, -#{round($tooltip-size / 2)}))
scale(var(--scale));
transform-origin: bottom center;
width: max-content;
max-width: 100%;
}
&:hover::before {
--scale: 1;
}
}
2023-02-26 12:51:58 +00:00
// This setup will use asciidoctor-rouge.
2023-03-06 16:35:19 +00:00
.rouge.highlight,
code[data-lang] {
&::selection,
::selection {
2023-02-27 10:21:58 +00:00
background: var(--selection-color);
2023-02-26 12:51:58 +00:00
color: unset;
}
}
// Prefer reduced animations.
@media (prefers-reduced-motion) {
#logo svg {
2023-05-19 04:59:06 +00:00
animation: none;
}
}