mirror of
https://github.com/foo-dogsquared/website.git
synced 2025-01-31 10:58:33 +00:00
337 lines
5.7 KiB
SCSS
337 lines
5.7 KiB
SCSS
// This is copied from https://stackoverflow.com/a/19721069.
|
|
$tooltip-size: 5em;
|
|
$line-height: 1.45;
|
|
|
|
:root {
|
|
--accented-border-style: var(--foreground) solid .1vw;
|
|
|
|
--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;
|
|
}
|
|
|
|
// Base styles.
|
|
a:hover { color: var(--base0B); }
|
|
|
|
hr {
|
|
border-color: var(--foreground);
|
|
}
|
|
|
|
main > article {
|
|
line-height: $line-height;
|
|
}
|
|
|
|
// Layouts
|
|
.site__title {
|
|
--size: 2rem;
|
|
margin-bottom: unset;
|
|
font-size: var(--size);
|
|
line-height: unset;
|
|
}
|
|
|
|
article.post {
|
|
padding: 0.5em;
|
|
background: var(--base01);
|
|
}
|
|
|
|
// Asciidoctor roles (e.g., [.text-center]) on a block.
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.line-through {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
// Custom layouts
|
|
#logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: $tooltip-size;
|
|
width: $tooltip-size;
|
|
|
|
svg {
|
|
--size: 4em;
|
|
height: var(--size);
|
|
width: var(--size);
|
|
fill: var(--base0C);
|
|
position: relative;
|
|
animation: rainbow 3s infinite, pulse 2s alternate infinite, bounce 0.6s ease-in-out alternate infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
$baseSize: 3em;
|
|
$baseRotation: 20deg;
|
|
from {
|
|
transform: rotate($baseRotation) translateX($baseSize) translateY(-#{$baseSize / 5});
|
|
}
|
|
to {
|
|
transform: rotate(-$baseRotation) translateX(-$baseSize) translateY(-#{$baseSize / 5});
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from { width: #{$tooltip-size / 2}; }
|
|
to { width: #{$tooltip-size}; }
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
$colorOrder: "07" "08" "09" "0A" "0B" "0C" "0D" "0E" "0F";
|
|
$divide: floor(100 / length($colorOrder));
|
|
@for $i from 1 to length($colorOrder) {
|
|
#{$i * $divide}% {
|
|
fill: var(--base#{nth($colorOrder, $i)});
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-tooltip] {
|
|
&::before {
|
|
--scale: 0;
|
|
|
|
background: var(--base01);
|
|
content: attr(data-tooltip);
|
|
font-size: 0.8em;
|
|
padding: 0.5em;
|
|
position: absolute;
|
|
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;
|
|
}
|
|
}
|
|
|
|
// Asciidoctor-specific styles
|
|
sup.footnote {
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.anchor {
|
|
border-bottom: unset;
|
|
&:hover {
|
|
border-bottom: unset;
|
|
}
|
|
|
|
&::before {
|
|
content: "§";
|
|
display: inline-block;
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
|
|
.conum {
|
|
color: var(--base05) !important;
|
|
background-color: var(--base02);
|
|
user-select: none;
|
|
}
|
|
|
|
.quoteblock {
|
|
blockquote {
|
|
border: var(--accented-border-style);
|
|
margin: auto;
|
|
padding: 1em 0.5em;
|
|
}
|
|
}
|
|
|
|
@keyframes target-fade {
|
|
0% {
|
|
background: var(--base0D);
|
|
color: unset;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
#footnotes > :not(hr) {
|
|
margin: 1rem;
|
|
}
|
|
|
|
[class$="block"], :is(.admonitionblock) {
|
|
margin: 1rem 0;
|
|
|
|
.title > code {
|
|
background: unset;
|
|
}
|
|
}
|
|
|
|
p.tableblock {
|
|
margin: unset;
|
|
}
|
|
|
|
*:not(.listingblock, .openblock) {
|
|
> .attribution,
|
|
> .title {
|
|
background: var(--foreground);
|
|
color: var(--base00);
|
|
font-size: 0.9em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
> .content {
|
|
border: var(--accented-border-style);
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
|
|
.listingblock {
|
|
position: relative;
|
|
|
|
> .title {
|
|
background: var(--foreground);
|
|
color: var(--background);
|
|
font-size: 0.9em;
|
|
padding: 0.5em;
|
|
|
|
code { background: unset; }
|
|
}
|
|
|
|
> .content pre {
|
|
margin-top: unset;
|
|
}
|
|
|
|
> .listingblock__btn-row {
|
|
$gap: 0.3em;
|
|
|
|
display: flex;
|
|
gap: $gap;
|
|
flex-flow: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
> button {
|
|
background: var(--base01);
|
|
padding: $gap;
|
|
|
|
&:hover {
|
|
background: var(--selection-color);
|
|
color: var(--base05);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--accent-color);
|
|
color: var(--base06);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:fullscreen {
|
|
border: unset;
|
|
|
|
.content > pre {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
> .listingblock__btn-row {
|
|
top: 0;
|
|
}
|
|
|
|
&::backdrop {
|
|
--color1: var(--base09);
|
|
--color2: var(--base08);
|
|
--threshold1: 9px;
|
|
--threshold2: 24px;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--color1) 0px,
|
|
var(--color1) var(--threshold1),
|
|
var(--color2) var(--threshold1),
|
|
var(--color2) var(--threshold2),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.admonitionblock {
|
|
table {
|
|
border: unset;
|
|
margin: unset;
|
|
|
|
tbody {
|
|
tr + tr, tr:first-child { border-top: unset; }
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
background: var(--foreground);
|
|
vertical-align: middle;
|
|
width: 12%;
|
|
|
|
> .title {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
background: var(--base01);
|
|
border: unset;
|
|
}
|
|
}
|
|
|
|
.content > .paragraph:first-child > p:first-child {
|
|
margin-top: unset;
|
|
}
|
|
|
|
.imageblock {
|
|
> .content {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
> .title {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.sidebarblock {
|
|
> .content {
|
|
background: var(--base01);
|
|
border: unset;
|
|
padding: var(--vertical-rhythm);
|
|
|
|
> .title {
|
|
background: unset;
|
|
color: unset;
|
|
font-family: var(--header-family);
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
padding: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// This setup will use asciidoctor-rouge.
|
|
.rouge.highlight, code[data-lang] {
|
|
&::selection, ::selection {
|
|
background: var(--selection-color);
|
|
color: unset;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 860px) {
|
|
.imageblock {
|
|
> .content {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|