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

34
assets/scss/asciidoctor.scss
View File

@ -42,6 +42,32 @@
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;
@ -60,6 +86,7 @@ p.tableblock {
}
*:not(.listingblock, .literalblock, .openblock) {
>.attribution,
>.title {
background: var(--side-accent-color);
@ -157,13 +184,11 @@ p.tableblock {
--color2: var(--base0C);
--threshold1: 9px;
--threshold2: 24px;
background: repeating-linear-gradient(
45deg,
background: repeating-linear-gradient(45deg,
var(--color1) 0px,
var(--color1) var(--threshold1),
var(--color2) var(--threshold1),
var(--color2) var(--threshold2)
);
var(--color2) var(--threshold2));
}
}
}
@ -176,6 +201,7 @@ p.tableblock {
width: 100%;
tbody {
tr+tr,
tr:first-child {
border-top: unset;

16
templates/admonition.html.erb
View File

@ -1,17 +1,9 @@
<div<%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>">
<table>
<tr>
<td class="icon" title="<%= @caption %>">
<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>
</td>
<td class="content"><%
if title? %>
<div class="title"><%= title %></div><%
end %>
<div class="content">
<% if title? %><div class="title"><%= title %></div><% end %>
<%= content %>
</td>
</tr>
</table>
</div>
</aside>