mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
feat: add admonitions
This commit is contained in:
rxchi1d
ZhenShuo Leo
@@ -38,6 +38,7 @@
|
||||
--font-weight-extrabold: 800;
|
||||
--tracking-normal: 0em;
|
||||
--leading-snug: 1.375;
|
||||
--leading-relaxed: 1.625;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
@@ -984,6 +985,9 @@
|
||||
.ml-2 {
|
||||
margin-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -1088,6 +1092,9 @@
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-4 {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1166,6 +1173,9 @@
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-4 {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1317,6 +1327,9 @@
|
||||
.scale-\[1\.02\] {
|
||||
scale: 1.02;
|
||||
}
|
||||
.-rotate-90 {
|
||||
rotate: calc(90deg * -1);
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
@@ -1372,6 +1385,9 @@
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1548,6 +1564,10 @@
|
||||
border-bottom-style: var(--tw-border-style);
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.border-l-4 {
|
||||
border-left-style: var(--tw-border-style);
|
||||
border-left-width: 4px;
|
||||
}
|
||||
.border-dotted {
|
||||
--tw-border-style: dotted;
|
||||
border-style: dotted;
|
||||
@@ -1949,6 +1969,14 @@
|
||||
--tw-leading: 1.6;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.leading-relaxed {
|
||||
--tw-leading: var(--leading-relaxed);
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
.leading-snug {
|
||||
--tw-leading: var(--leading-snug);
|
||||
line-height: var(--leading-snug);
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
@@ -1996,6 +2024,12 @@
|
||||
.\!text-neutral {
|
||||
color: rgba(var(--color-neutral), 1) !important;
|
||||
}
|
||||
.text-current {
|
||||
color: currentcolor;
|
||||
}
|
||||
.text-inherit {
|
||||
color: inherit;
|
||||
}
|
||||
.text-neutral-50 {
|
||||
color: rgba(var(--color-neutral-50), 1);
|
||||
}
|
||||
@@ -2135,6 +2169,10 @@
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -2268,6 +2306,11 @@
|
||||
.scrollbar-track-neutral-200 {
|
||||
--scrollbar-track: oklch(92.2% 0 0);
|
||||
}
|
||||
.group-open\:rotate-0 {
|
||||
&:is(:where(.group):is([open], :popover-open, :open) *) {
|
||||
rotate: 0deg;
|
||||
}
|
||||
}
|
||||
.group-hover\:opacity-100 {
|
||||
&:is(:where(.group):hover *) {
|
||||
@media (hover: hover) {
|
||||
@@ -2358,6 +2401,20 @@
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
.marker\:hidden {
|
||||
& *::marker {
|
||||
display: none;
|
||||
}
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
& *::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.before\:absolute {
|
||||
&::before {
|
||||
content: var(--tw-content);
|
||||
@@ -3278,11 +3335,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.print\:block {
|
||||
@media print {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.print\:hidden {
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.print\:break-inside-avoid {
|
||||
@media print {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-details-marker\]\:hidden {
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.prose .chroma {
|
||||
@@ -3522,6 +3594,174 @@ body.zen-mode-enable {
|
||||
.dark .ios-toggle::after {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
@layer components {
|
||||
:root {
|
||||
--adm-note-border: oklch(62.3% 0.214 259.815);
|
||||
--adm-note-bg: oklch(97% 0.014 254.604);
|
||||
--adm-note-text: oklch(37.9% 0.146 265.522);
|
||||
--adm-tip-border: oklch(70.4% 0.14 182.503);
|
||||
--adm-tip-bg: oklch(98.4% 0.014 180.72);
|
||||
--adm-tip-text: oklch(38.6% 0.063 188.416);
|
||||
--adm-important-border: oklch(62.7% 0.265 303.9);
|
||||
--adm-important-bg: oklch(97.7% 0.014 308.299);
|
||||
--adm-important-text: oklch(38.1% 0.176 304.987);
|
||||
--adm-warning-border: oklch(70.5% 0.213 47.604);
|
||||
--adm-warning-bg: oklch(98% 0.016 73.684);
|
||||
--adm-warning-text: oklch(40.8% 0.123 38.172);
|
||||
--adm-caution-border: oklch(63.7% 0.237 25.331);
|
||||
--adm-caution-bg: oklch(97.1% 0.013 17.38);
|
||||
--adm-caution-text: oklch(39.6% 0.141 25.723);
|
||||
--adm-abstract-border: oklch(71.5% 0.143 215.221);
|
||||
--adm-abstract-bg: oklch(98.4% 0.019 200.873);
|
||||
--adm-abstract-text: oklch(39.8% 0.07 227.392);
|
||||
--adm-info-border: oklch(68.5% 0.169 237.323);
|
||||
--adm-info-bg: oklch(97.7% 0.013 236.62);
|
||||
--adm-info-text: oklch(39.1% 0.09 240.876);
|
||||
--adm-todo-border: oklch(55.4% 0.046 257.417);
|
||||
--adm-todo-bg: oklch(98.4% 0.003 247.858);
|
||||
--adm-todo-text: oklch(27.9% 0.041 260.031);
|
||||
--adm-success-border: oklch(72.3% 0.219 149.579);
|
||||
--adm-success-bg: oklch(98.2% 0.018 155.826);
|
||||
--adm-success-text: oklch(39.3% 0.095 152.535);
|
||||
--adm-question-border: oklch(76.9% 0.188 70.08);
|
||||
--adm-question-bg: oklch(98.7% 0.022 95.277);
|
||||
--adm-question-text: oklch(41.4% 0.112 45.904);
|
||||
--adm-failure-border: oklch(65.6% 0.241 354.308);
|
||||
--adm-failure-bg: oklch(97.1% 0.014 343.198);
|
||||
--adm-failure-text: oklch(40.8% 0.153 2.432);
|
||||
--adm-danger-border: oklch(63.7% 0.237 25.331);
|
||||
--adm-danger-bg: oklch(97.1% 0.013 17.38);
|
||||
--adm-danger-text: oklch(39.6% 0.141 25.723);
|
||||
--adm-bug-border: oklch(64.5% 0.246 16.439);
|
||||
--adm-bug-bg: oklch(96.9% 0.015 12.422);
|
||||
--adm-bug-text: oklch(41% 0.159 10.272);
|
||||
--adm-example-border: oklch(55.8% 0.288 302.321);
|
||||
--adm-example-bg: oklch(97.7% 0.014 308.299);
|
||||
--adm-example-text: oklch(38.1% 0.176 304.987);
|
||||
--adm-quote-border: oklch(55.1% 0.027 264.364);
|
||||
--adm-quote-bg: oklch(98.5% 0.002 247.839);
|
||||
--adm-quote-text: oklch(27.8% 0.033 256.848);
|
||||
}
|
||||
html.dark {
|
||||
--adm-note-bg: color-mix(in oklab, oklch(37.9% 0.146 265.522) 60%, transparent);
|
||||
--adm-note-text: oklch(93.2% 0.032 255.585);
|
||||
--adm-tip-bg: color-mix(in oklab, oklch(38.6% 0.063 188.416) 60%, transparent);
|
||||
--adm-tip-text: oklch(95.3% 0.051 180.801);
|
||||
--adm-important-bg: color-mix(in oklab, oklch(38.1% 0.176 304.987) 60%, transparent);
|
||||
--adm-important-text: oklch(94.6% 0.033 307.174);
|
||||
--adm-warning-bg: color-mix(in oklab, oklch(40.8% 0.123 38.172) 60%, transparent);
|
||||
--adm-warning-text: oklch(95.4% 0.038 75.164);
|
||||
--adm-caution-bg: color-mix(in oklab, oklch(39.6% 0.141 25.723) 60%, transparent);
|
||||
--adm-caution-text: oklch(93.6% 0.032 17.717);
|
||||
--adm-abstract-bg: color-mix(in oklab, oklch(39.8% 0.07 227.392) 60%, transparent);
|
||||
--adm-abstract-text: oklch(95.6% 0.045 203.388);
|
||||
--adm-info-bg: color-mix(in oklab, oklch(39.1% 0.09 240.876) 60%, transparent);
|
||||
--adm-info-text: oklch(95.1% 0.026 236.824);
|
||||
--adm-todo-bg: oklch(27.9% 0.041 260.031);
|
||||
--adm-todo-text: oklch(96.8% 0.007 247.896);
|
||||
--adm-success-bg: color-mix(in oklab, oklch(39.3% 0.095 152.535) 60%, transparent);
|
||||
--adm-success-text: oklch(96.2% 0.044 156.743);
|
||||
--adm-question-bg: color-mix(in oklab, oklch(41.4% 0.112 45.904) 60%, transparent);
|
||||
--adm-question-text: oklch(96.2% 0.059 95.617);
|
||||
--adm-failure-bg: color-mix(in oklab, oklch(40.8% 0.153 2.432) 60%, transparent);
|
||||
--adm-failure-text: oklch(94.8% 0.028 342.258);
|
||||
--adm-danger-bg: color-mix(in oklab, oklch(39.6% 0.141 25.723) 60%, transparent);
|
||||
--adm-danger-text: oklch(93.6% 0.032 17.717);
|
||||
--adm-bug-bg: color-mix(in oklab, oklch(41% 0.159 10.272) 60%, transparent);
|
||||
--adm-bug-text: oklch(94.1% 0.03 12.58);
|
||||
--adm-example-bg: color-mix(in oklab, oklch(38.1% 0.176 304.987) 60%, transparent);
|
||||
--adm-example-text: oklch(94.6% 0.033 307.174);
|
||||
--adm-quote-bg: color-mix(in oklab, oklch(21% 0.034 264.665) 60%, transparent);
|
||||
--adm-quote-text: oklch(96.7% 0.003 264.542);
|
||||
}
|
||||
.admonition .admonition-content > * {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
.admonition .admonition-content > * + * {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
}
|
||||
.admonition {
|
||||
margin-block: calc(var(--spacing) * 3);
|
||||
}
|
||||
.prose .admonition + * {
|
||||
margin-top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.admonition[data-type="note"] {
|
||||
border-color: var(--adm-note-border);
|
||||
background-color: var(--adm-note-bg);
|
||||
color: var(--adm-note-text);
|
||||
}
|
||||
.admonition[data-type="tip"] {
|
||||
border-color: var(--adm-tip-border);
|
||||
background-color: var(--adm-tip-bg);
|
||||
color: var(--adm-tip-text);
|
||||
}
|
||||
.admonition[data-type="important"] {
|
||||
border-color: var(--adm-important-border);
|
||||
background-color: var(--adm-important-bg);
|
||||
color: var(--adm-important-text);
|
||||
}
|
||||
.admonition[data-type="warning"] {
|
||||
border-color: var(--adm-warning-border);
|
||||
background-color: var(--adm-warning-bg);
|
||||
color: var(--adm-warning-text);
|
||||
}
|
||||
.admonition[data-type="caution"] {
|
||||
border-color: var(--adm-caution-border);
|
||||
background-color: var(--adm-caution-bg);
|
||||
color: var(--adm-caution-text);
|
||||
}
|
||||
.admonition[data-type="abstract"] {
|
||||
border-color: var(--adm-abstract-border);
|
||||
background-color: var(--adm-abstract-bg);
|
||||
color: var(--adm-abstract-text);
|
||||
}
|
||||
.admonition[data-type="info"] {
|
||||
border-color: var(--adm-info-border);
|
||||
background-color: var(--adm-info-bg);
|
||||
color: var(--adm-info-text);
|
||||
}
|
||||
.admonition[data-type="todo"] {
|
||||
border-color: var(--adm-todo-border);
|
||||
background-color: var(--adm-todo-bg);
|
||||
color: var(--adm-todo-text);
|
||||
}
|
||||
.admonition[data-type="success"] {
|
||||
border-color: var(--adm-success-border);
|
||||
background-color: var(--adm-success-bg);
|
||||
color: var(--adm-success-text);
|
||||
}
|
||||
.admonition[data-type="question"] {
|
||||
border-color: var(--adm-question-border);
|
||||
background-color: var(--adm-question-bg);
|
||||
color: var(--adm-question-text);
|
||||
}
|
||||
.admonition[data-type="failure"] {
|
||||
border-color: var(--adm-failure-border);
|
||||
background-color: var(--adm-failure-bg);
|
||||
color: var(--adm-failure-text);
|
||||
}
|
||||
.admonition[data-type="danger"] {
|
||||
border-color: var(--adm-danger-border);
|
||||
background-color: var(--adm-danger-bg);
|
||||
color: var(--adm-danger-text);
|
||||
}
|
||||
.admonition[data-type="bug"] {
|
||||
border-color: var(--adm-bug-border);
|
||||
background-color: var(--adm-bug-bg);
|
||||
color: var(--adm-bug-text);
|
||||
}
|
||||
.admonition[data-type="example"] {
|
||||
border-color: var(--adm-example-border);
|
||||
background-color: var(--adm-example-bg);
|
||||
color: var(--adm-example-text);
|
||||
}
|
||||
.admonition[data-type="quote"] {
|
||||
border-color: var(--adm-quote-border);
|
||||
background-color: var(--adm-quote-bg);
|
||||
color: var(--adm-quote-text);
|
||||
}
|
||||
}
|
||||
body a, body button {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
|
||||
225
assets/css/components/admonition.css
Normal file
225
assets/css/components/admonition.css
Normal file
@@ -0,0 +1,225 @@
|
||||
/*
|
||||
* Derived from KKKZOZ/hugo-admonitions (https://github.com/KKKZOZ/hugo-admonitions/)
|
||||
* Copyright (c) 2024 KKKZOZ, Licensed under MIT License
|
||||
*/
|
||||
:root {
|
||||
/* GitHub Core Types (5) */
|
||||
--adm-note-border: theme('colors.blue.500');
|
||||
--adm-note-bg: theme('colors.blue.50');
|
||||
--adm-note-text: theme('colors.blue.900');
|
||||
|
||||
--adm-tip-border: theme('colors.teal.500');
|
||||
--adm-tip-bg: theme('colors.teal.50');
|
||||
--adm-tip-text: theme('colors.teal.900');
|
||||
|
||||
--adm-important-border: theme('colors.purple.500');
|
||||
--adm-important-bg: theme('colors.purple.50');
|
||||
--adm-important-text: theme('colors.purple.900');
|
||||
|
||||
--adm-warning-border: theme('colors.orange.500');
|
||||
--adm-warning-bg: theme('colors.orange.50');
|
||||
--adm-warning-text: theme('colors.orange.900');
|
||||
|
||||
--adm-caution-border: theme('colors.red.500');
|
||||
--adm-caution-bg: theme('colors.red.50');
|
||||
--adm-caution-text: theme('colors.red.900');
|
||||
|
||||
/* Extended Types (10) */
|
||||
--adm-abstract-border: theme('colors.cyan.500');
|
||||
--adm-abstract-bg: theme('colors.cyan.50');
|
||||
--adm-abstract-text: theme('colors.cyan.900');
|
||||
|
||||
--adm-info-border: theme('colors.sky.500');
|
||||
--adm-info-bg: theme('colors.sky.50');
|
||||
--adm-info-text: theme('colors.sky.900');
|
||||
|
||||
--adm-todo-border: theme('colors.slate.500');
|
||||
--adm-todo-bg: theme('colors.slate.50');
|
||||
--adm-todo-text: theme('colors.slate.800');
|
||||
|
||||
--adm-success-border: theme('colors.green.500');
|
||||
--adm-success-bg: theme('colors.green.50');
|
||||
--adm-success-text: theme('colors.green.900');
|
||||
|
||||
--adm-question-border: theme('colors.amber.500');
|
||||
--adm-question-bg: theme('colors.amber.50');
|
||||
--adm-question-text: theme('colors.amber.900');
|
||||
|
||||
--adm-failure-border: theme('colors.pink.500');
|
||||
--adm-failure-bg: theme('colors.pink.50');
|
||||
--adm-failure-text: theme('colors.pink.900');
|
||||
|
||||
--adm-danger-border: theme('colors.red.500');
|
||||
--adm-danger-bg: theme('colors.red.50');
|
||||
--adm-danger-text: theme('colors.red.900');
|
||||
|
||||
--adm-bug-border: theme('colors.rose.500');
|
||||
--adm-bug-bg: theme('colors.rose.50');
|
||||
--adm-bug-text: theme('colors.rose.900');
|
||||
|
||||
--adm-example-border: theme('colors.purple.600');
|
||||
--adm-example-bg: theme('colors.purple.50');
|
||||
--adm-example-text: theme('colors.purple.900');
|
||||
|
||||
--adm-quote-border: theme('colors.gray.500');
|
||||
--adm-quote-bg: theme('colors.gray.50');
|
||||
--adm-quote-text: theme('colors.gray.800');
|
||||
}
|
||||
|
||||
/* CSS Custom Properties - Dark Mode (30 variables: 15 types × 2 properties) */
|
||||
html.dark {
|
||||
/* GitHub Core Types (5) */
|
||||
--adm-note-bg: theme('colors.blue.900 / 0.6');
|
||||
--adm-note-text: theme('colors.blue.100');
|
||||
|
||||
--adm-tip-bg: theme('colors.teal.900 / 0.6');
|
||||
--adm-tip-text: theme('colors.teal.100');
|
||||
|
||||
--adm-important-bg: theme('colors.purple.900 / 0.6');
|
||||
--adm-important-text: theme('colors.purple.100');
|
||||
|
||||
--adm-warning-bg: theme('colors.orange.900 / 0.6');
|
||||
--adm-warning-text: theme('colors.orange.100');
|
||||
|
||||
--adm-caution-bg: theme('colors.red.900 / 0.6');
|
||||
--adm-caution-text: theme('colors.red.100');
|
||||
|
||||
/* Extended Types (10) */
|
||||
--adm-abstract-bg: theme('colors.cyan.900 / 0.6');
|
||||
--adm-abstract-text: theme('colors.cyan.100');
|
||||
|
||||
--adm-info-bg: theme('colors.sky.900 / 0.6');
|
||||
--adm-info-text: theme('colors.sky.100');
|
||||
|
||||
--adm-todo-bg: theme('colors.slate.800');
|
||||
--adm-todo-text: theme('colors.slate.100');
|
||||
|
||||
--adm-success-bg: theme('colors.green.900 / 0.6');
|
||||
--adm-success-text: theme('colors.green.100');
|
||||
|
||||
--adm-question-bg: theme('colors.amber.900 / 0.6');
|
||||
--adm-question-text: theme('colors.amber.100');
|
||||
|
||||
--adm-failure-bg: theme('colors.pink.900 / 0.6');
|
||||
--adm-failure-text: theme('colors.pink.100');
|
||||
|
||||
--adm-danger-bg: theme('colors.red.900 / 0.6');
|
||||
--adm-danger-text: theme('colors.red.100');
|
||||
|
||||
--adm-bug-bg: theme('colors.rose.900 / 0.6');
|
||||
--adm-bug-text: theme('colors.rose.100');
|
||||
|
||||
--adm-example-bg: theme('colors.purple.900 / 0.6');
|
||||
--adm-example-text: theme('colors.purple.100');
|
||||
|
||||
--adm-quote-bg: theme('colors.gray.900 / 0.6');
|
||||
--adm-quote-text: theme('colors.gray.100');
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
.admonition .admonition-content > * {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
.admonition .admonition-content > * + * {
|
||||
@apply mt-3;
|
||||
}
|
||||
|
||||
.admonition {
|
||||
@apply my-3;
|
||||
}
|
||||
|
||||
.prose .admonition + * {
|
||||
@apply mt-0;
|
||||
}
|
||||
|
||||
/* Type-Specific Palettes Using CSS Variables */
|
||||
.admonition[data-type="note"] {
|
||||
border-color: var(--adm-note-border);
|
||||
background-color: var(--adm-note-bg);
|
||||
color: var(--adm-note-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="tip"] {
|
||||
border-color: var(--adm-tip-border);
|
||||
background-color: var(--adm-tip-bg);
|
||||
color: var(--adm-tip-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="important"] {
|
||||
border-color: var(--adm-important-border);
|
||||
background-color: var(--adm-important-bg);
|
||||
color: var(--adm-important-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="warning"] {
|
||||
border-color: var(--adm-warning-border);
|
||||
background-color: var(--adm-warning-bg);
|
||||
color: var(--adm-warning-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="caution"] {
|
||||
border-color: var(--adm-caution-border);
|
||||
background-color: var(--adm-caution-bg);
|
||||
color: var(--adm-caution-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="abstract"] {
|
||||
border-color: var(--adm-abstract-border);
|
||||
background-color: var(--adm-abstract-bg);
|
||||
color: var(--adm-abstract-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="info"] {
|
||||
border-color: var(--adm-info-border);
|
||||
background-color: var(--adm-info-bg);
|
||||
color: var(--adm-info-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="todo"] {
|
||||
border-color: var(--adm-todo-border);
|
||||
background-color: var(--adm-todo-bg);
|
||||
color: var(--adm-todo-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="success"] {
|
||||
border-color: var(--adm-success-border);
|
||||
background-color: var(--adm-success-bg);
|
||||
color: var(--adm-success-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="question"] {
|
||||
border-color: var(--adm-question-border);
|
||||
background-color: var(--adm-question-bg);
|
||||
color: var(--adm-question-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="failure"] {
|
||||
border-color: var(--adm-failure-border);
|
||||
background-color: var(--adm-failure-bg);
|
||||
color: var(--adm-failure-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="danger"] {
|
||||
border-color: var(--adm-danger-border);
|
||||
background-color: var(--adm-danger-bg);
|
||||
color: var(--adm-danger-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="bug"] {
|
||||
border-color: var(--adm-bug-border);
|
||||
background-color: var(--adm-bug-bg);
|
||||
color: var(--adm-bug-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="example"] {
|
||||
border-color: var(--adm-example-border);
|
||||
background-color: var(--adm-example-bg);
|
||||
color: var(--adm-example-text);
|
||||
}
|
||||
|
||||
.admonition[data-type="quote"] {
|
||||
border-color: var(--adm-quote-border);
|
||||
background-color: var(--adm-quote-bg);
|
||||
color: var(--adm-quote-text);
|
||||
}
|
||||
@@ -6,6 +6,7 @@
|
||||
@import "./components/chroma.css" layer(utilities);
|
||||
@import "./components/zen-mode.css";
|
||||
@import "./components/a11y.css";
|
||||
@import "./components/admonition.css" layer(components);
|
||||
|
||||
body a,
|
||||
body button {
|
||||
|
||||
3
assets/icons/circle-question.svg
Normal file
3
assets/icons/circle-question.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 538 B |
3
assets/icons/file-lines.svg
Normal file
3
assets/icons/file-lines.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path fill="currentColor" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
3
assets/icons/list-check.svg
Normal file
3
assets/icons/list-check.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 787 B |
3
assets/icons/list-ol.svg
Normal file
3
assets/icons/list-ol.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 823 B |
3
assets/icons/quote-left.svg
Normal file
3
assets/icons/quote-left.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 451 B |
17
assets/js/print-support.js
Normal file
17
assets/js/print-support.js
Normal file
@@ -0,0 +1,17 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
var closedDetails = [];
|
||||
window.addEventListener('beforeprint', function() {
|
||||
var allDetails = document.querySelectorAll('details:not([open])');
|
||||
for (var i = 0; i < allDetails.length; i++) {
|
||||
allDetails[i].open = true;
|
||||
closedDetails.push(allDetails[i]);
|
||||
}
|
||||
});
|
||||
window.addEventListener('afterprint', function() {
|
||||
for (var i = 0; i < closedDetails.length; i++) {
|
||||
closedDetails[i].open = false;
|
||||
}
|
||||
closedDetails = [];
|
||||
});
|
||||
})();
|
||||
@@ -85,3 +85,5 @@ shortcode:
|
||||
|
||||
recent:
|
||||
show_more: "Show More"
|
||||
|
||||
|
||||
|
||||
17
i18n/it.yaml
17
i18n/it.yaml
@@ -72,3 +72,20 @@ shortcode:
|
||||
|
||||
recent:
|
||||
show_more: "Mostra di Più"
|
||||
|
||||
admonition:
|
||||
note: "Nota"
|
||||
abstract: "Sommario"
|
||||
info: "Info"
|
||||
todo: "Da fare"
|
||||
tip: "Suggerimento"
|
||||
important: "Importante"
|
||||
success: "Successo"
|
||||
question: "Domanda"
|
||||
warning: "Avviso"
|
||||
caution: "Attenzione"
|
||||
failure: "Fallimento"
|
||||
danger: "Pericolo"
|
||||
bug: "Bug"
|
||||
example: "Esempio"
|
||||
quote: "Citazione"
|
||||
|
||||
17
i18n/ja.yaml
17
i18n/ja.yaml
@@ -84,3 +84,20 @@ shortcode:
|
||||
|
||||
recent:
|
||||
show_more: "もっと見る"
|
||||
|
||||
admonition:
|
||||
note: "ノート"
|
||||
abstract: "概要"
|
||||
info: "情報"
|
||||
todo: "TODO"
|
||||
tip: "ヒント"
|
||||
important: "重要"
|
||||
success: "成功"
|
||||
question: "質問"
|
||||
warning: "警告"
|
||||
caution: "注意"
|
||||
failure: "失敗"
|
||||
danger: "危険"
|
||||
bug: "バグ"
|
||||
example: "例"
|
||||
quote: "引用"
|
||||
|
||||
@@ -84,3 +84,20 @@ shortcode:
|
||||
|
||||
recent:
|
||||
show_more: "显示更多"
|
||||
|
||||
admonition:
|
||||
note: "笔记"
|
||||
abstract: "摘要"
|
||||
info: "信息"
|
||||
todo: "待办"
|
||||
tip: "提示"
|
||||
important: "重要"
|
||||
success: "成功"
|
||||
question: "问题"
|
||||
warning: "警告"
|
||||
caution: "注意"
|
||||
failure: "失败"
|
||||
danger: "危险"
|
||||
bug: "错误"
|
||||
example: "示例"
|
||||
quote: "引用"
|
||||
|
||||
107
layouts/_default/_markup/render-blockquote.html
Normal file
107
layouts/_default/_markup/render-blockquote.html
Normal file
@@ -0,0 +1,107 @@
|
||||
{{/* Admonition Render Hook */}}
|
||||
{{- if eq .Type "alert" -}}
|
||||
{{- $typeMap := dict
|
||||
"summary" "abstract"
|
||||
"tldr" "abstract"
|
||||
"hint" "tip"
|
||||
"check" "success"
|
||||
"done" "success"
|
||||
"help" "question"
|
||||
"faq" "question"
|
||||
"attention" "warning"
|
||||
"fail" "failure"
|
||||
"missing" "failure"
|
||||
"error" "danger"
|
||||
"cite" "quote"
|
||||
-}}
|
||||
|
||||
{{- $iconMap := dict
|
||||
"note" "circle-info"
|
||||
"abstract" "file-lines"
|
||||
"info" "circle-info"
|
||||
"todo" "list-check"
|
||||
"tip" "lightbulb"
|
||||
"important" "star"
|
||||
"success" "check"
|
||||
"question" "circle-question"
|
||||
"warning" "triangle-exclamation"
|
||||
"caution" "triangle-exclamation"
|
||||
"failure" "xmark"
|
||||
"danger" "fire"
|
||||
"bug" "bug"
|
||||
"example" "list-ol"
|
||||
"quote" "quote-left"
|
||||
-}}
|
||||
|
||||
{{/* Resolve type aliases and validate */}}
|
||||
{{- $rawType := .AlertType | lower -}}
|
||||
{{- $normalizedType := index $typeMap $rawType | default $rawType -}}
|
||||
|
||||
{{- $iconName := index $iconMap $normalizedType | default "circle-info" -}}
|
||||
|
||||
{{/* Resolve title with i18n fallback */}}
|
||||
{{- $title := .AlertTitle -}}
|
||||
{{- if not $title -}}
|
||||
{{- $i18nKey := printf "admonition.%s" $normalizedType -}}
|
||||
{{- $i18nTitle := i18n $i18nKey -}}
|
||||
{{- if and $i18nTitle (ne $i18nTitle $i18nKey) -}}
|
||||
{{- $title = $i18nTitle -}}
|
||||
{{- else -}}
|
||||
{{- $title = $normalizedType | title -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{/* Handle collapsible state */}}
|
||||
{{- $sign := .AlertSign | default "" -}}
|
||||
{{- $isCollapsible := or (eq $sign "+") (eq $sign "-") -}}
|
||||
{{- $isDefaultCollapsed := eq $sign "-" -}}
|
||||
|
||||
{{- $containerClass := "admonition relative overflow-hidden rounded-lg border-l-4 px-4 py-3 shadow-sm print:break-inside-avoid" -}}
|
||||
{{- $headerClass := "flex items-center gap-2 font-semibold text-inherit" -}}
|
||||
{{- $contentClass := "admonition-content mt-3 text-base leading-relaxed text-inherit" -}}
|
||||
|
||||
{{- if $isCollapsible -}}
|
||||
<details
|
||||
class="{{ $containerClass }} group print:block"
|
||||
data-type="{{ $normalizedType }}"
|
||||
{{ if not $isDefaultCollapsed }}open{{ end }}>
|
||||
<summary
|
||||
class="{{ $headerClass }} cursor-pointer pr-2 list-none marker:hidden [&::-webkit-details-marker]:hidden">
|
||||
<div class="flex h-5 w-5 shrink-0 items-center justify-center text-current">
|
||||
{{- partial "icon.html" $iconName -}}
|
||||
</div>
|
||||
<div class="flex grow items-center leading-snug">
|
||||
{{ $title }}
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto flex h-6 w-6 items-center justify-center rounded-md text-current transition-transform ease-in-out -rotate-90 group-open:rotate-0 print:hidden">
|
||||
<div class="h-4 w-4">
|
||||
{{- partial "icon.html" "chevron-down" -}}
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="{{ $contentClass }}">
|
||||
{{- .Text | safeHTML -}}
|
||||
</div>
|
||||
</details>
|
||||
{{- else -}}
|
||||
<div class="{{ $containerClass }}" data-type="{{ $normalizedType }}">
|
||||
<div class="{{ $headerClass }}">
|
||||
<div class="flex h-5 w-5 shrink-0 items-center justify-center text-current">
|
||||
{{- partial "icon.html" $iconName -}}
|
||||
</div>
|
||||
<div class="flex grow items-center leading-snug">
|
||||
{{ $title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="{{ $contentClass }}">
|
||||
{{- .Text | safeHTML -}}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{- else -}}
|
||||
<blockquote {{ with .Attributes }}{{ . | safeHTMLAttr }}{{ end }}>
|
||||
{{- .Text | safeHTML -}}
|
||||
</blockquote>
|
||||
{{- end -}}
|
||||
@@ -8,10 +8,10 @@
|
||||
{{- $section := .Site.GetPage "section" .Section -}}
|
||||
{{- if .Date -}}
|
||||
{{- $index = $index | append (dict
|
||||
"date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long"))
|
||||
"date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long"))
|
||||
"title" (.Title | emojify | safeJS)
|
||||
"section" ($section.Title | emojify | safeJS)
|
||||
"summary" (.Summary | safeJS)
|
||||
"summary" (.Summary | plainify | htmlUnescape | safeJS)
|
||||
"content" (.Plain | safeJS)
|
||||
"permalink" .RelPermalink
|
||||
"externalUrl" .Params.externalUrl
|
||||
@@ -21,7 +21,7 @@
|
||||
{{- $index = $index | append (dict
|
||||
"title" (.Title | emojify | safeJS)
|
||||
"section" ($section.Title | emojify | safeJS)
|
||||
"summary" (.Summary | safeJS)
|
||||
"summary" (.Summary | plainify | htmlUnescape | safeJS)
|
||||
"content" (.Plain | safeJS)
|
||||
"permalink" .RelPermalink
|
||||
"externalUrl" .Params.externalUrl
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
|
||||
{{ with .Site.Params.Author.email }}<author>{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}</author>{{end}}
|
||||
<guid>{{ .Permalink }}</guid>
|
||||
<description>{{ .Summary | html }}</description>
|
||||
<description>{{ .Summary | plainify | htmlUnescape | safeHTML }}</description>
|
||||
{{ range ( where .Site.RegularPages ".RelPermalink" .RelPermalink | first 1 ) }}
|
||||
{{- $images := .Resources.ByType "image" -}}
|
||||
{{- $featured := $images.GetMatch "*feature*" -}}
|
||||
|
||||
@@ -157,6 +157,7 @@
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/mobilemenu.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
|
||||
{{ if $jsResources }}
|
||||
{{ $bundleJS := $jsResources | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint $alg }}
|
||||
<script
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
"name": "{{ .Title | safeJS }}",
|
||||
"headline": "{{ .Title | safeJS }}",
|
||||
{{ with .Description }}"description": "{{ . | safeJS }}",{{ end }}
|
||||
{{ with .Summary }}"abstract": "{{ . | safeJS }}",{{ end }}
|
||||
{{ with .Summary }}"abstract": "{{ . | plainify | htmlUnescape | safeJS }}",{{ end }}
|
||||
{{ with .Site.LanguageCode }}"inLanguage": "{{ . }}",{{ end }}
|
||||
"url" : {{ .Permalink }},
|
||||
"author" : {
|
||||
|
||||
Reference in New Issue
Block a user