ayakael.net/basewiki/bootstrap.local.css

/* Color palette */

:root {
  /* Purple */
  --dark-purple: #3a2354;
  --medium-purple: #56347c; /* logo */
  --light-purple: #9f73d2;
  --background-purple: #f3edf9;

  /* Green */
  --darker-green: #014d00;
  --dark-green: #3b833a;
  --medium-dark-green: #53b351;
  --medium-light-green: #73d171; /* buttons */
  --background-green: #a8ffa0;

  /* Gray */
  --dark-gray: #393a35;
  --medium-dark-gray: #58595b;
  --medium-light-gray: #b5b7b9;
  --light-gray: #dadbdc;
  --background-gray: #f0f1f2;

  /* Misc */
  --yellow: #ffd500;
  --light-yellow: #ffec8c;
  --background-yellow: #fffff0;
  --red: #ef1f31;

  /* Shadows */
  --banner-button-shadow: 1px 1px 1px black, 2px 2px 5px var(--dark-gray), inset 1px 1px 1px var(--background-green);
  --green-button-shadow:  1px 1px 1px var(--medium-dark-gray), 2px 2px 5px var(--light-gray), inset 1px 1px 1px var(--background-green);
  --gray-button-shadow:  1px 1px 1px black, 2px 2px 5px var(--dark-gray), inset 1px 1px 1px var(--background-gray);
}


/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 15px;
}
.container .text-muted {
  margin: 20px 0;
}

.pagedate {
  font-size: 14px;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

textarea {
  width: 100%;
}

input[type='email'] {
  width: 100%;
}

input[type='text'] {
  width: 100%;
}

input[type='button'] {
  width: 100%;
}
code {
  font-size: 80%;
}

/* comments fixup */
.comment {
    border: none;
    padding: 1em;
    margin: 1em;
    background: #f3f3f3;
}
.mastodon-comment {
    display: flex;
}
/* mastodon posts have a span to hide the scheme and post id, use it */
.mastodon-comment-content span.invisible {
    display: none;
}
.mastodon-comment .avatar img {
    margin-right: 1rem;
}
.mastodon-comment span.disabled {
    display: none;
}
.mastodon-comment .author  {
    display: flex;
    justify-content: space-between;
}
.mastodon-comment .author time {
    font-size: small;
}
.actions ul {
    margin: inherit;
    padding: inherit;
    height: inherit;
    /* list-style-type: none; */
}

/* limit main content to ~90 chars per line */
/* update: practical typography recommends 2-3 alphabets */
#content {
  max-width: 35em;              /* this is 2.5 alphabets with Charter */
}

/* limit header as well otherwise logo is out of whack without sidebar */
.navbar-fixed-top .container {
  max-width: 55em;
}

.navbar .selflink {
	display: block;
	padding: 15px 15px;
}

/* some hacking at typefaces to get some fresh zest in here
 * fallbacks from:
 * https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
 * https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
 *
 * Font stacks from:
 * https://modernfontstacks.com/#font-stacks
 */
.navbar, .footer {
    /* according to modern font stacks, the following actually falls back to:
     * San Francisco: MacOS 10.8+, iOS 3+
     * Segoe UI: Windows 7+
     * Roboto: Android
     * Ubuntu: Linux
     * Cantarell: Linux using GNOME
     * Noto Sans: Linux using KDE
     *
     * So instead of letting "Linux" guess (because that's pretty
     * chaotic), actually hardcode those two first, so we have a
     * little better control over this. Noto sans is actually what I
     * would fallback on in Firefox on my workstation before the
     * change.
     */
    font-family: Ubuntu, "Noto sans", system-ui, sans-serif;
}
h1, h2, h3, h4, h5, body {
    /* this is the "transitional" stack from modern stack fonts. it was
     * picked because it sticks with the "Charter" font we were
     * previously using. it runs the risk of falling back on bitmap
     * fonts which look horrible on Linux, but in my tests it worked
     * okay.
     *
     * Charter: MacOS 10.9+, iOS 9.3+
     * Bitstream Charter: Linux
     * Sitka Text: Windows 8.1+
     * Cambreia: Windows 7+
     * Noto Serif: Android
     * Serif: fallback
     */
    font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, "Noto serif", serif;
    /* Charter is Butterick's favorite, freely available, found on
     * https://practicaltypography.com/free-fonts.html and available
     * from https://practicaltypography.com/charter.html under the
     * liberal Bitstream license. It used to be shipped alongside this
     * site as a web font, but was disabled for the sake of simplicity
     * and bandwidth saving. Now it is assumed that 'Bitstream
     * Charter' will "just work" on Linux.
     */
}
h1, h2, h3, h4, h5 {
    font-style: italic;
}
/* for charter, we should inline this: */
/*  <link rel="stylesheet" href="https://paste.anarc.at/publish/charter/stylesheet.css" type="text/css" charset="utf-8" /> */
/* we won't ship fira because it is too big and will hope some other font will kick in for headings, preferably Open sans */

