Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body data-layout="single">
  <a href="#main-content">Skip to content</a>
  <header>
    <h1><a href="">Super&shy;Minimal&shy;CSS</a></h1>
    <nav>
      <ul>
        <li><a href="#foundations">Foundations</a></li>
        <li><a href="#elements">Elements</a></li>
        <li><a href="#add-ons">Add-ons</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-content">
    <h2>About</h2>
    <p><big>Super&shy;Minimal&shy;CSS is pure <strong>black &amp; white</strong> CSS awesomeness with nice typography (for both English and Chinese). <q>Less is more</q> is the main principle of this mini design system.</big></p>
    <figure>
      <table>
        <caption>Super&shy;Minimal&shy;CSS&rsquo;s design guidelines.</caption>
        <tbody>
          <tr>
            <th aria-hidden="true">&#10005;</th>
            <td width="100%" aria-label="The system does not use">Colors</td>
          </tr>
          <tr>
            <th aria-hidden="true">&#10005;</th>
            <td width="100%" aria-label="The system does not use">Classes</td>
          </tr>
          <tr>
            <th aria-hidden="true">&#10005;</th>
            <td width="100%" aria-label="The system does not use">Gradients</td>
          </tr>
          <tr>
            <th aria-hidden="true">&#10005;</th>
            <td width="100%" aria-label="The system does not use">Animations</td>
          </tr>
          <tr>
            <th aria-hidden="true">&#10005;</th>
            <td width="100%" aria-label="The system does not use">Breakpoints</td>
          </tr>
          <tr>
            <th aria-hidden="true">&#10005;</th>
            <td width="100%" aria-label="The system does not use">Custom fonts</td>
          </tr>
          <tr>
            <th aria-hidden="true">&check;</th>
            <td width="100%" aria-label="The system does provide">Auto dark mode</td>
          </tr>
          <tr>
            <th aria-hidden="true">&check;</th>
            <td width="100%" aria-label="The system does provide">Hover &amp; focus styles</td>
          </tr>
          <tr>
            <th aria-hidden="true">&check;</th>
            <td width="100%" aria-label="The system does provide">Auto high contrast mode</td>
          </tr>
          <tr>
            <th aria-hidden="true">&check;</th>
            <td width="100%" aria-label="The system does provide">Fluid typography &amp; spacing</td>
          </tr>
          <tr>
            <th aria-hidden="true">&check;</th>
            <td width="100%" aria-label="The system is">Under 15KB minified file size</td>
          </tr>
          <tr>
            <th aria-hidden="true">&check;</th>
            <td width="100%" aria-label="The system has">Browser zoom &amp; font-size compatibility</td>
          </tr>
        </tbody>
      </table>
    </figure>
    <p><strong>&#9888;&thinsp;Fair warning:</strong> this pen is constantly being updated and using logical CSS that might not have good browser support.</p>
    <hr>
    <h2 id="foundations">Foundations</h2>
    <p>The system is built on a small set of design tokens.</p>
    <details>
      <summary><strong>Color (or lack thereof)</strong></summary>
      <figure>
        <table>
          <thead>
            <tr>
              <th>Token</th>
              <th>Value</th>
              <th width=100%>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>--color-text</td>
              <td>#f4f4f4</td>
              <td>The page text color.</td>
            </tr>
            <tr>
              <td>--color-bg</td>
              <td>#202020</td>
              <td>The page background color.</td>
            </tr>
          </tbody>
        </table>
      </figure>
      <p>Everything is black and white. Actually, off-black and off-white because the strong contrast of true black and white will hurt your eyes. You are welcome.</p>
      <p>There are only 2 tokens: page text color and page background color. The two colors are basically the opposite of each other, which means high contrast. Each element is colored with considerations to that relationship.</p>
    </details>
    <details>
      <summary><strong>Spacing</strong></summary>
      <figure>
        <table>
          <thead>
            <tr>
              <th>Token</th>
              <th width=50%>Value</th>
              <th width=50%>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>--gutter</td>
              <td>Scale from 1ch to 3ch</td>
              <td>The inline spacing base and the grid gutter.</td>
            </tr>
            <tr>
              <td>--stack</td>
              <td>Scale from 1.25ex to 1.75ex</td>
              <td>The block spacing base and the default paragraph spacing.</td>
            </tr>
            <tr>
              <td>--line-length</td>
              <td>70ch</td>
              <td>The optimal line length for reading.</td>
            </tr>
            <tr>
              <td>--page-padding-inline</td>
              <td>Scale from 10vw to whatever is available after subtracting the optimal line length of 70ch from 100% viewpoint width</td>
              <td>The inline inset spacing of a single-column page layout.</td>
            </tr>
          </tbody>
        </table>
      </figure>
      <p>Spacing is fluid. It scales with viewport and character width horizontally; it scales with viewport and x-height vertically. This approach allows any System UI font to have unique spacing.</p>
      <p>There is no range of spacing tokens, only the base ones. For each use case, spacing is calculated using the base tokens.</p>
    </details>
    <details>
      <summary><strong>Typography</strong></summary>
      <figure>
        <table>
          <thead>
            <tr>
              <th>Token</th>
              <th width=50%>Value</th>
              <th width=50%>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>--font</td>
              <td>System UI Sans</td>
              <td>The sans-serif font for heading and body text.</td>
            </tr>
            <tr>
              <td>--font-italic</td>
              <td>Georgia</td>
              <td>The classic font is used solely for blockquotes and italic text (because italic sans-serif is ugly).</td>
            </tr>
            <tr>
              <td>--font-code</td>
              <td>System UI Monospace</td>
              <td>The monospace font for code text.</td>
            </tr>
            <tr>
              <td>--font-size</td>
              <td>100%</td>
              <td>The root font-size of a page.</td>
            </tr>
          </tbody>
        </table>
      </figure>
      <p>System UI fonts are applied to optimize performance and the heading hierarchy is defined by the browser defaults.</p>
      <p>The root font-size is fluid, which allows all text to scale with viewport.</p>
    </details>
    <hr>
    <h2 id="elements">Elements</h2>
    <p>Some of the most used <code>html</code> elements designed in black &amp; white.</p>
    <details>
      <summary><strong>Details and Summary</strong></summary>
      <p>You are looking at it. This is the <q>details</q> and you just clicked <q>summary</q> to expand it.</p>
    </details>
    <details>
      <summary><strong>Inline Text</strong></summary>
      <p>There are various ways to style text: <em>emphasis (italic)</em>, <strong>strong emphasis (bold)</strong>, <a href="#!">link</a>, <abbr title="Abbreviation">abbr</abbr>, <code>code</code>, <kbd>key</kbd>, super<sup>script</sup>, sub<sub>script</sub>, <small>small</small>, and <q>quote</q>.</p>
    </details>
    <details>
      <summary><strong>Blockquote</strong></summary>
      <blockquote>
        <p>
          <q>Simplicity is the ultimate sophistication.</q>
        </p>
        <footer>
          <small>&mdash;&thinsp;Leonardo da Vinci</small>
        </footer>
      </blockquote>
    </details>
    <details>
      <summary><strong>Code Block</strong></summary>
      <pre><code>// This is a block of code.<br>pre { display: block; }</code></pre>
    </details>
    <details>
      <summary><strong>Description List</strong></summary>
      <dl>
        <dt>Beast of Bodmin</dt>
        <dd>A large feline inhabiting Bodmin Moor.</dd>
        <dt>Morgawr</dt>
        <dd>A sea serpent.</dd>
        <dt>Owlman</dt>
        <dd>A giant owl-like creature.</dd>
      </dl>
    </details>
    <details>
      <summary><strong>Un-ordered List</strong></summary>
      <ul>
        <li>This is a list item.</li>
        <li>
          This is 1st level.
          <ul>
            <li>
              This is 2nd level.
              <ul>
                <li>
                  This is 3rd level.
                </li>
                <li>
                  This is 3rd level.
                </li>
              </ul>
            </li>
            <li>
              This is 2nd level.
            </li>
          </ul>
        </li>
        <li>This is a list item.</li>
      </ul>
    </details>
    <details>
      <summary><strong>Ordered List</strong></summary>
      <ol>
        <li>This is a list item.</li>
        <li>
          This is 1st level.
          <ol>
            <li>
              This is 2nd level.
              <ol>
                <li>
                  This is 3rd level.
                </li>
                <li>
                  This is 3rd level.
                </li>
              </ol>
            </li>
            <li>
              This is 2nd level.
            </li>
          </ol>
        </li>
        <li>This is a list item.</li>
      </ol>
    </details>
    <details>
      <summary><strong>Figure</strong></summary>
      <figure>
        <img src="https://via.placeholder.com/1600x900" alt="Placeholder" width=1600 height=900>
        <figcaption>
          Fig 1: This figure has an image and figcaption.
        </figcaption>
      </figure>
    </details>
    <details>
      <summary><strong>Table</strong></summary>
      <figure>
        <table>
          <caption>Table caption.</caption>
          <thead>
            <tr>
              <td></td>
              <th>Top Heading</th>
              <th>Top Heading</th>
              <th>Top Heading</th>
              <th>Top Heading</th>
              <th>Top Heading</th>
              <th>Top Heading</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Side Heading</th>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <th>Side Heading</th>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>Footer Side Heading</th>
              <td>Footer cell</td>
              <td>Footer cell</td>
              <td>Footer cell</td>
              <td>Footer cell</td>
              <td>Footer cell</td>
              <td>Footer cell</td>
            </tr>
          </tfoot>
        </table>
      </figure>
    </details>
    <details>
      <summary><strong>Form Elements</strong></summary>
      <form action="submit">
        <fieldset>
          <legend>This is a fieldset</legend>
          <ol>
            <li>
              <label for="select">Select</label>
              <select name="select" id="select">
                <option value="" disabled selected>Select an option 👇</option>
                <option value="Option 1">Option 1</option>
                <option value="Option 2">Option 2</option>
              </select>
            </li>
            <li>
              <label for="regular">Text input</label>
              <input type="text" id="regular" aria-describedby="hint-text">
            </li>
            <li>
              <label for="valid">Valid (required)</label>
              <input type="email" id="valid" value="[email protected]" required>
              <mark id="error-1"><strong>&#9888;&thinsp;Error:</strong> please enter a valid email.</mark>
            </li>
            <li>
              <label for="invalid">Invalid (required)</label>
              <input type="email" id="invalid" value="@omg" required>
              <mark id="error-2"><strong>&#9888;&thinsp;Error:</strong> please enter a valid email.</mark>
            </li>
            <li>
              <label for="disabled">Disabled</label>
              <input type="text" id="disabled" value="Inaccessible" disabled>
            </li>
            <li>
              <label for="readonly">Read-only</label>
              <input type="text" id="readonly" value="You can only read" readonly>
            </li>
            <li>
              <label>Text area</label>
              <textarea name="textarea" rows="5" aria-describedby="hint"></textarea>
              <p id="hint"><strong>&uarr;&thinsp;Note:</strong> plain text and HTML are allowed.</p>
            </li>
            <li>
              <label for="upload">Upload an image</label>
              <input name="upload" type="file">
            </li>
          </ol>
        </fieldset>
        <fieldset>
          <legend>This is another fieldset</legend>
          <ol>
            <li>
              <label>
                <input type="radio" name="radio">
                This is a radio input.
              </label>
            </li>
            <li>
              <label>
                <input type="radio" name="radio">
                This is a radio input.
              </label>
            </li>
          </ol>
        </fieldset>
        <fieldset>
          <legend>This is yet another fieldset</legend>
          <ol>
            <li>
              <label>
                <input type="checkbox" name="checkbox">
                This is a checkbox input.
              </label>
            </li>
            <li>
              <label>
                <input type="checkbox" name="checkbox">
                This is a checkbox input.
              </label>
            </li>
          </ol>
        </fieldset>
        <p>
          <button type="submit">Submit</button> <button type="reset">Cancel</button>
        </p>
      </form>
    </details>
    <details>
      <summary><strong>Headings</strong></summary>
      <h2>This is H2</h2>
      <h3>This is H3</h3>
      <h4>This is H4</h4>
      <h5>This is H5</h5>
      <h6>This is H6</h6>
    </details>
    <details>
      <summary><strong>Skip link</strong></summary>
      <p>Hard refresh the page and hit the <kbd>tab</kbd> key. Skip link must be the first child of the <code>&lt;body&gt;</code> element.</p>
    </details>
    <hr>
    <h2 id="add-ons">Add-ons</h2>
    <p>The add-ons contain the most common layouts. Data attributes are required for styling.</p>
    <p>You may say, <q>Isn&rsquo;t this cheating? Using attributes for styling is not so different than using classes.</q> Well, yes. That&rsquo;s why I call these <q>add-ons</q>. They are optional.</p>
    <details>
      <summary><strong>Grid</strong></summary>
      <div data-layout="grid">
        <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
        <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
        <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
        <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
        <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
        <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
      </div>
    </details>
    <details>
      <summary><strong>Flag</strong></summary>
      <div data-layout="flag">
        <img src="https://via.placeholder.com/250x250" alt="Placeholder" width=250 height=250>
        <div>
          <h3>Flag: image on the left and text on the right</h3>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae cupiditate, praesentium ducimus necessitatibus tenetur molestias est fuga consequuntur maiores.</p>
        </div>
      </div>
    </details>
    <details>
      <summary><strong>Page layout</strong></summary>
      <p>The current page is a single column page layout with header and footer. Header and footer are pushed against the top and bottom of the page respectively, regardless of how tall the main content is. Page content has a max width of 75 characters, which is the optimal line length.</p>
    </details>
    <hr>
    <article>
      <h1>Article Demo: Everything All Together Now</h1>
      <p><big>The following displays a bunch of placeholder texts and images.</big></p>
      <p>For decades, South Florida<sup>1</sup> schoolchildren and adults fascinated by far-off galaxies, earthly ecosystems, the properties of light and sound and other wonders of science had only a quaint, antiquated museum here in which to explore their interests. <q>Now, with the long-delayed opening of a vast new science museum downtown set for Monday, visitors will be able to stand underneath a suspended, 500,000-gallon aquarium tank and gaze at hammerhead and tiger sharks, mahi mahi, devil rays and other creatures through a 60,000-pound oculus, a lens that will give the impression of seeing the fish<sub>a</sub> from the bottom of a huge cocktail glass.</q></p>
      <figure>
        <img src="https://via.placeholder.com/900x600" alt="Placeholder" width=900 height=600>
        <figcaption>
          Fig 1: The recording starts with the patter of a summer squall.
        </figcaption>
      </figure>
      <p>Swimming hundreds of feet beneath the ocean’s surface in many parts of the world are prolific architects called <code>giant larvaceans</code>. These zooplankton are not particularly giant themselves (they resemble tadpoles and are about the size of a pinkie finger), but every day, they construct one or more spacious houses that can exceed three feet in length. The houses are transparent mucus structures that encase the creatures inside. Giant larvaceans beat their tails to pump seawater through these structures, which filter tiny bits of dead or drifting organic matter for the animals to eat. When their filters get clogged, the larvaceans abandon ship and construct a new house. Laden with debris from the water column, old houses rapidly sink to the seafloor.</p>
      <h2>In Science Advances on Wednesday</h2>
      <p>Scientists near California’s Monterey Bay have found that, through this process, giant larvaceans can filter all of the bay’s water from about 300 to 1,000 feet deep in less than two weeks, making them the fastest known zooplankton filter feeders. In doing so, the creatures help transfer carbon that has been removed from the atmosphere by photosynthesizing organisms to the deep sea, where it can be buried and stored long term. And given their abundance in other parts of the world, these organisms likely play a crucial role in the global carbon cycle. When it comes to the flow of carbon in the ocean, we don’t know nearly as much as we should,” said Kakani Katija, a principal engineer at the Monterey Bay Aquarium Research Institute and the study’s lead author. If we really want to understand how the system works, we have to look at all the players involved. Giant larvaceans are one important group we need to learn more about.” <kbd>enter</kbd></p>
      <blockquote>
        <p>
          <q>My favorite book is <cite>The Elements of Typographic Style</cite>.</q>
        </p>
        <footer>
          <small>
            &mdash;&thinsp;Mike Mai
          </small>
        </footer>
      </blockquote>
      <h3>In The Past</h3>
      <p>Other scientists have tried studying giant larvaceans in the laboratory. But these efforts always failed because the animals’ houses were too fragile to be harvested and collected specimens were never able to build houses outside the ocean. To study the zooplankton in their natural habitat, Dr. Katija and her collaborators developed a new deep-sea imaging instrument, called DeepPIV, which they paired with a remotely operated vehicle. DeepPIV projects a sheet of laser light that cuts straight through a larvacean’s mucus house.</p>
      <pre><code>.ranger--texas { color: chucknorris; }</code></pre>
      <ul>
        <li>A high-definition camera on the remotely operated vehicle</li>
        <li>can then capture the inner pumping mechanisms</li>
        <li>illuminated by the laser.</li>
      </ul>
      <p>The recording starts with the patter of a summer squall. Later, a drifting tone like that of a not-quite-tuned-in radio station rises and for a while drowns out the patter. These are the sounds encountered by NASA’s Cassini spacecraft as it dove through the gap between Saturn and its innermost ring on April 26, the first of 22 such encounters before it will plunge into Saturn’s atmosphere in September.</p>
      <h3>What Cassini Did Not Detect</h3>
      <p>Were many of the collisions of dust particles hitting the spacecraft as it passed through the plane of the rings. You can hear a couple of clicks,” said William S. Kurth, a research scientist at the University of Iowa who is the principal investigator for Cassini’s radio and plasma science instrument. The few dust hits that were recorded sounded like the small pops caused by dust on a LP record, he said. What he had expected was something more like the din of driving through Iowa in a hailstorm,” Dr. Kurth said. Since Cassini had not passed through this region before, scientists and engineers did not know for certain what it would encounter. Cassini would be traveling at more than 70,000 miles per hour as it passed within 2,000 miles of the cloud tops, and a chance hit with a sand grain could be trouble. The analysis indicated that the chances of such a collision were slim, but still risky enough that mission managers did not send Cassini here until the mission’s final months. As a better-safe-than-sorry precaution, the spacecraft was pointed with its big radio dish facing forward, like a shield. Not only was there nothing catastrophic, there was hardly anything at all. The few clicking sounds were generated by dust the size of cigarette smoke particles about a micron, or one-25,000th of an inch, in diameter. To be clear: Cassini did not actually hear any sounds.</p>
      <div data-layout="grid">
        <figure>
          <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
          <figcaption>Fig 2</figcaption>
        </figure>
        <figure>
          <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
          <figcaption>Fig 3</figcaption>
        </figure>
        <figure>
          <img src="https://via.placeholder.com/450x300" alt="Placeholder" width=450 height=300>
          <figcaption>Fig 4</figcaption>
        </figure>
      </div>
      <ol>
        <li>It is, after all, flying</li>
        <li>through space where there is no air</li>
        <li>and thus no vibrating air molecules to convey sound waves.</li>
      </ol>
      <p>But space is full of radio waves, recorded by Dr. Kurth’s instrument, and those waves, just like the ones bouncing through the Earth’s atmosphere to broadcast the songs of Bruno Mars, Beyoncé and Taylor Swift, can be converted into audible sounds. Dr. Kurth said the background patter was likely oscillations of charged particles in the upper part of Saturn’s ionosphere where atoms are broken apart by solar and cosmic radiation. The louder tones were almost certainly whistler mode emissions” when the charged particles oscillate in unison.</p>
      <h2>Sifting Through Teaspoons of Clay</h2>
      <p>And sand scraped from the floors of caves, German researchers have managed to isolate ancient human DNA — without turning up a single bone. Their new technique, described in a study published on Thursday in the journal Science, promises to open new avenues of research into human prehistory and was met with excitement by geneticists and archaeologists. It’s a bit like discovering that you can extract gold dust from the air,” said Adam Siepel, a population geneticist at Cold Spring Harbor Laboratory.An absolutely amazing and exciting paper,” added David Reich, a genetics professor at Harvard who focuses on ancient DNA. Until recently, the only way to study the genes of ancient humans like the Neanderthals and their cousins, the Denisovans, was to recover DNA from fossil bones. But they are scarce and hard to find, which has greatly limited research into where early humans lived and how widely they ranged. The only Denisovan bones and teeth that scientists have, for example, come from a single cave in Siberia.</p>
      <figure>
        <table>
          <caption>Fig 5: Available players.</caption>
          <thead>
            <tr>
              <td></td>
              <th width="40%">Name</th>
              <th width="30%">Gender</th>
              <th width="30%">Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Player 1</th>
              <td>Mike Mai</td>
              <td>Male</td>
              <td>25</td>
            </tr>
            <tr>
              <th>Player 2</th>
              <td>Angi Cheung</td>
              <td>Female</td>
              <td>25</td>
            </tr>
          </tbody>
        </table>
      </figure>
      <h2>Looking for These Genetic Signposts</h2>
      <p>In sediment has become possible only in the last few years, with recent developments in technology, including rapid sequencing of DNA. Although DNA sticks to minerals and decayed plants in soil, scientists did not know whether it would ever be possible to fish out gene fragments that were tens of thousands of years old and buried deep among other genetic debris. Bits of genes from ancient humans make up just a minute fraction of the DNA floating around in the natural world. But the German scientists, led by Matthias Meyer at the Max Planck Institute for Developmental Biology in Tübingen, have spent years developing methods to find DNA even where it seemed impossibly scarce and degraded. There’s been a real revolution in technology invented by this lab,” Dr. Reich said. Matthias is kind of a wizard in pushing the envelope.” Scientists began by retrieving DNA from ancient bones: first Neanderthals, then Denisovans. To identify the Denisovans, Svante Paabo, a geneticist at the Planck Institute and a co-author of the new paper, had only a child’s pinkie bone to work with. His group surprised the world in 2010 by reporting that it had extracted DNA from the bone, finding that it belonged to a group of humans distinct from both Neanderthals and modern humans. But that sort of analysis is limited by the availability of fossil bones. In a lot of cases, you can get bones, but not enough,” said Hendrik Poinar, an evolutionary geneticist at McMaster University.</p>
      <p>If you just have one small piece of bone from one site, curators do not want you to grind it up.</p>
      <p>蓋聞天地之數,有十二萬九千六百歲為一元。將一元分為十二會,乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。每會該一萬八百歲。且就一日而論:子時得陽氣,而丑則雞鳴;寅不通光,而卯則日出;辰時食後,而巳則挨排;日午天中,而未則西蹉;申時晡,而日落酉,戌黃昏,而入定亥。譬於大數,若到戌會之終,則天地昏曚而萬物否矣。再去五千四百歲,交亥會之初,則當黑暗,而兩間人物俱無矣,故曰混沌。又五千四百歲,亥會將終,貞下起元,近子之會,而復逐漸開明。邵康節曰:<q>冬至子之半,天心無改移。一陽初動處,萬物未生時。</q>到此,天始有根。再五千四百歲,正當子會,輕清上騰,有日,有月,有星,有辰。日、月、星、辰,謂之四象。故曰,天開於子。又經五千四百歲,子會將終,近丑之會,而逐漸堅實。《易》曰:<q>大哉乾元!至哉坤元!萬物資生,乃順承天。</q>至此,地始凝結。再五千四百歲,正當丑會,重濁下凝,有水,有火,有山,有石,有土。水、火、山、石、土,謂之五形。故曰,地闢於丑。又經五千四百歲,丑會終而寅會之初,發生萬物。曆曰:<q>天氣下降,地氣上升;天地交合,群物皆生。</q>至此,天清地爽,陰陽交合。再五千四百歲,正當寅會,生人,生獸,生禽,正謂天地人,三才定位。故曰,人生於寅。</p>
      <p>感盤古開闢,三皇治世,五帝定倫,世界之間,遂分為四大部洲:曰東勝神洲,曰西牛賀洲,曰南贍部洲,曰北俱蘆洲。這部書單表東勝神洲。海外有一國土,名曰傲來國。國近大海,海中有一座名山,喚為花果山。此山乃十洲之祖脈,三島之來龍,自開清濁而立,鴻濛判後而成。真個好山!有詞賦為證。賦曰:</p>
      <blockquote>
        <p><q>勢鎮汪洋,威寧瑤海。<q>勢鎮汪洋</q>,潮湧銀山魚入穴;威寧瑤海,波翻雪浪蜃離淵。水火方隅高積上,東海之處聳崇巔。丹崖怪石,削壁奇峰。丹崖上,彩鳳雙鳴;削壁前,麒麟獨臥。峰頭時聽錦雞鳴,石窟每觀龍出入。林中有壽鹿仙狐,樹上有靈禽玄鶴。瑤草奇花不謝,青松翠柏長春。仙桃常結果,修竹每留雲。一條澗壑籐蘿密,四面原堤草色新。正是百川會處擎天柱,萬劫無移大地根。</q></p>
      </blockquote>
      <p>那座山正當頂上,有一塊仙石。其石有三丈六尺五寸高,有二丈四尺圍圓。三丈六尺五寸高,按周天三百六十五度;二丈四尺圍圓,按政曆二十四氣。上有九竅八孔,按九宮八卦。四面更無樹木遮陰,左右倒有芝蘭相襯。蓋自開闢以來,每受天真地秀,日精月華,感之既久,遂有靈通之意。內育仙胞,一日迸裂,產一石卵,似圓毬樣大。因見風,化作一個石猴,五官俱備,四肢皆全。便就學爬學走,拜了四方。目運兩道金光,射沖斗府。驚動高天上聖大慈仁者玉皇大天尊玄穹高上帝,駕座金闕雲宮靈霄寶殿,聚集仙卿,見有金光燄燄,即命千里眼、順風耳開南天門觀看。二將果奉旨出門外,看的真,聽的明。須臾回報道:<q>臣奉旨觀聽金光之處,乃東勝神洲海東傲來小國之界,有一座花果山,山上有一仙石,石產一卵,見風化一石猴,在那裡拜四方,眼運金光,射沖斗府。如今服餌水食,金光將潛息矣。</q>玉帝垂賜恩慈曰:<q>下方之物,乃天地精華所生,不足為異。</q></p>
    </article>
  </main>
  <footer>
    <p>
      <small>&copy; Nobody. Just use this as you like. Created by <a href="https://mikemai.net">Mike Mai</a>.</small>
    </p>
  </footer>
