Jekyll + Vite Docs - Post Page

by Nicholas Berlette

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.5/cdn.js"></script>
<script>
  const prefersDark = window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
  const setting = window.localStorage.getItem('color-scheme') || 'auto';
  if (setting === 'dark' || (prefersDark && setting !== 'light')) {
    document.documentElement.classList.toggle('dark', true)
  }
</script>

<div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
  <header class="flex justify-between items-center py-10">
    <div class="h-8">
      <a class="flex place-center" href="/">
        <img class="-top-px inline-block relative" src="https://jekyll-vite.netlify.app/vite/assets/logo.322aae0c.svg" alt="Logo" height="32" width="39" />
        <span class="font-medium text-xl ml-2 text-deeper">Jekyll + Vite.js</span>
      </a>
    </div>
    <div id="nav-bar-actions" class="text-base h-8 leading-5 flex items-center border-b-0 ml-3 space-x-4 ml-4">
    </div>
  </header>

  <main>
    <article class="xl:divide-y xl:divide-subtle">
      <header class="pt-6 xl:pb-10">
        <div class="space-y-1 text-center">
          <dl class="space-y-10">
            <div>
              <dt class="sr-only">Published on</dt>
              <dd class="text-base leading-6 font-medium text-normal">
                <time datetime="2021-07-04T08:52:00-03:00" itemprop="datePublished" style="text-transform:uppercase;font-size:0.75rem;border-bottom:1px solid #0003;color:#aaa;font-weight:semibold;margin-bottom:2rem;display:inline-block;letter-spacing:0.02rem;word-spacing:0.3rem;">Sunday, July 4, 2021</time>
              </dd>
            </div>
          </dl>
          <div>
            <h1 class="text-3xl font-extrabold text-deeper tracking-tight sm:text-4xl md:text-5xl md:leading-[3.5rem]" style="font-weight:900;letter-spacing:-0.045em;text-decoration:underline 0.085rem wavy #ff8e33aa;text-decoration-offset:6px;text-shadow:0 4px 8px #0001;">Vite Ruby</h1>
          </div>
  ...

CSS

*,
:before,
:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb
}

* {
  --tw-ring-inset: var(--tw-empty, );
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000
}

:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4
}

:-moz-focusring {
  outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
  box-shadow: none
}

::moz-focus-inner {
  border-style: none;
  padding: 0
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

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

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

a {
  color: inherit;
  text-decoration: inherit
}

body {
  margin: 0;
  font-family: inherit;
  line-height: inherit
}

html {
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5
}

h2,
dl,
dd,
h1,
pre,
p {
  margin: 0
}

h2,
h1 {
  font-size: inherit;
  font-weight: inherit
}

img {
  border-style: solid;
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto
}

kbd,
pre,
code {
	font-family: 'Dank Mono', 'Operator Mono SSm Lig', 'Operator Mono Lig', 'Operator Mono', 'MonoLisa', 'Fira Code', SFMono-Regular, Monaco, Inconsolata, monospace;
  font-size: 0.8rem !important;
  /* font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
	/* font-size:0.75em; */
}

kbd, code:not(pre >...