From 81acd5fbcc9273cf41541e61eb62752ecf8f93d0 Mon Sep 17 00:00:00 2001 From: Gabriel Arazas Date: Fri, 4 Oct 2024 21:11:14 +0800 Subject: [PATCH] Update admonition block and its styling --- assets/scss/asciidoctor.scss | 444 ++++++++++++++++++---------------- templates/admonition.html.erb | 26 +- 2 files changed, 244 insertions(+), 226 deletions(-) diff --git a/assets/scss/asciidoctor.scss b/assets/scss/asciidoctor.scss index 32cd8e3..2c0456c 100644 --- a/assets/scss/asciidoctor.scss +++ b/assets/scss/asciidoctor.scss @@ -2,302 +2,328 @@ @import "roles"; :root { - --side-accent-color: var(--base05); - --side-accent-color-text: var(--base00); - --border-style: 1px var(--side-accent-color) solid; - --mark-border-style: 0.5em var(--side-accent-color) solid; + --side-accent-color: var(--base05); + --side-accent-color-text: var(--base00); + --border-style: 1px var(--side-accent-color) solid; + --mark-border-style: 0.5em var(--side-accent-color) solid; } .anchor { - &::before { - content: "§"; - display: inline-block; - margin-right: 0.25em; - } + &::before { + content: "§"; + display: inline-block; + margin-right: 0.25em; + } } .conum { - color: var(--base05) !important; - background-color: var(--base03); - user-select: none; + color: var(--base05) !important; + background-color: var(--base03); + user-select: none; } .quoteblock { - border: var(--border-style); - border-left: var(--mark-border-style); + border: var(--border-style); + border-left: var(--mark-border-style); - blockquote { - margin: auto; - padding: 0.5em; - max-height: var(--code-block-size); - overflow: auto; + blockquote { + margin: auto; + padding: 0.5em; + max-height: var(--code-block-size); + overflow: auto; - & > :first-child { - margin-top: 0; + &> :first-child { + margin-top: 0; + } } - } } -#footnotes > :not(hr) { - margin-top: 1rem; +#footnotes> :not(hr) { + margin-top: 1rem; +} + +.admonitionblock { + display: flex; + flex-direction: row; + + font-family: initial; + color: unset; + font-size: unset; + padding: 0; + border: var(--border-style); + + >.icon { + --size: 8em; + background: var(--foreground); + color: var(--background); + width: var(--size); + padding: 0.5em; + } + + >.content { + align-content: center; + border: none !important; + line-height: initial; + padding: 0 0.5em; + } } [class$="block"], :where(.admonitionblock, .dialogblock, .listingblock, .literalblock) { - margin: 1rem 0 0; + margin: 1rem 0 0; - .title > code { - background: unset; - } + .title>code { + background: unset; + } - .content > :first-child { - margin-top: 0; - } + .content> :first-child { + margin-top: 0; + } } p.tableblock { - margin: unset; + margin: unset; } *:not(.listingblock, .literalblock, .openblock) { - > .attribution, - > .title { - background: var(--side-accent-color); - color: var(--side-accent-color-text); - font-size: 0.9em; - padding: 0.5em; - word-break: break-word; - } - > .content { - border: var(--border-style); - padding: 0.5em; - } + >.attribution, + >.title { + background: var(--side-accent-color); + color: var(--side-accent-color-text); + font-size: 0.9em; + padding: 0.5em; + word-break: break-word; + } + + >.content { + border: var(--border-style); + padding: 0.5em; + } } .listingblock { - position: relative; + position: relative; - > .title { - background: var(--side-accent-color); - color: var(--side-accent-color-text); - font-size: 0.9em; - padding: 0.5em; - word-wrap: break-word; + >.title { + background: var(--side-accent-color); + color: var(--side-accent-color-text); + font-size: 0.9em; + padding: 0.5em; + word-wrap: break-word; - code { - background: unset; + code { + background: unset; + } } - } - > .content pre { - margin-top: unset; - } + >.content pre { + margin-top: unset; + } } .literalblock { - position: relative; + position: relative; - > .content pre { - background: var(--base00); - font-size: 0.9em; - } + >.content pre { + background: var(--base00); + font-size: 0.9em; + } } .literalblock, .listingblock { - > .listingblock__btn-row { - $gap: 0.3em; + >.listingblock__btn-row { + $gap: 0.3em; - display: flex; - gap: $gap; - flex-flow: row; - justify-content: center; - align-items: center; - width: min-content; + display: flex; + gap: $gap; + flex-flow: row; + justify-content: center; + align-items: center; + width: min-content; - position: absolute; - top: 0; - right: 0; + position: absolute; + top: 0; + right: 0; - > button { - background: var(--base01); - padding: $gap; + >button { + background: var(--base01); + padding: $gap; - &:hover { - background: var(--selection-color); - color: var(--base05); - } + &: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; + &:active { + background: var(--accent-color); + color: var(--base06); + } + } } - .title { - display: none; - } + &:fullscreen { + border: unset; - > .listingblock__btn-row { - top: 0; - } + .content>pre { + max-height: 100vh; + border: unset; + } - &::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) - ); + .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%; + >table { + border: unset; + margin: unset; + table-layout: fixed; + width: 100%; - tbody { - tr + tr, - tr:first-child { - border-top: unset; - } - } - } + tbody { - 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; + tr+tr, + tr:first-child { + border-top: unset; + } + } } - > svg.icon { - width: 100%; - height: var(--size); + 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; - } + >.content { + display: flex; + justify-content: center; + } - > .title { - text-align: center; - } + >.title { + text-align: center; + } } p { - margin-bottom: unset; + margin-bottom: unset; } .sidebarblock { - > .content { - background: var(--base01); - border: unset; - padding: var(--vertical-rhythm); + >.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; + >.title { + background: unset; + color: unset; + font-family: var(--header-family); + font-size: 1em; + font-weight: bold; + padding: unset; + } } - } } // Custom Asciidoctor components. .dialogblock { - align-items: center; - border: var(--border-style); - border-left: var(--mark-border-style); - display: flex; - flex-flow: row nowrap; - gap: 1em; - padding: 0.5em; - max-width: 60ch; - width: fit-content; + align-items: center; + border: var(--border-style); + border-left: var(--mark-border-style); + display: flex; + flex-flow: row nowrap; + gap: 1em; + padding: 0.5em; + max-width: 60ch; + width: fit-content; - &__avatar { - --size: 4em; - width: var(--size); - flex-basis: var(--size); - flex-shrink: 0; - margin: 0; + &__avatar { + --size: 4em; + width: var(--size); + flex-basis: var(--size); + flex-shrink: 0; + margin: 0; - .imageblock { - margin: 0; + .imageblock { + margin: 0; - .content { - border: unset; - padding: 0; - } + .content { + border: unset; + padding: 0; + } + } } - } - &__text { - display: block; - margin: 0; + &__text { + display: block; + margin: 0; - > :first-child { - margin-top: 0; + > :first-child { + margin-top: 0; + } } - } - // Roles/modifiers. - &.reversed { - flex-direction: row-reverse; - margin-left: auto; - border-left: var(--border-style); - border-right: var(--mark-border-style); - } + // Roles/modifiers. + &.reversed { + flex-direction: row-reverse; + margin-left: auto; + border-left: var(--border-style); + border-right: var(--mark-border-style); + } - &.full { - max-width: unset; - width: unset; - } + &.full { + max-width: unset; + width: unset; + } } @media all and (max-width: 860px) { - .imageblock { - > .content { - width: 100% !important; + .imageblock { + >.content { + width: 100% !important; + } } - } } diff --git a/templates/admonition.html.erb b/templates/admonition.html.erb index 0bcd0a2..c28c8a6 100644 --- a/templates/admonition.html.erb +++ b/templates/admonition.html.erb @@ -1,17 +1,9 @@ - class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>"> - - - - - -
- - - - <% - if title? %> -
<%= title %>
<% - end %> - <%= content %> -
- +