initial
This commit is contained in:
343
theme/assets/css/tailwind.css
Normal file
343
theme/assets/css/tailwind.css
Normal file
@@ -0,0 +1,343 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap");
|
||||
@import url("https://unpkg.com/@catppuccin/palette/css/catppuccin.css");
|
||||
@import "tailwindcss";
|
||||
/* User content */
|
||||
@source "../../../content";
|
||||
/* User templates */
|
||||
@source "../../../templates";
|
||||
/* Theme templates */
|
||||
@source "../../templates";
|
||||
|
||||
/* Use dark class for dark theme */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer base {
|
||||
/* Buttons use pointer cursor */
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Fix some code rendering bugs with PrismJS
|
||||
* See https://github.com/PrismJS/prism/issues/2443
|
||||
*/
|
||||
@layer utilities {
|
||||
.table {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* Colorscheme, using sweetie palette */
|
||||
:root {
|
||||
--base: var(--ctp-latte-base);
|
||||
--base-alt: var(--ctp-latte-mantle);
|
||||
--surface: var(--ctp-latte-surface0);
|
||||
--text: var(--ctp-latte-text);
|
||||
--text-alt: var(--ctp-latte-subtext1);
|
||||
--grey: var(--ctp-latte-overlay1);
|
||||
--dark-grey: var(--ctp-latte-overlay0);
|
||||
--magenta: var(--ctp-latte-mauve);
|
||||
--red: var(--ctp-latte-red);
|
||||
--orange: var(--ctp-latte-peach);
|
||||
--yellow: var(--ctp-latte-yellow);
|
||||
--green: var(--ctp-latte-green);
|
||||
--teal: var(--ctp-latte-teal);
|
||||
--cyan: var(--ctp-latte-sky);
|
||||
--blue: var(--ctp-latte-blue);
|
||||
--violet: var(--ctp-latte-lavender);
|
||||
}
|
||||
:root.dark {
|
||||
--base: var(--ctp-mocha-base);
|
||||
--base-alt: var(--ctp-mocha-mantle);
|
||||
--surface: var(--ctp-mocha-surface0);
|
||||
--text: var(--ctp-mocha-text);
|
||||
--text-alt: var(--ctp-mocha-subtext1);
|
||||
--grey: var(--ctp-mocha-overlay1);
|
||||
--dark-grey: var(--ctp-mocha-overlay0);
|
||||
--magenta: var(--ctp-mocha-mauve);
|
||||
--red: var(--ctp-mocha-red);
|
||||
--orange: var(--ctp-mocha-peach);
|
||||
--yellow: var(--ctp-mocha-yellow);
|
||||
--green: var(--ctp-mocha-green);
|
||||
--teal: var(--ctp-mocha-teal);
|
||||
--cyan: var(--ctp-mocha-sky);
|
||||
--blue: var(--ctp-mocha-blue);
|
||||
--violet: var(--ctp-mocha-lavender);
|
||||
}
|
||||
|
||||
@theme static {
|
||||
--font-sans:
|
||||
"Fira Mono", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-mono:
|
||||
"Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--color-base: var(--base);
|
||||
--color-base-alt: var(--base-alt);
|
||||
--color-surface: var(--surface);
|
||||
--color-text: var(--text);
|
||||
--color-text-alt: var(--text-alt);
|
||||
--color-grey: var(--grey);
|
||||
--color-dark-grey: var(--dark-grey);
|
||||
--color-red: var(--red);
|
||||
--color-orange: var(--orange);
|
||||
--color-green: var(--green);
|
||||
--color-teal: var(--teal);
|
||||
--color-yellow: var(--yellow);
|
||||
--color-blue: var(--blue);
|
||||
--color-magenta: var(--magenta);
|
||||
--color-violet: var(--violet);
|
||||
--color-cyan: var(--cyan);
|
||||
}
|
||||
|
||||
/* Overall design */
|
||||
html {
|
||||
scrollbar-color: var(--blue) var(--surface);
|
||||
@apply scroll-smooth tabular-nums font-sans;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-base text-text antialiased font-medium;
|
||||
}
|
||||
|
||||
main a {
|
||||
@apply underline hover:text-blue;
|
||||
}
|
||||
|
||||
a.icon {
|
||||
@apply no-underline;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply transition-colors duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
hr {
|
||||
/* brightness-120 = #39394b */
|
||||
@apply text-base-alt dark:brightness-120;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
@apply bg-surface text-text-alt;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl;
|
||||
counter-increment: h2;
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl;
|
||||
counter-increment: h3;
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-lg;
|
||||
counter-increment: h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
counter-increment: h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply font-semibold;
|
||||
counter-increment: h6;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply leading-relaxed py-2;
|
||||
}
|
||||
|
||||
strong {
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply leading-relaxed;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
@apply mx-2 space-y-0 list-none;
|
||||
}
|
||||
|
||||
main ul {
|
||||
@apply pl-4;
|
||||
}
|
||||
|
||||
/* Margins */
|
||||
main h2,
|
||||
article h2,
|
||||
section h2 {
|
||||
@apply mt-10;
|
||||
}
|
||||
main h3,
|
||||
article h3,
|
||||
section h3 {
|
||||
@apply mt-8;
|
||||
}
|
||||
main h4,
|
||||
article h4,
|
||||
section h4 {
|
||||
@apply mt-6;
|
||||
}
|
||||
main h5,
|
||||
article h5,
|
||||
section h5 {
|
||||
@apply mt-4;
|
||||
}
|
||||
main h6,
|
||||
article h6,
|
||||
section h6 {
|
||||
@apply mt-2;
|
||||
}
|
||||
|
||||
/* Visual flair */
|
||||
main div#content h2:not(:first-child) {
|
||||
@apply border-t border-t-base-alt dark:border-t-[#39394b] pt-5;
|
||||
}
|
||||
main div#content h3:not(:first-child) {
|
||||
@apply border-t border-t-base-alt dark:border-t-[#39394b] pt-4;
|
||||
}
|
||||
main div#content h4:not(:first-child) {
|
||||
@apply border-t border-t-base-alt dark:border-t-[#39394b] pt-3;
|
||||
}
|
||||
main div#content h5:not(:first-child) {
|
||||
@apply border-t border-t-base-alt dark:border-t-[#39394b] pt-2;
|
||||
}
|
||||
main div#content h6:not(:first-child) {
|
||||
@apply border-t border-t-base-alt dark:border-t-[#39394b] pt-1;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply p-4 my-4 border-s-4 rounded-r-sm border-base-alt bg-surface dark:border-surface dark:bg-base-alt;
|
||||
}
|
||||
|
||||
blockquote.tip {
|
||||
@apply border-green bg-green/30;
|
||||
}
|
||||
blockquote.note {
|
||||
@apply border-blue bg-blue/30;
|
||||
}
|
||||
blockquote.important {
|
||||
@apply border-violet bg-violet/30;
|
||||
}
|
||||
blockquote.warning {
|
||||
@apply border-yellow bg-yellow/30;
|
||||
}
|
||||
blockquote.error {
|
||||
@apply border-red bg-red/30;
|
||||
}
|
||||
|
||||
blockquote > p {
|
||||
@apply leading-relaxed;
|
||||
}
|
||||
|
||||
/* Inline verbatim `` */
|
||||
code:not([class*="language-"]) {
|
||||
@apply px-1 py-px font-mono text-sm rounded-md bg-base-alt dark:bg-surface dark:brightness-80;
|
||||
}
|
||||
|
||||
/* Table of Contents */
|
||||
nav.toc {
|
||||
@apply h-3/4 pt-4 pb-4 font-mono bg-surface border-2 border-base-alt rounded-md;
|
||||
}
|
||||
|
||||
nav.toc ol {
|
||||
@apply pl-4 list-decimal list-inside;
|
||||
}
|
||||
|
||||
nav.toc ul {
|
||||
@apply pl-4 list-disc list-inside;
|
||||
}
|
||||
|
||||
nav.toc ol li,
|
||||
nav.toc ul li {
|
||||
@apply mt-0 pb-0;
|
||||
}
|
||||
|
||||
nav.toc ol li a,
|
||||
nav.toc ul li a {
|
||||
@apply no-underline hover:text-blue;
|
||||
}
|
||||
|
||||
nav.toc ol li::marker,
|
||||
nav.toc ul li::marker {
|
||||
@apply hover:text-blue;
|
||||
}
|
||||
|
||||
nav.toc ol li ol,
|
||||
nav.toc ul li ul {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
/* PrismJS specific css */
|
||||
pre[class*="language-"],
|
||||
code[class*="language-"] {
|
||||
font-variant-ligatures: common-ligatures !important;
|
||||
@apply bg-surface! dark:bg-base-alt font-mono! text-shadow-none!;
|
||||
}
|
||||
|
||||
/* PrismJS line-numbers plugin */
|
||||
pre[class*="language-"].line-numbers {
|
||||
counter-reset: linenumber;
|
||||
@apply relative pl-13;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
white-space: inherit;
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
@apply absolute flex flex-col top-[-1.5px] -left-12 w-10 pointer-events-none select-none border-r! border-r-grey!;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
counter-increment: linenumber;
|
||||
@apply block leading-[1.5];
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
@apply text-grey! text-right pr-2 block;
|
||||
}
|
||||
|
||||
/* Center MermaidJS charts and diagrams */
|
||||
pre.mermaid {
|
||||
@apply flex justify-center;
|
||||
}
|
||||
|
||||
/* Automatic dark theme for MermaidJS */
|
||||
.dark .mermaid {
|
||||
filter: invert(0.9) hue-rotate(180deg);
|
||||
}
|
||||
Reference in New Issue
Block a user