</body>
              
            
!

CSS

              
                @layer config {
  :root {
    --color-text: #202020;
    --color-bg: #f4f4f4;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; /* Use system UI font. */
    --font-italic: "Georgia", serif; /* Remove this var completely if you don't care for pretty italics. */
    --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
      Liberation Mono, monospace;
    --font-size: 100%; /* % ensures browser zoom is supported. */
    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;
    --tracking: -0.006em; /* Reduce this to 0 if your font does not need adjustment. */
    --leading: 1.45; /* Standard leading for good legibility. Adjust this based on the font you are using if you decides to not use system UI font. */
    --gutter: clamp(1ch, 2.5vmax, 3ch);
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    --line-length: 70ch;
    --min-inline-size: 20ch;
    --page-padding-inline: calc((100vi - min(var(--line-length), 80vi)) / 2);
    --border-width: 1px;
    --border-style: dotted;
    --border-style-readonly: dashed;
    --border-radius: 0.5em;
    --ol-style-type: decimal;
    --bullet-hanging-offset: 0;
    --quote-hanging-offset: -1ex;
  }
}

@layer color {
  :root {
    color: var(--color-text);
    background-color: var(--color-bg);
    accent-color: var(--color-text);
    color-scheme: light;
  }

  :where(a) {
    color: var(--color-primary, var(--color-text));
  }

  :where(button) {
    color: var(--color-bg);
    background-color: var(--color-primary, var(--color-text));
  }

  :where(input, textarea, select) {
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  :where(code) {
    color: var(--color-bg);
    background-color: var(--color-text);
  }

  :where(table) {
    background-color: var(
      --color-text
    ); /* This is acting as border color because there is spacing between cells. */
  }

  :where(th, td) {
    background-color: var(--color-bg);
  }

  @media (prefers-contrast: more) {
    :root {
      --color-text: black;
      --color-bg: white;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --font-weight-regular: 300; /* Knockout text appears bolder, reduce weight to make body text more legible. */
      --tracking: 0.006em;
      --color-text: #f4f4f4;
      --color-bg: #202020;
      color-scheme: dark;
    }

    :where(input[type="checkbox"], input[type="radio"]) {
      accent-color: var(--color-bg);
    }
  }

  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root {
      --color-text: white;
      --color-bg: black;
    }
  }
}

