editor WIP
This commit is contained in:
nicwands
593
out/renderer/assets/index-BBQ3KGTF.css
Normal file
593
out/renderer/assets/index-BBQ3KGTF.css
Normal file
@@ -0,0 +1,593 @@
|
||||
@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: #000000;
|
||||
--white: #d9d9d9;
|
||||
--pink: #DAC3C3;
|
||||
--green: #D8E3D3;
|
||||
--cream: #F2F1F1;
|
||||
--grey: #2B2B2B;
|
||||
}
|
||||
|
||||
:root .theme-light {
|
||||
--theme-bg: #d9d9d9;
|
||||
--theme-fg: #000000;
|
||||
}
|
||||
:root .theme-dark {
|
||||
--theme-bg: #000000;
|
||||
--theme-fg: #d9d9d9;
|
||||
}
|
||||
|
||||
: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 <body> 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: 4.5454545455vw;
|
||||
--layout-margin: 6.8181818182vw;
|
||||
--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)
|
||||
);
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
:root {
|
||||
--layout-column-count: 18;
|
||||
--layout-column-gap: 1.1574074074vw;
|
||||
--layout-margin: 3.4722222222vw;
|
||||
}
|
||||
}
|
||||
|
||||
.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(--white);
|
||||
color: 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.1em;
|
||||
font-size: 6.1363636364vw;
|
||||
}
|
||||
.h1.vh,
|
||||
h1.vh,
|
||||
h2.vh,
|
||||
h3.vh,
|
||||
h4.vh,
|
||||
h5.vh,
|
||||
h6.vh {
|
||||
font-size: 2.8242677824vh;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.h1,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 2.4305555556vw;
|
||||
}
|
||||
.h1.vh,
|
||||
h1.vh,
|
||||
h2.vh,
|
||||
h3.vh,
|
||||
h4.vh,
|
||||
h5.vh,
|
||||
h6.vh {
|
||||
font-size: 3.7600716204vh;
|
||||
}
|
||||
}
|
||||
|
||||
.p,
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.03em;
|
||||
font-size: 4.0909090909vw;
|
||||
}
|
||||
.p.vh,
|
||||
p.vh,
|
||||
a.vh,
|
||||
button.vh,
|
||||
input.vh,
|
||||
pre.vh {
|
||||
font-size: 1.8828451883vh;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.p,
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
pre {
|
||||
font-size: 1.4467592593vw;
|
||||
}
|
||||
.p.vh,
|
||||
p.vh,
|
||||
a.vh,
|
||||
button.vh,
|
||||
input.vh,
|
||||
pre.vh {
|
||||
font-size: 2.2381378693vh;
|
||||
}
|
||||
}
|
||||
|
||||
.entry img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.entry p {
|
||||
min-height: 1px;
|
||||
}
|
||||
.entry a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.entry > * {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.entry > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.entry > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.entry ul li,
|
||||
.entry ol li {
|
||||
margin-bottom: 1em;
|
||||
width: 33.3912037037vw;
|
||||
}
|
||||
.entry ul {
|
||||
list-style: disc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
5% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes bonk {
|
||||
0% {
|
||||
transform: rotate(calc(var(--bonk-angle) * -1));
|
||||
}
|
||||
50% {
|
||||
transform: rotate(var(--bonk-angle));
|
||||
}
|
||||
}/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user