README Typography

Simple demonstration of the windicss-runtime-dom package by @antfu allowing rapid prototype development right in the browser.

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://unpkg.com/windicss-runtime-dom"></script>
<header class="readme-bg-black--pattern readme-bg-black readme-heading-0 readme-text-blue m-0 w-screen p-20 text-left !mb-12">
  Nicholas Berlette
</header>
<div class=" block container-xl mx-auto py-[5%] transform" hidden>

    <div class="container-readme flex flex-col justify-center place-items-center align-center my-5">
      <a href="#" class="readme-link"><figure class="readme-link__figure inline-block overflow-clip readme-mask--vertical-2"><img srcset="https://github.com/nberlette.png" /></figure></a>
    </div>
    
    
		<div class="readme-home-blockquote leading-14 max-w-2xl my-10 mx-12 select-none before:!bg-black/10 before:blur-4 before:drop-shadow before:filter">
			<blockquote class="">
				<p class="drop-shadow readme-heading-2">
					This is an example blockquote. Some testimonials could go here... or a compelling quote as to why the readers should dump out their piggy banks in an effort to better line your pockets.
				</p>
			</blockquote>
		</div>
    
    
    <div class="container-readme flex flex-col justify-center place-items-center align-center my-5">
      <a href="#" class="readme-link"><figure class="readme-link__figure inline-block overflow-clip readme-mask--horizontal-1"><img srcset="https://github.com/rauchg.png" /></figure></a>
    </div>

		<div class="f3-mktg readme-story-body select-none container-readme">
			<p class="readme-heading-3 big-letter pb-10 p-responsive-readme">
				Typography is the subtle vessel of expression. Transcending time and empowering authors to convey themselves on otherwise bland substrates &mdash; paper and digital alike.
			</p>
		</div>
    
</div>

<style>
  .big-letter:first-letter {
     font-weight: 900 !important;
     font-family: 'Alliance No.2', sans-serif !important;
 }
  
</style>

CSS

@font-face {
  font-family: "Alliance No.1";
  src: url(https://copilot.github.com/_next/static/media/alliance-no-1-light.40dbbfe51ac114ef73c20ef7071a26ac.woff2) format("woff2"), url(https://copilot.github.com/_next/static/media/alliance-no-1-light.872adecc6a41333ace339e17a2b181b6.woff) format("woff");
  font-weight: 300;
  font-style: normal
}

@font-face {
  font-family: "Alliance No.1";
  src: url(https://copilot.github.com/_next/static/media/alliance-no-1-light-italic.a5de1718380f5a672962494908b016a3.woff2) format("woff2"), url(https://copilot.github.com/_next/static/media/alliance-no-1-light-italic.9ab45a57768bc4bb3aceca8e7643cbb1.woff) format("woff");
  font-weight: 300;
  font-style: italic
}

@font-face {
  font-family: "Alliance No.1";
  src: url(https://copilot.github.com/_next/static/media/alliance-no-1-regular.28be9dd099f83f7725370d984f949496.woff2) format("woff2"), url(https://copilot.github.com/_next/static/media/alliance-no-1-regular.3e4945e140f8f98ca5340add891282bc.woff) format("woff");
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: "Alliance No.1";
  src: url(https://copilot.github.com/_next/static/media/alliance-no-1-regular-italic.11ffcccbf05f6d8a9a4f1b459144a560.woff2) format("woff2"), url(https://copilot.github.com/_next/static/media/alliance-no-1-regular-italic.5bb78f3ffffe2cd7b09ceb6dad1f1563.woff) format("woff");
  font-weight: 400;
  font-style: italic
}

@font-face {
  font-family: "Alliance No.1";
  src: url(https://copilot.github.com/_next/static/media/alliance-no-1-medium.9648c3712860bee53dc07cb1f59c5e03.woff2) format("woff2"), url(https://copilot.github.com/_next/static/media/alliance-no-1-medium.4f88494b7bff6ec0af0b6d6b249dbb3e.woff) format("woff");
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: "Alliance No.1";
  src: url(https://copilot.github.com/_next/static/media/alliance-no-1-medium-italic.47c19736366946a230b9a557d5744b43.woff2) format("woff2"),...

JavaScript

window.windicssRuntimeOptions = {
  /** Enable WindiCSS preflight feature */
  preflight: true,
  /** Scan the entire dom to infer the classnames on first load. longer TTFB but prevents FOUC. */
  extractInitial: true,
  /** Generate mock classes for browser to do the auto-completeion */
  mockClasses: false,
  /** Config object that is typically exported from windi.config.[js|ts|cjs|mjs] */
  config: {
    darkMode: "media",
    theme: {
      extend: {
        colors: {
          primary: {
            100: "#e4e1fe",
            200: "#cac3fd",
            300: "#ada4fa",
            400: "#968cf6",
            500: "#96BAFF",
            600: "#554bce",
            700: "#3c33ac",
            800: "#27208b",
            900: "#181373" 
          },
          success: {
            100: "#f1fcd4",
            200: "#dff9aa",
            300: "#c4ee7d",
            400: "#a7de5a",
            500: "#7fc92a",
            600: "#64ac1e",
            700: "#4b9015",
            800: "#36740d",
            900: "#266008"
          },
          warning: {
            100: "#fff4d1",
            200: "#ffe5a3",
            300: "#ffd375",
            400: "#ffc152",
            500: "#ffa319",
            600: "#db8212",
            700: "#b7650c",
            800: "#934a07",
            900: "#7a3804" 
          },
          danger: {
            100: "#ffe6d9",
            200: "#ffc7b4",
            300: "#ffa28e",
            400: "#ff7e72",
            500: "#ff4444",
            600: "#db3140",
            700: "#b7223c",
            800: "#931536",
            900: "#7a0d32" 
          } 
        },
        container: {
          padding: "2rem",
          center: true 
        } 
      } 
    },



    shortcuts: {
      "btn-round": "px-4 py-0 text-xs md:text-sm font-semibold rounded-full border md:border-2 lg:border-3 hover:shadow-lg shadow-md transition-all duration-700 ease-in focus:outline-none ring-2 ring-white no-underline",
      "btn-green":...