ohnonot
/
tagblog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
							@import "reset.css";
/*
THIS CSS FILE DOES NOT CONTAIN ANY COLOR DEFINITIONS - see index.twig

ALL DEFAULT STYLES ARE FOR THE SMALLEST DEVICE, A SMARTPHONE THAT REGISTERS AS min-width 320px AND LESS THAN 29em
OR A DESKTOP BROWSER RESIZED TO 320px WIDTH
*/

:root {
    --sans: Cantarell, Lato, "Noto Sans", "Nunito Sans", sans-serif;
    --mono: "JetBrains Mono NL","Cascadia Mono PL","Fira Code","Noto Sans Mono","Droid Sans Mono", Consolas, "Andale Mono", "DejaVu Sans Mono", Monaco, monospace;
    --bw: 1px; /* default border width, also hr */
}

* {
  box-sizing: border-box;
}
html,body {
  height:100%;
  width:100%;
}
body {
  font-family: var(--sans);
  /* footer stay down, even with dynamic footer height:; stackoverflow.com/a/20352949 */
  display: flex;
  flex-direction: column;
  tab-size: 4;
}

/* For stylesheets outside of <head> - but is this necessary? */
style,link {
  display: none;
}

/*
COLORS
fallback colors: base16-equilibrium-light
License: MIT, copyright Carlo Abelli
*/
body {
    color: var(--base05,#43474e); background: var(--base00,#f5f0e7)
}
article.list > a > :not(h1),
.tag_cloud li a,
div.footnotes ol>li>* {
    color: var(--base05,#43474e)
}
h1,h2,h3,h4,h5,h6,summary {
    color: var(--base03,#73777f)
}
code,pre {
    color: var(--base0d,#0073b5); background: var(--base01,#e7e2d9)
}
a,
article.list h1:first-child,
label[for=menu-icon]:hover,
.four04,
.p01-contact .required label:after,
a>code,
#toc ul li,
input#titlesonly[type=checkbox]:checked ~ label::before,
input,
textarea,
select,
div.footnotes ol>li {
    color:var(--base09,#bf3e05)
}
code::selection,
pre::selection {
    background: var(--base0d,#0073b5);
    color: var(--base01,#e7e2d9)
}
::selection {
    background: var(--base05,#43474e);
    color: var(--base00,#f5f0e7)
}
button,
.p01-contact input[type=submit]:not([type=radio]):not([type=checkbox]),
.p01-contact input[type=button]:not([type=radio]):not([type=checkbox]) {
    color: var(--base00,#f5f0e7);
    background: var(--base09,#bf3e05)
}
#toc,
blockquote,
kbd,
article.list:hover,
input[type=checkbox]:checked~label,
nav#menu-icon,
input,
textarea,
select,
.box,
table,
header,
footer,
.small span,
input.submit {
    background:var(--base01,#e7e2d9)
}
input[type=checkbox] {
    accent-color:var(--base09,#bf3e05)
}
details,
blockquote,
kbd,
aside,
pre,
.border,
input,
textarea,
select,
th,
td,
#toc {
    border-color: var(--base02,#d8d4cb)
}
div.corner {
    color: var(--base0B,#637200)
}
.tag_cloud li span:last-child {
    color: var(--base03,#73777f)
}
.tag_cloud li a:hover,
.tag_cloud li a:hover span:last-child {
    color: var(--base06,#2c3138)
}
input:focus,
textarea:focus,
select:focus {
    border-color:var(--base09,#bf3e05)
}
header .inner .sitelogo svg {
    fill: var(--base00,#f5f0e7)
}
hr {
    background: var(--base02,#d8d4cb);
}
/* WEBKIT SPECIFIC SCROLLBAR */
/* Firefox knows how to style the scrollbar: it becomes wider only on hover, and
 * fades out otherwise. Chromium doesn't do that. I tried here to make it less
 * obnoxious, but my experience with webkit browsers is limited. If you have
 * any idea how to improve this, please open an issue or a pull request. */
::-webkit-scrollbar { width: 0.5em; height:0.5em; }
::-webkit-scrollbar-thumb {
    border-radius: 10px;
}


/*************** MOBILE FIRST !!!  MOBILE FIRST !!! ************************/


/*HTML tags*/
h1,h2 {
  font-size: 2em;
  line-height: 1.3em;
  padding: 1em 0 .5em;
}
h3,h4,h5,h6 {
  padding: .5em 0;
  font-weight:bold
}
h3 {
  font-size: 1.4em;
  line-height: 1.2em;
}
h4 {
  font-size: 1.1em;
  line-height: 1em;
}
h5, h6 {
  font-size: 1em;
  line-height: 1em;
}
a, article.list > a:hover {
    text-decoration: none;
}
a:hover,
.tag_cloud a:hover span:first-child,
article.list a:hover h1 {
    text-decoration:underline solid .05rem;
}
/* see {notabug,framagit}.org/ohnonot/PicoTargetBlank
a.external::after { line-height: 1em; vertical-align: super; font-size: .6em; content: "↗" }
a.external.noarrow::after { content: '' }
*/
details > :not(summary) { margin-left:4%!important }
details summary { /* like h5 */
  padding: .5em 0;
  font-weight:bold;
}

/*
MOSTLY header .inner
*/
.flexbox {
  display:flex;
  height:100%;
}
.flexbox > * {
  align-self: center;
}
.flexbox > *:first-child {
  align-self: left;
  flex: 1 1 auto;
}

/*HEADER*/
header .inner {
  height:3.75em;
  padding-left: .5em;
}
header ul, nav ul {
  list-style: none;
  padding:0;
}
header ul li {
  float: left;
  padding: .8em .3em .8em 0;
  font-size: 1.2em;
}
header ul li:last-of-type {
  padding-right: 0;
}
header ul li a {
  padding: .8em .5em .5em 0;
}
header .inner .sitelogo svg {
    height:100%;
}
header .inner .sitelogo {
    height:100%;
    margin: 0 .5em 0 0;
    padding:0;
}
/*
not enough horizontal space on mobile/portrait:
*/
header .inner .title {
  display:none;
}

/*
CONTENT
*/
p, .paragraph {
    padding:.5em 0;
    /* make sure paragraph stays within width constraints */
    word-wrap: break-word;
}
em,i {
    font-style: italic;
    padding-right:.1em;
}
strong,b {
    font-weight: bold;
}
code, pre, input#titlesonly[type=checkbox] ~ label::before {
    font-family: var(--mono);
    font-size: .9rem;
}
:not(pre) > code {
    padding: 0 0.15em;
    line-height:inherit;
}
:not(.four04) > pre {
    display: inline-block; /* stackoverflow.com/a/20673961 */
    margin: 0.4em 0;
    line-height:1.3em;
    border-width: var(--bw);
    border-style: solid;
    overflow: auto;
    max-width:100%;
    word-break: break-all;
    white-space: pre-wrap;
}
pre > code {
    display: block; /* stackoverflow.com/a/20673961 */
    margin: 0.4em;
}
blockquote {
    padding: 0.3em 0.3em 0 0.7em;
    border-width: 1px 1px 1px .9rem;
    border-style: solid solid solid double;
    margin: 0.5em 0;
    line-height: 1.3em;
}
kbd {
    font-family: var(--mono);
    padding: 0 0.2em 0 0.2em;
    border-width: var(--bw);
    border-style: solid;
    border-radius: 0.2em;
    margin: 0 0.1em;
}
ul,ol {
    padding: .25em 0 .75em 1.5em;
}
section.content > * {
    padding: .5em;
}
section.content {
    margin-bottom: 1.5em;
}
.small, aside {
    line-height: 1.4em;
    font-size: 0.8em;
}
.small span {
    padding: 0 0.2em;
}
.border,#toc {
    border-style: solid;
    border-width: var(--bw);
}
aside {
    border-bottom-style: solid;
    border-bottom-width: var(--bw);
}
.right {
    float:right;
}
.left {
    float:left;
}
li p {
    padding: 0;
}


/*
ARTICLE
*/
article h1:first-child {
    font-size: 2.5em;
    padding: 0 0 1em 0;
    line-height: 1.2em;
}
article h2:first-of-type {
    padding-top: .5em;
}
article li {
    padding: .1em;
}
section.content p, section.content .paragraph {
    padding:.2em 0 .5em 0;
}
article {
    line-height: 1.4em;
}
article p.description {
    padding-top: 0;
}
article aside {
    padding:0.1em 0;
}
article aside .tag {
    float:right;
    margin-left:0.5em;
}
article aside .date, article aside .author {
    float:left;
}
article aside .timeline {
    opacity:0.5;
}
article aside .author {
    margin-left:0.5em;
}
article.fullpage {
    margin-top: 1em;
}
article.fullpage aside {
    margin-bottom: 2em;
}
article.list {
    margin: 1em 0;
}
article.list h1 {
    padding:0 0 .1em 0;
    line-height:1em;
}
article img {
    max-width: 100%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0 3px 10px 0 rgba(0, 0, 0, 0.5);
    /* "Card" shadow from w3schools.com/css/css3_shadows_box.asp, sharpened */
}
article .noshadow, article .noshadow img {
    box-shadow: none;
}
article img.right, article img.left {
    float: none;
}
article img.small { 
    max-width: 50% 
}

/* Tables */
table {
    margin:.5em 0 1em;
}
th {
    font-weight: bold;
}
th,td { 
    padding: .4em;
    border: var(--bw) solid;
}

/* horizontal line */
hr {
    margin: 1.5em 0;
    height:var(--bw);
    border-width:0;
}

/* Footnotes */
sup {
    vertical-align: super;
    font: bold .7em var(--mono);
    margin: 0 0 0 0.1em;
    line-height: 1;
}
article sup>a {
    padding: 0 0.1em;
}
div.footnotes {
    font-size: .9em;
}
div.footnotes hr {
    margin-bottom:0
}
div.footnotes ol::before {
    content: "Footnotes";
    font-size:75%;
    text-transform:uppercase;
}
div.footnotes ol {
    line-height:75%;
    padding:0 1.5em 1.5em 0;
}
div.footnotes ol li:first-of-type {
    margin-top: 1em;
}
div.footnotes ol li {
    line-height:1.2em;
    margin-left: 1.5em;
}
div.footnotes ol li p {
    padding:0
}
div.footnotes pre div.corner {
    display:none;
}
div.footnotes ol a.footnote-backref {
    padding-left:.25em;
}


.tag_list {
    margin-bottom: 1em
}
/*
TAG CLOUD
*/
.tag_cloud > div, .tag_list > div {
    letter-spacing: .5em;
    font-size: 0.7em;
    margin-bottom: .5em;
}
.tag_cloud ul {
    word-break: break-all;
    font-weight:300; /* "Light" */
}
.tag_cloud li, .tag_cloud li span {
    display: inline-block;
}
/* this is the tag count of the tag cloud */
.tag_cloud li span:last-child {
    font-size:0.6em;
    letter-spacing:-0.1em;
    font-family:var(--mono);
    margin:0 .4em 0 .1em;
}
.tag_cloud li a {
    display: block;
    min-height:1.5rem;
}

/* clickable menu*/
input#menu-icon {
    display: none;
}
label[for="menu-icon"] {
    display: inline-block;
    width: 100%;
    padding:0.5em;
}
input#menu-icon[type=checkbox] ~ label::before {
    content: "→"
}
input#menu-icon[type=checkbox]:checked ~ label::before {
    content: "←"
}
nav#menu-icon {
    display: none;
    list-style: none;
    padding: .5em;
}
input#menu-icon[type=checkbox]:checked ~ nav#menu-icon {
    display: inline-block;
}
/*
SEARCH
*/
form#search_form input {
    margin: .1em 0;
}
input#titlesonly {
    display: none;
}
label[for="titlesonly"] {
    display: inline-block;
    margin-top:.4em;
    padding:0.25em 0.3em 0.2em 0.1em;
}
input#titlesonly[type=checkbox] ~ label::before {
    content: "[ ]";
    vertical-align:.075em;
    padding-right:.25em;
}
input#titlesonly[type=checkbox]:checked ~ label::before {
    content: "[X]";
}

/*
paging
*/
.paging {
  margin: 1em 0 0 0;
  position: relative;
}
.paging .previous {
  float: left;
}
.paging .next {
  float: right;
}
.paging span:nth-child(2) {
/* same logic for .previous and .next */
  margin-left: 0.5em;
}
.paging .current {
  position: absolute;
  text-align: center;
  width:100%;
  z-index: -10;
  left:0;
}


/*
FOOTER
*/
footer .inner {
  padding: .5em;
}
footer {
  margin-top: auto;
}
footer p a {
  padding: 0.5em 0.2em;
}
footer .right {
  margin-left: 1em;
}

/* Input Styles */
input,
textarea,
select {
    border-width: var(--bw) !important;
    border-style: solid !important;
    box-shadow:none !important;
    outline: none !important;
    margin: 0;
    font-size: 1em;
    border-radius: 0;
}
input:focus,
textarea:focus,
select:focus {
    border-width: var(--bw) !important;
    border-style: solid !important;
    box-shadow:none !important;
    outline: none !important;
}
/* remove stupid red border - stackoverflow.com/a/6189446 */
input:required, input:invalid {
    box-shadow:none !important;
    outline: none !important;
}
button {
    padding: 0.5em;
    border: none;
    font-weight: bold;
    letter-spacing: 0.2em;
}

/*
Display only for desktop type device widths
*/
.desktop-device {
  display:none;
}
/*------------CLEARFIX!----------------*/
.clearfix:before,.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* ################################################
 * B R E A K P O I N T S   S T A R T   H E R E   *
 * ################################################ */

/*
THIS IS WHAT MY PHONE REGISTERS AS IN LANDSCAPE MODE
*/
@media screen and (min-width: 480px) and (max-width: 1023px) {
  header .inner, footer .inner, section.content > *, label[for="menu-icon"], nav#menu-icon {
    /*just adding a little horizontal spacing*/
    padding-left: 1em;
  }
}

/*
NON-MOBILE DEVICES (ALSO LAPTOPS) USUALLY START AT THIS BREAKPOINT
*/
@media screen and (min-width: 768px) {
   .mobile-device {
    display:none;
   }
   .desktop-device {
    display:initial;
   }
   :not(.four04) > pre {
    min-width: 35%;
   }
   pre > code {
    margin: 0.55em;
   }
   ul,ol {
   padding: .5em .5em 1.5em 1.5em;
   }
   article li {
   padding: .2em;
   }
   header .inner {
    height:4.7em;
   }
   body > .inner {
    padding: 1em 0;
    position:relative;
   }
   section#sidebar {
    float: left;
    width: 33%;
    height:100% /* required for #back_up becoming sticky */
   }
   label[for="menu-icon"] {
    display:none;
   }
   nav#menu-icon {
    display: inline-block;
    position:initial;
    height:100% /* required for #back_up becoming sticky */
   }
   .back_up {
    position:sticky;
    top:0;
    padding:1em 1em 1em 0;
   }
   .back_up > a {
    padding:1em 1em 1em 0;
   }
   section.content {
    float: right;
    width: 67%;
   }
   article img {
    margin: 0.25em 0.5em 0.25em 0;
   }
   article img.right, article img.left {
    max-width: 50%;
   }
   article img.right {
    float: right;
    margin: 0.3em 0 1em 1em;
   }
   article img.left {
    float: left;
    margin: 0.3em 1em 0.2em 0;
   }
   article h1:first-child {
    margin-right: .5em; /* it's not nice when it gets too close to the right edge */
   }

/*
WIDE ENOUGH TO NOT USE 100% WIDTH
*/
@media screen and (min-width: 1024px) {
  .inner {
    width:90%;
    margin: 0 auto;
  }
  article img.small { max-width: 30% }

    .flexbox > * {
      flex: 1 0 auto;
    }
    .flexbox > *:last-child {
      flex: 0 1 auto;
    }
  header .inner .title {
    display: initial; 
    padding-right: .5em;
    font-size: 1.6em;
  }
  header .inner ul li {
    font-size: 1.3em;
  }
}