mirror of
https://github.com/foo-dogsquared/website.git
synced 2025-01-30 16:58:00 +00:00
Update admonition block and its styling
This commit is contained in:
parent
923d378aef
commit
81acd5fbcc
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
<div<%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="icon" title="<%= @caption %>">
|
||||
<svg class="icon">
|
||||
<use href="<%= icon_uri(attr :name) %>#<%= attr :name %>" alt="<%= @caption %>"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td class="content"><%
|
||||
if title? %>
|
||||
<div class="title"><%= title %></div><%
|
||||
end %>
|
||||
<%= content %>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<aside <%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>" data-admonition-type="<%= attr :name %>">
|
||||
<svg class="icon">
|
||||
<use href="<%= icon_uri(attr :name) %>#<%= attr :name %>" alt="<%= @caption %>"></use>
|
||||
</svg>
|
||||
<div class="content">
|
||||
<% if title? %><div class="title"><%= title %></div><% end %>
|
||||
<%= content %>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user