foodogsquared/website
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/website.git synced 2025-01-30 22:57:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update admonition block and its styling

Browse Source
This commit is contained in:
Gabriel Arazas 2024-10-04 21:11:14 +08:00
parent 923d378aef
commit 81acd5fbcc
No known key found for this signature in database
GPG Key ID: 62104B43D00AA360
2 changed files with 244 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

444
assets/scss/asciidoctor.scss
View File

@ -2,302 +2,328 @@
@import "roles"; @import "roles";
:root { :root {
--side-accent-color: var(--base05); --side-accent-color: var(--base05);
--side-accent-color-text: var(--base00); --side-accent-color-text: var(--base00);
--border-style: 1px var(--side-accent-color) solid; --border-style: 1px var(--side-accent-color) solid;
--mark-border-style: 0.5em var(--side-accent-color) solid; --mark-border-style: 0.5em var(--side-accent-color) solid;
} }
.anchor { .anchor {
&::before { &::before {
content: "§"; content: "§";
display: inline-block; display: inline-block;
margin-right: 0.25em; margin-right: 0.25em;
} }
} }
.conum { .conum {
color: var(--base05) !important; color: var(--base05) !important;
background-color: var(--base03); background-color: var(--base03);
user-select: none; user-select: none;
} }
.quoteblock { .quoteblock {
border: var(--border-style); border: var(--border-style);
border-left: var(--mark-border-style); border-left: var(--mark-border-style);
blockquote { blockquote {
margin: auto; margin: auto;
padding: 0.5em; padding: 0.5em;
max-height: var(--code-block-size); max-height: var(--code-block-size);
overflow: auto; overflow: auto;
& > :first-child { &> :first-child {
margin-top: 0; margin-top: 0;
}
} }
}
} }
#footnotes > :not(hr) { #footnotes> :not(hr) {
margin-top: 1rem; 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"], [class$="block"],
:where(.admonitionblock, .dialogblock, .listingblock, .literalblock) { :where(.admonitionblock, .dialogblock, .listingblock, .literalblock) {
margin: 1rem 0 0; margin: 1rem 0 0;
.title > code { .title>code {
background: unset; background: unset;
} }
.content > :first-child { .content> :first-child {
margin-top: 0; margin-top: 0;
} }
} }
p.tableblock { p.tableblock {
margin: unset; margin: unset;
} }
*:not(.listingblock, .literalblock, .openblock) { *: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 { >.attribution,
border: var(--border-style); >.title {
padding: 0.5em; 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 { .listingblock {
position: relative; position: relative;
> .title { >.title {
background: var(--side-accent-color); background: var(--side-accent-color);
color: var(--side-accent-color-text); color: var(--side-accent-color-text);
font-size: 0.9em; font-size: 0.9em;
padding: 0.5em; padding: 0.5em;
word-wrap: break-word; word-wrap: break-word;
code { code {
background: unset; background: unset;
}
} }
}
> .content pre { >.content pre {
margin-top: unset; margin-top: unset;
} }
} }
.literalblock { .literalblock {
position: relative; position: relative;
> .content pre { >.content pre {
background: var(--base00); background: var(--base00);
font-size: 0.9em; font-size: 0.9em;
} }
} }
.literalblock, .literalblock,
.listingblock { .listingblock {
> .listingblock__btn-row { >.listingblock__btn-row {
$gap: 0.3em; $gap: 0.3em;
display: flex; display: flex;
gap: $gap; gap: $gap;
flex-flow: row; flex-flow: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: min-content; width: min-content;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
> button { >button {
background: var(--base01); background: var(--base01);
padding: $gap; padding: $gap;
&:hover { &:hover {
background: var(--selection-color); background: var(--selection-color);
color: var(--base05); color: var(--base05);
} }
&:active { &:active {
background: var(--accent-color); background: var(--accent-color);
color: var(--base06); color: var(--base06);
} }
} }
}
&:fullscreen {
border: unset;
.content > pre {
max-height: 100vh;
border: unset;
} }
.title { &:fullscreen {
display: none; border: unset;
}
> .listingblock__btn-row { .content>pre {
top: 0; max-height: 100vh;
} border: unset;
}
&::backdrop { .title {
--color1: var(--base08); display: none;
--color2: var(--base0C); }
--threshold1: 9px;
--threshold2: 24px; >.listingblock__btn-row {
background: repeating-linear-gradient( top: 0;
45deg, }
var(--color1) 0px,
var(--color1) var(--threshold1), &::backdrop {
var(--color2) var(--threshold1), --color1: var(--base08);
var(--color2) var(--threshold2) --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 { .admonitionblock {
> table { >table {
border: unset; border: unset;
margin: unset; margin: unset;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
tbody { tbody {
tr + tr,
tr:first-child {
border-top: unset;
}
}
}
td.content { tr+tr,
background: var(--base01); tr:first-child {
border: unset; border-top: 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 { td.content {
width: 100%; background: var(--base01);
height: var(--size); 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 { .imageblock {
> .content { >.content {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
> .title { >.title {
text-align: center; text-align: center;
} }
} }
p { p {
margin-bottom: unset; margin-bottom: unset;
} }
.sidebarblock { .sidebarblock {
> .content { >.content {
background: var(--base01); background: var(--base01);
border: unset; border: unset;
padding: var(--vertical-rhythm); padding: var(--vertical-rhythm);
> .title { >.title {
background: unset; background: unset;
color: unset; color: unset;
font-family: var(--header-family); font-family: var(--header-family);
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
padding: unset; padding: unset;
}
} }
}
} }
// Custom Asciidoctor components. // Custom Asciidoctor components.
.dialogblock { .dialogblock {
align-items: center; align-items: center;
border: var(--border-style); border: var(--border-style);
border-left: var(--mark-border-style); border-left: var(--mark-border-style);
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
gap: 1em; gap: 1em;
padding: 0.5em; padding: 0.5em;
max-width: 60ch; max-width: 60ch;
width: fit-content; width: fit-content;
&__avatar { &__avatar {
--size: 4em; --size: 4em;
width: var(--size); width: var(--size);
flex-basis: var(--size); flex-basis: var(--size);
flex-shrink: 0; flex-shrink: 0;
margin: 0; margin: 0;
.imageblock { .imageblock {
margin: 0; margin: 0;
.content { .content {
border: unset; border: unset;
padding: 0; padding: 0;
} }
}
} }
}
&__text { &__text {
display: block; display: block;
margin: 0; margin: 0;
> :first-child { > :first-child {
margin-top: 0; margin-top: 0;
}
} }
}
// Roles/modifiers. // Roles/modifiers.
&.reversed { &.reversed {
flex-direction: row-reverse; flex-direction: row-reverse;
margin-left: auto; margin-left: auto;
border-left: var(--border-style); border-left: var(--border-style);
border-right: var(--mark-border-style); border-right: var(--mark-border-style);
} }
&.full { &.full {
max-width: unset; max-width: unset;
width: unset; width: unset;
} }
} }
@media all and (max-width: 860px) { @media all and (max-width: 860px) {
.imageblock { .imageblock {
> .content { >.content {
width: 100% !important; width: 100% !important;
}
} }
}
} }

26
templates/admonition.html.erb
View File

@ -1,17 +1,9 @@
<div<%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>"> <aside <%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>" data-admonition-type="<%= attr :name %>">
<table> <svg class="icon">
<tr> <use href="<%= icon_uri(attr :name) %>#<%= attr :name %>" alt="<%= @caption %>"></use>
<td class="icon" title="<%= @caption %>"> </svg>
<svg class="icon"> <div class="content">
<use href="<%= icon_uri(attr :name) %>#<%= attr :name %>" alt="<%= @caption %>"></use> <% if title? %><div class="title"><%= title %></div><% end %>
</svg> <%= content %>
</td> </div>
<td class="content"><% </aside>
if title? %>
<div class="title"><%= title %></div><%
end %>
<%= content %>
</td>
</tr>
</table>
</div>