@charset "UTF-8"; /* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } :root { --black: #181818; --white: #D5D5D5; --grey-100: #747474; --green: #87FF5B; --blue: #5B92FF; } :root .theme-light { --theme-bg: #D5D5D5; --theme-fg: #181818; --theme-accent: #87FF5B; --theme-link: #5B92FF; } :root .theme-dark { --theme-bg: #181818; --theme-fg: #D5D5D5; --theme-accent: #87FF5B; --theme-link: #5B92FF; } :root { --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985); } /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .lily-cursor { z-index: 20; } .site-header { z-index: 10; } .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .overflow-hidden { overflow: hidden; } .relative { position: relative; } @media (min-width: 800px) { .mobile-only { display: none !important; } } @media (max-width: 799px) { .desktop-only { display: none !important; } } html:not(.has-scroll-smooth) .hide-on-native-scroll { display: none; } html.has-scroll-smooth .hide-on-smooth-scroll { display: none; } /* Font Weights: 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Normal 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy) */ /* Leibniz Fraktur */ @font-face { font-family: "Leibniz Fraktur"; font-style: normal; font-weight: 400; src: url("./leibniz-fraktur-BqdMSuEI.woff2") format("woff2"), url("./leibniz-fraktur-CvnkUeBX.woff") format("woff"); } /* Geist Mono */ @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; src: url("./geist-mono-bold-CTLtpKvJ.woff2") format("woff2"), url("./geist-mono-bold-Bz_UliG4.woff") format("woff"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; src: url("./geist-mono-BzrJhchg.woff2") format("woff2"), url("./geist-mono-OFKGen7b.woff") format("woff"); } :root { --font-display: 'Leibniz Fraktur', serif; --font-mono: 'Geist Mono', monospace; } :root { --layout-column-count: 5; --layout-column-gap: 5.6497175141vw; --layout-margin: 8.4745762712vw; --layout-width: calc(100vw - (2 * var(--layout-margin))); --layout-column-width: calc( ( var(--layout-width) - ( (var(--layout-column-count) - 1) * var(--layout-column-gap) ) ) / var(--layout-column-count) ); } .layout-block, .layout-grid { max-width: var(--layout-width); margin-left: auto; margin-right: auto; width: 100%; } .layout-block-inner, .layout-grid-inner { padding-left: var(--layout-margin); padding-right: var(--layout-margin); width: 100%; } .layout-grid { display: grid; grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr)); grid-gap: var(--layout-column-gap); } .layout-grid-inner { display: grid; grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr)); grid-gap: var(--layout-column-gap); } html:not(.dev), html:not(.dev) * { scrollbar-width: none !important; -ms-overflow-style: none !important; } html:not(.dev)::-webkit-scrollbar, html:not(.dev) *::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } .fade-enter-active, .fade-leave-active { transition: opacity 400ms; } .fade-enter-from, .fade-leave-to { opacity: 0; } .quick-fade-enter-active, .quick-fade-leave-active { transition: opacity 100ms; } .quick-fade-enter-from, .quick-fade-leave-to { opacity: 0; } .slow-fade-enter-active, .slow-fade-leave-active { transition: opacity 600ms; } .slow-fade-enter-from, .slow-fade-leave-to { opacity: 0; } .slide-up-enter-active, .slide-up-leave-active { transition: transform 400ms var(--ease-out-quad); } .slide-up-enter-from, .slide-up-leave-to { transform: translateY(-100%); } .slide-left-enter-active, .slide-left-leave-active { transition: transform 400ms var(--ease-out-quad); } .slide-left-enter-from, .slide-left-leave-to { transform: translateX(-100%); } :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: var(--black); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-height: 100vh; } .h1, h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.3; font-size: 8.4745762712vw; } .h1.mono, h1.mono, h2.mono, h3.mono, h4.mono, h5.mono, h6.mono { font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 6.2146892655vw; } .p, p, a, button, input, pre { font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 3.3898305085vw; } .bold { font-weight: 700; } #app { min-height: 100vh; } ::selection { color: var(--theme-bg); background: var(--theme-accent); } ::-moz-selection { color: var(--theme-bg); background: var(--theme-accent); }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .container { min-height: calc(100 * var(--vh)); max-width: 100vw; overflow-x: clip; background: var(--theme-bg); color: var(--theme-fg); transition: opacity 1000ms; } .container:not(.fonts-ready) { opacity: 0; }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .category-row { display: grid; grid-template-columns: 7.3446327684vw 1fr; width: 100%; position: relative; padding: 1.4124293785vw 0 4.2372881356vw; cursor: pointer; } .category-row .index { margin-top: 5.3672316384vw; } .category-row .title { display: block; width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (max-width: 799px) { .category-row .title { -webkit-line-clamp: 2; } } .category-row::after { content: "----------------------------------------"; position: absolute; bottom: 0; left: 0; } .category-row.router-link-exact-active { cursor: default; } .category-row:hover:not(.router-link-exact-active) { color: var(--theme-accent); }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .note-row { grid-template-columns: auto 1fr; display: grid; gap: 5.6497175141vw; cursor: pointer; } .note-row .title { width: 44.9152542373vw; position: relative; } .note-row .title::after { content: "(open)"; position: absolute; bottom: 0; right: 0; transform: translateX(100%); font-weight: 700; opacity: 0; } .note-row:hover { color: var(--theme-accent); } .note-row:hover .title::after { opacity: 1; }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .directory { padding-top: 5.0847457627vw; } .directory .label { text-transform: uppercase; margin: 4.802259887vw 0 6.7796610169vw; font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 3.3898305085vw; } .directory .notes { display: flex; flex-direction: column; gap: 3.9548022599vw; }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .editor { padding-top: 2.2598870056vw; padding-bottom: 5.6497175141vw; } .editor h1 { font-weight: 700 !important; font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 3.3898305085vw; } .editor h1:first-child { font-family: var(--font-mono); font-size: 3.3898305085vw; font-weight: 400 !important; } .editor h1:first-child:first-child::first-letter { font-family: var(--font-display); font-size: 11.8644067797vw; } .editor h1.is-editor-empty:first-child::before { color: var(--grey-100); content: attr(data-placeholder); pointer-events: none; font-family: var(--font-mono); font-size: 3.3898305085vw; font-weight: 400 !important; } .editor h1.is-editor-empty:first-child::before:first-child::first-letter { font-family: var(--font-display); font-size: 11.8644067797vw; } .editor p strong { font-weight: 700; } .editor p em { font-style: italic; } .editor hr::before { content: "----------------------------------------"; font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 3.3898305085vw; } .editor ul { list-style-type: disc; } .editor ul li { display: list-item; margin-left: 1em; } .editor ol { list-style-type: decimal; } .editor ol li { display: list-item; margin-left: 1.5em; } .editor ol li::marker { font-family: var(--font-mono); font-weight: 400; line-height: 1; font-size: 3.3898305085vw; } .editor a { color: var(--theme-link); cursor: pointer; } .editor .editor-wrap > div { display: flex; flex-direction: column; gap: 5.6497175141vw; } .editor .editor-wrap > div:focus { outline: none; } .editor .bubble-menu { display: flex; gap: 1.4124293785vw; border: 1px solid var(--grey-100); color: var(--grey-100); border-radius: 0.2em; background: var(--theme-bg); } .editor .bubble-menu button { cursor: pointer; padding: 0.2em; border-radius: 0.2em; } .editor .bubble-menu button:hover { background: var(--grey-100); color: var(--theme-bg); } .editor .bubble-menu button.active { background: var(--theme-fg); color: var(--theme-bg); }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .category .back { display: block; opacity: 0.25; margin-top: 2.5423728814vw; } .category .category-row { margin-top: 1.1299435028vw; } .category .notes { display: flex; flex-direction: column; gap: 3.9548022599vw; margin-top: 2.5423728814vw; }