OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 227 LINES
 
[ HISTORY ]  [ UP ]
 

// Markdown body. Same monospace metrics as pre.ascii, soft-wrapped.

.prose {
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: 1.6;
  margin: 14px 0;
  text-wrap: pretty;
  max-width: var(--frame-w);

  p { margin: 0 0 1em; }
  i, em { font-style: italic; }
  strong, b { font-weight: 700; }

  a, a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  // Unresolved [[wikilinks]] - dead-link style, in the wiki tradition.
  .wikilink-dead {
    color: var(--ink-soft);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    cursor: help;
  }
  a:focus-visible {
    outline: 1px dashed currentColor;
    outline-offset: 2px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--mono);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 1.6em 0 0.6em;
  }
  h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

  // All headings share the body font-size - weight + the head-rule on
  // h1 do the visual hierarchy. h4-h6 italicize (set further down).
  h1, h2, h3, h4, h5, h6 { font-size: var(--fs); }

  .head-rule {
    display: block;
    font-family: var(--mono-frame);
    font-weight: 400;
    font-size: var(--fs);
    line-height: var(--lh);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0.35em;
    color: var(--ink);
  }
  h4, h5, h6 {
    text-transform: none;
    font-style: italic;
  }

  blockquote {
    position: relative;
    margin: 1em 0;
    padding: 0 0 0 2ch;
    font-style: italic;
    color: var(--ink-soft);

    &::before {
      content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A
│\A│\A│\A│\A│\A│\A│\A│";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      font-family: var(--mono-frame);
      font-style: normal;
      color: var(--ink);
      white-space: pre;
      overflow: hidden;
    }
  }

  // [!NOTE]-style callouts. Still a blockquote (the left rail above
  // applies); the build-time rule spans draw the top/bottom edges, so
  // the rail is inset one line at each end and the indent uses cell
  // units to keep the corner glyphs on the frame grid.
  blockquote.callout {
    font-style: normal;
    color: var(--ink);
    padding-left: calc(var(--cell-w) * 3);
    padding-right: calc(var(--cell-w) * 3);

    // Left rail from the base blockquote, inset one line at each end so
    // it meets the build-time corner rules; ::after mirrors it on the
    // right to close the box.
    &::before {
      top: var(--cell-h);
      bottom: var(--cell-h);
    }

    &::after {
      content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A
│\A│\A│\A│\A│\A│\A│\A│";
      position: absolute;
      right: 0;
      top: var(--cell-h);
      bottom: var(--cell-h);
      font-family: var(--mono-frame);
      font-style: normal;
      color: var(--ink);
      white-space: pre;
      overflow: hidden;
    }

    .callout-rule {
      display: block;
      font-family: var(--mono-frame);
      line-height: var(--lh);
      margin-left: calc(var(--cell-w) * -3);
      margin-right: calc(var(--cell-w) * -3);
      white-space: pre;
      overflow: hidden;
      color: var(--ink);
    }
  }

  ul, ol {
    margin: 0 0 1em;
    padding-left: 0;
    list-style: none;
  }
  ul > li, ol > li {
    position: relative;
    padding-left: 3ch;
  }
  ul > li::before {
    content: "?";
    position: absolute;
    left: 0;
    color: var(--ink);
  }
  ol { counter-reset: ol-count; }
  ol > li {
    counter-increment: ol-count;
  }
  ol > li::before {
    content: counter(ol-count) ".";
    position: absolute;
    left: 0;
    color: var(--ink);
  }
  li { margin: 0.2em 0; }
  li > ul, li > ol { margin: 0.2em 0; }

  pre, code {
    font-family: var(--mono);
    font-size: var(--fs);
  }
  pre { white-space: pre; overflow-x: auto; }

  pre.ascii.code-block {
    font-family: var(--mono-frame);
    margin: 1.4em 0;
    code { font-family: inherit; }

    .code-frame {
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }

    // ```diff fences - monochrome: adds bold, everything else soft.
    .diff-add { font-weight: 700; }
    .diff-del { color: var(--ink-soft); }
    .diff-hunk, .diff-meta { color: var(--ink-soft); font-style: italic; }

    .code-copy {
      font: inherit;
      color: var(--ink-soft);
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      &:hover { color: var(--ink); }
      &:focus-visible {
        outline: 1px dashed currentColor;
        outline-offset: 2px;
      }
    }
  }

  pre.ascii.table-frame {
    font-family: var(--mono-frame);
    margin: 1.4em 0;
  }

  .figure-frame {
    margin: 1.4em 0;

    img {
      display: block;
      width: 100%;
      max-width: var(--frame-w);
      height: auto;
      margin: 0.5em 0;
    }

    .fig-rule,
    .fig-caption {
      display: block;
      font-family: var(--mono-frame);
      white-space: pre;
      overflow: hidden;
      color: var(--ink);
    }
    .fig-caption { color: var(--ink-soft); }

    pre.ascii.diagram-art {
      font-family: var(--mono-frame);
      margin: 0.5em 0;
    }
  }
}


