added demo site

demo/css/custom_properties.css

@@ -0,0 +1,94 @@
+:root {
+
+    /*     ######  #####  ##       #####  ######     */
+    /*    ###     ##   ## ##      ##   ## ##   ##    */
+    /*    ##      ##   ## ##      ##   ## ######     */
+    /*    ###     ##   ## ##      ##   ## ##  ##     */
+    /*     ######  #####  #######  #####  ##   ##    */
+    /*
+        use color-mix() with transparent to add transparency
+        https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#adding_transparency
+    */
+
+    &[data-color-scheme="light"] {
+        /* light gray */
+        --color-01-l: 90%;
+        --color-01-a: 0%;
+        --color-01-b: 0%;
+
+        /* black */
+        --color-02-l: 0%;
+        --color-02-a: 0%;
+        --color-02-b: 0%;
+    }
+
+    &[data-color-scheme="dark"] {
+        /* black */
+        --color-01-l: 0%;
+        --color-01-a: 0%;
+        --color-01-b: 0%;
+
+        /* light gray */
+        --color-02-l: 90%;
+        --color-02-a: 0%;
+        --color-02-b: 0%;
+    }
+
+
+    --color-01: oklab(var(--color-01-l) var(--color-01-a) var(--color-01-b));
+    --color-01-light: oklab(calc(var(--color-01-l) + 25%) var(--color-01-a) var(--color-01-b));
+    --color-01-dark: oklab(calc(var(--color-01-l) - 25%) var(--color-01-a) var(--color-01-b));
+
+    --color-02: oklab(var(--color-02-l) var(--color-02-a) var(--color-02-b));
+    --color-02-light: oklab(calc(var(--color-02-l) + 25%) var(--color-02-a) var(--color-02-b));
+    --color-02-dark: oklab(calc(var(--color-02-l) - 25%) var(--color-02-a) var(--color-02-b));
+
+    --link-color-01: var(--text-color-01);
+    --link-decoration-01: none;
+    --link-hover-color-01: var(--text-color-01);
+    --link-hover-decoration-01: underline;
+
+    --success-color: oklab(60.735% -40.534% 31.334%);
+    --info-color: oklab(61.465% -23.829% -17.445%);
+    --warning-color: oklab(82.103% 10.93% 66.106%);
+    --danger-color: oklab(50.864% 51.073% 25.414%);
+
+
+
+
+    /*     ###### ######   #####   ###### ###### ##   ##  ######    */
+    /*    ##      ##   ## ##   ## ###       ##   ###  ## ##         */
+    /*     #####  ######  ####### ##        ##   ## # ## ##  ###    */
+    /*         ## ##      ##   ## ###       ##   ##  ### ##   ##    */
+    /*    ######  ##      ##   ##  ###### ###### ##   ##  #####     */
+
+
+    --space: 1lh;
+    --eighth-space: calc(var(--space) * .125);
+    --quarter-space: calc(var(--space) * .25);
+    --half-space: calc(var(--space) * .5);
+    --three-quarter-space: calc(var(--space) * .75);
+    --one-and-quarter-space: calc(var(--space) * 1.25);
+    --one-and-half-space: calc(var(--space) * 1.5);
+    --one-and-three-quarter-space: calc(var(--space) * 1.75);
+    --double-space: calc(var(--space) * 2);
+    --tripple-space: calc(var(--space) * 3);
+
+
+
+
+    /*     ###### ###### ####### ###### ##   ##  ######    */
+    /*    ##        ##       ##    ##   ###  ## ##         */
+    /*     #####    ##      #      ##   ## # ## ##  ###    */
+    /*         ##   ##    ##       ##   ##  ### ##   ##    */
+    /*    ######  ###### ####### ###### ##   ##  #####     */
+
+
+    --site-max-width: 1440px;
+
+    /* grid.css */
+    --content-gap: var(--double-space);
+    --content-padding: clamp(var(--space), 5dvw, var(--tripple-space));
+    --site-padding: max(5dvw, 10px);
+    --max-content-width: calc(var(--site-max-width) - var(--content-padding) * 2);
+}

demo/css/dialog.css