@layer typography {
  :root {
    font-size: clamp(
      var(--font-size),
      var(--font-size) * 0.9 + 0.25vi,
      var(--font-size) * 2
    );
    font-family: var(--font);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading);
    letter-spacing: var(--tracking);
  }

  :where(button, select, input, textarea, a) {
    font: inherit; /* Reset font. */
  }

  :where(a) {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(a):hover {
    text-decoration-thickness: calc(var(--border-width) * 3);
  }

  :where(pre, code, kbd, dl, figcaption, abbr, table) {
    font-family: var(
      --font-mono
    ); /* Differentiate preformatted, code, description, and table text from body text. */
  }

  :where(pre, code, kbd, dl, small, figcaption, table) {
    font-size: 0.8em; /* Make monospace and small text smaller than body text. */
  }

  :where(big) {
    font-size: 1.2em; /* <big> is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. */
  }

  :where(pre code) {
    display: block; /* Define block code. */
    font-size: 1em; /* Prevent cascading. */
  }

  :where(blockquote, em, i, cite) {
    font-family: var(
      --font-italic,
      var(--font)
    ); /* Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly. */
    font-weight: var(
      --font-weight-regular
    ); /* Prevent italics to be bold. Bold italic is also ugly and unnecessary. */
  }

  :where(blockquote) {
    font-size: clamp(1.5rem, 1.25rem + 1vi, 3rem);
    letter-spacing: 0;
  }

  :where(blockquote p) {
    max-inline-size: 35ch;
  }

  :where(blockquote q)::before {
    position: absolute;
    margin-inline-start: var(--quote-hanging-offset);
  }

  :where(blockquote q q)::before {
    position: static;
    margin-inline-start: unset;
  }

  :where(strong, b, kbd, th, button) {
    font-weight: var(
      --font-weight-semibold
    ); /* Make non-heading emphasized text less bold than heading text. */
  }

  :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
    font-weight: var(--font-weight-bold);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  :where(abbr) {
    text-decoration: underline;
    text-decoration-style: dotted; /* Differentiate abbreviaions from links. */
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(button, label, select, summary) {
    cursor: pointer;
  }

  :where(summary:hover > *) {
    text-decoration: underline;
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(figcaption) {
    text-align: center;
  }

  :where(th) {
    text-align: start;
  }

  :where(th, td) {
    vertical-align: baseline;
  }

  :where(ol) {
    list-style-type: var(--ol-style-type);
  }

  :where(fieldset > ol) {
    list-style: none;
  }

  /* Chinese Typesetting */
  [lang^="zh-"] {
    --font-italic: var(--font);
    --font-size: 90%;
    --font-weight-regular: 400;
    --tracking: 0;
    --leading: 1.6;
    --gutter: clamp(0.75rem, 2.5vmax, 1rem);
    --stack: clamp(0.75rem, 2.5vmax, 1rem);
    --line-length: 36rem;
    --min-inline-size: 10rem;
    --page-padding-inline: calc((100vi - min(var(--line-length), 90vi)) / 2);
    --ol-style-type: cjk-ideographic;
    --bullet-hanging-offset: 2em;
    --quote-hanging-offset: -2ex;
  }
}

@layer spacing {
  :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
    margin-block-end: 0;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: calc(var(--stack) * 1.75);
  }

  :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, [is-stack]) {
    margin-inline: 0;
    margin-block-start: var(--stack);
  }

  :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, [is-stack]):first-child,
  :where(legend + *) {
    margin-block-start: 0;
  }

  :where(h1, h2, h3, h4, h5, h6) + * {
    margin-block-start: calc(var(--stack) / 5);
  }

  :where(ul, ol) {
    padding-inline-start: var(--bullet-hanging-offset);
  }

  :where(li > ul, li > ol) {
    margin-block-start: calc(var(--stack) / 5);
  }

  :where(details ul, details ol) {
    margin-inline-start: 4ch; /* Unify indent for all lists inside details. */
  }

  :where(table ul, table ol) {
    margin-inline-start: 2ch; /* Unify indent for all lists inside table. */
  }

  :where(li > ul, li > ol, fieldset ul, fieldset ol) {
    margin-inline-start: 2.25ch; /* Unify indent for all nested lists. */
  }

  :where(li + li) {
    margin-block-start: calc(var(--stack) / 5);
  }

  :where(fieldset > ol li + li) {
    margin-block-start: calc(var(--stack) / 2);
  }

  :where(fieldset > ol) {
    margin-inline: 0;
  }

  :where(hr) {
    margin-block-start: calc(var(--stack) * 3);
    margin-block-end: calc(var(--stack) * 3);
  }

  :where(hr + *) {
    margin-block-start: 0;
  }

  :where(figure > img, table) {
    margin-inline: auto;
  }

  :where(blockquote > *) {
    margin-block-start: calc(var(--stack) / 4);
  }

  :where(blockquote:not(:last-child)) {
    padding-block-end: calc(var(--stack) / 2);
  }

  :where(button, dd, th, td, code, kbd, select, input:not([type="radio"], [type="checkbox"]), textarea) {
    /* Unify inset spacing on bordered elements. */
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
  }

  :where(button) {
    padding-inline: var(--gutter); /* Give button more spacing. */
  }

  :where(kbd) {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 6);
  }

  :where(caption, figcaption) {
    padding-block: calc(var(--stack) / 2);
  }

  :where(figure, pre, [is-box]) {
    padding-block-start: calc(
      var(--stack) / 2.5
    ); /* Line up top of images/codeblocks with text in an adjacent column layout. */
  }

  :where(pre) {
    padding-block-end: calc(var(--stack) / 2.5);
  }

  :where(pre code) {
    padding-block: var(--stack);
    padding-inline: var(--gutter);
  }

  details[open] summary + * {
    margin-block-start: calc(var(--stack) / 4);
  }
}

