@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 - 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 { color: var(--base04,#5a5f66) } 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 { font-size: 2em; line-height: 1.4em; } h2 { font-size: 2em; padding: 1em 0 0.5em; line-height: 1.4em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h3,h4 { line-height: 1.3em; } 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; } a.external::after { line-height: 1em; vertical-align: super; font-size: .6em; content: "↗" } a.external.noarrow::after { content: '' } /* 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-right: .5em; } /* 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-left-width: 0.6rem; border-left-style: 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 .content h3::before, article .content h4::before, article .content h5::before { content: "~"; opacity: 0.5; } article li { padding: .1em; } #content p, #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%; } 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 { border-width:var(--bw); } div.footnotes hr::after { content: "Footnotes"; } div.footnotes ol { line-height:1.1em; } div.footnotes pre div.corner { display:none; } div.footnotes ol a.footnote-backref { font-size:1.3em; line-height:.5em; } .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 */ 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%; /* padding-left: 0.5em; */ } 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; } }