/* no idea why bootstrap makes quotes bigger, not what i want */
blockquote {
    font-size: 14px;
    /* make blockquotes interesting */
    font-style: italic;
}

/* enlarge body point size for charter for larger displays */
@media (min-device-width: 750px) {
    body {
        font-size: 20px;
        line-height: 1.3; /* default in FF is ~1.48, try seems a bit to sparse */
    }
    /* to match the other bootstrap workaround, below */
    blockquote {
        font-size: 20px;
    }
    /* UI elements should be a little less intrusive */
    .navbar, .footer {
        font-size: 16px;
    }
}

pre, code {
    font-family: "Fira Mono", Menlo, Monaco, Consolas, "Courier New", "Liberation mono", monospace;
}

/* don't word-wrap PRE blocks so they are scrolled*/
pre {
    -ms-word-wrap: normal;
    word-wrap: normal;
}
pre code {
      white-space: pre;
}

/* workaround multimarkdown bug:
 * https://github.com/bobtfish/text-multimarkdown/issues/30 */
a.footnote { vertical-align: super; font-size: xx-small; }
div.footnotes { font-size: small; }

/* scale down images so they are centered like the rest of the text */
#content img { max-width: 100%; }
/* except in the mastodon avatar, it squeezes them weirdly and messes with borders */
#content .mastodon-comment .avatar img { max-width: inherit; }

/* format HTML5 captions like ikiwiki's table-based captions
 *
 * those work, but basically need to be entered by hand.
 *
 * https://ikiwiki.info/todo/html5_image_captions/
 */
figure {
    text-align: center;
}
figcaption {
    text-align: center;
    font-size: smaller;
    color: #777;
}

/* right-aligned figures
 *
 * those need a "table" display so that the caption shows up alongside the
 * figured. we also limit the size of the image so that it does not squeeze the
 * text too mucha nd had judicious padding.
 */
figure.align-right {
  float: right;
  padding: 0em 1em;
  display: table;
  max-width: 60%;
}
figure.align-right figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: 0.5em 1em;
}

/* wrap long URLs so that we don't overflow layout
 * this could apply to any element, but we often have to deal with long
 * links so limit to that to avoid unexpected damage */
#content a {
    word-wrap: break-word;
}

/* make table scale out to avoid ugly word-wrapping
 * bootstrap should deal with this, but ikiwiki doesn't assign the
 * right style and anyways our width is smaller than necessary
 *
 * pages with tables that should be checked when this is changed:
 *
 * https://anarc.at/blog/2017-10-26-comparison-cryptographic-keycards/
 * https://anarc.at/blog/2018-01-28-large-disk-price-review/
 * https://anarc.at/services/backup/
 * https://anarc.at/services/
 * https://anarc.at/services/dns/registrars/
 * https://anarc.at/services/welcome/
 */
table, table.table { width: 100%; }
table { font-size: inherit; } /* why the heck does chrome override font-size for tables?! */

/* this belongs in ikiwiki's style.css, but that needs the admonition
 * patch to be merged: https://ikiwiki.info/todo/admonitions/ */