// Markdown body. Same monospace metrics as 
pre.ascii, soft-wrapped.

.prose {
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: 1.6;
  margin: 14px 0;
  text-wrap: pretty;
  max-width: var(--frame-w);

  p { margin: 0 0 1em; }
  i, em { font-style: italic; }
  strong, b { font-weight: 700; }

  a, a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  // Unresolved [[wikilinks]] - dead-link st
yle, in the wiki tradition.
  .wikilink-dead {
    color: var(--ink-soft);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    cursor: help;
  }
  a:focus-visible {
    outline: 1px dashed currentColor;
    outline-offset: 2px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--mono);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 1.6em 0 0.6em;
  }
  h1:first-child, h2:first-child, h3:first-c
hild { margin-top: 0; }

  // All headings share the body font-size -
 weight + the head-rule on
  // h1 do the visual hierarchy. h4-h6 itali
cize (set further down).
  h1, h2, h3, h4, h5, h6 { font-size: var(--
fs); }

  .head-rule {
    display: block;
    font-family: var(--mono-frame);
    font-weight: 400;
    font-size: var(--fs);
    line-height: var(--lh);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0.35em;
    color: var(--ink);
  }
  h4, h5, h6 {
    text-transform: none;
    font-style: italic;
  }

  blockquote {
    position: relative;
    margin: 1em 0;
    padding: 0 0 0 2ch;
    font-style: italic;
    color: var(--ink-soft);

    &::before {
      content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│
\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A
│\A│\A│\A│\A│\A│";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      font-family: var(--mono-frame);
      font-style: normal;
      color: var(--ink);
      white-space: pre;
      overflow: hidden;
    }
  }

  // [!NOTE]-style callouts. Still a blockqu
ote (the left rail above
  // applies); the build-time rule spans dra
w the top/bottom edges, so
  // the rail is inset one line at each end 
and the indent uses cell
  // units to keep the corner glyphs on the 
frame grid.
  blockquote.callout {
    font-style: normal;
    color: var(--ink);
    padding-left: calc(var(--cell-w) * 3);
    padding-right: calc(var(--cell-w) * 3);

    // Left rail from the base blockquote, i
nset one line at each end so
    // it meets the build-time corner rules;
 ::after mirrors it on the
    // right to close the box.
    &::before {
      top: var(--cell-h);
      bottom: var(--cell-h);
    }

    &::after {
      content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│
\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A
│\A│\A│\A│\A│\A│";
      position: absolute;
      right: 0;
      top: var(--cell-h);
      bottom: var(--cell-h);
      font-family: var(--mono-frame);
      font-style: normal;
      color: var(--ink);
      white-space: pre;
      overflow: hidden;
    }

    .callout-rule {
      display: block;
      font-family: var(--mono-frame);
      line-height: var(--lh);
      margin-left: calc(var(--cell-w) * -3);
      margin-right: calc(var(--cell-w) * -3)
;
      white-space: pre;
      overflow: hidden;
      color: var(--ink);
    }
  }

  ul, ol {
    margin: 0 0 1em;
    padding-left: 0;
    list-style: none;
  }
  ul > li, ol > li {
    position: relative;
    padding-left: 3ch;
  }
  ul > li::before {
    content: "?";
    position: absolute;
    left: 0;
    color: var(--ink);
  }
  ol { counter-reset: ol-count; }
  ol > li {
    counter-increment: ol-count;
  }
  ol > li::before {
    content: counter(ol-count) ".";
    position: absolute;
    left: 0;
    color: var(--ink);
  }
  li { margin: 0.2em 0; }
  li > ul, li > ol { margin: 0.2em 0; }

  pre, code {
    font-family: var(--mono);
    font-size: var(--fs);
  }
  pre { white-space: pre; overflow-x: auto; 
}

  pre.ascii.code-block {
    font-family: var(--mono-frame);
    margin: 1.4em 0;
    code { font-family: inherit; }

    .code-frame {
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }

    // ```diff fences - monochrome: adds bol
d, everything else soft.
    .diff-add { font-weight: 700; }
    .diff-del { color: var(--ink-soft); }
    .diff-hunk, .diff-meta { color: var(--in
k-soft); font-style: italic; }

    .code-copy {
      font: inherit;
      color: var(--ink-soft);
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      &:hover { color: var(--ink); }
      &:focus-visible {
        outline: 1px dashed currentColor;
        outline-offset: 2px;
      }
    }
  }

  pre.ascii.table-frame {
    font-family: var(--mono-frame);
    margin: 1.4em 0;
  }

  .figure-frame {
    margin: 1.4em 0;

    img {
      display: block;
      width: 100%;
      max-width: var(--frame-w);
      height: auto;
      margin: 0.5em 0;
    }

    .fig-rule,
    .fig-caption {
      display: block;
      font-family: var(--mono-frame);
      white-space: pre;
      overflow: hidden;
      color: var(--ink);
    }
    .fig-caption { color: var(--ink-soft); }

    pre.ascii.diagram-art {
      font-family: var(--mono-frame);
      margin: 0.5em 0;
    }
  }
}

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET