Skip to content

Commit 46cf44d

Browse files
Zuhaitz-devZuhaitz-dev
committed
style: restore Zen Garden aesthetic for alerts and code snippets
1 parent 62673e9 commit 46cf44d

3 files changed

Lines changed: 172 additions & 33 deletions

File tree

‎site/templates/base.html‎

Lines changed: 133 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -421,34 +421,154 @@
421421
color: var(--muted);
422422
}
423423

424-
.doc-content code {
425-
background: #f1f5f9;
426-
padding: 3px 6px;
424+
/* ZEN GARDEN ADMONITIONS */
425+
.admonition {
426+
margin: 2rem 0;
427+
padding: 1.25rem 1.75rem;
428+
border-radius: 12px;
427429
border: 1px solid var(--border);
428-
border-radius: 4px;
429-
font-family: 'JetBrains Mono', monospace;
430-
font-size: 0.8rem;
431-
color: var(--typ);
430+
background-color: var(--surface-alt);
431+
background-image: repeating-radial-gradient(circle at 35px 35px,
432+
transparent 0,
433+
transparent 14px,
434+
rgba(0, 0, 0, 0.015) 14px,
435+
rgba(0, 0, 0, 0.025) 16px);
436+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
437+
font-size: 0.95rem;
438+
color: var(--fg);
439+
line-height: 1.6;
440+
}
441+
442+
.admonition p {
443+
margin: 0.5rem 0 0 0;
432444
}
433445

446+
.admonition-title {
447+
font-weight: 700;
448+
margin-bottom: 0.75rem;
449+
text-transform: uppercase;
450+
font-size: 0.85rem;
451+
letter-spacing: 0.08em;
452+
display: flex;
453+
align-items: center;
454+
gap: 10px;
455+
}
456+
457+
.admonition-note {
458+
background-color: rgba(100, 116, 139, 0.03);
459+
border-color: rgba(100, 116, 139, 0.15);
460+
}
461+
462+
.admonition-note .admonition-title {
463+
color: #475569;
464+
}
465+
466+
.admonition-tip {
467+
background-color: rgba(122, 153, 119, 0.03);
468+
border-color: rgba(122, 153, 119, 0.2);
469+
}
470+
471+
.admonition-tip .admonition-title {
472+
color: #5a7c56;
473+
}
474+
475+
.admonition-warning {
476+
background-color: rgba(217, 119, 87, 0.03);
477+
border-color: rgba(217, 119, 87, 0.2);
478+
}
479+
480+
.admonition-warning .admonition-title {
481+
color: #b05b3f;
482+
}
483+
484+
.admonition-important,
485+
.admonition-caution {
486+
background-color: rgba(180, 83, 83, 0.03);
487+
border-color: rgba(180, 83, 83, 0.2);
488+
}
489+
490+
.admonition-important .admonition-title,
491+
.admonition-caution .admonition-title {
492+
color: #993d3d;
493+
}
494+
495+
[data-theme="dark"] .admonition {
496+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
497+
background-image: repeating-radial-gradient(circle at 35px 35px,
498+
transparent 0,
499+
transparent 14px,
500+
rgba(255, 255, 255, 0.015) 14px,
501+
rgba(255, 255, 255, 0.025) 16px);
502+
}
503+
504+
/* HERO CODE SNIPPETS */
434505
.doc-content pre {
435-
background: #ffffff;
506+
background: #0d0d0c;
436507
padding: 1.5rem;
437-
border: 1px solid var(--border);
438-
border-radius: 8px;
439-
margin-bottom: 2rem;
508+
border: 1px solid rgba(255, 255, 255, 0.1);
509+
border-radius: 12px;
510+
margin-bottom: 2.5rem;
440511
overflow-x: auto;
441512
position: relative;
442-
box-shadow: none;
513+
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
443514
}
444515

445516
.doc-content pre code {
446517
background: transparent;
447518
border: none;
448519
padding: 0;
449-
color: var(--fg);
520+
color: #e2e8f0;
450521
font-size: 0.9rem;
451522
line-height: 1.6;
523+
--kwd: #f97316;
524+
--str: #a3e635;
525+
--typ: #fbbf24;
526+
--fn: #38bdf8;
527+
--num: #fb7185;
528+
--com: #71717a;
529+
--punctuation: #94a3b8;
530+
--variable: #e2e8f0;
531+
}
532+
533+
/* Zola Syntax Highlighting Mapping */
534+
.z-comment {
535+
color: var(--com);
536+
font-style: italic;
537+
}
538+
539+
.z-string {
540+
color: var(--str);
541+
}
542+
543+
.z-keyword {
544+
color: var(--kwd);
545+
font-weight: 600;
546+
}
547+
548+
.z-type {
549+
color: var(--typ);
550+
}
551+
552+
.z-function {
553+
color: var(--fn);
554+
}
555+
556+
.z-number {
557+
color: var(--num);
558+
}
559+
560+
.z-punctuation {
561+
color: var(--punctuation);
562+
}
563+
564+
.z-variable {
565+
color: var(--variable);
566+
}
567+
568+
[data-theme="light"] .doc-content code:not(pre code) {
569+
background: #f1f5f9;
570+
color: #475569;
571+
border: 1px solid var(--border);
452572
}
453573

454574
.doc-content table {
@@ -701,14 +821,6 @@
701821
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
702822
}
703823

704-
[data-theme="dark"] .doc-content code {
705-
background: var(--surface-alt);
706-
}
707-
708-
[data-theme="dark"] .doc-content pre {
709-
background: var(--bg);
710-
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
711-
}
712824

713825
[data-theme="dark"] .doc-content th {
714826
background: #121211;
@@ -725,17 +837,6 @@
725837
[data-theme="dark"] .newsletter-form-footer input[type="email"] {
726838
background: var(--surface-alt);
727839
}
728-
729-
@media (prefers-color-scheme: dark) {
730-
html:not([data-theme="light"]) .doc-content code {
731-
background: var(--surface-alt);
732-
}
733-
734-
html:not([data-theme="light"]) .doc-content pre {
735-
background: var(--bg);
736-
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
737-
}
738-
}
739840
</style>
740841
</head>
741842

‎site/templates/shortcodes/alert.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div class="admonition admonition-{{ type }}">
2+
<div class="admonition-title">
3+
{% if type == "note" %}
4+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
5+
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
6+
<circle cx="12" cy="12" r="10" />
7+
<path d="M12 16v-4" />
8+
<path d="M12 8h.01" />
9+
</svg>
10+
{% elif type == "tip" %}
11+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
12+
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
13+
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" />
14+
<path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" />
15+
</svg>
16+
{% elif type == "warning" %}
17+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
18+
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
19+
<circle cx="12" cy="12" r="10" />
20+
<circle cx="12" cy="12" r="6" />
21+
<circle cx="12" cy="12" r="2" />
22+
</svg>
23+
{% elif type == "important" or type == "caution" %}
24+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
25+
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
26+
<path d="M4 6h16" />
27+
<path d="M5 6v14" />
28+
<path d="M19 6v14" />
29+
<path d="M4 10h16" />
30+
<path d="M2 6h20" />
31+
</svg>
32+
{% endif %}
33+
{{ type | capitalize }}
34+
</div>
35+
<div class="admonition-content">
36+
{{ body | markdown | safe }}
37+
</div>
38+
</div>

‎www‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Subproject commit fc9d6462a75c9cc4627465373c564f0ec8385787
1+
Subproject commit e63b3792a4104de630c78d6d9d63869d1679b60e

0 commit comments

Comments
 (0)