@@ -0,0 +1,24 @@
+@layer dialog {
+    [data-open-dialog]:hover { cursor: pointer; }
+
+    dialog {
+        border: 0;
+        padding: var(--half-space);
+        position: relative;
+
+        &::backdrop {
+            background-color: rgb(0 0 0 / .75);
+        }
+
+        .close-btn:hover { cursor: pointer; }
+
+        .close-icon {
+            height: 20px;
+            inset: var(--quarter-space) var(--quarter-space) auto auto;
+            position: absolute;
+            width: 20px;
+        }
+
+        body:has(&[open]) { overflow: hidden; }
+    }
+}

demo/css/fonts.css

@@ -0,0 +1,94 @@
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 100;
+    src: url('../fonts/kommon_grotesk_thin.woff') format('woff'),
+         url('../fonts/kommon_grotesk_thin.woff2') format('woff2');
+}
+
+    @font-face {
+        font-family: 'Kommon Grotesk';
+        font-weight: 100;
+        font-style: italic;
+        src: url('../fonts/kommon_grotesk_thin_italic.woff') format('woff'),
+             url('../fonts/kommon_grotesk_thin_italic.woff2') format('woff2');
+    }
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 200;
+    src: url('../fonts/kommon_grotesk_extra_light.woff') format('woff'),
+         url('../fonts/kommon_grotesk_extra_light.woff2') format('woff2');
+}
+
+    @font-face {
+        font-family: 'Kommon Grotesk';
+        font-weight: 200;
+        font-style: italic;
+        src: url('../fonts/kommon_grotesk_extra_light_italic.woff') format('woff'),
+             url('../fonts/kommon_grotesk_extra_light_italic.woff2') format('woff2');
+    }
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 300;
+    src: url('../fonts/kommon_grotesk_light.woff') format('woff'),
+         url('../fonts/kommon_grotesk_light.woff2') format('woff2');
+}
+
+    @font-face {
+        font-family: 'Kommon Grotesk';
+        font-weight: 300;
+        font-style: italic;
+        src: url('../fonts/kommon_grotesk_light_italic.woff') format('woff'),
+             url('../fonts/kommon_grotesk_light_italic.woff2') format('woff2');
+    }
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 400;
+    src: url('../fonts/kommon_grotesk_normal.woff') format('woff'),
+         url('../fonts/kommon_grotesk_normal.woff2') format('woff2');
+}
+
+    @font-face {
+        font-family: 'Kommon Grotesk';
+        font-weight: 400;
+        font-style: italic;
+        src: url('../fonts/kommon_grotesk_italic.woff') format('woff'),
+             url('../fonts/kommon_grotesk_italic.woff2') format('woff2');
+    }
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 500;
+    src: url('../fonts/kommon_grotesk_medium.woff') format('woff'),
+         url('../fonts/kommon_grotesk_medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 600;
+    src: url('../fonts/kommon_grotesk_semi_bold.woff') format('woff'),
+         url('../fonts/kommon_grotesk_semi_bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 700;
+    src: url('../fonts/kommon_grotesk_bold.woff') format('woff'),
+         url('../fonts/kommon_grotesk_bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 800;
+    src: url('../fonts/kommon_grotesk_extra_bold.woff') format('woff'),
+         url('../fonts/kommon_grotesk_extra_bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Kommon Grotesk';
+    font-weight: 900;
+    src: url('../fonts/kommon_grotesk_black.woff') format('woff'),
+         url('../fonts/kommon_grotesk_black.woff2') format('woff2');
+}

demo/css/grid.css

@@ -0,0 +1,105 @@
+/* temp */
+section {
+    /* background: gray; */
+    margin-block: var(--space);
+}
+
+:where(header, section, footer) > * {
+    background-image: url('https://res.cloudinary.com/demo/image/upload/cashew_chicken.jpg');
+    background-size: cover;
+    color: var(--color-01);
+    /* text-shadow: 1px 1px 3px var(--color-02); */
+}
+
+:where(header, section, footer) {
+    display: grid;
+    row-gap: var(--content-gap);
+    grid-template-columns:
+        [viewport-start] 1fr
+        [site-padding-start] var(--site-padding)
+        [content-padding-start] var(--content-padding)
+        [content-start]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [one-twelfth]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [two-twelfths one-sixth]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [three-twelfths one-fourth fourth one-quarter]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [four-twelfths one-third]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [five-twelfths]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [six-twelfths one-half half]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [seven-twelfths]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [eight-twelfths two-thirds]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [nine-twelfths three-fourths third three-quarters]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [ten-twelfths five-sixths]
+            minmax(0, calc(var(--max-content-width) / 12))
+            [eleven-twelfths]
+            minmax(0, calc(var(--max-content-width) / 12))
+        [content-end twelve-twelfths]
+        var(--content-padding) [content-padding-end]
+        var(--site-padding) [site-padding-end]
+        1fr [viewport-end];
+
+    > * {
+        display: grid;
+        grid-column: content-padding;
+        grid-template-columns: subgrid;
+        padding: var(--content-padding) 0;
+
+        > * { grid-column: content; }
+
+        &.full-viewport { grid-column: viewport !important; }
+
+        &.half-content-left {
+            grid-column-end: half !important;
+            padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
+        }
+        &.half-content-right {
+            grid-column-start: half !important;
+            padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
+            > * { grid-column-start: inherit; }
+        }
+
+        &.half-viewport-left {
+            grid-column: viewport-start / half !important;
+            padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
+        }
+        &.half-viewport-right {
+            grid-column: half / viewport-end !important;
+            padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
+            > * { grid-column-start: inherit; }
+        }
+
+        &.remove-padding {
+            grid-column: content;
+            padding: 0;
+        }
+
+        &.remove-inline-padding {
+            grid-column: content;
+            padding: var(--content-padding) 0;
+        }
+
+        @media (max-width: 1240px) {
+            &[class*="-left"] { grid-column-end: three-quarters !important; }
+            &[class*="-right"] { grid-column-start: one-quarter !important; }
+        }
+
+        @media (max-width: 940px) {
+            &[class*="-left"] { grid-column-end: five-sixths !important; }
+            &[class*="-right"] { grid-column-start: one-sixth !important; }
+        }
+
+        @media (max-width: 640px) {
+            &[class*="-left"] { grid-column-end: content-end !important; }
+            &[class*="-right"] { grid-column-start: content-start !important; }
+        }
+    }
+}

demo/css/main.css

@@ -0,0 +1,7 @@
+@import './reset.css' layer(reset);
+@import './custom_properties.css' layer(custom-properties);
+@import './tags.css' layer(tags);
+@import './grid.css' layer(grid);
+@import './utility_classes.css' layer(classes);
+
+@import './fonts.css';

demo/css/reset.css

@@ -0,0 +1,114 @@
+/***
+    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+    cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu, summary {
+    list-style: none;
+}
+
+/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
+ol {
+    counter-reset: revert;
+}
+
+/* For images to not be able to exceed their container */
+img {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+    -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+    -webkit-appearance: revert;
+    appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+    all: revert;
+    box-sizing: border-box;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+    color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+    -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+    all: revert;
+    box-sizing: border-box;
+}
+
+/* Remove details summary webkit styles */
+::-webkit-details-marker {
+    display: none;
+}

demo/css/tags.css

@@ -0,0 +1,166 @@
+/* debug */
+/* *, *::before, *::after {
+   outline: 2px solid lime;
+} */
+
+:root {
+    interpolate-size: allow-keywords;
+    scrollbar-color: color-mix(in oklab, var(--color-02) 40%, transparent)
+                     color-mix(in oklab, var(--color-01) 40%, transparent);
+    scrollbar-gutter: stable;
+}
+
+body {
+    background-color: var(--color-01);
+    color: var(--color-02);
+    font: normal normal 300 clamp(1.6rem, 1.4dvw, 2.0rem)/1.25 'Helvetica', sans-serif;
+    letter-spacing: .25px;
+    overflow-x: clip;
+}
+
+button {
+    background: var(--color-01);
+    border: 1px solid var(--color-02);
+    color: var(--color-02);
+    padding: var(--quarter-space);
+    &:not(:last-child) { margin-bottom: var(--half-space); }
+    &:hover { cursor: pointer; }
+}
+
+em {
+    font-style: italic;
+    font-weight: bolder;
+}
+
+figcaption {
+    font-size: smaller;
+}
+
+h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
+
+html {
+    font-size: 62.5%;
+    scroll-behavior: smooth;
+}
+
+img { display: block; }
+
+small { font-size: .35lh; }
+
+strong { font-weight: 600; }
+
+svg { display: block; }
+
+figcaption, li, ol, p {
+    text-wrap: balance;
+    text-wrap: pretty;
+}
+
+
+
+/*    ####### #####  ######  ##   ##  ######    */
+/*    ##     ##   ## ##   ## ### ### ##         */
+/*    ###### ##   ## ######  ## # ##  #####     */
+/*    ##     ##   ## ##  ##  ##   ##      ##    */
+/*    ##      #####  ##   ## ##   ## ######     */
+
+form {
+    container: form / inline-size;
+
+    ::placeholder { opacity: .65; }
+
+    fieldset {
+        form > & {
+            column-gap: clamp(var(--three-quarter-space), 3dvw, var(--space));
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            row-gap: var(--one-and-three-quarter-space);
+
+            @container form (width < 400px) {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        margin-top: -.5lh;
+        padding-top: .75lh;
+
+        legend {
+            font-weight: bolder;
+            position: relative;
+            top: .5lh;
+        }
+    }
+
+    .form-group {
+        position: relative;
+        transition: background .25s linear;
+
+        input, select, textarea {
+            border: 1px solid var(--color-01);
+            width: 100%;
+
+            &:not(:last-child, input[type="checkbox"], input[type="radio"]) {
+                margin-bottom: var(--half-space);
+            }
+        }
+
+        input[type="checkbox"],
+        input[type="radio"] {
+            aspect-ratio: 1;
+            background: var(--color-02);
+            height: .75lh;
+            width: .75lh;
+
+            &:checked { background: var(--color-01); }
+
+            .form-group:has(&) {
+                align-content: start;
+                display: flex;
+                flex-wrap: wrap;
+                gap: .5lh 2ch;
+
+                & > :where(label, legend) { flex: 1 1 100%; }
+            }
+        }
+
+        label {
+            &:not(:where(input[type="checkbox"], input[type="radio"]) + &,
+                  &:has(+ :where([type="checkbox"], [type="radio"]))
+                 ) { font-weight: bolder; }
+
+            &:hover { cursor: pointer; }
+        }
+
+        textarea { height: 3lh; }
+
+        :disabled, label:has(:disabled, ~ :disabled), :disabled ~ label {
+            border-color: color-mix(in oklab, var(--color-01) 40%, transparent);
+            color: color-mix(in oklab, var(--color-01) 40%, transparent);
+            &:hover { cursor: not-allowed; }
+        }
+
+        /* wrapper for checkbox/radio input and label elements */
+        .form-group__item {
+            align-items: center;
+            display: inline-flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            gap: .5ch;
+
+            & *:hover { cursor: pointer; }
+        }
+
+        .required__indicator { color: var(--danger-color); }
+
+        &.invalid {
+            background: color-mix(in oklab, var(--danger-color) 5%, transparent);
+
+            .invalid__message {
+                color: var(--danger-color);
+                font-size: 1.0rem;
+                inset: calc(100% + .5lh) auto auto 0;
+                position: absolute;
+            }
+        }
+    }
+}

demo/css/utility_classes.css

@@ -0,0 +1,56 @@
+.align-center {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.align-left {
+    margin-left: 0;
+    margin-right: auto;
+    text-align: left;
+}
+
+.align-right {
+    margin-left: auto;
+    margin-right: 0;
+    text-align: right;
+}
+
+.keep { white-space: nowrap; }
+
+/* https://fajarwz.com/blog/how-to-solve-unwanted-css-transitions-on-page-load/ */
+.no-transition,
+.no-transition * {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+
+
+
+@keyframes parallax-background {
+    to { background-position-y: -200px; }
+}
+
+.parallax-background {
+    position: relative;
+    overflow: clip;
+    background: none;
+
+    &::before {
+        animation: parallax-background linear;
+        animation-timeline: view();
+        background-image: var(--parallax-background); /* define --parallax-background in element's style attribute */
+        background-position-x: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        content: '';
+        height: calc(100% + 200px);
+        inset: 0;
+        position: absolute;
+        z-index: -1;
+    }
+}