element
- this.summary = el.querySelector("summary");
- // Store the element
- this.content = el.querySelector(".content");
+ private readonly el: HTMLDetailsElement;
+ private readonly summary: HTMLElement;
+ private readonly content: HTMLElement;
+ private animation: Animation | null = null;
+ private isClosing = false;
+ private isExpanding = false;
+
+ constructor(el: HTMLDetailsElement) {
+ const summary = el.querySelector("summary");
+ const content = el.querySelector(".content");
+
+ if (!(summary instanceof HTMLElement) || !(content instanceof HTMLElement)) {
+ throw new Error("Accordion markup is missing its summary or content element.");
+ }
- // Store the animation object (so we can cancel it if needed)
- this.animation = null;
- // Store if the element is closing
- this.isClosing = false;
- // Store if the element is expanding
- this.isExpanding = false;
- // Detect user clicks on the summary element
- this.summary.addEventListener("click", (e) => this.onClick(e));
+ this.el = el;
+ this.summary = summary;
+ this.content = content;
+ this.summary.addEventListener("click", this.onClick);
}
- onClick(e) {
- // Stop default behaviour from the browser
- e.preventDefault();
- // Add an overflow on the to avoid content overflowing
+ // These listeners live on the static sidebar elements for the full page lifecycle,
+ // so there is no intermediate teardown step before the page unloads.
+ private onClick = (event: MouseEvent) => {
+ event.preventDefault();
this.el.style.overflow = "hidden";
- // Check if the element is being closed or is already closed
+
if (this.isClosing || !this.el.open) {
this.open();
- // Check if the element is being openned or is already open
- } else if (this.isExpanding || this.el.open) {
+ return;
+ }
+
+ if (this.isExpanding || this.el.open) {
this.shrink();
}
- }
+ };
- shrink() {
- // Set the element as "being closed"
+ private shrink() {
this.isClosing = true;
- // Store the current height of the element
const startHeight = `${this.el.offsetHeight}px`;
- // Calculate the height of the summary
const endHeight = `${this.summary.offsetHeight}px`;
- // If there is already an animation running
- if (this.animation) {
- // Cancel the current animation
- this.animation.cancel();
- }
-
- // Start a WAAPI animation
+ this.animation?.cancel();
this.animation = this.el.animate(
- {
- // Set the keyframes from the startHeight to endHeight
- height: [startHeight, endHeight],
- },
- {
- duration: 400,
- easing: "ease-out",
- }
+ { height: [startHeight, endHeight] },
+ { duration: 400, easing: "ease-out" }
);
- // When the animation is complete, call onAnimationFinish()
this.animation.onfinish = () => this.onAnimationFinish(false);
- // If the animation is cancelled, isClosing variable is set to false
- this.animation.oncancel = () => (this.isClosing = false);
+ this.animation.oncancel = () => {
+ this.isClosing = false;
+ };
}
- open() {
- // Apply a fixed height on the element
+ private open() {
this.el.style.height = `${this.el.offsetHeight}px`;
- // Force the [open] attribute on the details element
this.el.open = true;
- // Wait for the next frame to call the expand function
window.requestAnimationFrame(() => this.expand());
}
- expand() {
- // Set the element as "being expanding"
+ private expand() {
this.isExpanding = true;
- // Get the current fixed height of the element
+
const startHeight = `${this.el.offsetHeight}px`;
- // Calculate the open height of the element (summary height + content height)
- const endHeight = `${this.summary.offsetHeight +
- this.content.offsetHeight}px`;
-
- // If there is already an animation running
- if (this.animation) {
- // Cancel the current animation
- this.animation.cancel();
- }
+ const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
- // Start a WAAPI animation
+ this.animation?.cancel();
this.animation = this.el.animate(
- {
- // Set the keyframes from the startHeight to endHeight
- height: [startHeight, endHeight],
- },
- {
- duration: 400,
- easing: "ease-out",
- }
+ { height: [startHeight, endHeight] },
+ { duration: 400, easing: "ease-out" }
);
- // When the animation is complete, call onAnimationFinish()
+
this.animation.onfinish = () => this.onAnimationFinish(true);
- // If the animation is cancelled, isExpanding variable is set to false
- this.animation.oncancel = () => (this.isExpanding = false);
+ this.animation.oncancel = () => {
+ this.isExpanding = false;
+ };
}
- onAnimationFinish(open) {
- // Set the open attribute based on the parameter
+ private onAnimationFinish(open: boolean) {
this.el.open = open;
- // Clear the stored animation
this.animation = null;
- // Reset isClosing & isExpanding
this.isClosing = false;
this.isExpanding = false;
- // Remove the overflow hidden and the fixed height
- this.el.style.height = this.el.style.overflow = "";
+ this.el.style.height = "";
+ this.el.style.overflow = "";
+ }
+}
+
+function getSidebar() {
+ return document.querySelector("[data-sidebar]");
+}
+
+function getSidebarElements(): SidebarElements | null {
+ const aside = getSidebar();
+ const toggle = document.querySelector("[data-sidebar-toggle]");
+ const overlay = document.querySelector("[data-sidebar-overlay]");
+
+ if (!(aside instanceof HTMLElement) || !(toggle instanceof HTMLButtonElement) || !(overlay instanceof HTMLButtonElement)) {
+ return null;
}
+
+ return { aside, toggle, overlay };
+}
+
+function isMobileViewport() {
+ return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
}
-let aside = document.querySelector("aside");
-export const inFocus = () => {
- aside.querySelectorAll("a[href]").forEach((element) => {
- let cleanURL = (el) =>
- new URL(el.href, window.location).pathname
- .replace(/\/$/, "")
- .replace(/\/index$/, "");
- let elURL = cleanURL(element);
- let windowURL = cleanURL(window.location);
-
- if (elURL === windowURL) {
- element.classList.add("active");
-
- let parent = element.parentElement;
- while (parent !== aside) {
- if (parent.tagName.toLowerCase() == "details" && !parent.open) {
- parent.open = true;
- }
-
- parent = parent.parentElement;
+function setSidebarOpen(elements: SidebarElements, open: boolean) {
+ const shouldOpen = isMobileViewport() ? open : true;
+
+ elements.aside.dataset.open = String(shouldOpen);
+ elements.overlay.dataset.open = String(shouldOpen);
+ elements.toggle.setAttribute("aria-expanded", String(shouldOpen));
+ elements.toggle.setAttribute(
+ "aria-label",
+ shouldOpen ? "Close documentation navigation" : "Open documentation navigation"
+ );
+ elements.overlay.setAttribute("aria-hidden", String(!(shouldOpen && isMobileViewport())));
+
+ document.body.dataset.sidebarOpen = String(shouldOpen && isMobileViewport());
+
+ if (shouldOpen && isMobileViewport()) {
+ const firstFocusable = elements.aside.querySelector(
+ "a[href], button:not([disabled])"
+ );
+
+ firstFocusable?.focus();
+ }
+}
+
+function cleanURL(value: string | URL) {
+ return new URL(value, window.location.href).pathname.replace(/\/$/, "").replace(/\/index$/, "");
+}
+
+export function inFocus(aside: HTMLElement | null = getSidebar()) {
+ if (!(aside instanceof HTMLElement)) {
+ return;
+ }
+
+ const currentPath = cleanURL(window.location.href);
+
+ aside.querySelectorAll("a[href]").forEach((anchor) => {
+ anchor.classList.remove("active");
+
+ if (cleanURL(anchor.href) !== currentPath) {
+ return;
+ }
+
+ anchor.classList.add("active");
+
+ let parent: HTMLElement | null = anchor.parentElement;
+ while (parent && parent !== aside) {
+ if (parent instanceof HTMLDetailsElement && !parent.open) {
+ parent.open = true;
}
- // element.scrollIntoView();
- element.scrollIntoView({
- behavior: "smooth",
- // block: 'start'
- });
+ parent = parent.parentElement;
}
+
+ anchor.scrollIntoView({ behavior: "smooth" });
});
-};
-export const init = () => {
- aside.querySelectorAll("details").forEach((el) => {
- new Accordion(el);
+}
+
+export function init(aside: HTMLElement | null = getSidebar()) {
+ if (!(aside instanceof HTMLElement)) {
+ return;
+ }
+
+ aside.querySelectorAll("details").forEach((details) => {
+ if (details.dataset.accordionReady === "true") {
+ return;
+ }
+
+ details.dataset.accordionReady = "true";
+ new Accordion(details);
});
-};
+}
+
+export function startSidebar() {
+ const elements = getSidebarElements();
+ if (!elements) {
+ return;
+ }
+
+ init(elements.aside);
+ inFocus(elements.aside);
+ setSidebarOpen(elements, false);
+
+ if (elements.toggle.dataset.bound === "true") {
+ return;
+ }
+
+ const syncViewportState = () => setSidebarOpen(elements, elements.aside.dataset.open === "true");
+ const closeSidebar = () => setSidebarOpen(elements, false);
+ const toggleSidebar = () => setSidebarOpen(elements, elements.aside.dataset.open !== "true");
+ const onKeydown = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ closeSidebar();
+ }
+ };
+
+ elements.toggle.addEventListener("click", toggleSidebar);
+ elements.overlay.addEventListener("click", closeSidebar);
+ window.addEventListener("resize", syncViewportState, { passive: true });
+ document.addEventListener("keydown", onKeydown);
+ elements.toggle.dataset.bound = "true";
+}
diff --git a/src/style/animate.scss b/src/style/animate.scss
deleted file mode 100644
index e4ada9c4..00000000
--- a/src/style/animate.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-:root {
- --size: 4vmin;
-}
-
-.div {
- @apply bg-blue-400 w-10 h-10 rounded relative m-2;
- --size: 8vmin;
- width: var(--size);
- height: var(--size);
-}
-
-.morph-demo {
- @apply mb-6;
-}
-
-@property --stroke {
- syntax: '';
- inherits: false;
- initial-value: theme("colors.white");
-}
-
-.svg-1 path {
- fill: none;
- stroke: var(--stroke);
- stroke-linecap: round;
- stroke-linejoin: round;
-
-
- &#using-flubber {
- fill: theme("colors.white");
- }
-}
-
-.dark .svg-1 path {
- --stroke: theme("colors.tertiary");
-
- &#using-flubber {
- fill: theme("colors.tertiary");
- }
-}
-
-.add-remove-btns {
- position: relative;
- z-index: 25;
-}
-
-.el,
-.el-initial {
- border-radius: 3px;
- width: var(--size);
- height: var(--size);
- // margin-bottom: 5px;
- /* transform: scale(1); */
- // border-radius: 8%;
- background: #616aff;
- position: relative;
-}
-
-.el-initial {
- opacity: 0.6;
- position: absolute;
- display: block;
- margin-top: 0;
- top: 0;
- left: 0;
-}
-
-.motion-path {
- position: relative;
-}
-
-.motion-path .el-1 {
- position: absolute;
- offset-path: path(
- "M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
- );
- // offset-path: url("#follow-path");
- offset-distance: 0;
-}
-
-.motion-path .el-2 {
- position: absolute;
- transform-origin: center center;
- top: calc(var(--size) / -2);
- left: calc(var(--size) / -2);
-}
-
-.animation-container {
- transition: background-color 0.5s ease;
- background-color: rgba(0, 0, 0, 0.085);
- border-radius: 5px;
- padding: 5px;
- cursor: pointer;
-
- &:hover {
- background-color: rgba(255, 255, 255, 0.25);
- }
-}
-
-.playback-demo {
- @apply overflow-auto;
-}
-
-.contain {
- position: relative;
- height: var(--size);
- margin-bottom: 5px;
-}
-
-.animation-container + .animation-container {
- margin-top: 2em;
-}
-
-input[type="range"] {
- width: 100%;
- padding: 0;
- margin: 0;
-}
-html:not(.unsupported) .support {
- display: none;
-}
-
-.col-2 {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-// Cool
-#playstate-toggle[data-playstate="running"] {
- .fa-play,
- .fa-redo {
- display: none;
- }
-}
-#playstate-toggle[data-playstate="paused"] {
- .fa-pause,
- .fa-redo {
- display: none;
- }
-}
-
-#playstate-toggle[data-playstate="finished"] {
- .fa-play,
- .fa-pause {
- display: none;
- }
-}
-
-svg .fa {
- fill: currentColor;
- width: 24px;
- height: 24px;
-
- path {
- fill: currentColor;
- width: 100%;
- height: 100%;
- }
-}
-
-.btn-icon {
- display: grid;
- place-content: center;
-}
\ No newline at end of file
diff --git a/src/style/app.scss b/src/style/app.scss
deleted file mode 100644
index 4df45fc5..00000000
--- a/src/style/app.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@tailwind variants;
-
-@import "./components/navbar.scss";
-
-body {
- @apply bg-white text-black;
- @apply dark:bg-black dark:text-label;
- @apply font-manrope;
- font-size: 1rem;
- line-height: 1.5;
-}
-
-.no-overflow-x {
- overflow-x: hidden;
-}
-
-.icon {
- -webkit-font-feature-settings: "liga" off, "dlig";
- -moz-font-feature-settings: "liga=0, dlig=1";
- font-feature-settings: "liga", "dlig";
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- font-family: "Material Icons Round", "Material Icons";
- vertical-align: middle;
- letter-spacing: normal;
- display: inline-block;
- text-decoration: none;
- text-transform: none;
- white-space: nowrap;
- font-weight: normal;
- position: relative;
- font-style: normal;
- word-wrap: normal;
- font-size: 24px;
- line-height: 1;
- direction: ltr;
- height: 1em;
- width: 1em;
-}
-
-a {
- @apply text-blue-500 hover:text-blue-700 underline;
- @apply dark:text-blue-400 dark:hover:text-blue-200;
-}
-
-button,
-a {
- transition: color 0.2s ease-out, box-shadow 0.2s ease-out;
- @apply focus-visible:ring-4 focus-visible:ring-blue-500 focus-visible:ring-opacity-50;
- @apply focus:outline-none focus-visible:rounded-sm;
-
- -webkit-tap-highlight-color: transparent;
-}
-
-@screen md {
- .desktop {
- display: block;
- }
-
- .mobile {
- display: none;
- }
-}
-
-@screen lt-md {
- .mobile {
- display: block;
- }
-
- .desktop {
- display: none;
- }
-}
-
-.navbar-toggle,
-.theme-toggle,
-.btn-icon {
- @apply rounded-md;
- @apply mr-1 w-10 h-10 text-blue-500 bg-gray-100 hover:bg-gray-200 active:bg-blue-200;
- @apply dark:text-blue-400 dark:bg-quaternary;
- @apply dark:hover:bg-gray-800 dark:active:bg-gray-700;
- @apply focus-visible:border-blue-600 focus-visible:ring-4 focus:rounded-md;
-}
-
-.btn-icon {
- @apply bg-white hover:bg-gray-100 active:bg-blue-200;
- @apply dark:text-blue-400 dark:bg-tertiary;
- @apply dark:hover:bg-gray-800 dark:active:bg-gray-700;
- @apply focus-visible:border-blue-600 focus-visible:ring-4 focus:rounded-md;
-}
-
-.btn-highlight {
- @apply rounded-md mr-1 inline-block;
- @apply text-blue-500 bg-gray-100 hover:bg-gray-200 active:bg-blue-200;
- @apply dark:text-blue-400 dark:bg-quaternary;
- @apply dark:hover:bg-gray-800 dark:active:bg-gray-700;
- @apply focus-visible:border-blue-600 focus-visible:ring-4 focus:rounded-md;
-}
-
-.btn {
- @apply px-3 py-2 rounded-md no-underline hover:bg-gray-200;
- @apply dark:text-blue-400 dark:hover:bg-quaternary;
-
- &.active {
- @apply bg-blue-600 text-white hover:bg-blue-700;
- @apply dark:bg-blue-400 dark:text-black dark:hover:bg-blue-500;
- }
-
- &:hover {
- @apply bg-opacity-60;
- }
-}
-
-#big-transition {
- position: fixed;
- z-index: 2000;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- opacity: 0;
- visibility: hidden;
-}
-
-#big-transition #logo {
- opacity: 0;
- visibility: hidden;
-}
-
-#big-transition #big-transition-horizontal {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
-}
-
-#big-transition #big-transition-horizontal {
- flex-flow: column;
-}
-
-#big-transition #big-transition-horizontal > div {
- width: 100%;
- flex: 1 1;
- @apply bg-gray-200 dark:bg-quaternary;
- @apply border-4 border-gray-200;
- @apply dark:border-quaternary;
- transform-origin: 0 0;
- transform: scaleX(0);
-}
-
-#logo {
- position: absolute;
- z-index: 12;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
diff --git a/src/style/base.css b/src/style/base.css
new file mode 100644
index 00000000..6b9e726b
--- /dev/null
+++ b/src/style/base.css
@@ -0,0 +1,288 @@
+/* Sakura.css v1.3.1
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+
+:root {
+ --color-force: #3b82f6;
+ --color-blossom: color-mix(in srgb, var(--color-force) 80%, white);
+ --color-fade: var(--color-force);
+ --color-bg: #120c0e;
+ --color-bg-alt: color-mix(in srgb, #1e3a8a 80%, black);
+ --color-text: #d9d8dc;
+ --light-external-icon: url(/assets/light-external.svg);
+ --dark-external-icon: url(/assets/dark-external.svg);
+ --external-icon: var(--light-external-icon);
+ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+ sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --external-icon: var(--dark-external-icon);
+ }
+}
+
+html {
+ font-size: 62.5%;
+ font-family: var(--font-family-base);
+ scroll-padding-top: 15vh;
+ scrollbar-gutter: stable both-edges;
+}
+
+body {
+ font-size: 1.8rem;
+ line-height: 1.618;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: 1.1;
+ font-weight: 700;
+ margin-top: 3rem;
+ margin-bottom: 1.5rem;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-word;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a,
+a :is(h1, h2, h3, h4, h5, h6) {
+ @apply no-underline;
+}
+
+h1 {
+ font-size: 2.35em;
+}
+
+h2 {
+ font-size: 2em;
+}
+
+h3 {
+ font-size: 1.75em;
+}
+
+h4 {
+ font-size: 1.5em;
+}
+
+h5 {
+ font-size: 1.25em;
+}
+
+h6 {
+ font-size: 1em;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 2.5rem;
+}
+
+small,
+sub,
+sup {
+ font-size: 75%;
+}
+
+hr {
+ border-color: var(--color-blossom);
+}
+
+a {
+ text-decoration: underline;
+ color: var(--color-blossom);
+}
+
+@media (prefers-color-scheme: light) {
+ a {
+ color: color-mix(in srgb, var(--color-blossom) 65%, black);
+ }
+}
+
+a:hover {
+ color: var(--color-fade);
+ border-bottom: 2px solid var(--color-text);
+}
+
+@media (prefers-color-scheme: light) {
+ a:hover {
+ border-bottom-color: color-mix(in srgb, var(--color-blossom) 75%, black);
+ }
+}
+
+a:visited {
+ color: color-mix(in srgb, var(--color-blossom) 90%, black);
+ border-bottom: 2px solid var(--color-text);
+ text-decoration: double !important;
+}
+
+@media (prefers-color-scheme: light) {
+ a:visited {
+ @apply text-indigo-700 font-bold;
+ border-bottom-color: color-mix(in srgb, var(--color-blossom) 65%, black);
+ }
+}
+
+ul {
+ padding-left: 1.4em;
+ margin-top: 0;
+ margin-bottom: 2.5rem;
+}
+
+li {
+ margin-bottom: 0.4em;
+}
+
+blockquote {
+ margin-left: 0;
+ margin-right: 0;
+ padding: 0.8em 0.8em 0.8em 1em;
+ border-left: 5px solid var(--color-blossom);
+ margin-bottom: 2.5rem;
+ background-color: color-mix(in srgb, var(--color-bg-alt) 76%, white);
+}
+
+blockquote p {
+ margin-bottom: 0;
+}
+
+img,
+video {
+ height: auto;
+ max-width: 100%;
+ margin-top: 0;
+ margin-bottom: 2.5rem;
+}
+
+pre {
+ display: block;
+ padding-block: 1em;
+ overflow-x: auto;
+ margin-top: 0;
+}
+
+code {
+ font-size: 0.9em;
+ padding: 0 0.5em;
+ white-space: pre-wrap;
+}
+
+pre > code {
+ padding: 0;
+ background-color: transparent;
+ white-space: pre;
+}
+
+table {
+ text-align: justify;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+td,
+th {
+ padding: 0.5em;
+ border-bottom: 1px solid #313e47;
+}
+
+input,
+textarea {
+ border: 1px solid var(--color-text);
+}
+
+input:focus,
+textarea:focus {
+ border: 1px solid var(--color-blossom);
+}
+
+textarea {
+ width: 100%;
+}
+
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ display: inline-block;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: var(--color-blossom);
+ color: var(--color-bg);
+ border-radius: 1px;
+ border: 1px solid var(--color-blossom);
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled] {
+ cursor: default;
+ opacity: 0.5;
+}
+
+.button:focus:enabled,
+.button:hover:enabled,
+button:focus:enabled,
+button:hover:enabled,
+input[type="submit"]:focus:enabled,
+input[type="submit"]:hover:enabled,
+input[type="reset"]:focus:enabled,
+input[type="reset"]:hover:enabled,
+input[type="button"]:focus:enabled,
+input[type="button"]:hover:enabled {
+ background-color: var(--color-fade);
+ border-color: var(--color-fade);
+ color: var(--color-bg);
+ outline: 0;
+}
+
+textarea,
+select,
+input {
+ color: var(--color-text);
+ padding: 6px 10px;
+ margin-bottom: 10px;
+ background-color: var(--color-bg-alt);
+ border: 1px solid var(--color-bg-alt);
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box;
+}
+
+textarea:focus,
+select:focus,
+input:focus {
+ border: 1px solid var(--color-blossom);
+ outline: 0;
+}
+
+input[type="checkbox"]:focus {
+ outline: 1px dotted var(--color-blossom);
+}
+
+label,
+legend,
+fieldset {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
diff --git a/src/style/base.scss b/src/style/base.scss
deleted file mode 100644
index d5729048..00000000
--- a/src/style/base.scss
+++ /dev/null
@@ -1,316 +0,0 @@
-/* Sakura.css v1.3.1
- * ================
- * Minimal css theme.
- * Project: https://github.com/oxalorg/sakura/
- */
-
-$color-force: #3b82f6;
-$color-blossom: lighten($color-force, 20%);
-$color-fade: $color-force;
-
-$color-bg: #120c0e;
-$color-bg-alt: darken(#1e3a8a, 20%);
-
-/* $color-text: #dedce5; */
-$color-text: #d9d8dc;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-:root {
- --light-external-icon: url(/assets/light-external.svg);
- --dark-external-icon: url(/assets/dark-external.svg);
- --external-icon: var(--light-external-icon);
-
- @media (prefers-color-scheme: dark) {
- --external-icon: var(--dark-external-icon);
- }
-}
-
-/* Body */
-html {
- font-size: 62.5%; // So that root size becomes 10px
- font-family: $font-family-base;
- // scroll-padding-block-start: theme("spacing.24");
- // scroll-margin-block-start: theme("spacing.24");
- scroll-padding-top: 15vh;
-
- scrollbar-gutter: stable both-edges;
-}
-
-body {
- // $font-size-base must be a rem value
- font-size: $font-size-base;
- line-height: 1.618;
- @apply text-3xl;
- // max-width: 38em;
- color: $color-text;
- background-color: $color-bg;
- font-size: $font-size-base * 0.95;
-}
-
-@media (max-width: 684px) {
- body {
- font-size: $font-size-base * 0.85;
- }
-}
-
-@media (max-width: 382px) {
- body {
- font-size: $font-size-base * 0.75;
- }
-}
-
-@mixin word-wrap() {
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- line-height: 1.1;
- // font-family: $font-family-heading;
- font-weight: 700;
- margin-top: 3rem;
- margin-bottom: 1.5rem;
- @include word-wrap;
-
- a {
- @apply no-underline;
- }
-}
-
-a :is(h1, h2, h3, h4, h5, h6) {
- @apply no-underline;
-}
-
-h1 {
- font-size: 2.35em;
-}
-h2 {
- font-size: 2em;
-}
-h3 {
- font-size: 1.75em;
-}
-h4 {
- font-size: 1.5em;
-}
-h5 {
- font-size: 1.25em;
-}
-h6 {
- font-size: 1em;
-}
-
-p {
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-small,
-sub,
-sup {
- font-size: 75%;
-}
-
-hr {
- border-color: $color-blossom;
-}
-
-a {
- // text-decoration: none;
- text-decoration: underline;
- color: $color-blossom;
-
- @media (prefers-color-scheme: light) {
- color: darken($color-blossom, 35%);
- }
-
- // &[target]:not([href*="https://gitpod.io/#"]):after
- // {
- // display: inline;
- // content: var(--external-icon);
- // stroke: currentColor;
- // margin-left: 0.2rem;
- // margin-right: 0.1rem;
- // opacity: 0.6;
- // transition: all 0.2s 50ms;
- // }
-
- &:hover {
- color: $color-fade;
- border-bottom: 2px solid $color-text;
-
- @media (prefers-color-scheme: light) {
- border-bottom-color: darken($color-blossom, 25%);
- }
- }
-
- &:visited {
- color: darken($color-blossom, 10%);
- border-bottom: 2px solid $color-text;
- text-decoration: double !important;
-
- @media (prefers-color-scheme: light) {
- @apply text-indigo-700 font-bold;
- border-bottom-color: darken($color-blossom, 35%);
- }
- }
-}
-
-ul {
- padding-left: 1.4em;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-li {
- margin-bottom: 0.4em;
-}
-
-blockquote {
- margin-left: 0px;
- margin-right: 0px;
- padding-left: 1em;
- padding-top: 0.8em;
- padding-bottom: 0.8em;
- padding-right: 0.8em;
- border-left: 5px solid $color-blossom;
- margin-bottom: 2.5rem;
- background-color: lighten($color-bg-alt, 24%);
-}
-
-blockquote p {
- margin-bottom: 0;
-}
-
-img,
-video {
- height: auto;
- max-width: 100%;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-/* Pre and Code */
-
-pre {
- // background-color: $color-bg-alt;
- display: block;
- padding-block: 1em;
- overflow-x: auto;
- margin-top: 0px;
-}
-
-code {
- font-size: 0.9em;
- padding: 0 0.5em;
- // background-color: $color-bg-alt;
- white-space: pre-wrap;
-}
-
-pre > code {
- padding: 0;
- background-color: transparent;
- white-space: pre;
-}
-
-/* Tables */
-
-table {
- text-align: justify;
- width: 100%;
- border-collapse: collapse;
-}
-
-td,
-th {
- padding: 0.5em;
- border-bottom: 1px solid #313e47;
-}
-
-/* Buttons, forms and input */
-
-input,
-textarea {
- border: 1px solid $color-text;
-
- &:focus {
- border: 1px solid $color-blossom;
- }
-}
-
-textarea {
- width: 100%;
-}
-
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- display: inline-block;
- padding: 5px 10px;
- text-align: center;
- text-decoration: none;
- white-space: nowrap;
-
- background-color: $color-blossom;
- color: $color-bg;
- border-radius: 1px;
- border: 1px solid $color-blossom;
- cursor: pointer;
- box-sizing: border-box;
-
- &[disabled] {
- cursor: default;
- opacity: 0.5;
- }
-
- &:focus:enabled,
- &:hover:enabled {
- background-color: $color-fade;
- border-color: $color-fade;
- color: $color-bg;
- outline: 0;
- }
-}
-
-textarea,
-select,
-input {
- color: $color-text;
- padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- margin-bottom: 10px;
- background-color: $color-bg-alt;
- border: 1px solid $color-bg-alt;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box;
-
- &:focus {
- border: 1px solid $color-blossom;
- outline: 0;
- }
-}
-
-input[type="checkbox"]:focus {
- outline: 1px dotted $color-blossom;
-}
-
-label,
-legend,
-fieldset {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: 600;
-}
diff --git a/src/style/components/_hightlightjs.scss b/src/style/components/_hightlightjs.scss
deleted file mode 100644
index 5596919e..00000000
--- a/src/style/components/_hightlightjs.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-code {
- @apply border border-gray-500 dark:border-gray-500;
- // shadow-lg
-}
-
-code {
- color: #24292e;
- background: #fff;
-
- @apply px-2 py-1 rounded-lg;
- font-family: Consolas, "Courier New", monospace;
- font-weight: normal;
- font-size: 14px;
- font-feature-settings: "liga" 0, "calt" 0;
- line-height: 19px;
-
- font-weight: 600;
- @apply leading-5;
-}
-
-@media (prefers-color-scheme: dark) {
- code {
- color: #adbac7;
- background: #22272e;
- }
-}
-
-pre code {
- @apply rounded-lg;
- display: block;
- overflow-x: auto;
- padding: 15px;
- line-height: 19px;
-}
-
-/*!
- Theme: GitHub
- Description: Light theme as seen on github.com
- Author: github.com
- Maintainer: @Hirse
- Updated: 2021-05-15
-
- Outdated base version: https://github.com/primer/github-syntax-light
- Current colors taken from GitHub's CSS
-*/
-code {
- color: #24292e;
- background: #fff;
-}
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable.language_ {
- color: #d73a49;
-}
-.hljs-title,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-title.function_ {
- color: #6f42c1;
-}
-.hljs-attr,
-.hljs-attribute,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-operator,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-id,
-.hljs-variable {
- color: #005cc5;
-}
-.hljs-meta .hljs-string,
-.hljs-regexp,
-.hljs-string {
- color: #032f62;
-}
-.hljs-built_in,
-.hljs-symbol {
- color: #e36209;
-}
-.hljs-code,
-.hljs-comment,
-.hljs-formula {
- color: #6a737d;
-}
-.hljs-name,
-.hljs-quote,
-.hljs-selector-pseudo,
-.hljs-selector-tag {
- color: #22863a;
-}
-.hljs-subst {
- color: #24292e;
-}
-.hljs-section {
- color: #005cc5;
- font-weight: 700;
-}
-.hljs-bullet {
- color: #735c0f;
-}
-.hljs-emphasis {
- color: #24292e;
- font-style: italic;
-}
-.hljs-strong {
- color: #24292e;
- font-weight: 700;
-}
-.hljs-addition {
- color: #22863a;
- background-color: #f0fff4;
-}
-.hljs-deletion {
- color: #b31d28;
- background-color: #ffeef0;
-}
-
-/*!
- Theme: GitHub Dark Dimmed
- Description: Dark dimmed theme as seen on github.com
- Author: github.com
- Maintainer: @Hirse
- Updated: 2021-05-15
-
- Colors taken from GitHub's CSS
-*/
-
-@media (prefers-color-scheme: dark) {
- .dark {
- code {
- color: #adbac7;
- background: #22272e;
- }
- .hljs-doctag,
- .hljs-keyword,
- .hljs-meta .hljs-keyword,
- .hljs-template-tag,
- .hljs-template-variable,
- .hljs-type,
- .hljs-variable.language_ {
- color: #f47067;
- }
- .hljs-title,
- .hljs-title.class_,
- .hljs-title.class_.inherited__,
- .hljs-title.function_ {
- color: #dcbdfb;
- }
- .hljs-attr,
- .hljs-attribute,
- .hljs-literal,
- .hljs-meta,
- .hljs-number,
- .hljs-operator,
- .hljs-selector-attr,
- .hljs-selector-class,
- .hljs-selector-id,
- .hljs-variable {
- color: #6cb6ff;
- }
- .hljs-meta .hljs-string,
- .hljs-regexp,
- .hljs-string {
- color: #96d0ff;
- }
- .hljs-built_in,
- .hljs-symbol {
- color: #f69d50;
- }
- .hljs-code,
- .hljs-comment,
- .hljs-formula {
- color: #768390;
- }
- .hljs-name,
- .hljs-quote,
- .hljs-selector-pseudo,
- .hljs-selector-tag {
- color: #8ddb8c;
- }
- .hljs-subst {
- color: #adbac7;
- }
- .hljs-section {
- color: #316dca;
- font-weight: 700;
- }
- .hljs-bullet {
- color: #eac55f;
- }
- .hljs-emphasis {
- color: #adbac7;
- font-style: italic;
- }
- .hljs-strong {
- color: #adbac7;
- font-weight: 700;
- }
- .hljs-addition {
- color: #b4f1b4;
- background-color: #1b4721;
- }
- .hljs-deletion {
- color: #ffd8d3;
- background-color: #78191b;
- }
- }
-}
diff --git a/src/style/components/highlightjs.css b/src/style/components/highlightjs.css
new file mode 100644
index 00000000..e472f5b3
--- /dev/null
+++ b/src/style/components/highlightjs.css
@@ -0,0 +1,206 @@
+code {
+ @apply border border-gray-500 dark:border-gray-500 px-2 py-1 rounded-lg leading-5;
+ color: #24292e;
+ background: #fff;
+ font-family: Consolas, "Courier New", monospace;
+ font-weight: 600;
+ font-size: 14px;
+ font-feature-settings: "liga" 0, "calt" 0;
+ line-height: 19px;
+}
+
+@media (prefers-color-scheme: dark) {
+ code {
+ color: #adbac7;
+ background: #22272e;
+ }
+}
+
+pre code {
+ @apply rounded-lg;
+ display: block;
+ overflow-x: auto;
+ padding: 15px;
+ line-height: 19px;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+ color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+ color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+ color: #005cc5;
+}
+
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+ color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+ color: #e36209;
+}
+
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+ color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+ color: #22863a;
+}
+
+.hljs-subst {
+ color: #24292e;
+}
+
+.hljs-section {
+ color: #005cc5;
+ font-weight: 700;
+}
+
+.hljs-bullet {
+ color: #735c0f;
+}
+
+.hljs-emphasis {
+ color: #24292e;
+ font-style: italic;
+}
+
+.hljs-strong {
+ color: #24292e;
+ font-weight: 700;
+}
+
+.hljs-addition {
+ color: #22863a;
+ background-color: #f0fff4;
+}
+
+.hljs-deletion {
+ color: #b31d28;
+ background-color: #ffeef0;
+}
+
+@media (prefers-color-scheme: dark) {
+ code {
+ color: #adbac7;
+ background: #22272e;
+ }
+
+ .hljs-doctag,
+ .hljs-keyword,
+ .hljs-meta .hljs-keyword,
+ .hljs-template-tag,
+ .hljs-template-variable,
+ .hljs-type,
+ .hljs-variable.language_ {
+ color: #f47067;
+ }
+
+ .hljs-title,
+ .hljs-title.class_,
+ .hljs-title.class_.inherited__,
+ .hljs-title.function_ {
+ color: #dcbdfb;
+ }
+
+ .hljs-attr,
+ .hljs-attribute,
+ .hljs-literal,
+ .hljs-meta,
+ .hljs-number,
+ .hljs-operator,
+ .hljs-selector-attr,
+ .hljs-selector-class,
+ .hljs-selector-id,
+ .hljs-variable {
+ color: #6cb6ff;
+ }
+
+ .hljs-meta .hljs-string,
+ .hljs-regexp,
+ .hljs-string {
+ color: #96d0ff;
+ }
+
+ .hljs-built_in,
+ .hljs-symbol {
+ color: #f69d50;
+ }
+
+ .hljs-code,
+ .hljs-comment,
+ .hljs-formula {
+ color: #768390;
+ }
+
+ .hljs-name,
+ .hljs-quote,
+ .hljs-selector-pseudo,
+ .hljs-selector-tag {
+ color: #8ddb8c;
+ }
+
+ .hljs-subst,
+ .hljs-emphasis,
+ .hljs-strong {
+ color: #adbac7;
+ }
+
+ .hljs-section {
+ color: #316dca;
+ font-weight: 700;
+ }
+
+ .hljs-bullet {
+ color: #eac55f;
+ }
+
+ .hljs-emphasis {
+ font-style: italic;
+ }
+
+ .hljs-strong {
+ font-weight: 700;
+ }
+
+ .hljs-addition {
+ color: #b4f1b4;
+ background-color: #1b4721;
+ }
+
+ .hljs-deletion {
+ color: #ffd8d3;
+ background-color: #78191b;
+ }
+}
diff --git a/src/style/components/navbar.scss b/src/style/components/navbar.scss
deleted file mode 100644
index 2a86b8b0..00000000
--- a/src/style/components/navbar.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-
-
-.navbar {
- @apply fixed top-0 left-0 w-full z-50;
-
- @supports (backdrop-filter: blur(5px)) {
- @apply backdrop-filter backdrop-blur dark:backdrop-blur-lg;
- }
-
- .container {
- @apply sm:max-w-screen-xl px-5 h-full relative;
- }
-
- .navbar-bg {
- // transition: background-color ease 0.25s;
- @apply absolute top-0 left-0 w-full h-full px-5;
- @apply bg-white dark:bg-black;
- }
-
- &.active-shadow .navbar-bg {
- @apply dark:bg-elevated;
- }
-
- .navbar-bg,
- &.active-shadow .navbar-bg {
- @supports (backdrop-filter: blur(5px)) {
- @apply dark:bg-opacity-60;
- }
- }
-
- .navbar-frame {
- @apply flex flex-wrap items-center justify-between relative;
- @apply w-full py-2;
- }
-
- .navbar-shadow {
- transition: opacity ease 0.25s;
- box-shadow: 0 4px 15px rgb(0 0 50 / 8%);
- @apply absolute top-0 left-0 w-full h-full;
- @apply opacity-0;
- }
-
- &.active-shadow .navbar-shadow {
- @apply opacity-100;
- }
-
- .navbar-border {
- // transition: border-color ease 0.25s;
- @apply absolute top-0 left-0 w-full h-full;
- @apply border-b border-gray-200;
- @apply dark:border-elevated;
- }
-
- &.active-shadow .navbar-border {
- @apply border-gray-300;
- @apply dark:border-tertiary;
- }
-}
-
-.navbar-offset {
- @apply mt-16;
-}
-
-.navbar-collapse {
- @apply items-center;
-
- @screen lt-md {
- --height: 100vh;
- transition: height ease-out 0.35s;
- @apply flex-grow;
- flex-basis: 100%;
- overflow-y: hidden;
-
- &.show {
- height: 100%;
- height: var(--height, 100vh);
- }
-
- &.collapse {
- height: 0;
- }
- }
-}
-
-.navbar-list {
- @apply flex lt-md:flex-col flex-nowrap px-1;
-}
-
-.navbar-logo {
- @apply dark:hover:text-blue-500;
- @apply text-xl font-bold ml-1;
-}
-
-.navbar-list a {
- @apply md:mx-1 lt-md:w-full lt-md:my-1;
- @apply font-medium;
-}
-
-.navbar-logo,
-.navbar-list a {
- @apply px-3 py-2 rounded-md no-underline hover:bg-gray-200;
- @apply dark:text-blue-400 dark:hover:bg-quaternary;
-
- &.active {
- @apply bg-blue-600 text-white hover:bg-blue-700;
- @apply dark:bg-blue-400 dark:text-black dark:hover:bg-blue-500;
- }
-
- &:hover {
- @apply bg-opacity-60;
- }
-}
-
-.navbar-toggle,
-.theme-toggle,
-.navbar-logo,
-.navbar-list a {
- transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
-
- @screen md {
- transition: background-color 0.15s ease-out, color 0.15s ease-out,
- border-color 0.2s ease-out, box-shadow 0.2s ease-out;
- }
-}
\ No newline at end of file
diff --git a/src/style/global.css b/src/style/global.css
new file mode 100644
index 00000000..4c7e386b
--- /dev/null
+++ b/src/style/global.css
@@ -0,0 +1,97 @@
+@import "@fontsource-variable/lexend";
+@import "@fontsource-variable/geist-mono";
+
+@import "./tailwind-reference.css";
+
+@import "./base.css";
+@import "./components/highlightjs.css";
+
+:root {
+ --font-lexend: "Lexend Variable";
+ --font-geist-mono: "Geist Mono Variable";
+}
+
+body {
+ @apply bg-white text-slate-900 font-sans;
+ line-height: 1.6;
+
+ @media (prefers-color-scheme: dark) {
+ @apply bg-black text-label;
+ }
+}
+
+body[data-sidebar-open="true"] {
+ overflow: hidden;
+}
+
+:focus-visible {
+ outline: 2px solid var(--color-focus);
+ outline-offset: 4px;
+}
+
+a {
+ word-break: break-word;
+}
+
+.layout {
+ @apply relative flex min-h-screen;
+
+ @supports (padding-inline-start: env(safe-area-inset-left)) {
+ padding-inline-start: env(safe-area-inset-left);
+ padding-inline-end: env(safe-area-inset-right);
+ padding-block-start: env(safe-area-inset-top);
+ padding-block-end: env(safe-area-inset-bottom);
+ }
+}
+
+main[data-wrapper] {
+ @apply min-w-0 w-full p-3 md:p-6 xl:p-8;
+}
+
+.page-shell,
+article[main-content] {
+ @apply w-full max-w-5xl mx-auto;
+}
+
+.page-shell {
+ @apply space-y-6;
+}
+
+.breadcrumbs {
+ @apply flex flex-wrap items-center gap-2 text-sm text-slate-500;
+
+ @media (prefers-color-scheme: dark) {
+ @apply text-slate-400;
+ }
+}
+
+.breadcrumbs a {
+ @apply no-underline;
+}
+
+article[main-content] > :last-child {
+ margin-bottom: 0;
+}
+
+details p {
+ @apply m-0;
+}
+
+main ul {
+ list-style-type: disc;
+}
+
+main ul li {
+ margin-bottom: 0.2em;
+}
+
+code,
+pre code {
+ font-family: var(--font-geist-mono), ui-monospace, monospace;
+}
+
+@media (width < 40rem) {
+ :is(h1, h2, h3, h4, h5, h6, p, a) {
+ word-break: break-word;
+ }
+}
diff --git a/src/style/global.scss b/src/style/global.scss
deleted file mode 100644
index 6c05ed6d..00000000
--- a/src/style/global.scss
+++ /dev/null
@@ -1,276 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import "./base.scss";
-@import "./components/hightlightjs";
-
-@font-face {
- font-family: "FluentSystemIcons-Regular";
- src: url("/fonts/FluentSystemIcons-Regular.ttf") format("truetype");
-}
-
-.icon:before {
- font-family: FluentSystemIcons-Regular !important;
- font-style: normal;
- font-weight: normal !important;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-link:before {
- content: "\f4e5";
-}
-
-body {
- @apply bg-white text-black;
- @apply dark:bg-black dark:text-label;
- @apply font-lexend;
- font-weight: 400;
- // font-size: 1rem;
- line-height: 1.5;
-}
-
-:focus {
- outline-color: theme("colors.blue.500");
-
- @media (prefers-color-scheme: dark) {
- outline-color: theme("colors.blue.500");
- }
-}
-
-blockquote {
- @apply rounded-lg;
- background-color: theme("colors.blue.100");
-
- @media (prefers-color-scheme: dark) {
- background-color: $color-bg-alt;
- }
-}
-
-details p {
- @apply m-0;
-}
-
-details {
- @apply cursor-pointer;
-}
-
-:is(h1, h2, h3, h4, h5, h6, p, a) {
- @screen lt-sm {
- word-break: break-all;
- }
-}
-
-p {
- // @apply font-manrope font-normal;
-}
-
-a {
- word-break: break-all;
-}
-
-// .icon {
-// -webkit-font-feature-settings: "liga" off, "dlig";
-// -moz-font-feature-settings: "liga=0, dlig=1";
-// font-feature-settings: "liga", "dlig";
-// -webkit-font-smoothing: antialiased;
-// -moz-osx-font-smoothing: grayscale;
-// text-rendering: optimizeLegibility;
-// font-family: "Material Icons Round", "Material Icons";
-// vertical-align: middle;
-// letter-spacing: normal;
-// display: inline-block;
-// text-decoration: none;
-// text-transform: none;
-// white-space: nowrap;
-// font-weight: normal;
-// position: relative;
-// font-style: normal;
-// word-wrap: normal;
-// font-size: 24px;
-// line-height: 1;
-// direction: ltr;
-// height: 1em;
-// width: 1em;
-// }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- .icon {
- visibility: hidden;
- font-size: 0.75em;
- }
-
- a {
- @apply p-2;
- }
-
- &:hover .icon {
- visibility: visible;
- border-bottom-color: transparent;
- }
-
- a:is(:hover, :focus) {
- visibility: visible;
- border-bottom-color: transparent;
- }
-}
-
-.layout {
- @apply flex relative;
- @supports (padding-inline-start: env(safe-area-inset-left)) {
- padding-inline-start: env(safe-area-inset-left);
- padding-inline-end: env(safe-area-inset-right);
-
- padding-block-start: env(safe-area-inset-top);
- padding-block-end: env(safe-area-inset-bottom);
- }
-}
-main[data-wrapper] {
- @apply w-full;
- @apply p-3;
-}
-
-article[main-content] {
- @apply md:grid gap-x-10 xl:gap-x-16 w-full;
-
- // @screen sm {
- // grid-template-columns: minmax(0, 1fr) 200px;
- // }
-
- @screen md {
- grid-template-columns: minmax(0, 1fr) 300px;
- }
-}
-.markdown-body {
- // container
- @apply block max-w-screen-lg w-full mx-auto;
- @apply p-3;
-}
-
-main ul {
- list-style-type: disc;
-
- li {
- margin-bottom: 0.2em;
- }
-}
-
-.toc {
- @apply md:text-left pt-48;
-
- .toc-sticky {
- @apply sticky top-0 pb-2 pr-2 overflow-x-visible;
- height: calc(100vh - theme("spacing.32"));
- top: calc(theme("spacing.32") - theme("spacing.10"));
-
- &:before,
- &:after {
- @apply absolute left-0 from-white dark:from-black to-transparent z-10 flex-shrink-0;
- @apply block w-full h-16 pointer-events-none;
- content: "";
- }
-
- &:before {
- @apply top-0 bg-gradient-to-b;
- transform: translateY(
- calc(
- theme("fontSize.2xl[0]") +
- theme("fontSize.2xl.1.lineHeight")
- )
- );
- }
-
- &:after {
- @apply bottom-0 bg-gradient-to-t;
- }
-
- @supports (height: 100dvh) {
- height: calc(100dvh - theme("spacing.32"));
- }
- }
-
- .toc-title {
- @apply text-2xl uppercase relative z-10;
- transform: translateY(calc(theme("spacing.10")));
- }
-
- a {
- @apply inline-block border-none text-black/75 dark:text-blue-300/80;
- @apply py-1 no-underline hover:underline;
- @apply font-light;
- word-break: break-word;
- font-size: 0.9em;
-
- &:is(:hover, :focus) {
- text-decoration-color: black;
-
- @media (prefers-color-scheme: dark) {
- text-decoration-color: white;
- }
- }
-
- &:focus {
- @apply font-normal;
- }
- }
-
- .toc-level-1 {
- @apply py-10 overflow-y-auto w-full;
- height: calc(
- 100% - theme("fontSize.2xl[0]") - theme("fontSize.2xl.1.lineHeight")
- );
-
- & > .toc-item > a {
- @apply text-blue-500;
- }
- }
-
- .toc-item .toc-level {
- padding-inline-start: 1em;
- @apply py-1 relative;
-
- li {
- @apply mb-0;
- }
-
- a {
- @apply py-2 border-l-[1px] border-dashed border-gray-500/60;
- @apply hover:border-b-0;
- padding-inline-start: 1em;
-
- &:focus {
- @apply text-blue-500;
- @apply border-b-0;
- @apply border-solid border-blue-500/80;
- }
- }
- }
-
- .toc-level-2 a {
- // font-size: 0.7em;
- @apply py-2;
- }
-}
-
-// a {
-// @apply text-blue-500 hover:text-blue-700 underline;
-// @apply dark:text-blue-400 dark:hover:text-blue-200;
-// }
-
-// button,
-// a {
-// transition: color 0.2s ease-out, box-shadow 0.2s ease-out;
-// @apply focus-visible:ring-4 focus-visible:ring-blue-500 focus-visible:ring-opacity-50;
-// @apply focus:outline-none focus-visible:rounded-sm;
-
-// -webkit-tap-highlight-color: transparent;
-// }
diff --git a/src/style/tailwind-reference.css b/src/style/tailwind-reference.css
new file mode 100644
index 00000000..aa63d069
--- /dev/null
+++ b/src/style/tailwind-reference.css
@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+@theme {
+ --font-sans: var(--font-lexend), ui-sans-serif, system-ui, sans-serif;
+ --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+ --color-label: #d9d8dc;
+ --color-tertiary: #172033;
+ --color-quaternary: #111827;
+ --color-elevated-2: #101828;
+ --color-focus: #60a5fa;
+ --color-accent: #3b82f6;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 7177d4f3..507f45bb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,8 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "astro/tsconfigs/strict",
+ "include": [".astro/types.d.ts", "astro.config.ts", "src/**/*"],
+ "exclude": ["dist", "node_modules", "packages", "repl.ts", "strong-spectrum"],
"compilerOptions": {
// Enable strict mode. This enables a few options at a time, see https://www.typescriptlang.org/tsconfig#strict for a list.
"strict": true,