Skip to content

Instantly share code, notes, and snippets.

@michaelcpuckett

michaelcpuckett/index.html

Last active December 24, 2024 13:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save michaelcpuckett/93dd304da7d1ac1329bb1e8441f13031 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save michaelcpuckett/93dd304da7d1ac1329bb1e8441f13031 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. michaelcpuckett revised this gist Dec 24, 2024. 1 changed file with 268 additions and 69 deletions.
    337 changes: 268 additions & 69 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,93 +1,292 @@
    <!DOCTYPE html>
    <html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <style>
    :where(*) {
    box-sizing: border-box;
    :where(p, h1, h2, h3) {
    margin-top: 0;
    margin-bottom: 0;
    }

    html {
    display: grid;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    container-name: root;
    container-type: inline-size;
    #site-heading {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    padding: 1rem 0;
    }
    </style>
    </head>
    <body>
    <script type="module">
    const pageStyleSheet = new CSSStyleSheet();
    pageStyleSheet.replaceSync(`
    :where(*) {
    box-sizing: border-box;
    }
    body {
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    display: grid;
    grid-template-rows: auto minmax(0px, 1fr) auto;
    }
    html {
    display: grid;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: sans-serif;
    }
    :where(p) {
    margin-top: 0;
    margin-bottom: 0;
    }
    body {
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    }
    `);
    window.document.adoptedStyleSheets.push(pageStyleSheet);
    window.customElements.define(
    "menu-visibility-switch",
    class extends HTMLElement {
    connectedCallback() {
    new Promise(window.requestAnimationFrame).then(() => {
    const switchElement = this.querySelector(
    "#menu-visibility-switch"
    );

    .top,
    .bottom {
    background: #ddd;
    }
    function setSwitchElementToggleState() {
    switchElement.setAttribute(
    "aria-expanded",
    switchElement.checked
    );
    }

    .top,
    p,
    .bottom {
    padding: 1rem;
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
    }
    setSwitchElementToggleState();

    .top {
    padding-top: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    }
    switchElement.addEventListener(
    "input",
    setSwitchElementToggleState
    );
    });
    }
    }
    );
    </script>
    <app-layout>
    <template shadowrootmode="open">
    <style>
    :host {
    display: contents;
    }

    .bottom {
    padding-bottom: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    .root {
    display: grid;
    grid-template-rows: auto minmax(0px, 1fr) auto;
    height: 100%;
    }

    p {
    height: 100cqh;
    background: red;
    }
    .top,
    .bottom {
    background: #ddd;
    }

    p:last-of-type {
    background: blue;
    }
    .top,
    .bottom {
    padding: 1rem;
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
    }

    .top {
    touch-action: none;
    }
    .menu {
    padding: 1rem;
    padding-left: calc(1rem + env(safe-area-inset-left));
    }

    .middle {
    display: grid;
    height: 100%;
    overflow-y: auto;
    container-name: main;
    container-type: size;
    }
    .main {
    padding: 1rem;
    padding-right: calc(1rem + env(safe-area-inset-right));
    }

    .bottom {
    touch-action: none;
    }
    </style>
    </head>
    <body>
    <div class="top">Header</div>
    <div class="middle">
    <p>Main</p>
    <p>123</p>
    </div>
    <div class="bottom">Footer</div>
    .top {
    padding-top: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    }

    .bottom {
    padding-bottom: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .top {
    touch-action: none;
    display: grid;

    @media (width <= 960px) {
    grid-template-columns: auto minmax(0px, 1fr);
    align-items: center;
    gap: 1rem;
    }
    }

    .middle {
    display: grid;
    height: 100%;

    @media (width <= 960px) {
    grid-template-rows: 100%;
    }

    @media (width > 960px) {
    grid-template-columns: 300px minmax(0px, 1fr);
    }
    }

    .menu,
    .main {
    display: grid;
    overflow-y: auto;
    }

    .main {
    container-name: main;
    container-type: size;
    }

    @media (width <= 960px) {
    :has(#menu-visibility-switch:not(:checked)) .menu {
    display: none;
    }

    :has(#menu-visibility-switch:checked) .main {
    display: none;
    }
    }

    #menu-visibility-switch:not(:checked) ~ [data-if-checked] {
    display: none;
    }

    #menu-visibility-switch:checked ~ [data-if-unchecked] {
    display: none;
    }

    @media (width > 960px) {
    .content {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    }
    }

    .bottom {
    touch-action: none;
    }

    .switch {
    padding: 1rem;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: lightblue;
    border-radius: 5px;
    text-align: center;
    display: flex;
    width: auto;
    aspect-ratio: 1;
    line-height: 1;
    }

    @media (width > 960px) {
    #menu-visibility-switch-label {
    display: none;
    }
    }

    menu-visibility-switch {
    display: contents;
    }

    .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    }
    </style>
    <div class="root">
    <header role="banner" class="top">
    <menu-visibility-switch>
    <label class="switch" id="menu-visibility-switch-label"
    ><span class="visually-hidden">Toggle Menu</span>
    <input
    id="menu-visibility-switch"
    type="checkbox"
    class="visually-hidden"
    role="switch"
    /><svg
    data-if-unchecked
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    >
    <path
    d="M4 6H20M4 12H20M4 18H20"
    stroke="#000000"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    />
    </svg>
    <svg
    aria-hidden="true"
    data-if-checked
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    >
    <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
    fill="#0F1729"
    />
    </svg>
    </label>
    </menu-visibility-switch>
    <slot name="header"></slot>
    </header>
    <div class="middle">
    <nav class="menu">
    <slot name="menu"></slot>
    </nav>
    <main class="main">
    <div class="content">
    <slot name="content"></slot>
    </div>
    </main>
    </div>
    <footer role="contentinfo" class="bottom">
    <slot name="footer"></slot>
    </footer>
    </div>
    </template>
    <div slot="header">
    <span id="site-heading">Site Heading</span>
    </div>
    <div slot="menu">
    <h2>Menu</h2>
    <img height="2000" />
    </div>
    <div slot="content">
    <h1>Main</h1>
    <img height="2000" />
    </div>
    <div slot="footer">&copy; 2024</div>
    </app-layout>
    </body>
    </html>
  2. michaelcpuckett created this gist Dec 23, 2024.
    93 changes: 93 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <style>
    :where(*) {
    box-sizing: border-box;
    }

    html {
    display: grid;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    container-name: root;
    container-type: inline-size;
    }

    body {
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    display: grid;
    grid-template-rows: auto minmax(0px, 1fr) auto;
    }

    :where(p) {
    margin-top: 0;
    margin-bottom: 0;
    }

    .top,
    .bottom {
    background: #ddd;
    }

    .top,
    p,
    .bottom {
    padding: 1rem;
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
    }

    .top {
    padding-top: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    }

    .bottom {
    padding-bottom: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    p {
    height: 100cqh;
    background: red;
    }

    p:last-of-type {
    background: blue;
    }

    .top {
    touch-action: none;
    }

    .middle {
    display: grid;
    height: 100%;
    overflow-y: auto;
    container-name: main;
    container-type: size;
    }

    .bottom {
    touch-action: none;
    }
    </style>
    </head>
    <body>
    <div class="top">Header</div>
    <div class="middle">
    <p>Main</p>
    <p>123</p>
    </div>
    <div class="bottom">Footer</div>
    </body>
    </html>