mirror of
https://github.com/foo-dogsquared/website.git
synced 2025-02-23 03:19:00 +00:00
Modularize Asciidoctor style rules
This commit is contained in:
parent
78f8450e1d
commit
93de894dd6
assets/scss
278
assets/scss/asciidoctor.scss
Normal file
278
assets/scss/asciidoctor.scss
Normal file
@ -0,0 +1,278 @@
|
||||
// Asciidoctor-specific styles
|
||||
sup.footnote {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.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(--base03);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.quoteblock {
|
||||
border: var(--border-style);
|
||||
border-left: 0.5em var(--base05) solid;
|
||||
|
||||
blockquote {
|
||||
margin: auto;
|
||||
padding: 0.5em;
|
||||
max-height: var(--code-block-size);
|
||||
overflow: auto;
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footnotes > :not(hr) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
[class$="block"],
|
||||
:is(.admonitionblock, .dialogblock) {
|
||||
margin: 1rem 0 0;
|
||||
|
||||
.title > code {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p.tableblock {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
*:not(.listingblock, .openblock) {
|
||||
> .attribution,
|
||||
> .title {
|
||||
background: var(--foreground);
|
||||
color: var(--base00);
|
||||
font-size: 0.9em;
|
||||
padding: 0.5em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
> .content {
|
||||
border: var(--border-style);
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.listingblock {
|
||||
position: relative;
|
||||
|
||||
> .title {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
font-size: 0.9em;
|
||||
padding: 0.5em;
|
||||
word-wrap: break-word;
|
||||
|
||||
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;
|
||||
width: min-content;
|
||||
|
||||
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;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .listingblock__btn-row {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
--color1: var(--base08);
|
||||
--color2: var(--base0C);
|
||||
--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;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
tbody {
|
||||
tr + tr,
|
||||
tr:first-child {
|
||||
border-top: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.content {
|
||||
background: var(--base01);
|
||||
border: unset;
|
||||
max-height: var(--code-block-size);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
td.icon {
|
||||
--size: 6ch;
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
vertical-align: middle;
|
||||
width: var(--size);
|
||||
padding: 0.25em;
|
||||
|
||||
> .title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> svg.icon {
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Asciidoctor components.
|
||||
.dialogblock {
|
||||
&__box {
|
||||
align-items: center;
|
||||
border: var(--border-style);
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 1em;
|
||||
padding: 0.5em;
|
||||
max-width: 55ch;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
--size: 4em;
|
||||
width: var(--size);
|
||||
flex-basis: var(--size);
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
|
||||
.imageblock {
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
border: unset;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: block;
|
||||
max-width: 50ch;
|
||||
margin: 0;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Roles/modifiers.
|
||||
&.reversed {
|
||||
flex-direction: row-reverse;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
@ -2,6 +2,8 @@
|
||||
$tooltip-size: 5em;
|
||||
$line-height: 1.45;
|
||||
|
||||
@import "asciidoctor";
|
||||
|
||||
:root {
|
||||
--body-family: "Source Serif Pro", "IBM Plex Serif", "Noto Serif", serif;
|
||||
--header-family: "Source Sans Pro", "IBM Plex Sans", "Noto Sans", sans-serif;
|
||||
@ -9,6 +11,8 @@ $line-height: 1.45;
|
||||
}
|
||||
|
||||
// Base styles.
|
||||
table tr td > p { margin-top: 1em; }
|
||||
|
||||
ul, ol {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
@ -149,293 +153,6 @@ article.post {
|
||||
}
|
||||
}
|
||||
|
||||
// Asciidoctor-specific styles
|
||||
sup.footnote {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.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(--base03);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.quoteblock {
|
||||
border: var(--border-style);
|
||||
border-left: 0.5em var(--base05) solid;
|
||||
|
||||
blockquote {
|
||||
margin: auto;
|
||||
padding: 0.5em;
|
||||
max-height: var(--code-block-size);
|
||||
overflow: auto;
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes target-fade {
|
||||
0% {
|
||||
background: var(--base0D);
|
||||
color: unset;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#footnotes > :not(hr) {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
[class$="block"],
|
||||
:is(.admonitionblock, .dialogblock) {
|
||||
margin: 1rem 0 0;
|
||||
|
||||
.title > code {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p.tableblock {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
*:not(.listingblock, .openblock) {
|
||||
> .attribution,
|
||||
> .title {
|
||||
background: var(--foreground);
|
||||
color: var(--base00);
|
||||
font-size: 0.9em;
|
||||
padding: 0.5em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
> .content {
|
||||
border: var(--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;
|
||||
width: min-content;
|
||||
|
||||
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;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .listingblock__btn-row {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
--color1: var(--base08);
|
||||
--color2: var(--base0C);
|
||||
--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;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
tbody {
|
||||
tr + tr,
|
||||
tr:first-child {
|
||||
border-top: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.content {
|
||||
background: var(--base01);
|
||||
border: unset;
|
||||
max-height: var(--code-block-size);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
td.icon {
|
||||
--size: 6ch;
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
vertical-align: middle;
|
||||
width: var(--size);
|
||||
|
||||
> .title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> svg.icon {
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Asciidoctor components.
|
||||
.dialogblock {
|
||||
&__box {
|
||||
align-items: center;
|
||||
border: var(--border-style);
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 1em;
|
||||
padding: 0.5em;
|
||||
max-width: 55ch;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
--size: 4em;
|
||||
width: var(--size);
|
||||
flex-basis: var(--size);
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
|
||||
.imageblock {
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
border: unset;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: block;
|
||||
max-width: 50ch;
|
||||
margin: 0;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Roles/modifiers.
|
||||
&.reversed {
|
||||
flex-direction: row-reverse;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// This setup will use asciidoctor-rouge.
|
||||
.rouge.highlight,
|
||||
code[data-lang] {
|
||||
|
Loading…
Reference in New Issue
Block a user