gram: op

> ./assets/css/app.css

Lenses
(coming soon!)

@import "tailwindcss";
@plugin "daisyui" {
  themes:
    aqua, business, coffee, dark, dim, dracula,
    forest, halloween, night, sunset, synthwave
}

@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; }
}

body {
  color: var(--color-base-content);
  background: var(--color-base);
}

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

pre {
  padding: 1rem;
  overflow-x: scroll;
  color: var(--color-neutral-content);
  background: var(--color-neutral);
  border: 0.1rem solid var(--color-accent);
  border-left: 0.4rem solid var(--color-accent);
}

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

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

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

p { margin: 0.8rem 0; }
em { color: var(--color-secondary); }
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; }

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

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

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

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

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: var(--color-base-300); }
#colorscheme input:checked { background: var(--color-primary); }

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

main, header {
  margin-left: 2rem;
  margin-right: 2rem;
}

main { border-top: 4px solid var(--color-accent); }

ul#chronicle { max-width: 100%; }
#home img { max-width: 100%; }
div#chronicle { max-width: 40rem; margin: auto; }

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

details > summary { display: inline-block; }
details > summary::marker { display: none; }
details > :not(summary) {
  position: fixed;
  z-index: 2;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 700;
  padding: 1rem;
  border-radius: 1rem;
}

@import "./page/home";
@import "./header"