@layer elements {
  body {
    margin: 0;
  }

  *,
  *::before,
  *::after {
    font-feature-settings: "kern";
    font-kerning: normal;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-font-smoothing: antialiased !important;
    box-sizing: border-box;
  }

  *:focus-visible {
    outline: calc(var(--border-width) * 2) solid
      var(--color-primary, var(--color-text));
    outline-offset: calc(var(--border-width) * 2);
  }

  *:disabled {
    cursor: not-allowed;
  }

  *[readonly] {
    border-style: var(--border-style-readonly);
  }

  :where(button) {
    border: 0;
  }

  :where(kbd) {
    border: var(--border-width) solid;
  }

  :where(input, textarea, select, fieldset, dd) {
    border: var(--border-width) var(--border-style); /* Unify border styles. */
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, fieldset, button, img, code, dd, table) {
    border-radius: var(
      --border-radius
    ); /* Unify interactive elements border radius. */
  }

  :where(table > *:first-child tr:first-child > *:first-child, table
      > caption
      + *
      tr:first-child
      > *:first-child) {
    border-start-start-radius: var(--border-radius);
  }

  :where(table > *:first-child tr:first-child > *:last-child, table
      > caption
      + *
      tr:first-child
      > *:last-child) {
    border-start-end-radius: var(--border-radius);
  }

  :where(table > *:last-child tr:last-child > *:first-child) {
    border-end-start-radius: var(--border-radius);
  }

  :where(table > *:last-child tr:last-child > *:last-child) {
    border-end-end-radius: var(--border-radius);
  }

  :where(kbd) {
    border-radius: 0.3em;
  }

  :where(pre) {
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: break-word;
  }

  :where(pre code) {
    max-block-size: 60vh;
    overflow: auto;
  }

  :where(dl) {
    display: grid;
    grid-template-columns: auto minmax(75%, 1fr);
    gap: calc(var(--gutter) / 2);
    align-items: baseline;
  }

  :where(dt) {
    border-block-end: var(--border-width) dotted;
  }

  :where(dd) {
    block-size: 100%;
    margin-inline-start: 0;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    display: block;
    inline-size: 100%;
  }

  :where(input[type="radio"], input[type="checkbox"]) {
    inline-size: 1.5ex;
    block-size: 1.5ex;
    vertical-align: baseline;
  }

  :where(input[type="file"]) {
    padding-inline: 0;
    border: 0;
  }

  ::-webkit-file-upload-button {
    appearance: button;
    cursor: pointer;
    font: inherit;
  }

  :where(select) {
    appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }

  :where(hr) {
    block-size: 0;
    border: 0;
    border-block-start: var(--border-width) var(--border-style)
      var(--color-text);
  }

  :where(img) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(figure) {
    overflow-x: auto;
  }

  :where(figure > img) {
    display: block;
  }

  :where(table) {
    caption-side: bottom;
    border-spacing: var(--border-width);
  }

  :where(tr > *:first-child) {
    white-space: nowrap;
  }

  :where(summary > *) {
    display: inline;
    vertical-align: middle;
  }
}

