stuff
This commit is contained in:
@@ -1,155 +1,746 @@
|
||||
/* 1. Use a more-intuitive box-sizing model */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 2. Remove default margin */
|
||||
*:not(dialog) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 3. Enable keyword animations */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
interpolate-size: allow-keywords;
|
||||
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
||||
@layer properties;
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--color-stone-200: oklch(92.3% 0.003 48.717);
|
||||
--color-stone-900: oklch(21.6% 0.006 56.043);
|
||||
--color-stone-950: oklch(14.7% 0.004 49.25);
|
||||
--spacing: 0.25rem;
|
||||
--container-2xl: 42rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--font-weight-bold: 700;
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
--font-fancy: "Kablammo";
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
/* 4. Add accessible line-height */
|
||||
line-height: 1.5;
|
||||
/* 5. Improve text rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@layer base {
|
||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid;
|
||||
}
|
||||
html, :host {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-font-variation-settings, normal);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||||
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
||||
font-size: 1em;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: currentcolor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
::-webkit-calendar-picker-indicator {
|
||||
line-height: 1;
|
||||
}
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6. Improve media defaults */
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
@layer utilities {
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.prose {
|
||||
color: var(--tw-prose-body);
|
||||
max-width: 65ch;
|
||||
:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
:where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-lead);
|
||||
font-size: 1.25em;
|
||||
line-height: 1.6;
|
||||
margin-top: 1.2em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-links);
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
}
|
||||
:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-bold);
|
||||
font-weight: 600;
|
||||
}
|
||||
:where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: decimal;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
padding-inline-start: 1.625em;
|
||||
}
|
||||
:where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
:where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
:where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
:where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
:where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
:where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
:where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
:where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
:where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: disc;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
padding-inline-start: 1.625em;
|
||||
}
|
||||
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
||||
font-weight: 400;
|
||||
color: var(--tw-prose-counters);
|
||||
}
|
||||
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
||||
color: var(--tw-prose-bullets);
|
||||
}
|
||||
:where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-color: var(--tw-prose-hr);
|
||||
border-top-width: 1px;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: var(--tw-prose-quotes);
|
||||
border-inline-start-width: 0.25rem;
|
||||
border-inline-start-color: var(--tw-prose-quote-borders);
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 1.6em;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
:where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
||||
content: open-quote;
|
||||
}
|
||||
:where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
||||
content: close-quote;
|
||||
}
|
||||
:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8888889em;
|
||||
line-height: 1.1111111;
|
||||
}
|
||||
:where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 900;
|
||||
color: inherit;
|
||||
}
|
||||
:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
:where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 800;
|
||||
color: inherit;
|
||||
}
|
||||
:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
:where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
}
|
||||
:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
:where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
}
|
||||
:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
:where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
display: block;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
:where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
:where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: var(--tw-prose-kbd);
|
||||
box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
|
||||
font-size: 0.875em;
|
||||
border-radius: 0.3125rem;
|
||||
padding-top: 0.1875em;
|
||||
padding-inline-end: 0.375em;
|
||||
padding-bottom: 0.1875em;
|
||||
padding-inline-start: 0.375em;
|
||||
}
|
||||
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-code);
|
||||
font-weight: 600;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
||||
content: "`";
|
||||
}
|
||||
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
||||
content: "`";
|
||||
}
|
||||
:where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
:where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
:where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-pre-code);
|
||||
background-color: var(--tw-prose-pre-bg);
|
||||
overflow-x: auto;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.7142857;
|
||||
margin-top: 1.7142857em;
|
||||
margin-bottom: 1.7142857em;
|
||||
border-radius: 0.375rem;
|
||||
padding-top: 0.8571429em;
|
||||
padding-inline-end: 1.1428571em;
|
||||
padding-bottom: 0.8571429em;
|
||||
padding-inline-start: 1.1428571em;
|
||||
}
|
||||
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
||||
content: none;
|
||||
}
|
||||
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
||||
content: none;
|
||||
}
|
||||
:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.7142857;
|
||||
}
|
||||
:where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--tw-prose-th-borders);
|
||||
}
|
||||
:where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
vertical-align: bottom;
|
||||
padding-inline-end: 0.5714286em;
|
||||
padding-bottom: 0.5714286em;
|
||||
padding-inline-start: 0.5714286em;
|
||||
}
|
||||
:where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--tw-prose-td-borders);
|
||||
}
|
||||
:where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
:where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
:where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--tw-prose-th-borders);
|
||||
}
|
||||
:where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
vertical-align: top;
|
||||
}
|
||||
:where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
text-align: start;
|
||||
}
|
||||
:where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-captions);
|
||||
font-size: 0.875em;
|
||||
line-height: 1.4285714;
|
||||
margin-top: 0.8571429em;
|
||||
}
|
||||
--tw-prose-body: oklch(37.3% 0.034 259.733);
|
||||
--tw-prose-headings: oklch(21% 0.034 264.665);
|
||||
--tw-prose-lead: oklch(44.6% 0.03 256.802);
|
||||
--tw-prose-links: oklch(21% 0.034 264.665);
|
||||
--tw-prose-bold: oklch(21% 0.034 264.665);
|
||||
--tw-prose-counters: oklch(55.1% 0.027 264.364);
|
||||
--tw-prose-bullets: oklch(87.2% 0.01 258.338);
|
||||
--tw-prose-hr: oklch(92.8% 0.006 264.531);
|
||||
--tw-prose-quotes: oklch(21% 0.034 264.665);
|
||||
--tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
|
||||
--tw-prose-captions: oklch(55.1% 0.027 264.364);
|
||||
--tw-prose-kbd: oklch(21% 0.034 264.665);
|
||||
--tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
|
||||
--tw-prose-code: oklch(21% 0.034 264.665);
|
||||
--tw-prose-pre-code: oklch(92.8% 0.006 264.531);
|
||||
--tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
|
||||
--tw-prose-th-borders: oklch(87.2% 0.01 258.338);
|
||||
--tw-prose-td-borders: oklch(92.8% 0.006 264.531);
|
||||
--tw-prose-invert-body: oklch(87.2% 0.01 258.338);
|
||||
--tw-prose-invert-headings: #fff;
|
||||
--tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
|
||||
--tw-prose-invert-links: #fff;
|
||||
--tw-prose-invert-bold: #fff;
|
||||
--tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
|
||||
--tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
|
||||
--tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
|
||||
--tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
|
||||
--tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
|
||||
--tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
|
||||
--tw-prose-invert-kbd: #fff;
|
||||
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
|
||||
--tw-prose-invert-code: #fff;
|
||||
--tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
|
||||
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
||||
--tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
|
||||
--tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
:where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-inline-start: 0.375em;
|
||||
}
|
||||
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-inline-start: 0.375em;
|
||||
}
|
||||
:where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
:where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
:where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
:where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
:where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
:where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
:where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
:where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
padding-inline-start: 1.625em;
|
||||
}
|
||||
:where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
:where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
:where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
:where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
:where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
:where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
:where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-top: 0.5714286em;
|
||||
padding-inline-end: 0.5714286em;
|
||||
padding-bottom: 0.5714286em;
|
||||
padding-inline-start: 0.5714286em;
|
||||
}
|
||||
:where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
:where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
:where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
:where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
:where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
.max-w-2xl {
|
||||
max-width: var(--container-2xl);
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.border-l-8 {
|
||||
border-left-style: var(--tw-border-style);
|
||||
border-left-width: 8px;
|
||||
}
|
||||
.border-dashed {
|
||||
--tw-border-style: dashed;
|
||||
border-style: dashed;
|
||||
}
|
||||
.bg-stone-900 {
|
||||
background-color: var(--color-stone-900);
|
||||
}
|
||||
.bg-stone-950 {
|
||||
background-color: var(--color-stone-950);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.py-1 {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
.py-8 {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.pl-4 {
|
||||
padding-left: calc(var(--spacing) * 4);
|
||||
}
|
||||
.font-fancy {
|
||||
font-family: var(--font-fancy);
|
||||
}
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.text-5xl {
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.text-stone-200 {
|
||||
color: var(--color-stone-200);
|
||||
}
|
||||
.prose-stone {
|
||||
--tw-prose-body: oklch(37.4% 0.01 67.558);
|
||||
--tw-prose-headings: oklch(21.6% 0.006 56.043);
|
||||
--tw-prose-lead: oklch(44.4% 0.011 73.639);
|
||||
--tw-prose-links: oklch(21.6% 0.006 56.043);
|
||||
--tw-prose-bold: oklch(21.6% 0.006 56.043);
|
||||
--tw-prose-counters: oklch(55.3% 0.013 58.071);
|
||||
--tw-prose-bullets: oklch(86.9% 0.005 56.366);
|
||||
--tw-prose-hr: oklch(92.3% 0.003 48.717);
|
||||
--tw-prose-quotes: oklch(21.6% 0.006 56.043);
|
||||
--tw-prose-quote-borders: oklch(92.3% 0.003 48.717);
|
||||
--tw-prose-captions: oklch(55.3% 0.013 58.071);
|
||||
--tw-prose-kbd: oklch(21.6% 0.006 56.043);
|
||||
--tw-prose-kbd-shadows: color-mix(in oklab, oklch(21.6% 0.006 56.043) 10%, transparent);
|
||||
--tw-prose-code: oklch(21.6% 0.006 56.043);
|
||||
--tw-prose-pre-code: oklch(92.3% 0.003 48.717);
|
||||
--tw-prose-pre-bg: oklch(26.8% 0.007 34.298);
|
||||
--tw-prose-th-borders: oklch(86.9% 0.005 56.366);
|
||||
--tw-prose-td-borders: oklch(92.3% 0.003 48.717);
|
||||
--tw-prose-invert-body: oklch(86.9% 0.005 56.366);
|
||||
--tw-prose-invert-headings: #fff;
|
||||
--tw-prose-invert-lead: oklch(70.9% 0.01 56.259);
|
||||
--tw-prose-invert-links: #fff;
|
||||
--tw-prose-invert-bold: #fff;
|
||||
--tw-prose-invert-counters: oklch(70.9% 0.01 56.259);
|
||||
--tw-prose-invert-bullets: oklch(44.4% 0.011 73.639);
|
||||
--tw-prose-invert-hr: oklch(37.4% 0.01 67.558);
|
||||
--tw-prose-invert-quotes: oklch(97% 0.001 106.424);
|
||||
--tw-prose-invert-quote-borders: oklch(37.4% 0.01 67.558);
|
||||
--tw-prose-invert-captions: oklch(70.9% 0.01 56.259);
|
||||
--tw-prose-invert-kbd: #fff;
|
||||
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
|
||||
--tw-prose-invert-code: #fff;
|
||||
--tw-prose-invert-pre-code: oklch(86.9% 0.005 56.366);
|
||||
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
||||
--tw-prose-invert-th-borders: oklch(44.4% 0.011 73.639);
|
||||
--tw-prose-invert-td-borders: oklch(37.4% 0.01 67.558);
|
||||
}
|
||||
.prose-invert {
|
||||
--tw-prose-body: var(--tw-prose-invert-body);
|
||||
--tw-prose-headings: var(--tw-prose-invert-headings);
|
||||
--tw-prose-lead: var(--tw-prose-invert-lead);
|
||||
--tw-prose-links: var(--tw-prose-invert-links);
|
||||
--tw-prose-bold: var(--tw-prose-invert-bold);
|
||||
--tw-prose-counters: var(--tw-prose-invert-counters);
|
||||
--tw-prose-bullets: var(--tw-prose-invert-bullets);
|
||||
--tw-prose-hr: var(--tw-prose-invert-hr);
|
||||
--tw-prose-quotes: var(--tw-prose-invert-quotes);
|
||||
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
|
||||
--tw-prose-captions: var(--tw-prose-invert-captions);
|
||||
--tw-prose-kbd: var(--tw-prose-invert-kbd);
|
||||
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
|
||||
--tw-prose-code: var(--tw-prose-invert-code);
|
||||
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
|
||||
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
|
||||
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
|
||||
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
|
||||
}
|
||||
}
|
||||
|
||||
/* 7. Inherit fonts for form controls */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
@font-face {
|
||||
font-family: Kablammo;
|
||||
src: url("/assets/kablammo.ttf");
|
||||
}
|
||||
|
||||
/* 8. Avoid text overflows */
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
|
||||
/* 9. Improve line wrapping */
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/*
|
||||
10. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/*
|
||||
real css
|
||||
*/
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
color: var(--main-color);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
margin: 0 auto;
|
||||
|
||||
--brand-bg-color: darkslateblue;
|
||||
--brand-color: lavenderblush;
|
||||
|
||||
background-color: lavenderblush;
|
||||
--main-color: #222;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--brand-bg-color);
|
||||
color: var(--brand-color);
|
||||
font-weight: bold;
|
||||
font-size: 50px;
|
||||
/* padding: 1.5em 0em 0em 1em; */
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--brand-bg-color);
|
||||
color: var(--brand-color);
|
||||
padding: 1em;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
header > div,
|
||||
main,
|
||||
footer > div {
|
||||
width: 100%;
|
||||
max-width: 30rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header a,
|
||||
footer a,
|
||||
header a:visited,
|
||||
footer a:visited {
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user