/* admonition start */
#content div.caution,
#content div.important,
#content div.note,
#content div.tip,
#content div.warning {
    border: 1pt solid #aaa;
    margin: 1em 3em 1em 3em;
    background-repeat: no-repeat;
    background-position: 8px 8px;
    min-height: 48px; /*48=32+8+8 but doesn't work with IE*/
    padding: 1em 1em 1em 48px;
}
#content div.tip { background-image: url("smileys/admon-tip.png"); }
#content div.note { background-image: url("smileys/admon-note.png"); }
#content div.important { background-image: url("smileys/admon-important.png"); }
#content div.caution { background-image: url("smileys/admon-caution.png"); }
#content div.warning { background-image: url("smileys/admon-warning.png"); }
/* admonition end */

.breadcrumb {
    padding: 1px 0 0 0;
    border-bottom: none;
    padding-inline-start: 0px;
}
.breadcrumb li {
    padding: 8px 0 8px 8px;
}
.breadcrumb li::before {
    padding: 0 5px 0 0;
}
.page-header {
    border-bottom: none;
    margin: 40px 0 0;
}

/* more things to hide in printouts */
@media print {
    .footer { position: relative; }
    .footer .powered-by { display: none; }
    /* https://ikiwiki.info/todo/hide_add_comment_button_in_print/ */
    .addcomment { display: none; }
    /* remove link explosion in footer */
    .pagedate a[href]::after { content: normal; }
    .footer a[href]::after { content: normal; }
    /* reset size constraints, paper takes care of that */
    #content {
        width: auto;
        max-width: inherit;
        padding: 0;
        margin: 0;
    }
    body {
        margin: 0;
    }
}


/* hierarchical heading numbers */

/* this uses CSS3 to show headings like:
 *
 * 1. one
 * 2. two
 *    2.1. two point one
 * 3. three
 *
 * This is based on https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
 * ... and inspired by https://practicaltypography.com/hierarchical-headings.html
 *
 * This overrides the default in ikiwiki, which is *roman* numerals (!)
 */
/* make a counter for ordered lists in the table of contents */
.toc ol {
    /* this will break ikiwiki unless the following patch is applied: https://ikiwiki.info/todo/allow_toc_to_skip_entries/ */
    counter-reset: section;
    list-style-type: none;
}
/* override bootstrap */
.toc li.L1, .toc li.L2, .toc li.L3, .toc li.L4, .toc li.L5, .toc li.L6 {
    list-style-type: none;
}
.toc li::before {
    /* increment the counter when we hit a new li */
    counter-increment: section;
    /* Combines the values of all instances of the section counter,
       separated and followed by a period */
    content: counters(section, ".") ". ";
}
/* except in notebox, we don't want to have numbers there. that is used
 * in the blog archive, in blog.md */
.notebox .toc ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* override LI's built-in padding */
    padding-inline-start: 0px;
}
.notebox .toc li::before {
    counter-increment: none;
    content: "";
}
.notebox .toc li.L1, .notebox .toc li.L2, .notebox .toc li.L3, .notebox .toc li.L4, .notebox .toc li.L5, .notebox .toc li.L6 {
    list-style-type: none;
}

/* another counter for headings, but one which should follow the one generated by the ikiwiki toc */

/* this was taken from https://philarcher.org/diary/2013/headingnumbers/ */
body {counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}

/* TODO: Fix counter
h1:before {counter-increment: h1; content: counter(h1) ". "}
h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
*/

h1.nocount:before, h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before, div.nocount h1:before, div.nocount h2:before, div.nocount h3:before, div.nocount h4:before, div.nocount h5:before, div.nocount h6:before {
    content: ""; counter-increment: none
}

/* ... except main title, we don't want a number there */
header h1::before {
    content: "";
}

/* Language switchers */


.language-switcher {
  background: #f8f8f8;
  color: #333;
  border-color: #ccc;
}

.language-switcher:hover {
  background: #e6e6e6;
  color: #333;
  border-color: #ccc;
}

.language-switcher-top {
  display: block;
  padding-top: 9px;
  width: 120px; /* Force size to prevent overflowing breadcrumbs */
  height: 35px;
  z-index: 5;
}