gram: op

> ./assets/css/app.css

Lenses
(coming soon!)

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./page/home";

@font-face {
  font-family: "icon";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/fa-solid-900.ttf");
}

@media print {
  body { font-size: 14px; }
  #colorscheme { display: none; }
  .pb { page-break-before: always; }
  .no-render { display: none; }
}

*[role="link"]                   , a                    { color: oklch(var(--a)); }
*[role="link"]:hover             , a:hover              { color: oklch(var(--p)); }
*[role="link"]::before           , a::before            { font-family: "icon"; color: oklch(var(--a)); }
*[role="link"]:not(.icon)::before, a:not(.icon)::before { content: ""; padding-right: 0.2rem; }

pre {
  padding: 1rem;
  overflow-x: scroll;
  color: oklch(var(--nc));
  background: oklch(var(--n));
  border: 0.1rem solid oklch(var(--a));
  border-left: 0.4rem solid oklch(var(--a));
}

code::before, code::after { content: "`"; color: oklch(var(--a)); }
pre > code::before, pre > code::after { content: ""; display: none; }

.icon { font-family: "icon"; font-size: 1.6rem; color: oklch(var(--p)); }
svg.icon { max-height: 1.6rem; display: inline-block; }
a.icon:hover { color: oklch(var(--a)); }
.text-brand  { color: oklch(var(--p)); }

#quick-links {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
#quick-links > li {
  margin-right: 2rem;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h1, h2 { font-weight: bold; }
h1, h2, h3 { @apply mt-4; color: oklch(var(--p)); }

p { margin: 0.8rem 0; }
em { color: oklch(var(--s)); }
ul, ol { text-align: left; margin-left: 2rem; margin-bottom: 2rem; }
ol { list-style: cjk-ideograhic; }
ul { list-style: circle; }
li { margin-top: 0.4rem; }
ul > h2:last-child { display: none; }

ul#leads { font-size: 1.5rem; list-style: none; margin-left: 0; margin-bottom: 0; }
img#logo { height: 4rem; }

.byline { display: flex; justify-content: space-between;
  color: oklch(var(--a)); p:last-child { text-align: right; } }

table {
  margin: 1.2rem 0;
  th { padding: 0 0.4rem; }
  th { white-space: nowrap; border-right: 2px solid oklch(var(--s)); }
  th:last-child { border: none; }
  td { padding: 0.4rem; }

  tbody tr:last-child { border-top: 2px dashed oklch(var(--s)); margin-top: 0.4rem; }
  border: 2px solid oklch(var(--s));
}

blockquote { text-align: right; display: block; color: oklch(var(--s)); }
hr { margin: 2rem 0; border-color: oklch(var(--p)); }

section { max-width: 20rem; }

video {
  max-width: 80%;
  margin: 2rem auto;
}

#colorscheme ul { width: auto; }
#colorscheme label { display: flex; flex-direction: row; justify-content: space-between; }
#colorscheme label span { margin-right: 2rem; }
#colorscheme input:not(:checked) { background: oklch(var(--b3)); }
#colorscheme input:checked { background: oklch(var(--p)); }

@media (max-width: 600px) {
  header { flex-direction: column; }
  .btn-label { display: none; }
}

.br { display: block; }
.banner { display: flex; justify-content: space-between; align-items: flex-stretch; }
.preamble { max-width: 50rem; margin: auto; }

main.chronicle { max-width: 40rem; }
ul#chronicle { max-width: 100%; }
#home img { max-width: 100%; }

/* .gram-change { min-height: 40px; } */
/* .mermaid > svg { height: auto; max-width: none !important; } */