Mercurial

comparison mrjunejune/src/base.css @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 3b47e82ac57e
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
72 --gray-gradient: rgba(26, 22, 15, 50%), #000; /* Adjusted */ 72 --gray-gradient: rgba(26, 22, 15, 50%), #000; /* Adjusted */
73 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%), 73 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%),
74 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%); 74 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
75 } 75 }
76 @media (prefers-color-scheme: dark) { 76 @media (prefers-color-scheme: dark) {
77 :root:not(.light-mode) { 77 :root:not([data-zen-theme]) {
78 --white: hsl(224, 10%, 10%); 78 --white: hsl(224, 10%, 10%);
79 --black: hsl(0, 0%, 90%); 79 --black: hsl(0, 0%, 90%);
80 --darkgray: #cccccc; 80 --darkgray: #cccccc;
81 --lightgray: #666666; 81 --lightgray: #666666;
82 --gray-light: var(--lightgray); 82 --gray-light: var(--lightgray);
96 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%), 96 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%),
97 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%); 97 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
98 } 98 }
99 } 99 }
100 100
101 :root {
102 --zen-font-editorial: "More Thin", "Roboto", sans-serif;
103 --zen-font-playful: "More", "More Thin", sans-serif;
104 --zen-font-sans: var(--zen-font-editorial);
105 }
106
107 :root:not([data-zen-theme]),
108 :root[data-zen-theme] {
109 --white: var(--zen-color-surface);
110 --black: var(--zen-color-text);
111 --darkgray: var(--zen-color-border-strong);
112 --lightgray: var(--zen-color-border-muted);
113 --gray-light: var(--zen-color-border-muted);
114 --green: var(--zen-color-success);
115 --orange: var(--zen-color-warning);
116 --purple: var(--zen-color-violet-400);
117 --red: var(--zen-color-danger);
118 --blue: var(--zen-color-info);
119 --darktext: var(--zen-color-text-muted);
120 --text: var(--zen-color-text);
121 --graytext: var(--zen-color-text-muted);
122 --lighttext: var(--zen-color-text-subtle);
123 --awesome: var(--zen-color-persimmon);
124 --accent: var(--zen-color-info);
125 --accent-dark: var(--zen-color-indigo);
126 --gray-dark: var(--zen-color-text);
127 --gray-gradient: linear-gradient(
128 var(--zen-color-canvas),
129 var(--zen-color-surface)
130 );
131 --box-shadow: var(--zen-shadow-md);
132 }
133
101 /* --- fonts --- */ 134 /* --- fonts --- */
102 /* 135 /*
103 @font-face { 136 @font-face {
104 font-family: "Atkinson"; 137 font-family: "Atkinson";
105 src: url("/public/fonts/atkinson-regular.woff") format("woff"); 138 src: url("/public/fonts/atkinson-regular.woff") format("woff");
139 color: inherit; /* blue colors for links too */ 172 color: inherit; /* blue colors for links too */
140 text-decoration: inherit; /* no underline */ 173 text-decoration: inherit; /* no underline */
141 } 174 }
142 175
143 body { 176 body {
144 font-family: "More Thin", sans-serif; 177 font-family: var(--zen-font-sans, "More Thin", sans-serif);
145 margin: 0; 178 margin: 0;
146 padding: 0; 179 padding: 0;
147 text-align: left; 180 text-align: left;
148 background: var(--gray-gradient); 181 background: var(--gray-gradient);
149 background-size: 100% 600px; 182 background-size: 100% 600px;
150 word-wrap: break-word; 183 word-wrap: break-word;
151 overflow-wrap: break-word; 184 overflow-wrap: break-word;
152 color: rgb(var(--gray-dark)); 185 color: var(--gray-dark);
153 font-size: 20px; 186 font-size: 20px;
154 line-height: 1.7; 187 line-height: 1.7;
155 -webkit-font-smoothing: antialiased; 188 -webkit-font-smoothing: antialiased;
156 -moz-osx-font-smoothing: grayscale; 189 -moz-osx-font-smoothing: grayscale;
157 } 190 }
168 h3, 201 h3,
169 h4, 202 h4,
170 h5, 203 h5,
171 h6 { 204 h6 {
172 margin: 0 0 0.5rem 0; 205 margin: 0 0 0.5rem 0;
173 color: rgb(var(--black)); 206 color: var(--black);
174 line-height: 1.2; 207 line-height: 1.2;
175 } 208 }
176 209
177 h1 { 210 h1 {
178 font-size: 2.5em; 211 font-size: 2.5em;
226 border-radius: 8px; 259 border-radius: 8px;
227 } 260 }
228 261
229 code { 262 code {
230 padding: 2px 5px; 263 padding: 2px 5px;
231 background-color: rgb(var(--gray-light)); 264 background-color: var(--gray-light);
232 border-radius: 2px; 265 border-radius: 2px;
233 } 266 }
234 267
235 pre { 268 pre {
236 padding: 1.5em; 269 padding: 1.5em;
248 margin-bottom: 1.25em; 281 margin-bottom: 1.25em;
249 } 282 }
250 283
251 hr { 284 hr {
252 border: none; 285 border: none;
253 border-top: 1px solid rgb(var(--gray-light)); 286 border-top: 1px solid var(--gray-light);
254 } 287 }
255 288
256 .center { 289 .center {
257 display: flex; 290 display: flex;
258 justify-content: center; 291 justify-content: center;
393 mask-repeat: no-repeat; 426 mask-repeat: no-repeat;
394 427
395 /* Icon color = button text color */ 428 /* Icon color = button text color */
396 background-color: currentColor; 429 background-color: currentColor;
397 } 430 }
398