Single-binary self-hosted Markdown blog on Rust axum: no database, live search, Typst PDF export, and strong SEO.
axumblogdockermarkdownminijinjarustself-hostedtypstvite
1@use "variables" as *;
2
3@use "bootstrap/scss/bootstrap" with (
4 $font-family-sans-serif: $font-family-sans-serif,
5 $font-family-monospace: $font-family-monospace,
6 $headings-font-family: $headings-font-family,
7 $headings-font-weight: $headings-font-weight,
8 $font-size-base: $font-size-base,
9 $line-height-base: $line-height-base,
10 $headings-line-height: $headings-line-height,
11
12 $white: $white,
13 $gray-100: $gray-100,
14 $gray-200: $gray-200,
15 $gray-300: $gray-300,
16 $gray-400: $gray-400,
17 $gray-500: $gray-500,
18 $gray-600: $gray-600,
19 $gray-700: $gray-700,
20 $gray-800: $gray-800,
21 $gray-900: $gray-900,
22 $black: $black,
23
24 $body-bg: $body-bg,
25 $body-color: $body-color,
26
27 $primary: $primary,
28 $secondary: $secondary,
29 $success: $success,
30 $info: $info,
31 $warning: $warning,
32 $danger: $danger,
33 $light: $light,
34 $dark: $dark,
35
36 $link-color: $link-color,
37 $link-hover-color: $link-hover-color,
38 $link-decoration: $link-decoration,
39 $link-hover-decoration: $link-hover-decoration,
40
41 $border-color: $border-color,
42 $border-radius: $border-radius,
43 $border-radius-sm: $border-radius-sm,
44 $border-radius-lg: $border-radius-lg,
45
46 $card-bg: $card-bg,
47 $card-border-color: $card-border-color,
48 $card-color: $card-color,
49 $card-cap-bg: $card-cap-bg,
50
51 $input-bg: $input-bg,
52 $input-color: $input-color,
53 $input-border-color: $input-border-color,
54 $input-focus-bg: $input-focus-bg,
55 $input-focus-color: $input-focus-color,
56 $input-focus-border-color: $input-focus-border-color,
57 $input-focus-box-shadow: $input-focus-box-shadow,
58 $input-placeholder-color: $input-placeholder-color,
59
60 $navbar-dark-color: $navbar-dark-color,
61 $navbar-dark-hover-color: $navbar-dark-hover-color,
62 $navbar-dark-active-color: $navbar-dark-active-color,
63
64 $list-group-bg: $list-group-bg,
65 $list-group-border-color: $list-group-border-color,
66 $list-group-hover-bg: $list-group-hover-bg,
67 $list-group-action-color: $list-group-action-color,
68 $list-group-action-hover-color: $list-group-action-hover-color,
69 $list-group-action-active-bg: $list-group-action-active-bg,
70 $list-group-action-active-color: $list-group-action-active-color,
71 $list-group-active-bg: $list-group-active-bg,
72 $list-group-active-border-color: $list-group-active-border-color,
73 $list-group-active-color: $list-group-active-color,
74
75 $table-color: $table-color,
76 $table-border-color: $table-border-color,
77 $table-striped-color: $table-striped-color,
78 $table-striped-bg: $table-striped-bg,
79 $table-active-color: $table-active-color,
80 $table-active-bg: $table-active-bg,
81 $table-hover-color: $table-hover-color,
82 $table-hover-bg: $table-hover-bg,
83
84 $breadcrumb-active-color: $breadcrumb-active-color,
85 $breadcrumb-divider-color: $breadcrumb-divider-color,
86
87 $dropdown-bg: $dropdown-bg,
88 $dropdown-border-color: $dropdown-border-color,
89 $dropdown-color: $dropdown-color,
90 $dropdown-link-color: $dropdown-link-color,
91 $dropdown-link-hover-color: $dropdown-link-hover-color,
92 $dropdown-link-hover-bg: $dropdown-link-hover-bg,
93
94 $btn-close-color: $btn-close-color,
95);
96
97
98// ── Custom utilities ──
99
100.bg-surface {
101 background: #13120e !important;
102}
103
104.bg-deep {
105 background: #090806 !important;
106}
107
108.text-muted {
109 color: #9e968a !important;
110}
111
112.link-footer {
113 color: $gray-400;
114 text-decoration: none;
115 transition: color 200ms ease;
116
117 &:hover {
118 color: $white;
119 }
120}
121
122.breadcrumb {
123 display: block;
124 flex-wrap: nowrap;
125 white-space: nowrap;
126
127 .breadcrumb-item {
128 font-size: 0.82em;
129 white-space: nowrap;
130 display: inline-block;
131
132 a {
133 color: $gray-400;
134 text-decoration: none;
135 transition: color 150ms ease;
136
137 &:hover {
138 color: $gray-100;
139 }
140 }
141
142 &.active {
143 color: $gray-200;
144 }
145 }
146}
147
148// Tag pill styling — forest green
149.btn-tag {
150 background: $green-dim;
151 color: $green-bright;
152 border: 1px solid $green-border;
153 font-size: 0.75rem;
154 font-weight: 500;
155 letter-spacing: 0.03em;
156 line-height: 1;
157 padding: 0.35rem 0.65rem;
158 display: inline-flex;
159 align-items: center;
160 transition: all 200ms ease;
161
162 &:hover {
163 background: rgba(107, 158, 120, 0.2);
164 color: #95cca2;
165 border-color: rgba(107, 158, 120, 0.35);
166 box-shadow: 0 0 8px rgba(107, 158, 120, 0.12);
167 }
168}
169
170// Alert overrides for dark
171.alert-info {
172 background: rgba(126, 170, 184, 0.08);
173 border-color: rgba(126, 170, 184, 0.2);
174 color: #9ec5d2;
175}
176
177.alert-warning {
178 background: $amber-dim;
179 border-color: rgba(201, 168, 76, 0.2);
180 color: #ddc06a;
181}
182
183// List group header — amber accent for "old knowledge" feel
184.list-group-header {
185 background: $amber-dim !important;
186 color: $amber !important;
187 font-weight: 600;
188 font-size: 0.72rem;
189 letter-spacing: 0.08em;
190 text-transform: uppercase;
191}
192
193.list-group-footer {
194 background: rgba(221, 215, 205, 0.02) !important;
195 color: $gray-400 !important;
196 transition: all 200ms ease;
197
198 &:hover {
199 background: rgba(221, 215, 205, 0.04) !important;
200 color: $gray-200 !important;
201 }
202}