/* The actual main CSS file for this website */ /* Useful Regex Search Patterns - For Development */ /* Hexcodes (without case-sensitivity) - #([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})(?=[^0-9a-z]) */ /* Hexcodes (with/without case-sensitivity) - #([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})(?=[^0-9a-zA-Z]) */ /* Selector with an ID - #.*\s\{ */ /* Useful Regex Search Patterns - For Development * * Hexcodes (without case-sensitivity) - #([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})(?=[^0-9a-z]) * Hexcodes (with/without case-sensitivity) - #([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})(?=[^0-9a-zA-Z]) * Selector with an #iD - #.*\s\{ */ @layer base, framework, notScoped, scoped; /* --- Global and Root Element Styles --- */ @layer framework { @starting-style { #mainContent > #textSide > header :is(nav > button, hgroup > :is(h1, p)), #mainContent > #textSide > figure > :is(figcaption, figcaption + div), #mainContent > #editorSide > #codeEditor .editorWrapper { opacity: 0; } #inputEditorWrapper { display: none; background-color: transparent; } #outputEditorWrapper { opacity: 0; background-color: transparent; } #outputEditorWrapper { opacity: 0; } } :root { font-size: clamp(0px, 1.5dvh, 24px); --lightness-darkest: 20%; --chroma-darkest: 0.0424; --lightness-em-darker: 25%; --chroma-em-darker: 0.0424; --lightness-m-darker: 40%; --chroma-m-darker: 0.0679; --lightness-darker: 55%; --chroma-darker: 0.0935; --lightness-medium: 75%; --chroma-medium: 0.1278; --lightness-lighter: 85%; --chroma-lighter: 0.0821; --lightness-lightest: 90%; --chroma-lightest: 0.0522; --hue-pri-colour: 235; --hue-sec-colour: 205; --hue-red-colour: 15; --hue-shades: 360; --pri-colour-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--hue-pri-colour)); /* #051823 */ --pri-colour-em-darker: oklch(var(--lightness-em-darker) var(--chroma-em-darker) var(--hue-pri-colour)); /* #092533 */ --pri-colour-m-darker: oklch(var(--lightness-m-darker) var(--chroma-m-darker) var(--hue-pri-colour)); /* #1c4d67 */ --pri-colour-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--hue-pri-colour)); /* #307aa0 */ --pri-colour-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--hue-pri-colour)); /* #4dbaf3 */ --pri-colour-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--hue-pri-colour)); /* #98d7fc */ --pri-colour-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--hue-pri-colour)); /* #bde4fc */ --sec-colour-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--hue-sec-colour)); /* #001a1d */ --sec-colour-em-darker: oklch(var(--lightness-em-darker) var(--chroma-em-darker) var(--hue-sec-colour)); /* #00272b */ --sec-colour-m-darker: oklch(var(--lightness-m-darker) var(--chroma-m-darker) var(--hue-sec-colour)); /* #015259 */ --sec-colour-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--hue-sec-colour)); /* #02818b */ --sec-colour-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--hue-sec-colour)); /* #03c4d4 */ --sec-colour-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--hue-sec-colour)); /* #8aDee7 */ --sec-colour-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--hue-sec-colour)); /* #b6e9ee */ --red-colour-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--hue-red-colour)); /* #230f11 */ --red-colour-em-darker: oklch(var(--lightness-em-darker) var(--chroma-em-darker) var(--hue-red-colour)); /* #33191b */ --red-colour-m-darker: oklch(var(--lightness-m-darker) var(--chroma-m-darker) var(--hue-red-colour)); /* #67383c */ --red-colour-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--hue-red-colour)); /* #a15a60 */ --red-colour-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--hue-red-colour)); /* #f48a94 */ --red-colour-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--hue-red-colour)); /* #ffb8bc */ --red-colour-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--hue-red-colour)); /* #ffd1d3 */ --shades-darkest: oklch(var(--lightness-darkest) none none); /* #161616 */ --shades-em-darker: oklch(var(--lightness-em-darker) none none); /* #222222 */ --shades-m-darker: oklch(var(--lightness-m-darker) none none); /* #484848 */ --shades-darker: oklch(var(--lightness-darker) none none); /* #717171 */ --shades-medium: oklch(var(--lightness-medium) none none); /* #aeaeae */ --shades-lighter: oklch(var(--lightness-lighter) none none); /* #cecece */ --shades-lightest: oklch(var(--lightness-lightest) none none); /* #dedede */ --shades-black: black; --shades-white: white; --opacity-low: 0.25; --opacity-medium: 0.50; --opacity-high: 0.75; /* I need to update the code accordingly at some point: */ --vh: 1vh; --dvh: var(--vh); --dvh: 1dvh; --svh: var(--vh); --svh: 1svh; --lvh: var(--vh); --lvh: 1lvh; } * { box-sizing: border-box; &[hidden] { display: none; } } html { background-color: color-mix(in srgb, #000 50%, var(--sec-colour-darkest)); /* scroll-behavior: smooth; */ overflow: hidden; ::-webkit-scrollbar { width: 0; } } body { visibility: visible; opacity: 1; margin: 0; height: 100dvh; background-color: var(--shades-black); /* --- Skip Link Styles --- */ > .skip-to-section { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; font-size: 1rem; &:focus { height: auto; width: auto; left: 50%; translate: -50%; padding: 1rem 2rem; background-color: rgb(from var(--shades-black) r g b / 0.5); outline: none !important; border: 0.2rem solid rgb(from var(--shades-darker) r g b / var(--opacity-medium)); border-top: none; border-radius: 0 0 0.5rem 0.5rem; font-family: 'Poppins', 'Calibri', sans-serif; color: var(--shades-white); z-index: 9999; text-decoration: none; } a&:has(~ #siteWrapper > main.nesting) { display: none; } } } } /* If not scopeable, apply non-scoped code (basically just for the FireFox-based browsers) - temporarily: until they support it later this year */ @layer notScoped { body { /* Baseline Styles */ #siteWrapper { margin: 0 auto; width: clamp(0px, 100%, 3200px); height: 100dvh; contain: paint; overflow: hidden auto; animation: lightenBackgroundColour linear 1ms; animation-timeline: scroll(self); &:has(> .nesting) { overflow: hidden; } > main { --padding: 2rem; display: flex; justify-content: flex-end; height: 96dvh; width: 100%; padding: var(--padding); > #mainSettings { flex: 0; height: 100%; min-width: 0; margin-right: 0; display: flex; flex-direction: column; contain: paint inline-size; gap: var(--padding); padding-bottom: calc((3/4) * var(--padding)); overflow: hidden auto; transition: margin-right 2s, min-width 2s; > section { border-radius: 3rem; --panel-background: color-mix(in srgb, var(--shades-darkest), var(--shades-black) 75%); background-color: var(--panel-background); padding: var(--padding); min-width: 58.441558ch; display: flex; flex-direction: column; gap: var(--padding); font-family: 'Poppins', 'Calibri', sans-serif; /* &:not(:nth-last-child(1)) { display: none; } */ > h2 { margin: 0; font-size: 1.25rem; font-weight: normal; color: var(--shades-medium); } > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; --component-gap: calc(var(--padding) / 4); --component-background: color-mix(in srgb, var(--shades-black), var(--shades-darkest)); --component-background-selected: linear-gradient(to right, var(--shades-m-darker), var(--shades-em-darker)); --component-box-shadow-selected: inset 0 calc(1rem / 16) oklch(100% none none / var(--opacity-low)); --component-box-shadow-focused: 0 0 1.5em var(--shades-medium); --component-text: color-mix(in srgb, var(--shades-darker), var(--shades-medium)); --component-text-hover: var(--shades-medium); gap: var(--component-gap); > li { display: grid; grid-template-columns: repeat(10, 1fr); > span { cursor: auto; grid-column: span 3; align-content: center; font-size: 1.125rem; font-weight: 300; color: var(--component-text); > p { margin: 0; font-size: 0.625rem; color: var(--shades-m-darker); } } > div { grid-column: span 7; display: flex; flex-direction: row; justify-content: space-between; gap: var(--component-gap); color: var(--component-text); font-size: 1rem; /* Generic Components */ > #typefaces { flex: 1; } > #fontsizes { width: auto; margin: 0; flex: 0; } > #indentationType { flex: 1; } > #indentationSize { flex: 0; display: flex; align-items: center; gap: var(--component-gap); } > #wordWrap { flex: 1; } > #coordinates { flex: 1; } > #mode { flex: 1; } > #auto { flex: 1; } > #preserveComments { flex: 1; } > #externalCss { flex: 1; max-width: 100%; } > #samples { flex: 1; } /* Specific Components */ > .dropdown, > .combobox { user-select: none; display: inline-flex; flex-direction: column; width: auto; margin: 0; text-align: left; box-sizing: content-box; position: relative; > input { appearance: none; position: absolute; margin: 0; } &:focus-within > input:checked { + output { border-radius: 1rem 1rem 0 0; } ~ ul { position: absolute; z-index: 999; top: 100%; width: 100%; display: flex; margin: 0; margin-top: 0.25rem; padding: 1em; gap: 0.5em; flex-direction: column; background: var(--component-background); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; box-shadow: 0px 10px 10px 2.5px rgb(from var(--shades-black) r g b / 0.5); > li { overflow: hidden; text-overflow: ellipsis; outline: none !important; &:hover { color: var(--component-text-hover); cursor: pointer; } &:focus { color: var(--component-text-hover); } &:disabled { color: rgb(from var(--component-text) r g b / 0.5); cursor: not-allowed; &:hover { color: inherit; } } } } } > output { outline: none !important; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: clip; background: url("data:image/svg+xml,%3Csvg fill='%23484848' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z'%3E%3C/path%3E%3C/svg%3E") right 1rem top 50% / 1ch no-repeat, var(--component-background); border-radius: 1rem; padding: 1rem; padding-right: calc(1rem + 2ch); &:hover { color: var(--component-text-hover); } } /* Component Specific */ &.dropdown:has(:is(input, ul > li):focus) > output { z-index: 1; box-shadow: var(--component-box-shadow-focused); } &.combobox { &:has(:is(input, output > div, ul > li):focus) > output { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > output { &&:hover > div:empty::before { color: var(--shades-darker); } > div { cursor: auto; overflow: hidden; text-overflow: ellipsis; outline: none !important; &:focus { overflow-x: scroll; scrollbar-width: none; text-overflow: clip; } &:not(:focus):empty { align-content: center; font-size: 75%; padding: 0.25em 0; &::before { pointer-events: none; content: attr(placeholder); color: var(--shades-m-darker); } } } } } } > .number { user-select: none; position: relative; width: fit-content; color: var(--component-text); border: none; padding: 1rem; gap: calc(2 * var(--component-gap)); background: var(--component-background); border-radius: 1rem; &:hover { color: var(--component-text-hover); } &:has(input:focus, input:active) { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > output > input { cursor: auto; display: inline-block; margin-right: 1ch; outline: none !important; ~ div { position: absolute; width: 1ch; top: 50%; right: 1rem; translate: 0 -50%; display: flex; flex-direction: column; gap: 0.25em; > svg { cursor: pointer; } } &[type="text"] { appearance: none; background: inherit; border: inherit; color: inherit; font: inherit; overflow: visible !important; overflow-wrap: break-word; text-align: inherit; -webkit-user-modify: read-write; } } } > .checkbox { outline: none !important; user-select: none; position: relative; display: flex; border-radius: 1rem; background: var(--component-background); &::before { position: absolute; content: ''; height: 100%; left: 0%; width: 50%; border-radius: inherit; background: var(--component-background-selected); box-shadow: var(--component-box-shadow-selected); z-index: 0; transition: 0.25s; } &:has(:checked)::before { left: 50%; } &:has(input:focus, input:active) { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > input { appearance: none; position: absolute; margin: 0; } > span { position: relative; cursor: pointer; flex: 1; padding: 1rem 2.5ch; text-align: center; align-content: center; &:hover { color: var(--component-text-hover); } } } > .radio-group { user-select: none; display: flex; gap: var(--component-gap); > label { outline: none !important; flex: 1; cursor: pointer; padding: 1rem 1.75ch; text-align: center; align-content: center; border-radius: 1rem; --top-colour: var(--shades-m-darker); --bottom-colour: var(--shades-em-darker); background: linear-gradient(to bottom, var(--top-colour), var(--bottom-colour) 45%, var(--component-background) 55%) 0% 100% / 100% 210% no-repeat, var(--component-background); transition: background-position 0.125s ease-out; &:has(:disabled) { &, &:hover { --shades-true-darkest: color-mix(in srgb, var(--shades-black), var(--shades-darkest)); background: linear-gradient(to bottom, var(--shades-black), var(--shades-true-darkest)); box-shadow: inset 0 calc(-1rem / 16) var(--shades-darkest); color: var(--shades-m-darker); cursor: not-allowed; } } &:has(:checked) { box-shadow: var(--component-box-shadow-selected); background-position: 0% 0%; } &:hover { color: var(--component-text-hover); } &:has(> input:focus) { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > input { appearance: none; position: absolute; margin: 0; } } &.button { > label { --top-colour: var(--sec-colour-m-darker); --bottom-colour: var(--pri-colour-darkest); } } } } } } > :has(table) { overflow-y: scroll; max-height: 16rem; padding: calc(var(--padding) / 2); border-radius: 1.5rem; --table-background: color-mix(in srgb, var(--shades-darkest), var(--panel-background) 75%); background-color: var(--table-background); scrollbar-width: 0.75rem; > table { width: 100%; font-size: 0.75rem; color: var(--shades-medium); > colgroup > col:last-child { width: 0; } > thead { tr { &:first-child th { font-weight: normal; color: var(--shades-darker); &:first-child { text-align: left; } } &:last-child th { font-weight: normal; color: var(--shades-m-darker); } } } > tbody { &:empty:before { content: "There are no errors."; } > tr { color: var(--shades-medium); cursor: pointer; font-weight: normal; &:hover { background-color: rgb(from var(--shades-em-darker) r g b / var(--opacity-low)); } > th { text-align: start; font-weight: normal; } > td { text-align: center; } } } } --track-colour: color-mix(in srgb, var(--shades-black), var(--panel-background) 75%); --thumbnail-colour: var(--shades-m-darker); --scrollbar-padding: 4px; --scrollbar-width: 12px; /* Non-Standard Properties */ @supports selector(::-webkit-scrollbar) { &::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } &::-webkit-scrollbar-thumb { background: var(--thumbnail-colour); border-radius: 999px; border: var(--scrollbar-padding) solid transparent; background-clip: padding-box; } &::-webkit-scrollbar-track { background: var(--track-colour); border-radius: 999px; } } /* Standard Properties */ @supports not selector(::-webkit-scrollbar) { scrollbar-color: var(--thumbnail-colour) var(--track-colour); scrollbar-width: thin; } } } > nav { display: inline-flex; padding: 0 4ch; justify-content: space-evenly; margin: 0; > a { height: calc(100% - 4px); outline: none !important; display: grid; --icon-size: 4rem; grid: var(--icon-size) / var(--icon-size); position: relative; padding: 0; border: none; background: none; border-radius: 999px; &:nth-of-type(1) > figure { clip-path: url(#iconGithub); } &:nth-of-type(2) > figure { clip-path: url(#iconHistory); } &:nth-of-type(3) > figure { clip-path: url(#iconSettings); } &:nth-of-type(4) > figure { clip-path: url(#iconBug); margin-top: -2px; } &:nth-of-type(5) > figure { clip-path: url(#iconShareYourMind); } > * { border-radius: inherit; height: 100%; width: 100%; } > figure { margin: 0; container-type: size; background: rgb(from var(--shades-white) r g b / 0.25); > svg { contain: size; > clipPath { scale: 0.012; translate: -7cqw -11cqh; } } &.hidden.inner-cursor::after { animation-play-state: paused; } } &:not([aria-disabled="true"]) { > figure.inner-cursor::after { pointer-events: none; border-radius: inherit; position: fixed; content: ""; top: 0; left: 0; z-index: -999; translate: calc(var(--cursor-x-pos) - 50%) calc(var(--cursor-y-pos) - 50%); height: 75cqh; width: 75cqw; filter: blur(1rem); background-color: var(--shades-white); animation: blink 3s infinite alternate-reverse; } &:focus { z-index: 1; outline: 1px solid var(--shades-darker) !important; box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-medium); } } &[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; use { pointer-events: none; } } } } } > #mainContent { --background: url("https://ucarecdn.com/380d4e4c-268c-4913-8c92-e049c44234ec/-/preview/189x189/") 0 0.1dvh / 5dvh repeat, linear-gradient(to right, rgb(from var(--shades-black) r g b / var(--opacity-medium)), rgb(from var(--pri-colour-em-darker) r g b / var(--opacity-medium))) 0 0 / 100dvw 100dvh, linear-gradient(45deg, transparent, rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium)) 50%, transparent) 0 0 / 100dvw 100dvh, var(--shades-black); display: flex; justify-content: space-between; container-type: size; flex: 1; width: fit-content; position: relative; background: var(--background); border-radius: 3rem; transform-origin: center; @supports (animation-range: normal) { animation: scaleDown linear 1ms; animation-timeline: view(); animation-range-start: contain 100%; animation-range-end: cover 100%; } > #textSide { width: 100%; height: 100%; display: flex; padding: 2rem 0; flex-direction: column; justify-content: space-between; container-type: inline-size; contain: paint; transition: width 2s, opacity 2s, padding 2s; > header { margin: 2rem 2rem 0 4rem; font-size: clamp(0.5rem, 16px, 1.5rem); > hgroup { display: flex; flex-direction: column-reverse; color: rgb(from var(--shades-white) r g b / var(--opacity-high)); font-family: 'Poppins', 'Calibri', sans-serif; > * { margin: 0; } > h1 { display: inline-block; white-space: nowrap; line-height: 125%; font-weight: 900; font-size: 6em; transition: opacity 3s 1.5s; &:hover { color: var(--shades-white); } } > h2 { line-height: 125%; font-weight: 200; font-size: 3em; height: 2lh; width: 24ch; transition: opacity 3s 3s; transform: translateZ(0); } } > nav { display: inline-flex; --primary-colour: var(--shades-darker); --secondary-colour: color-mix(in srgb, var(--shades-lightest), var(--primary-colour) 50%); gap: 0.33em; margin: 1em 0; padding: 0; > a { /* --- Animation Duration & Delay Variables --- */ /* Part 1: Icon changing (on hover) */ --anim-duration-icon-in: 0.5s; --anim-duration-bg-in: 0s; --delay-icon-in-paths: 0s; --delay-icon-in-bg: calc(var(--delay-icon-in-paths) + var(--anim-duration-icon-in) + 0s); /* Part 2: Text being shown (on hover) */ --anim-duration-text-show: 0.5s; --anim-duration-text-opacity-show: 0.25s; --delay-text-show-font: calc(var(--delay-icon-in-bg) + 0s); --delay-text-show-opacity: calc(var(--delay-text-show-font) + var(--anim-duration-text-show) + 0s); /* Part 3: Text being hidden (on mouse out) */ --anim-duration-text-hide: 0.5s; --anim-duration-text-opacity-hide: 0.25s; --delay-text-hide-opacity: 0s; --delay-text-hide-font: 0.5s; /* Part 4: Icon changing back (on mouse out) */ --anim-duration-icon-out: 0.5s; --anim-duration-bg-out: 0s; --delay-icon-out-paths: calc(var(--delay-text-hide-font) + var(--anim-duration-text-hide) + 0s); --delay-icon-out-bg: calc(var(--delay-icon-out-paths) + 0s); display: flex; font-size: inherit; font-family: 'Poppins', 'Calibri', sans-serif; text-decoration: none; flex-direction: row; align-items: center; position: relative; padding: 0; outline: none !important; border: none; background: radial-gradient(circle at 1.5em, transparent calc(1.5em - 0.125em), var(--button-bg) 0, var(--button-bg) 100%); border-radius: 999px; /* Initial state of icon fills and button background */ --button-bg: transparent; transition: opacity 3s 1s, --button-bg var(--anim-duration-bg-out) var(--delay-icon-out-bg); > svg { height: 3em; width: auto; aspect-ratio: 1 / 1; border-radius: inherit; box-sizing: border-box; /* Transitions for HOVER-OUT */ --icon-path-one-fill: var(--primary-colour); --icon-path-two-fill: transparent; --icon-paths-fill-transition: --icon-path-one-fill var(--anim-duration-icon-out) var(--delay-icon-out-paths), --icon-path-two-fill var(--anim-duration-icon-out) var(--delay-icon-out-paths); } > span { flex: 1; display: block; color: transparent; font-weight: 600; font-size: 0; opacity: 0; line-height: 1; padding: 1.5ch 0; padding-right: 3ch; translate: 1ch; background: var(--background); background-clip: text; /* Transitions for HOVER-OUT */ transition: font-size var(--anim-duration-text-hide) var(--delay-text-hide-font), opacity var(--anim-duration-text-opacity-hide) var(--delay-text-hide-opacity), color var(--anim-duration-bg-out) var(--delay-icon-out-bg); } &:not([aria-disabled="true"]) { &:hover { /* Hover state of icon fills and button background */ --button-bg: var(--secondary-colour); transition: --button-bg var(--anim-duration-bg-in) var(--delay-icon-in-bg); > svg { /* Transitions for HOVER-IN */ --icon-path-one-fill: transparent; --icon-path-two-fill: var(--secondary-colour); --icon-paths-fill-transition: fill var(--anim-duration-icon-in) var(--delay-icon-in-paths); } > span { translate: 1ch 0; font-size: unset; opacity: 1; /* Transitions for HOVER-IN */ transition: font-size var(--anim-duration-text-show) var(--delay-text-show-font), opacity var(--anim-duration-text-opacity-show) var(--delay-text-show-opacity), color var(--anim-duration-icon-in) var(--delay-icon-in-bg); } } &:focus { z-index: 1; outline: 1px solid var(--shades-medium) !important; box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-lighter); } } &[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; use { pointer-events: none; } } } } } > figure { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; margin: 0; margin-left: 4rem; margin-right: 2rem; height: 100%; width: min(50vw, calc(100% - 6rem)); /* margin-left + right */ container: ads-container / size; > figcaption { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: rgb(from var(--shades-white) r g b / var(--opacity-high)); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 200; font-size: 1.25rem; height: 2rem; align-content: center; transition: opacity 3s; } > div { display: flex; flex-flow: row; width: fit-content; max-width: 100%; contain: paint; overflow-clip-margin: content-box; border: 0.125rem solid rgb(from var(--shades-darker) r g b / var(--opacity-low)); padding: 1rem; gap: 1rem; animation: slideInLeft 0.5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; transition: 0.25s, opacity 3s 1s; > picture { width: 17.637rem; aspect-ratio: 1 / 1; transition: filter 0.25s; > * { cursor: pointer; height: 100%; width: auto; aspect-ratio: 1 / 1; object-fit: contain; &.adsbygoogle:not([data-ad-status="filled"]) { display: none; & ~ img { display: block; } } & ~ img { display: none; } } } &:hover { border-color: rgb(from var(--shades-lighter) r g b / var(--opacity-low)); &:has(> picture:hover) { border-color: rgb(from var(--shades-lighter) r g b / var(--opacity-medium)); } picture:not(:hover) { filter: grayscale(1); } } } } } > #editorSide { container-type: inline-size; flex: none; max-width: 100%; & { --gutter-width: 0.25; --editor-width: 5; --total-width: (var(--editor-width) + var(--gutter-width) + var(--editor-width)); --vertical-padding: (2 * var(--padding)); --horizontal-padding: (2 * var(--padding)); --code-editor-height: (100cqh); --code-editor-width: (100cqw); --content-height: (var(--code-editor-height) - var(--vertical-padding)); --total-editor-width: ((var(--total-width) / 7) * var(--content-height)); --single-editor-width: ((var(--editor-width) / 7) * var(--content-height)); --gutter-real-width: ((var(--gutter-width) / 7) * var(--content-height)); --settings-panel-width: (58.441558ch * 1.232); } #nestBtn { /* Container styles - positioning and animation */ cursor: pointer; font-size: 0.75rem; position: absolute; top: 0; right: 0; translate: -2rem calc(96dvh - 6rem - 100%); z-index: 10; background: none; border: none; border-radius: 50%; outline: none !important; padding: 0; --nestBtn-shadow-direction: 1; animation: bounceInTop 1.5s 0.5s both; transition: opacity 1s, font-size 1s, translate 1s, --nestBtn-shadow-direction 1s; &:disabled { cursor: not-allowed; filter: brightness(0.5); color: var(--shades-black); > div:hover { scale: unset; } } &:focus { box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-lighter); > div { outline: 1px solid var(--shades-medium) !important; } } > div { /* Main button face styles */ border-radius: inherit; padding: 1.5em; aspect-ratio: 1 / 1; font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 500; text-align: center; align-content: center; transform-origin: bottom right; transition: scale 0.5s, background-color 1s; /* Visuals */ background-color: var(--pri-colour-lighter); box-shadow: inset 0 0 1em 0 var(--shades-black); &:hover { scale: 1.333; background-color: var(--shades-white); } &::before { content: 'Nest!'; } } > span { /* Animated background layers */ position: absolute; inset: 1em; opacity: 0; z-index: -1; border-radius: inherit; transition: inset 0.5s, opacity 2s, background-color 2s; animation: shadowRotate 3s infinite both; /* --nestBtn-shadow-direction: -1; */ /* Show spans on hover of the main div */ :is(#nestBtn:not(:disabled):has(> div:hover) > &) { inset: 0.5em; opacity: 1; } /* Individual layer colors and animation delays */ &:nth-of-type(1) { background-color: rgb(from var(--pri-colour-medium) r g b / var(--opacity-medium)); animation-delay: 0s; } &:nth-of-type(2) { background-color: rgb(from var(--sec-colour-medium) r g b / var(--opacity-medium)); animation-delay: -1s; } &:nth-of-type(3) { background-color: rgb(from color-mix(in srgb, var(--pri-colour-medium), var(--sec-colour-medium)) r g b / var(--opacity-medium)); animation-delay: -2s; } } /* Pause animations when hidden or main content is not hovered */ &.hidden > span { animation-play-state: paused; } } > #codeEditor { flex: none; height: 100%; display: flex; justify-content: center; width: calc((var(--code-editor-height) - var(--vertical-padding)) * (var(--editor-width) / 7)); transition: opacity 0.5s ease-out; &.loading { visibility: hidden; opacity: 0; } /* moveLeft Animation Variables */ & { --screen-width: (100lvw); --editor-canvas-width: (100cqw); --code-editor-height: (100cqh); --code-editor-width: (100%); --content-height: (var(--code-editor-height) - var(--vertical-padding)); --combined-editor-width: ((var(--total-width) / 7) * var(--content-height)); --difference-of-both-full-widths: (var(--code-editor-width) - var(--combined-editor-width)); --align-left: (0% - (var(--difference-of-both-full-widths) / 2)); --editor-canvas-inner-width: calc(var(--editor-canvas-width) - var(--horizontal-padding)); } .editorWrapper:not(.shadowEditorWrapper) { width: calc((var(--code-editor-height) - var(--vertical-padding)) * (var(--editor-width) / 7)); &#inputEditorWrapper { position: relative; border-radius: 0 3rem 3rem 0; transition: opacity 1s, border-color 1s, background-color 1s; > #shadowEditorsWrapper { position: absolute; inset: 0; > .shadowEditorWrapper { position: absolute; overflow: hidden; height: 100%; transition: translate 2s, opacity 2s; } &, * { pointer-events: none; } } } &#outputEditorWrapper { transition: opacity 1s, display 1s; transition-behavior: allow-discrete; } } .editorGroup { transform-origin: left; display: flex; flex-direction: column; height: 100%; width: auto; aspect-ratio: var(--editor-width) / 7; &:has(button:active) { --onClickValue1: 0.75; --opacity-medium: var(--onClickValue2, unset); animation: onClick 1s; } &:has(#inputEditor.drag-hover) { --opacity-medium: 0.75; } } .editorTab { --background-colour: rgb(from var(--shades-black) r g b / var(--opacity-low)); --window-text-colour: rgb(from var(--shades-darker) r g b / var(--opacity-medium)); line-height: 100%; color: rgb(from var(--shades-medium) r g b / 50%); font-family: "Fira Code", monospace; border: 0.125rem solid var(--window-text-colour); border-radius: 1rem 1rem 0 0; border-bottom: none; background-color: var(--background-colour); flex: 0; width: 100%; display: flex; justify-content: space-between; padding: 0.75rem; > .fileName { font-size: 1rem; align-content: center; &[cursor]::after { font-size: 0.75em; content: attr(cursor); color: var(--shades-m-darker); } } > .tabButtons { display: flex; gap: 1em; > button { font-size: inherit; height: 2rem; width: 2rem; padding: 0; border: none; outline: none !important; border-radius: 50%; background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; /* I could've just editing the .svg files to make them gray, but this is the lazy approach */ filter: invert(0.4431); opacity: var(--opacity-medium); cursor: pointer; transition: 0.1s; &.tabCopyAll { background-image: url('../assets/images/icon-copy.svg') } &.tabOpenRaw { background-image: url('../assets/images/icon-open-external.svg') } &.tabInsertCSS { background-image: url('../assets/images/icon-add-file.svg') } &.tabDeleteAll { background-image: url('../assets/images/icon-erase.svg') } &:hover { filter: invert(0.8832); } &:focus { z-index: 1; outline: 1px solid var(--shades-medium) !important; box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-medium); background-size: calc(100% - 8px); } } } } .editor { flex: 1; } } } } &:not(.nesting) { > #mainContent { gap: var(--padding); > #editorSide { animation: moveRight 2s cubic-bezier(1, 0, 0.5, 1) both; > #codeEditor { > .editorWrapper { transition: 1s 0.5s; /* &#inputEditorWrapper { */ &:first-child { display: block; padding: var(--padding); padding-left: 0; border-left: calc(1rem / 16) solid rgb(from var(--shades-darker) r g b / var(--opacity-medium)); border-color: rgb(from var(--shades-darker) r g b / var(--opacity-low)); background-color: rgb(from var(--shades-white) r g b / 3%); &, > .editorGroup { max-width: 100%; } } /* &#outputEditorWrapper { */ &:last-child { padding-block: var(--padding); margin-right: -3.25rem; width: 0; opacity: 0; } } > :last-child { display: none; } } } } } &.nesting { height: 100dvh; transition: height 1s; & + article, & + article section { top: 100dvh; height: 0; gap: 0; opacity: 0; transition: gap 1s 1s, height 1s 1s, opacity 1s, top 1s; pointer-events: none; &article { top: 0dvh; } } > #mainSettings { /* A manually calculated minimum width based on it's children elements, but due to `contain` use, getting in dynamically isn't possible. */ min-width: calc((58.441558ch * 1.232)); margin-right: var(--padding); } > #mainContent { > #textSide { width: 0%; opacity: 0; padding: 0; } > #editorSide { width: 100%; align-content: center; > #nestBtn { opacity: 0.75; font-size: 0.75rem; translate: 0% 0%; --nestBtn-shadow-direction: -1; > div { transform-origin: top right; &::before { content: 'Home'; } } } > #codeEditor { align-items: center; margin-left: auto; width: calc(100vw - (5 * var(--padding)) - (58.441558ch * 1.232)); max-width: 100%; max-height: 100%; aspect-ratio: var(--total-width) / 7; animation: moveLeft 2s cubic-bezier(1, 0, 0.5, 1) both; #editorGap { height: 100%; aspect-ratio: var(--gutter-width) / 6.625; } .editorWrapper#inputEditorWrapper > #shadowEditorsWrapper > .shadowEditorWrapper { translate: 0 !important; opacity: 0 !important; transition: 2s; } } } } } } > article { position: relative; top: 0; font-size: 1rem; display: flex; flex-direction: column; gap: min(50dvh, 800px); > section { contain: size; position: relative; height: min(100dvh, 1600px); font-size: clamp(0.5rem, 16px, 1.5rem); > p a { text-decoration: none; color: color-mix(in srgb, var(--shades-white) 50%, var(--pri-colour-darker)); transition: color 0s; * { transition: inherit; } &:hover { color: color-mix(in srgb, var(--shades-white) 75%, var(--pri-colour-darker)); } } &#reducingBoilerplateCode { > a { margin: 0; position: absolute; top: 0.75em; right: 0; color: var(--shades-white); text-decoration: none; text-transform: uppercase; line-height: 100%; font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 500; font-size: 2em; display: flex; align-items: center; gap: 1ch; &::after { position: relative; content: ''; height: 0.125em; width: 6em; background: var(--shades-white); } } > #repeatingText { margin: 0; position: absolute; top: 8em; left: 4em; cursor: text; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 2em; width: 52ch; .repeat { pointer-events: none; mask-image: linear-gradient(transparent, var(--shades-black) 75%); position: relative; padding: 3lh 0 0.04lh; &::before { content: attr(data-text) "\A" attr(data-text) "\A" attr(data-text) "\A" attr(data-text); inset: 0; z-index: -1; position: absolute; color: rgb(from var(--shades-white) r g b / 0.5); animation: repeatText 2s linear infinite; animation-composition: add; } &.hidden::before { animation-play-state: paused; } } } > #parallaxText { position: absolute; bottom: calc(4em / 3); right: calc(4em / 3); color: var(--shades-white); text-transform: uppercase; letter-spacing: calc(1em / 6); font-family: "Orelo Semi Expanded", sans-serif; font-size: 6em; height: 3lh; width: fit-content; display: flex; flex-direction: column; > span { cursor: text; height: 1lh; overflow: hidden; line-height: 100%; text-shadow: 0 1lh; > p { margin: 0; display: inline-block; vertical-align: middle; translate: 0 -1lh; } @supports (animation-range: normal) { animation: swapText linear 1ms; animation-timeline: view(); animation-range-start: cover -0.5lh; &:nth-child(1) { animation-range-end: contain calc(min(100dvh, 1600px) - 1.0lh); } &:nth-child(2) { animation-range-end: contain calc(min(100dvh, 1600px) - 0.5lh); } &:nth-child(3) { animation-range-end: contain calc(min(100dvh, 1600px) - 0.0lh); } } &:nth-child(1) { margin-left: 0.5ch; text-align: left; } &:nth-child(2) { text-align: center; } &:nth-child(3) { margin-right: 0.5ch; text-align: right; } } } } &#easierMaintenance { > #mergingText { position: absolute; top: calc(4em / 5); left: 50%; translate: -50%; color: var(--shades-white); text-align: center; text-transform: capitalize; letter-spacing: 0.25ch; font-family: "Orelo Semi Expanded", sans-serif; font-weight: 400; font-size: 5em; display: flex; flex-direction: column; > span { cursor: text; height: 1lh; line-height: 100%; overflow: hidden; position: relative; @supports (animation-range: normal) { padding-top: 1lh; &:first-child { text-shadow: 0 0.5lh; animation: showText linear forwards 1ms; animation-timeline: view(); animation-range-start: cover calc(min(50dvh, 800px) - 1lh); animation-range-end: cover calc(min(100dvh, 1600px) - 3.15lh); } &:last-child { text-shadow: 0 -2lh; animation: showText linear forwards 1ms; animation-timeline: view(); animation-range-start: cover calc(min(50dvh, 800px) - 1lh); animation-range-end: cover calc(min(100dvh, 1600px) - 3.15lh); } } } } > #changingText { position: absolute; right: 5vw; bottom: 6em; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 2em; width: 56ch; text-align: right; @supports (animation-range: normal) { animation: slideDown linear both 1ms; animation-timeline: view(); animation-range-start: cover -20lh; animation-range-end: contain 5lh; } s { text-decoration: none; font-size: 0.75em; color: var(--red-colour-medium); /* oklch(0.75 0.13 15) */ position: relative; display: inline-flex; clip-path: inset(0); &:nth-child(1) { --animation-delay: -1s } &:nth-child(3) { --animation-delay: 0s } &:nth-child(5) { --animation-delay: -1.5s } &::before { position: absolute; content: ''; width: 100%; height: 0.1em; background: color-mix(in oklch, currentColor, var(--shades-white) 25%); top: 50%; animation: strikethrough 2.5s infinite var(--animation-delay); animation-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%); } + b { text-decoration: none; font-weight: bold; color: oklch(from var(--red-colour-medium) l c calc(h + 135)); /* oklch(0.75 0.13 150) */ } &.hidden::before { animation-play-state: paused; } } } } &#improvedCodeReadability { > #backgroundText { margin: 0; color: var(--shades-white); contain: layout; pointer-events: none; font-size: 20em; line-height: 100%; font-family: "Orelo Semi Condensed", sans-serif; text-transform: capitalize; letter-spacing: 0.0025em; display: flex; flex-direction: column; position: relative; z-index: 1; span { translate: -4ch; padding: 0 calc(1em / 10); width: 100%; color: rgb(from var(--shades-white) r g b / var(--opacity-low)); position: relative; &:first-child, &:last-child { text-align: right; translate: 10ch; &:last-child { color: rgb(from var(--shades-white) r g b / var(--opacity-high)) } } @supports (animation-range: normal) { animation: slideIn ease-out forwards 1ms; animation-timeline: view(); animation-range-start: cover -0.5lh; animation-range-end: cover calc(2lh + 2.5lh); &:first-child { animation-range-start: cover 0lh; animation-range-end: cover calc(2.5lh + 2.5lh); } &:last-child { animation-range-start: cover -1.5lh; animation-range-end: cover calc(1.5lh + 2.5lh); } } } } > #visibleText { position: absolute; z-index: 1; right: 7.5vw; bottom: 10em; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 2em; line-height: 1.5em; width: 50ch; @supports (animation-range: normal) { animation: boostUp linear both 1ms, slideUp linear both 1ms; animation-range: cover 16em, cover; animation-timeline: view(), view(); animation-composition: add; } @supports not (animation-range: normal) { translate: -3lh; } u { color: var(--shades-white); b { font-size: 1.25em; /* line-height: inherit; */ transition: color 0.5s; &:hover { /* line-height: inherit; */ color: var(--pri-colour-lightest); } > span { transition: 0.125s; &:hover { color: var(--shades-white); } } } } } } &#groupingStylesTogether { align-content: center; > #groupedText { position: absolute; bottom: 67%; left: 10vw; color: var(--shades-white); margin: 0; letter-spacing: 0.25rem; font-family: "Orelo Semi Expanded", sans-serif; font-weight: 400; font-size: 2em; padding: 1.5em 2em; display: inline-block; text-align: left; border: 0.125em dashed rgb(from var(--shades-white) r g b / var(--opacity-low)); background: rgb(from var(--pri-colour-darkest) r g b / var(--opacity-low)); &::before, &::after { border: inherit; padding: inherit; background: inherit; pointer-events: none; position: absolute; content: attr(data-text); inset: -0.1em; animation: 10s linear both infinite 5s; } &::before { z-index: -1; animation-name: changeCard, changeCardBefore; } &::after { z-index: 1; animation-name: changeCard, changeCardAfter; } :is(body.hidden &) { &::before, &::after { animation-play-state: paused; } } } > #miniEditor { position: relative; margin-left: auto; margin-right: 7.5vw; font-family: 'Fira Code', monospace; font-size: 2em; line-height: 1em; gap: 3ch; width: fit-content; color: var(--shades-white); @supports (animation-range: normal) { animation: viewed linear; animation-timeline: view(); animation-range-start: contain; animation-range-end: cover calc(0% + 5lh); div :is(> div, span) { --charIndex: -1; animation: slideInLines linear forwards; animation-timeline: view(); animation-range-start: cover 0%; animation-range-end: cover 5lh; } } > .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* 1 */ word-wrap: normal; /* 2 */ } > .visual-presentation { display: flex; gap: 3ch; > #lineNumbers { width: 2ch; opacity: 0.25; font-family: inherit; text-align: right; } > pre { opacity: 0.75; font-family: inherit; letter-spacing: 0.2em; margin: 0; --maxLines: 20; --activeLine: 1; --intensityPos: 100%; > code > div { padding-right: 5ch; &:first-child { position: relative; &::before { position: absolute; content: ''; top: 0; right: 0; height: 100%; width: calc(100% + 5ch); background: linear-gradient(to right, transparent, rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium)) calc(var(--intensityPos) - 20%), rgb(from var(--pri-colour-darker) r g b / var(--opacity-medium)) var(--intensityPos), rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium)) calc(var(--intensityPos) + 20%), transparent); z-index: -1; translate: 0 calc((clamp(1, var(--activeLine), var(--maxLines)) - 1) * 1lh); transition: 0.5s ease; } } span { display: inline-block; } } } } } } &#mechanicsOfNesting { contain: size layout; display: flex; &:has(.hover-animation) { touch-action: none; &:has(> :not(#backToStart):hover) { cursor: none; > #nycssCursor { scale: 0.25; animation-duration: 1.5s; } } > #nycssCursor { opacity: 1; animation: rotate 12.5s linear infinite; } } > #nycssCursor { opacity: 0; pointer-events: none; position: absolute; z-index: 999; background-color: rgb(from var(--pri-colour-lightest) r g b / var(--opacity-low)); border-radius: 50%; aspect-ratio: 1 / 1; font-size: 10em; padding: 0.0625em; height: auto; width: 1em; translate: calc(50vw - 50%) calc(50vh - 50%); transition: opacity 1s 0.1s, scale 0.5s; :is(:has(.hover-animation):has(> &):hover &) { will-change: transform; } &.hidden { animation-play-state: paused; } } > #splittingText { position: absolute; top: 4lh; right: 8ch; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 1.75rem; height: 4lh; width: 60ch; text-align: justify; text-align-last: left; column-count: 2; gap: 6ch; word-spacing: 0.3ch; color: transparent; user-select: none; @supports (animation-range: normal) { animation: unblur ease-out both 1ms; animation-timeline: view(); animation-range: cover contain calc(min(50dvh, 800px)); } &::before, &::after { color: var(--shades-white); content: attr(data-text); position: absolute; inset: 0; column-count: inherit; gap: inherit; animation: widenGap 3s ease-in-out infinite alternate backwards; } &::before { clip-path: inset(0 50% 0 0); transform-origin: left; } &::after { clip-path: inset(0 0 0 50%); transform-origin: right; } &.hidden { &::before, &::after { animation-play-state: paused; } } } > #strechingText { position: absolute; top: calc(4em / 3); left: calc(8em / 3); color: var(--shades-white); line-height: 200%; font-family: 'Orelo Semi Condensed'; font-weight: 600; font-size: 3em; scale: 1; @supports (animation-range: normal) { animation: moveDown linear both 1ms; animation-timeline: view(); animation-range-start: cover -2lh; animation-range-end: cover 2lh; } > span { display: inline-block; transition: 1s; &:hover { scale: 1 2; transition: 0s; } } } > #nestingText { position: absolute; bottom: calc(8em / 5); right: calc(24em / 5); color: var(--shades-white); font-size: 5em; contain: layout; > * { margin: 0; white-space: nowrap; } > h3 { font-size: 1em; font-weight: 900; font-family: 'Poppins', 'Calibri', sans-serif; @supports (animation-range: normal) { animation: moveDown linear both 1ms; animation-timeline: view(); animation-range-start: cover -2lh; animation-range-end: cover 2lh; } transition: scale 1s, text-shadow 1s; &:hover { scale: 1.1; text-shadow: 0 -0.1lh calc(1em / 5) var(--shades-black); } } > p { position: absolute; z-index: -1; top: 0; left: 0; line-height: 1em; font-size: 1.125em; font-weight: 600; letter-spacing: -0.05em; font-family: 'Orelo Expanded'; color: rgb(from var(--shades-white) r g b / var(--opacity-medium)); @supports (animation-range: normal) { animation: fadeUp linear both 1ms; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover calc(1lh + 1.98em); } @supports not (animation-range: normal) { translate: -0.96ch -0.31em; opacity: 1; } } a { color: unset; text-decoration: unset; } } > a#nycssLogoGroup { user-select: none; align-self: flex-end; contain: layout; display: inline-flex; flex-direction: column; margin-left: 8vw; margin-bottom: 8vw; position: relative; z-index: 1; > * { pointer-events: none; } > img { height: 16em; width: auto; aspect-ratio: 1 / 1; } > img#nycssNest { color: transparent; filter: drop-shadow(0 -0.5em) drop-shadow(0.7em 0.3em) drop-shadow(5.4em 1em) drop-shadow(7.1em 1.1em) drop-shadow(1.6em 0.4em) drop-shadow(4.3em 0.9em); clip-path: circle(47.2%); } > img#nycssBadge { /* Badge Scroll Positions */ --main-x: 80vw; --main-y: calc(max(-600dvh, -9600px) - 150%); --reducingBoilerplateCode-y: calc(max(-600dvh, -9600px) + 0%); --easierMaintenance-y: calc(max(-450dvh, -7200px) + 50%); --improvedCodeReadability-y: calc(max(-300dvh, -4800px) - 50%); --groupingStylesTogether-y: calc(max(-150dvh, -2400px) + 66%); --mechanicsOfNesting-y: 50%; /* backface-visibility: hidden; */ pointer-events: none; filter: drop-shadow(0 var(--shadow-distance) 0 var(--shadow-color)) drop-shadow(0 calc(-1 * var(--shadow-distance)) 0 var(--shadow-color)); --shadow-color: #1474B833; /* Taken directly from the CSS Logo */ --shadow-distance: 0; transition: 1s; &.main-animation { animation: fall linear 1ms; animation-timeline: scroll(nearest); } &.idle-animation { animation: fall linear 1ms, idle 2.5s infinite alternate; animation-timeline: scroll(nearest), auto; /* convert to view() if possible */ animation-composition: add; &.hidden { animation-play-state: paused; } } &.hover-animation { animation: hover 2s infinite alternate; --shadow-color: #1474B833; /* Taken directly from the CSS Logo */ --shadow-distance: 1.5em; &.hidden { animation-play-state: paused; } } } &:has(img.hover-animation) { clip-path: inset(19.3% 1.3% 1.3% 7.3%); &:hover #nycssBadge.hover-animation { --shadow-color: #26A2D933; /* Taken directly from the CSS Logo */ --shadow-distance: 2em; } } } > #backToStart { position: absolute; top: 0; left: 0; height: 100%; width: 100%; &:has(~ a#nycssLogoGroup > img.hover-animation) { display: block; } } } } .optimize { content-visibility: auto; } } } /* Mobile Overwriting Styles - 1235 x 1125 - Breaking point between mobile & desktop */ @media (max-aspect-ratio: 1.097 / 1) { body > #siteWrapper > main { > #mainContent { border-radius: 1rem; > #editorSide { animation: none !important; width: calc(var(--single-editor-width)); #codeEditor { max-width: 100%; justify-content: left; > .editorWrapper { max-width: inherit; } } } } > #mainSettings, > #mainContent :is(#textSide, #shadowEditorsWrapper) { display: none; } &:not(.nesting) > #mainContent { && { justify-content: center; #codeEditor { margin: 0 auto; #inputEditorWrapper { border: none; border-radius: 1rem; background: none; padding: 0; } > #outputEditorWrapper > .editorGroup { opacity: 0; } } }} &.nesting { > #mainContent { min-width: 100%; transition: unset; > #editorSide { /* * Remove the slide in animation, just make it fade out & fade in * And make the editors stack on top of each other, aspect-ratio * can be ignored - just fill the screen */ > #codeEditor { height: 100%; width: 100%; animation: none; flex-direction: column; #editorGap { height: var(--padding); aspect-ratio: auto; flex: none; } .editorWrapper { flex: 1; } .editorGroup { aspect-ratio: auto; } .editor { height: 100%; width: 100%; aspect-ratio: auto; } } } } } } body > #siteWrapper > article { font-size: clamp(1.1px, 1.15dvw, 22.5px); > section { contain: size; position: relative; height: min(100dvh, 1600px); &#reducingBoilerplateCode { > a { font-size: 5vw; } > #repeatingText { font-size: 2.5vw; top: 50%; translate: 0 calc(-50% - 7.5em); } > #parallaxText { font-size: 2.5vw; bottom: 50%; translate: 0 calc(-50% + 6em); } } &#easierMaintenance { > #mergingText { font-size: 8vw; top: calc(4em / 3); } > #changingText { font-size: 2.5vw; bottom: 16vw; translate: 0 calc(-50% + 5em); } } &#improvedCodeReadability { > #backgroundText { font-size: 20vw; top: 50%; translate: 0 -50%; } > #visibleText { font-size: 2.5vw; top: 50%; translate: 0 -25%; } } #groupingStylesTogether { > #groupedText { font-size: 5vw; top: calc(50% - 50vw); bottom: auto; translate: 0 -50%; height: fit-content; } > #miniEditor { font-size: 2.5vw; } } &#mechanicsOfNesting { > #splittingText { font-size: 2.1vw; top: 50%; translate: 0 calc(-50% - 12.5em); } > #strechingText { font-size: 7.5vw; top: 64rem; translate: 0 calc(-50% - 12.5em); animation: none; } > #nestingText { font-size: 4vw; bottom: calc(20em / 5); } > #nycssLogoGroup { font-size: 2vw; } } } } } } } /* If scopeable, override the non-scoped code (basically just for the non-FireFox-based browsers) - temporarily: until they support it later this year */ @layer scoped { body { /* --- Main Site Wrapper Scope --- */ @scope (#siteWrapper) { & { margin: 0 auto; width: clamp(0px, 100%, 3200px); height: 100dvh; contain: paint; overflow: hidden auto; animation: lightenBackgroundColour linear 1ms; animation-timeline: scroll(self); &:has(> .nesting) { overflow: hidden; } /* --- Main Section Styles --- */ > main { --padding: 2rem; display: flex; justify-content: flex-end; height: 96dvh; width: 100%; padding: var(--padding); } /* --- Article Section Styles --- */ > article { position: relative; top: 0; font-size: 1rem; display: flex; flex-direction: column; gap: min(50dvh, 800px); > section { contain: size; position: relative; height: min(100dvh, 1600px); font-size: clamp(0.5rem, 16px, 1.5rem); > p a { text-decoration: none; color: color-mix(in srgb, var(--shades-white) 50%, var(--pri-colour-darker)); transition: color 0s; * { transition: inherit; } &:hover { color: color-mix(in srgb, var(--shades-white) 75%, var(--pri-colour-darker)); } } } .optimize { content-visibility: auto; } } } } /* --- Settings Panel Scope (Nesting Editor Settings) --- */ @scope (#mainSettings) { & { flex: 0; height: 100%; min-width: 0; margin-right: 0; display: flex; flex-direction: column; contain: paint inline-size; gap: var(--padding); padding-bottom: calc((3/4) * var(--padding)); overflow: hidden auto; transition: margin-right 2s, min-width 2s; > section { border-radius: 3rem; --panel-background: color-mix(in srgb, var(--shades-darkest), var(--shades-black) 75%); background-color: var(--panel-background); padding: var(--padding); min-width: 58.441558ch; display: flex; flex-direction: column; gap: var(--padding); font-family: 'Poppins', 'Calibri', sans-serif; /* &:not(:nth-last-child(1)) { display: none; } */ > h2 { margin: 0; font-size: 1.25rem; font-weight: normal; color: var(--shades-medium); } } } } /* --- Settings Panel Scope (Settings Form Fields) --- */ @scope (#mainSettings > section > ul) { & { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; --component-gap: calc(var(--padding) / 4); --component-background: color-mix(in srgb, var(--shades-black), var(--shades-darkest)); --component-background-selected: linear-gradient(to right, var(--shades-m-darker), var(--shades-em-darker)); --component-box-shadow-selected: inset 0 calc(1rem / 16) oklch(100% none none / var(--opacity-low)); --component-box-shadow-focused: 0 0 1.5em var(--shades-medium); --component-text: color-mix(in srgb, var(--shades-darker), var(--shades-medium)); --component-text-hover: var(--shades-medium); gap: var(--component-gap); > li { display: grid; grid-template-columns: repeat(10, 1fr); > span { cursor: auto; grid-column: span 3; align-content: center; font-size: 1.125rem; font-weight: 300; color: var(--component-text); > p { margin: 0; font-size: 0.625rem; color: var(--shades-m-darker); } } > div { grid-column: span 7; display: flex; flex-direction: row; justify-content: space-between; gap: var(--component-gap); color: var(--component-text); font-size: 1rem; /* Generic Components */ > label { flex: 1; } > #externalCss { max-width: 100%; } > #fontsizes { width: auto; margin: 0; flex: 0; } > #indentationSize { flex: 0; display: flex; align-items: center; gap: var(--component-gap); } /* Specific Components */ > .dropdown, > .combobox { user-select: none; display: inline-flex; flex-direction: column; width: auto; margin: 0; text-align: left; box-sizing: content-box; position: relative; > input { appearance: none; position: absolute; margin: 0; } &:focus-within > input:checked { + output { border-radius: 1rem 1rem 0 0; } ~ ul { position: absolute; z-index: 999; top: 100%; width: 100%; display: flex; margin: 0; margin-top: 0.25rem; padding: 1em; gap: 0.5em; flex-direction: column; background: var(--component-background); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; box-shadow: 0px 10px 10px 2.5px rgb(from var(--shades-black) r g b / 0.5); > li { overflow: hidden; text-overflow: ellipsis; outline: none !important; &:hover { color: var(--component-text-hover); cursor: pointer; } &:focus { color: var(--component-text-hover); } &:disabled { color: rgb(from var(--component-text) r g b / 0.5); cursor: not-allowed; &:hover { color: inherit; } } } } } > output { outline: none !important; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: clip; background: url("data:image/svg+xml,%3Csvg fill='%23484848' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z'%3E%3C/path%3E%3C/svg%3E") right 1rem top 50% / 1ch no-repeat, var(--component-background); border-radius: 1rem; padding: 1rem; padding-right: calc(1rem + 2ch); &:hover { color: var(--component-text-hover); } } /* Component Specific */ &.dropdown:has(:is(input, ul > li):focus) > output { z-index: 1; box-shadow: var(--component-box-shadow-focused); } &.combobox { &:has(:is(input, output > div, ul > li):focus) > output { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > output { &&:hover > div:empty::before { color: var(--shades-darker); } > div { cursor: auto; overflow: hidden; text-overflow: ellipsis; outline: none !important; &:focus { overflow-x: scroll; scrollbar-width: none; text-overflow: clip; } &:not(:focus):empty { align-content: center; font-size: 75%; padding: 0.25em 0; &::before { pointer-events: none; content: attr(placeholder); color: var(--shades-m-darker); } } } } } } > .number { user-select: none; position: relative; width: fit-content; color: var(--component-text); border: none; padding: 1rem; gap: calc(2 * var(--component-gap)); background: var(--component-background); border-radius: 1rem; &:hover { color: var(--component-text-hover); } &:has(input:focus, input:active) { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > output > input { cursor: auto; display: inline-block; margin-right: 1ch; outline: none !important; ~ div { position: absolute; width: 1ch; top: 50%; right: 1rem; translate: 0 -50%; display: flex; flex-direction: column; gap: 0.25em; > svg { cursor: pointer; } } &[type="text"] { appearance: none; background: inherit; border: inherit; color: inherit; font: inherit; overflow: visible !important; overflow-wrap: break-word; text-align: inherit; -webkit-user-modify: read-write; } } } > .checkbox { outline: none !important; user-select: none; position: relative; display: flex; border-radius: 1rem; background: var(--component-background); &::before { position: absolute; content: ''; height: 100%; left: 0%; width: 50%; border-radius: inherit; background: var(--component-background-selected); box-shadow: var(--component-box-shadow-selected); z-index: 0; transition: 0.25s; } &:has(:checked)::before { left: 50%; } &:has(input:focus, input:active) { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > input { appearance: none; position: absolute; margin: 0; } > span { position: relative; cursor: pointer; flex: 1; padding: 1rem 2.5ch; text-align: center; align-content: center; &:hover { color: var(--component-text-hover); } } } > .radio-group { user-select: none; display: flex; gap: var(--component-gap); > label { outline: none !important; flex: 1; cursor: pointer; padding: 1rem 1.75ch; text-align: center; align-content: center; border-radius: 1rem; --top-colour: var(--shades-m-darker); --bottom-colour: var(--shades-em-darker); background: linear-gradient(to bottom, var(--top-colour), var(--bottom-colour) 45%, var(--component-background) 55%) 0% 100% / 100% 210% no-repeat, var(--component-background); transition: background-position 0.125s ease-out; &:has(:disabled) { &, &:hover { --shades-true-darkest: color-mix(in srgb, var(--shades-black), var(--shades-darkest)); background: linear-gradient(to bottom, var(--shades-black), var(--shades-true-darkest)); box-shadow: inset 0 calc(-1rem / 16) var(--shades-darkest); color: var(--shades-m-darker); cursor: not-allowed; } } &:has(:checked) { box-shadow: var(--component-box-shadow-selected); background-position: 0% 0%; } &:hover { color: var(--component-text-hover); } &:has(> input:focus) { z-index: 1; box-shadow: var(--component-box-shadow-focused); } > input { appearance: none; position: absolute; margin: 0; } } &.button { > label { --top-colour: var(--sec-colour-m-darker); --bottom-colour: var(--pri-colour-darkest); } } } } } } } /* --- Settings Panel Scope (Editor Errors Table) --- */ @scope (#mainSettings > section > :has(table)) { & { overflow-y: scroll; max-height: 16rem; padding: calc(var(--padding) / 2); border-radius: 1.5rem; --table-background: color-mix(in srgb, var(--shades-darkest), var(--panel-background) 75%); background-color: var(--table-background); scrollbar-width: 0.75rem; > table { width: 100%; font-size: 0.75rem; color: var(--shades-medium); > colgroup > col:last-child { width: 0; } > thead { tr { &:first-child th { font-weight: normal; color: var(--shades-darker); &:first-child { text-align: left; } } &:last-child th { font-weight: normal; color: var(--shades-m-darker); } } } > tbody { &:empty:before { content: "There are no errors."; } > tr { color: var(--shades-medium); cursor: pointer; font-weight: normal; &:hover { background-color: rgb(from var(--shades-em-darker) r g b / var(--opacity-low)); } > th { text-align: start; font-weight: normal; } > td { text-align: center; } } } } --track-colour: color-mix(in srgb, var(--shades-black), var(--panel-background) 75%); --thumbnail-colour: var(--shades-m-darker); --scrollbar-padding: 4px; --scrollbar-width: 12px; /* Non-Standard Properties */ @supports selector(::-webkit-scrollbar) { &::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } &::-webkit-scrollbar-thumb { background: var(--thumbnail-colour); border-radius: 999px; border: var(--scrollbar-padding) solid transparent; background-clip: padding-box; } &::-webkit-scrollbar-track { background: var(--track-colour); border-radius: 999px; } } /* Standard Properties */ @supports not selector(::-webkit-scrollbar) { scrollbar-color: var(--thumbnail-colour) var(--track-colour); scrollbar-width: thin; } } } /* --- Settings Panel Scope (Nesting mode's Navbar) --- */ @scope (#mainSettings > nav) { & { display: inline-flex; padding: 0 4ch; justify-content: space-evenly; margin: 0; > a { height: calc(100% - 4px); outline: none !important; display: grid; --icon-size: 4rem; grid: var(--icon-size) / var(--icon-size); position: relative; padding: 0; border: none; background: none; border-radius: 999px; &:nth-of-type(1) > figure { clip-path: url(#iconGithub); } &:nth-of-type(2) > figure { clip-path: url(#iconHistory); } &:nth-of-type(3) > figure { clip-path: url(#iconSettings); } &:nth-of-type(4) > figure { clip-path: url(#iconBug); margin-top: -2px; } &:nth-of-type(5) > figure { clip-path: url(#iconShareYourMind); } > * { border-radius: inherit; height: 100%; width: 100%; } > figure { margin: 0; container-type: size; background: rgb(from var(--shades-white) r g b / 0.25); > svg { contain: size; > clipPath { scale: 0.012; translate: -7cqw -11cqh; } } &.hidden.inner-cursor::after { animation-play-state: paused; } } &:not([aria-disabled="true"]) { > figure.inner-cursor::after { pointer-events: none; border-radius: inherit; position: fixed; content: ""; top: 0; left: 0; z-index: -999; translate: calc(var(--cursor-x-pos) - 50%) calc(var(--cursor-y-pos) - 50%); height: 75cqh; width: 75cqw; filter: blur(1rem); background-color: var(--shades-white); animation: blink 3s infinite alternate-reverse; } &:focus { z-index: 1; outline: 1px solid var(--shades-darker) !important; box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-medium); } } &[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; use { pointer-events: none; } } } } } /* --- Main Content Scope (Section With Fancy Background) --- */ @scope (#mainContent) { & { --background: url("https://ucarecdn.com/380d4e4c-268c-4913-8c92-e049c44234ec/-/preview/189x189/") 0 0.1dvh / 5dvh repeat, linear-gradient(to right, rgb(from var(--shades-black) r g b / var(--opacity-medium)), rgb(from var(--pri-colour-em-darker) r g b / var(--opacity-medium))) 0 0 / 100dvw 100dvh, linear-gradient(45deg, transparent, rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium)) 50%, transparent) 0 0 / 100dvw 100dvh, var(--shades-black); display: flex; justify-content: space-between; container-type: size; flex: 1; width: fit-content; position: relative; background: var(--background); border-radius: 3rem; transform-origin: center; @supports (animation-range: normal) { animation: scaleDown linear 1ms; animation-timeline: view(); animation-range-start: contain 100%; animation-range-end: cover 100%; } } } /* --- Text Side Scope (On Homepage: Left Side Text) --- */ @scope (#textSide) { & { width: 100%; height: 100%; display: flex; padding: 2rem 0; flex-direction: column; justify-content: space-between; container-type: inline-size; contain: paint; transition: width 2s, opacity 2s, padding 2s; > header { margin: 2rem 2rem 0 4rem; font-size: clamp(0.5rem, 16px, 1.5rem); } } } /* --- Text Side Scope (Site's Title & Scrambled Subtitle) --- */ @scope (#textSide > header > hgroup) { & { display: flex; flex-direction: column-reverse; color: rgb(from var(--shades-white) r g b / var(--opacity-high)); font-family: 'Poppins', 'Calibri', sans-serif; > * { margin: 0; } > h1 { display: inline-block; white-space: nowrap; line-height: 125%; font-weight: 900; font-size: 6em; transition: opacity 3s 1.5s; &:hover { color: var(--shades-white); } } > h2 { line-height: 125%; font-weight: 200; font-size: 3em; height: 2lh; width: 24ch; transition: opacity 3s 3s; transform: translateZ(0); } } } /* --- Text Side Scope (Homepage's Navbar) --- */ @scope (#textSide > header > nav) { & { display: inline-flex; --primary-colour: var(--shades-darker); --secondary-colour: color-mix(in srgb, var(--shades-lightest), var(--primary-colour) 50%); gap: 0.33em; margin: 1em 0; padding: 0; > a { /* --- Animation Duration & Delay Variables --- */ /* Part 1: Icon changing (on hover) */ --anim-duration-icon-in: 0.5s; --anim-duration-bg-in: 0s; --delay-icon-in-paths: 0s; --delay-icon-in-bg: calc(var(--delay-icon-in-paths) + var(--anim-duration-icon-in) + 0s); /* Part 2: Text being shown (on hover) */ --anim-duration-text-show: 0.5s; --anim-duration-text-opacity-show: 0.25s; --delay-text-show-font: calc(var(--delay-icon-in-bg) + 0s); --delay-text-show-opacity: calc(var(--delay-text-show-font) + var(--anim-duration-text-show) + 0s); /* Part 3: Text being hidden (on mouse out) */ --anim-duration-text-hide: 0.5s; --anim-duration-text-opacity-hide: 0.25s; --delay-text-hide-opacity: 0s; --delay-text-hide-font: 0.5s; /* Part 4: Icon changing back (on mouse out) */ --anim-duration-icon-out: 0.5s; --anim-duration-bg-out: 0s; --delay-icon-out-paths: calc(var(--delay-text-hide-font) + var(--anim-duration-text-hide) + 0s); --delay-icon-out-bg: calc(var(--delay-icon-out-paths) + 0s); display: flex; font-size: inherit; font-family: 'Poppins', 'Calibri', sans-serif; text-decoration: none; flex-direction: row; align-items: center; position: relative; padding: 0; outline: none !important; border: none; background: radial-gradient(circle at 1.5em, transparent calc(1.5em - 0.125em), var(--button-bg) 0, var(--button-bg) 100%); border-radius: 999px; /* Initial state of icon fills and button background */ --button-bg: transparent; transition: opacity 3s 1s, --button-bg var(--anim-duration-bg-out) var(--delay-icon-out-bg); > svg { height: 3em; width: auto; aspect-ratio: 1 / 1; border-radius: inherit; box-sizing: border-box; /* Transitions for HOVER-OUT */ --icon-path-one-fill: var(--primary-colour); --icon-path-two-fill: transparent; --icon-paths-fill-transition: --icon-path-one-fill var(--anim-duration-icon-out) var(--delay-icon-out-paths), --icon-path-two-fill var(--anim-duration-icon-out) var(--delay-icon-out-paths); } > span { flex: 1; display: block; color: transparent; font-weight: 600; font-size: 0; opacity: 0; line-height: 1; padding: 1.5ch 0; padding-right: 3ch; translate: 1ch; background: var(--background); background-clip: text; /* Transitions for HOVER-OUT */ transition: font-size var(--anim-duration-text-hide) var(--delay-text-hide-font), opacity var(--anim-duration-text-opacity-hide) var(--delay-text-hide-opacity), color var(--anim-duration-bg-out) var(--delay-icon-out-bg); } &:not([aria-disabled="true"]) { &:hover { /* Hover state of icon fills and button background */ --button-bg: var(--secondary-colour); transition: --button-bg var(--anim-duration-bg-in) var(--delay-icon-in-bg); > svg { /* Transitions for HOVER-IN */ --icon-path-one-fill: transparent; --icon-path-two-fill: var(--secondary-colour); --icon-paths-fill-transition: fill var(--anim-duration-icon-in) var(--delay-icon-in-paths); } > span { translate: 1ch 0; font-size: unset; opacity: 1; /* Transitions for HOVER-IN */ transition: font-size var(--anim-duration-text-show) var(--delay-text-show-font), opacity var(--anim-duration-text-opacity-show) var(--delay-text-show-opacity), color var(--anim-duration-icon-in) var(--delay-icon-in-bg); } } &:focus { z-index: 1; outline: 1px solid var(--shades-medium) !important; box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-lighter); } } &[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; use { pointer-events: none; } } } } } /* --- Text Side Scope (Homepage's Ads Section) --- */ @scope (#textSide > figure) { & { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; margin: 0; margin-left: 4rem; margin-right: 2rem; height: 100%; width: min(50vw, calc(100% - 6rem)); /* margin-left + right */ container: ads-container / size; > figcaption { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: rgb(from var(--shades-white) r g b / var(--opacity-high)); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 200; font-size: 1.25rem; height: 2rem; align-content: center; transition: opacity 3s; } > div { display: flex; flex-flow: row; width: fit-content; max-width: 100%; contain: paint; overflow-clip-margin: content-box; border: 0.125rem solid rgb(from var(--shades-darker) r g b / var(--opacity-low)); padding: 1rem; gap: 1rem; animation: slideInLeft 0.5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; transition: 0.25s, opacity 3s 1s; > picture { width: 17.637rem; aspect-ratio: 1 / 1; transition: filter 0.25s; > * { cursor: pointer; height: 100%; width: auto; aspect-ratio: 1 / 1; object-fit: contain; &.adsbygoogle:not([data-ad-status="filled"]) { display: none; & ~ img { display: block; } } & ~ img { display: none; } } } &:hover { border-color: rgb(from var(--shades-lighter) r g b / var(--opacity-low)); &:has(> picture:hover) { border-color: rgb(from var(--shades-lighter) r g b / var(--opacity-medium)); } picture:not(:hover) { filter: grayscale(1); } } } } } /* --- Editor Side Scope (Homepage's Input Editor) --- */ @scope (#editorSide) { & { container-type: inline-size; flex: none; max-width: 100%; & { --gutter-width: 0.25; --editor-width: 5; --total-width: (var(--editor-width) + var(--gutter-width) + var(--editor-width)); --vertical-padding: (2 * var(--padding)); --horizontal-padding: (2 * var(--padding)); --code-editor-height: (100cqh); --code-editor-width: (100cqw); --content-height: (var(--code-editor-height) - var(--vertical-padding)); --total-editor-width: ((var(--total-width) / 7) * var(--content-height)); --single-editor-width: ((var(--editor-width) / 7) * var(--content-height)); --gutter-real-width: ((var(--gutter-width) / 7) * var(--content-height)); --settings-panel-width: (58.441558ch * 1.232); } > #codeEditor { flex: none; height: 100%; display: flex; justify-content: center; width: calc((var(--code-editor-height) - var(--vertical-padding)) * (var(--editor-width) / 7)); transition: opacity 0.5s ease-out; &.loading { visibility: hidden; opacity: 0; } /* moveLeft Animation Variables */ & { --screen-width: (100lvw); --editor-canvas-width: (100cqw); --code-editor-height: (100cqh); --code-editor-width: (100%); --content-height: (var(--code-editor-height) - var(--vertical-padding)); --combined-editor-width: ((var(--total-width) / 7) * var(--content-height)); --difference-of-both-full-widths: (var(--code-editor-width) - var(--combined-editor-width)); --align-left: (0% - (var(--difference-of-both-full-widths) / 2)); --editor-canvas-inner-width: calc(var(--editor-canvas-width) - var(--horizontal-padding)); } } } } /* --- Editor Side Scope (#editorSide > #codeEditor) --- */ @scope (#codeEditor) { & { .editorWrapper { &:not(.shadowEditorWrapper):is(#inputEditorWrapper, #outputEditorWrapper):is(#inputEditorWrapper, #outputEditorWrapper):is(#inputEditorWrapper, #outputEditorWrapper) { width: calc((var(--code-editor-height) - var(--vertical-padding)) * (var(--editor-width) / 7)); &#inputEditorWrapper { position: relative; border-radius: 0 3rem 3rem 0; transition: opacity 1s, border-color 1s, background-color 1s; > #shadowEditorsWrapper { position: absolute; inset: 0; > .shadowEditorWrapper { position: absolute; overflow: hidden; height: 100%; transition: translate 2s, opacity 2s; } &, * { pointer-events: none; } } } &#outputEditorWrapper { transition: opacity 1s, display 1s; transition-behavior: allow-discrete; } } } .editorGroup { transform-origin: left; display: flex; flex-direction: column; height: 100%; width: auto; aspect-ratio: var(--editor-width) / 7; &:has(button:active) { --onClickValue1: 0.75; --opacity-medium: var(--onClickValue2, unset); animation: onClick 1s; } &:has(#inputEditor.drag-hover) { --opacity-medium: 0.75; } } .editorTab { --background-colour: rgb(from var(--shades-black) r g b / var(--opacity-low)); --window-text-colour: rgb(from var(--shades-darker) r g b / var(--opacity-medium)); line-height: 100%; color: rgb(from var(--shades-medium) r g b / 50%); font-family: "Fira Code", monospace; border: 0.125rem solid var(--window-text-colour); border-radius: 1rem 1rem 0 0; border-bottom: none; background-color: var(--background-colour); flex: 0; width: 100%; display: flex; justify-content: space-between; padding: 0.75rem; > .fileName { font-size: 1rem; align-content: center; &[cursor]::after { font-size: 0.75em; content: attr(cursor); color: var(--shades-m-darker); } } > .tabButtons { display: flex; gap: 1em; > button { font-size: inherit; height: 2rem; width: 2rem; padding: 0; border: none; outline: none !important; border-radius: 50%; background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; /* I could've just editing the .svg files to make them gray, but this is the lazy approach */ filter: invert(0.4431); opacity: var(--opacity-medium); cursor: pointer; transition: 0.1s; &.tabCopyAll { background-image: url('../assets/images/icon-copy.svg') } &.tabOpenRaw { background-image: url('../assets/images/icon-open-external.svg') } &.tabInsertCSS { background-image: url('../assets/images/icon-add-file.svg') } &.tabDeleteAll { background-image: url('../assets/images/icon-erase.svg') } &:hover { filter: invert(0.8832); } &:focus { z-index: 1; outline: 1px solid var(--shades-medium) !important; box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-medium); background-size: calc(100% - 8px); } } } } .editor { flex: 1; } } } /* --- Editor Side Scope (#editorSide > #nestBtn) --- */ @scope (#nestBtn) { & { /* Container styles - positioning and animation */ cursor: pointer; font-size: 0.75rem; position: absolute; top: 0; right: 0; translate: -2rem calc(96dvh - 6rem - 100%); z-index: 10; background: none; border: none; border-radius: 50%; outline: none !important; padding: 0; --nestBtn-shadow-direction: 1; animation: bounceInTop 1.5s 0.5s both; transition: opacity 1s, font-size 1s, translate 1s, --nestBtn-shadow-direction 1s; &:disabled { cursor: not-allowed; filter: brightness(0.5); color: var(--shades-black); > div:hover { scale: unset; } } &:focus { box-shadow: 0 0 calc((3/4) * var(--padding)) var(--shades-lighter); > div { outline: 1px solid var(--shades-medium) !important; } } > div { /* Main button face styles */ border-radius: inherit; padding: 1.5em; aspect-ratio: 1 / 1; font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 500; text-align: center; align-content: center; transform-origin: bottom right; transition: scale 0.5s, background-color 1s; /* Visuals */ background-color: var(--pri-colour-lighter); box-shadow: inset 0 0 1em 0 var(--shades-black); &:hover { scale: 1.333; background-color: var(--shades-white); } &::before { content: 'Nest!'; } } > span { /* Animated background layers */ position: absolute; inset: 1em; opacity: 0; z-index: -1; border-radius: inherit; transition: inset 0.5s, opacity 2s, background-color 2s; animation: shadowRotate 3s infinite both; /* --nestBtn-shadow-direction: -1; */ /* Show spans on hover of the main div */ :is(#nestBtn:not(:disabled):has(> div:hover) > &) { inset: 0.5em; opacity: 1; } /* Individual layer colors and animation delays */ &:nth-of-type(1) { background-color: rgb(from var(--pri-colour-medium) r g b / var(--opacity-medium)); animation-delay: 0s; } &:nth-of-type(2) { background-color: rgb(from var(--sec-colour-medium) r g b / var(--opacity-medium)); animation-delay: -1s; } &:nth-of-type(3) { background-color: rgb(from color-mix(in srgb, var(--pri-colour-medium), var(--sec-colour-medium)) r g b / var(--opacity-medium)); animation-delay: -2s; } } /* Pause animations when hidden or main content is not hovered */ &.hidden > span { animation-play-state: paused; } } } /* --- State Scopes (Homepage State) --- */ @scope (#siteWrapper > main:not(.nesting)) { & #mainContent { gap: var(--padding); > #editorSide { animation: moveRight 2s cubic-bezier(1, 0, 0.5, 1) both; > #codeEditor > .editorWrapper { transition: 1s 0.5s; /* &#inputEditorWrapper { */ &:first-child { display: block; padding: var(--padding); padding-left: 0; border-left: calc(1rem / 16) solid rgb(from var(--shades-darker) r g b / var(--opacity-medium)); border-color: rgb(from var(--shades-darker) r g b / var(--opacity-low)); background-color: rgb(from var(--shades-white) r g b / 3%); &, > .editorGroup { max-width: 100%; } } /* &#outputEditorWrapper { */ &:last-child { padding-block: var(--padding); margin-right: -3.25rem; width: 0; opacity: 0; } } > #codeEditor > :last-child { display: none; } } } } /* --- State Scopes (Nesting / Editor State) --- */ @scope (#siteWrapper:has(> main.nesting)) { & > main { height: 100dvh; transition: height 1s; & + article, & + article section { top: 100dvh; height: 0; gap: 0; opacity: 0; transition: gap 1s 1s, height 1s 1s, opacity 1s, top 1s; pointer-events: none; &article { top: 0dvh; } } > #mainSettings { /* A manually calculated minimum width based on it's children elements, but due to `contain` use, getting in dynamically isn't possible. */ min-width: calc((58.441558ch * 1.232)); margin-right: var(--padding); } > #mainContent { > #textSide { width: 0%; opacity: 0; padding: 0; } > #editorSide { width: 100%; align-content: center; > #nestBtn { opacity: 0.75; font-size: 0.75rem; translate: 0% 0%; --nestBtn-shadow-direction: -1; > div { transform-origin: top right; &::before { content: 'Home'; } } } > #codeEditor { align-items: center; margin-left: auto; width: calc(100vw - (5 * var(--padding)) - (58.441558ch * 1.232)); max-width: 100%; max-height: 100%; aspect-ratio: var(--total-width) / 7; animation: moveLeft 2s cubic-bezier(1, 0, 0.5, 1) both; #editorGap { height: 100%; aspect-ratio: var(--gutter-width) / 6.625; } .editorWrapper#inputEditorWrapper > #shadowEditorsWrapper > .shadowEditorWrapper { translate: 0 !important; opacity: 0 !important; transition: 2s; } } } } } } /* --- Article Section Scopes --- */ @scope (#reducingBoilerplateCode) { & { > a { margin: 0; position: absolute; top: 0.75em; right: 0; color: var(--shades-white); text-decoration: none; text-transform: uppercase; line-height: 100%; font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 500; font-size: 2em; display: flex; align-items: center; gap: 1ch; &::after { position: relative; content: ''; height: 0.125em; width: 6em; background: var(--shades-white); } } > #repeatingText { margin: 0; position: absolute; top: 8em; left: 4em; cursor: text; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 2em; width: 52ch; .repeat { pointer-events: none; mask-image: linear-gradient(transparent, var(--shades-black) 75%); position: relative; padding: 3lh 0 0.04lh; &::before { content: attr(data-text) "\A" attr(data-text) "\A" attr(data-text) "\A" attr(data-text); inset: 0; z-index: -1; position: absolute; color: rgb(from var(--shades-white) r g b / 0.5); animation: repeatText 2s linear infinite; animation-composition: add; } &.hidden::before { animation-play-state: paused; } } } > #parallaxText { position: absolute; bottom: calc(4em / 3); right: calc(4em / 3); color: var(--shades-white); text-transform: uppercase; letter-spacing: calc(1em / 6); font-family: "Orelo Semi Expanded", sans-serif; font-size: 6em; height: 3lh; width: fit-content; display: flex; flex-direction: column; > span { cursor: text; height: 1lh; overflow: hidden; line-height: 100%; text-shadow: 0 1lh; > p { margin: 0; display: inline-block; vertical-align: middle; translate: 0 -1lh; } @supports (animation-range: normal) { animation: swapText linear 1ms; animation-timeline: view(); animation-range-start: cover -0.5lh; &:nth-child(1) { animation-range-end: contain calc(min(100dvh, 1600px) - 1.0lh); } &:nth-child(2) { animation-range-end: contain calc(min(100dvh, 1600px) - 0.5lh); } &:nth-child(3) { animation-range-end: contain calc(min(100dvh, 1600px) - 0.0lh); } } &:nth-child(1) { margin-left: 0.5ch; text-align: left; } &:nth-child(2) { text-align: center; } &:nth-child(3) { margin-right: 0.5ch; text-align: right; } } } } } @scope (#easierMaintenance) { & { > #mergingText { position: absolute; top: calc(4em / 5); left: 50%; translate: -50%; color: var(--shades-white); text-align: center; text-transform: capitalize; letter-spacing: 0.25ch; font-family: "Orelo Semi Expanded", sans-serif; font-weight: 400; font-size: 5em; display: flex; flex-direction: column; > span { cursor: text; height: 1lh; line-height: 100%; overflow: hidden; position: relative; @supports (animation-range: normal) { padding-top: 1lh; &:first-child { text-shadow: 0 0.5lh; animation: showText linear forwards 1ms; animation-timeline: view(); animation-range-start: cover calc(min(50dvh, 800px) - 1lh); animation-range-end: cover calc(min(100dvh, 1600px) - 3.15lh); } &:last-child { text-shadow: 0 -2lh; animation: showText linear forwards 1ms; animation-timeline: view(); animation-range-start: cover calc(min(50dvh, 800px) - 1lh); animation-range-end: cover calc(min(100dvh, 1600px) - 3.15lh); } } } } > #changingText { position: absolute; right: 5vw; bottom: 6em; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 2em; width: 56ch; text-align: right; @supports (animation-range: normal) { animation: slideDown linear both 1ms; animation-timeline: view(); animation-range-start: cover -20lh; animation-range-end: contain 5lh; } s { text-decoration: none; font-size: 0.75em; color: var(--red-colour-medium); /* oklch(0.75 0.13 15) */ position: relative; display: inline-flex; clip-path: inset(0); &:nth-child(1) { --animation-delay: -1s } &:nth-child(3) { --animation-delay: 0s } &:nth-child(5) { --animation-delay: -1.5s } &::before { position: absolute; content: ''; width: 100%; height: 0.1em; background: color-mix(in oklch, currentColor, var(--shades-white) 25%); top: 50%; animation: strikethrough 2.5s infinite var(--animation-delay); animation-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%); } + b { text-decoration: none; font-weight: bold; color: oklch(from var(--red-colour-medium) l c calc(h + 135)); /* oklch(0.75 0.13 150) */ } &.hidden::before { animation-play-state: paused; } } } } } @scope (#improvedCodeReadability) { & { > #backgroundText { margin: 0; color: var(--shades-white); contain: layout; pointer-events: none; font-size: 20em; line-height: 100%; font-family: "Orelo Semi Condensed", sans-serif; text-transform: capitalize; letter-spacing: 0.0025em; display: flex; flex-direction: column; position: relative; z-index: 1; span { translate: -4ch; padding: 0 calc(1em / 10); width: 100%; color: rgb(from var(--shades-white) r g b / var(--opacity-low)); position: relative; &:first-child, &:last-child { text-align: right; translate: 10ch; &:last-child { color: rgb(from var(--shades-white) r g b / var(--opacity-high)) } } @supports (animation-range: normal) { animation: slideIn ease-out forwards 1ms; animation-timeline: view(); animation-range-start: cover -0.5lh; animation-range-end: cover calc(2lh + 2.5lh); &:first-child { animation-range-start: cover 0lh; animation-range-end: cover calc(2.5lh + 2.5lh); } &:last-child { animation-range-start: cover -1.5lh; animation-range-end: cover calc(1.5lh + 2.5lh); } } } } > #visibleText { position: absolute; z-index: 1; right: 7.5vw; bottom: 10em; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 2em; line-height: 1.5em; width: 50ch; @supports (animation-range: normal) { animation: boostUp linear both 1ms, slideUp linear both 1ms; animation-range: cover 16em, cover; animation-timeline: view(), view(); animation-composition: add; } @supports not (animation-range: normal) { translate: -3lh; } b { font-size: 1.25em; /* line-height: inherit; */ transition: color 0.5s; &:hover { /* line-height: inherit; */ color: var(--pri-colour-lightest); } > span { transition: 0.125s; &:hover { color: var(--shades-white); } } } } } } @scope (#groupingStylesTogether) { & { align-content: center; > #groupedText { position: absolute; bottom: 67%; left: 10vw; color: var(--shades-white); margin: 0; letter-spacing: 0.25rem; font-family: "Orelo Semi Expanded", sans-serif; font-weight: 400; font-size: 2em; padding: 1.5em 2em; display: inline-block; text-align: left; border: 0.125em dashed rgb(from var(--shades-white) r g b / var(--opacity-low)); background: rgb(from var(--pri-colour-darkest) r g b / var(--opacity-high)); &::before, &::after { border: inherit; padding: inherit; background: inherit; pointer-events: none; position: absolute; content: attr(data-text); inset: -0.25rem; animation: 10s linear both infinite 5s; } &::before { z-index: -1; animation-name: changeCard, changeCardBefore; } &::after { z-index: 1; animation-name: changeCard, changeCardAfter; } :is(body.hidden &) { &::before, &::after { animation-play-state: paused; } } } > #miniEditor { position: relative; margin-left: auto; margin-right: 7.5vw; font-family: 'Fira Code', monospace; font-size: 2em; line-height: 1em; gap: 3ch; width: fit-content; color: var(--shades-white); @supports (animation-range: normal) { animation: viewed linear; animation-timeline: view(); animation-range-start: contain; animation-range-end: cover calc(0% + 5lh); div :is(> div, span) { --charIndex: -1; animation: slideInLines linear forwards; animation-timeline: view(); animation-range-start: cover 0%; animation-range-end: cover 5lh; } } > .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* 1 */ word-wrap: normal; /* 2 */ } > .visual-presentation { display: flex; gap: 3ch; > #lineNumbers { width: 2ch; opacity: 0.25; font-family: inherit; text-align: right; } > pre { opacity: 0.75; font-family: inherit; letter-spacing: 0.2em; margin: 0; --maxLines: 20; --activeLine: 1; --intensityPos: 100%; > code > div { padding-right: 5ch; &:first-child { position: relative; &::before { position: absolute; content: ''; top: 0; right: 0; height: 100%; width: calc(100% + 5ch); background: linear-gradient(to right, transparent, rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium)) calc(var(--intensityPos) - 20%), rgb(from var(--pri-colour-darker) r g b / var(--opacity-medium)) var(--intensityPos), rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium)) calc(var(--intensityPos) + 20%), transparent); z-index: -1; translate: 0 calc((clamp(1, var(--activeLine), var(--maxLines)) - 1) * 1lh); transition: 0.5s ease; } } span { display: inline-block; } } } } } } } @scope (#mechanicsOfNesting) { & { contain: size layout; display: flex; &:has(.hover-animation) { touch-action: none; &:has(> :not(#backToStart):hover) { cursor: none; > #nycssCursor { scale: 0.25; animation-duration: 1.5s; } } > #nycssCursor { opacity: 1; animation: rotate 12.5s linear infinite; } } > #nycssCursor { opacity: 0; pointer-events: none; position: absolute; z-index: 999; background-color: rgb(from var(--pri-colour-lightest) r g b / var(--opacity-low)); border-radius: 50%; aspect-ratio: 1 / 1; font-size: 10em; padding: 0.0625em; height: auto; width: 1em; translate: calc(50vw - 50%) calc(50vh - 50%); transition: opacity 1s 0.1s, scale 0.5s; :is(:has(.hover-animation):has(> &):hover &) { will-change: transform; } &.hidden { animation-play-state: paused; } } > #splittingText { position: absolute; top: 4lh; right: 8ch; color: var(--shades-white); font-family: 'Poppins', 'Calibri', sans-serif; font-weight: 300; font-size: 1.75rem; height: 4lh; width: 60ch; text-align: justify; text-align-last: left; column-count: 2; gap: 6ch; word-spacing: 0.3ch; color: transparent; user-select: none; @supports (animation-range: normal) { animation: unblur ease-out both 1ms; animation-timeline: view(); animation-range: cover contain calc(min(50dvh, 800px)); } &::before, &::after { color: var(--shades-white); content: attr(data-text); position: absolute; inset: 0; column-count: inherit; gap: inherit; animation: widenGap 3s ease-in-out infinite alternate backwards; } &::before { clip-path: inset(0 50% 0 0); transform-origin: left; } &::after { clip-path: inset(0 0 0 50%); transform-origin: right; } &.hidden { &::before, &::after { animation-play-state: paused; } } > a { color: inherit; } } > #strechingText { position: absolute; top: calc(4em / 3); left: calc(8em / 3); color: var(--shades-white); line-height: 200%; font-family: 'Orelo Semi Condensed'; font-weight: 600; font-size: 3em; scale: 1; @supports (animation-range: normal) { animation: moveDown linear both 1ms; animation-timeline: view(); animation-range-start: cover -2lh; animation-range-end: cover 2lh; } > span { display: inline-block; transition: 1s; &:hover { scale: 1 2; transition: 0s; } } } > #nestingText { position: absolute; bottom: calc(8em / 5); right: calc(24em / 5); color: var(--shades-white); font-size: 5em; contain: layout; > * { margin: 0; white-space: nowrap; } > h3 { font-size: 1em; font-weight: 900; font-family: 'Poppins', 'Calibri', sans-serif; @supports (animation-range: normal) { animation: moveDown linear both 1ms; animation-timeline: view(); animation-range-start: cover -2lh; animation-range-end: cover 2lh; } transition: scale 1s, text-shadow 1s; &:hover { scale: 1.1; text-shadow: 0 -0.1lh calc(1em / 5) var(--shades-black); } } > p { position: absolute; z-index: -1; top: 0; left: 0; line-height: 1em; font-size: 1.125em; font-weight: 600; letter-spacing: -0.05em; font-family: 'Orelo Expanded'; color: rgb(from var(--shades-white) r g b / var(--opacity-medium)); @supports (animation-range: normal) { animation: fadeUp linear both 1ms; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover calc(1lh + 1.98em); } @supports not (animation-range: normal) { translate: -0.96ch -0.31em; opacity: 1; } } a { color: unset; text-decoration: unset; } } > #nycssLogoGroup { user-select: none; align-self: flex-end; contain: layout; display: inline-flex; flex-direction: column; margin-left: 8vw; margin-bottom: 8vw; position: relative; z-index: 1; > * { pointer-events: none; } > img { height: 16em; width: auto; aspect-ratio: 1 / 1; } > img#nycssNest { color: transparent; filter: drop-shadow(0 -0.5em) drop-shadow(0.7em 0.3em) drop-shadow(5.4em 1em) drop-shadow(7.1em 1.1em) drop-shadow(1.6em 0.4em) drop-shadow(4.3em 0.9em); clip-path: circle(47.2%); } > img#nycssBadge { /* Badge Scroll Positions */ --main-x: 80vw; --main-y: calc(max(-600dvh, -9600px) - 150%); --reducingBoilerplateCode-y: calc(max(-600dvh, -9600px) + 0%); --easierMaintenance-y: calc(max(-450dvh, -7200px) + 50%); --improvedCodeReadability-y: calc(max(-300dvh, -4800px) - 50%); --groupingStylesTogether-y: calc(max(-150dvh, -2400px) + 66%); --mechanicsOfNesting-y: 50%; /* backface-visibility: hidden; */ pointer-events: none; filter: drop-shadow(0 var(--shadow-distance) 0 var(--shadow-color)) drop-shadow(0 calc(-1 * var(--shadow-distance)) 0 var(--shadow-color)); --shadow-color: #1474B833; /* Taken directly from the CSS Logo */ --shadow-distance: 0; transition: 1s; &.main-animation { animation: fall linear 1ms; animation-timeline: scroll(nearest); } &.idle-animation { animation: fall linear 1ms, idle 2.5s infinite alternate; animation-timeline: scroll(nearest), auto; /* convert to view() if possible */ animation-composition: add; &.hidden { animation-play-state: paused; } } &.hover-animation { animation: hover 2s infinite alternate; --shadow-color: #1474B833; /* Taken directly from the CSS Logo */ --shadow-distance: 1.5em; &.hidden { animation-play-state: paused; } } } &:has(img.hover-animation) { clip-path: inset(19.3% 1.3% 1.3% 7.3%); &:hover #nycssBadge.hover-animation { --shadow-color: #26A2D933; /* Taken directly from the CSS Logo */ --shadow-distance: 2em; } } } > #backToStart { position: absolute; top: 0; left: 0; height: 100%; width: 100%; &:has(~ #nycssLogoGroup > img.hover-animation) { display: block; } } } } /* --- Media Queries with Scopes --- */ /* 1235 x 1125 - Breaking point between mobile & desktop */ @media (max-aspect-ratio: 1.097 / 1) { @scope (#siteWrapper) { /* --- Main Section Scope --- */ & > main { > #mainContent { border-radius: 1rem; } > #mainSettings, > #mainContent :is(#textSide, #shadowEditorsWrapper) { display: none; } #editorSide { animation: none !important; width: calc(var(--single-editor-width)); #codeEditor { max-width: 100%; justify-content: left; > .editorWrapper { max-width: inherit; } } } } /* --- Article Section Scopes --- */ & > article { font-size: clamp(1.1px, 1.15dvw, 22.5px); > section { contain: size; position: relative; height: min(100dvh, 1600px); &#reducingBoilerplateCode > a { font-size: 5vw; } > #repeatingText { font-size: 2.5vw; top: 50%; translate: 0 calc(-50% - 7.5em); } > #parallaxText { font-size: 2.5vw; bottom: 50%; translate: 0 calc(-50% + 6em); } > #mergingText { font-size: 8vw; top: calc(4em / 3); } > #changingText { font-size: 2.5vw; bottom: 16vw; translate: 0 calc(-50% + 5em); } > #backgroundText { font-size: 20vw; top: 50%; translate: 0 -50%; } > #visibleText { font-size: 2.5vw; top: 50%; translate: 0 -25%; } > #groupedText { font-size: 5vw; top: calc(50% - 50vw); bottom: auto; translate: 0 -50%; height: fit-content; } > #miniEditor { font-size: 2.5vw; } > #splittingText { font-size: 2.1vw; top: 50%; translate: 0 calc(-50% - 12.5em); } > #strechingText { font-size: 7.5vw; top: 64rem; translate: 0 calc(-50% - 12.5em); animation: none; } > #nestingText { font-size: 4vw; bottom: calc(20em / 5); } > #nycssLogoGroup { font-size: 2vw; } } } /* --- State Scopes (Homepage State) --- */ @scope (& > main:not(.nesting)) { > #mainContent#mainContent { justify-content: center; > #editorSide > #codeEditor { margin: 0 auto; /* animation: fadeIn 2s linear both; */ > #inputEditorWrapper { border: none; border-radius: 1rem; background: none; padding: 0; } > #outputEditorWrapper > .editorGroup { opacity: 0; } } } } /* --- State Scopes (Nesting / Editor State) --- */ @scope (& > main.nesting) { > #mainContent { min-width: 100%; transition: unset; > #editorSide#editorSide#editorSide { /* * Remove the slide in animation, just make it fade out & fade in * And make the editors stack on top of each other, aspect-ratio * can be ignored - just fill the screen */ > #codeEditor { height: 100%; width: 100%; animation: none; flex-direction: column; #editorGap { height: var(--padding); aspect-ratio: auto; flex: none; } .editorWrapper { flex: 1; } .editorGroup { aspect-ratio: auto; } .editor { height: 100%; width: 100%; aspect-ratio: auto; } } } } } } } } }