@layer complex-elements {
  /* Advanced responsive table */
  :where(figure:has(table)) {
    position: relative;
    inset-inline-start: 50%;
    inset-inline-end: 50%;
    inline-size: 100%;
    inline-size: 100vi;
    margin-inline-start: -50vi;
    margin-inline-end: -50vi;
    padding-inline: var(--page-padding-inline);
  }

  /* Validation text */
  :where(input, textarea, select) ~ * {
    margin-block-start: 0;
    font-size: 0.8em;
  }

  :where(input:required + mark) {
    display: none;
    color: var(--color-text);
    background-color: transparent;
  }

  :where(input:required:invalid + mark) {
    display: block;
  }

  /* Skip link */
  body > a:first-child {
    position: fixed;
    top: var(--stack);
    left: var(--gutter);
    inline-size: auto;
    padding: 2px;
    text-align: center;
    background-color: var(--color-bg);
  }

  body > a:first-child:not(:focus) {
    opacity: 0;
    pointer-events: none;
  }
}

@layer add-ons {
  /* ------------------------------------ *\
		 - Requires data attributes.
		 - Remove to do your own layouts.
	\* ------------------------------------ */

  :where([data-layout], [data-layout] + *) {
    margin-block-start: var(--stack);
  }

  :where([data-layout]:first-child) {
    margin-block-start: 0;
  }

  :where([data-layout] > *) {
    margin: 0;
  }

  :where(body[data-layout="single"]) {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    min-block-size: 100vh;
    min-block-size: 100dvb;
  }

  :where(body[data-layout="single"] > *) {
    inline-size: 100vi;
  }

  :where(body[data-layout="single"] main) {
    padding-block: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
    padding-inline: var(--page-padding-inline);
  }

  :where(body[data-layout="single"] > header, body[data-layout="single"]
      > footer) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--gutter) / 1.5);
    row-gap: calc(var(--stack) / 2);

    > *:only-child {
      margin-block: 0;
      margin-inline: auto;
    }
  }

  :where(body[data-layout="single"] > footer) {
    padding-block: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2)
      clamp(var(--stack) * 2, 10vmax, var(--stack) * 6);
    padding-inline: var(--page-padding-inline);
    border-block-start: var(--border-width) var(--border-style);
  }

  :where(body[data-layout="single"] > header) {
    padding-block: clamp(var(--stack) * 2, 10vmax, var(--stack) * 6)
      clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
    padding-inline: var(--page-padding-inline);
    border-block-end: var(--border-width) var(--border-style);

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    h1 a,
    > h1,
    > a {
      display: block;
      font-size: clamp(2.25rem, 2.125rem + 0.5vi, 2.75rem);
      font-weight: var(--font-weight-bold);
      line-height: 1;
      letter-spacing: 0.02em;
    }

    > nav {
      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: calc(var(--gutter) / 2);
        row-gap: calc(var(--stack) / 2);
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0.9em;
      }
    }
  }

  :where([data-layout="grid"]) {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--min-inline-size), 1fr)
    );
    gap: var(--gutter);
  }

  :where([data-layout="flag"]) {
    display: grid;
    grid-template-columns: minmax(5ch, max-content) 75%;
    gap: var(--gutter);
    align-items: center;

    > *:nth-child(odd) {
      align-self: start;
    }
  }
}

              
            
!

JS

              
                  
              
            
!
999px

Console