/* [ʞ] serenity.scss * ~ lexi hale * © GNU affero general public license v3 * $ sassc -t compressed serenity.{scss,css} * a stylesheet designed for flexibility and for minimalistic, * hand-coded websites. ideally, it should be possible to * drop it right into any existing plain-html document and * have it immediately spice up the look. NOTE i'm fine with people other than me using and modifying this stylesheet under the terms of the AGPL, under two conditions: 1) this block-comment be left in place per the AGPL, and at least the first three lines copied verbatim to the top of any CSS file generated from it 2) you change the default hue in :root to something other than rose-red, which is the signature hue of my own websites i would also appreciate being credited somewhere visible to visitors of the website, but it's not required as long as the credit at the top of this file is preserved. */ /* bring in a fallback font in case the user doesn't have * a garamond on hand */ //@import url(https://fonts.googleapis.com/css?family=EB+Garamond&display=swap); @import "font.scss"; $use: [endnote, pathbar, directory, code, hilite]; // glow: currently don't feel like the glow looks good on my // site anymore; it's also very un-minimalistic, which // goes against my entire ethos. leaving a switch in // place in case i change my mind later tho // endnote (~2kb): include code for the endnote mechanism // pathbar (~100b): include styles to make

and

suitable for // use as a pathbar at the top of the document? // directory: include styles for automatic "directory lists," // lists with descriptive bodies indented under an // emphasized (bold) link or other title element? // code (~0.5kb): includes styles for inline code and code // listings // hilite (~1kb): includes styles for highlighting parts of // code listings @function using($feature) { @if $use!=[] and index($use, $feature) { @return true; } @else { @return false; } } @font-face { /* if there's any japanese text in the document, * do what we can to make sure it's not hideous */ font-family: "mincho"; unicode-range: u+4e00-9fbf, u+3040-309f, u+30a0-30ff; src: local("Kochi Mincho"), local("Hiragino Mincho Pro"), local("Yu Mincho"), local("MS Mincho"); } @viewport { zoom: 1; width: device-width; } %root { // this pseudo-class is used to improve compat // with CSS1 renderers that don't support :root font-size: 14pt; } :root { @extend %root; --hue: 338; --width: 35rem; --bright: 12%; --link-br: 73%; --hover: 22%; } ::selection { background-color:hsl(var(--hue),100%,60%); color:white; @if using(glow) == yes { text-shadow:none; } } body { @extend %root; margin-top: 1em; padding: 0 1em; font-family: mincho, ipa, Garamond, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond Pro", "Adobe Garamond", "EB Garamond", "Junicode", serif; hanging-punctuation: first last force-end; text-align: justify; @media print { --faint-color: #666; @if using(glow) { text-shadow:none; } color: black; } @media screen { --fg-color: hsl(var(--hue),100%,89%); --bg-color: hsl(var(--hue),84%,var(--bright)); --faint-color: hsl(var(--hue),64%,64%); max-width: var(--width); margin: auto; margin-top: 1em; background: var(--bg-color); color: var(--fg-color); @if using(glow) { --glow-color: hsl(var(--hue),60%,61%); text-shadow: 0px 0px 30pt var(--glow-color); } } @media all and (min-resolution: 400dpi) and (max-width: 1080px) { max-width: calc(1080px - 1em); margin: auto; margin: { top: 1em; bottom: 1em; } } /* browser specific hacks */ &::-webkit-scrollbar { width: 20px; } &::-webkit-scrollbar-track { // { background: hsl(var(--hue),96%,8%); } background: linear-gradient(to left, var(--bg-color) -50%, hsl(var(--hue),100%,calc(var(--bright) / 2)) 130%); } &::-webkit-scrollbar-thumb { // background: background: url(scroller.svg), hsl(var(--hue),100%,21%); background-size: 80%; background-repeat: no-repeat; background-position: center; border-left: 1px outset hsl(var(--hue), 60%, 30%); border-radius: 1.5px 0 0 1.5px; &:hover { background-color: hsl(var(--hue),100%,28%); border-color: hsl(var(--hue), 60%, 40%); } } } img { max-height: 100vh; } h1, h2, h3, h4, h5, h6 { /* sigh */ all: unset; display: block; text-align: left; a[href] { @media screen { color: hsl(var(--hue),60%,80%); &:hover { color: var(--fg-color); } } @media print { text-decoration: none; } } line-height: 1em; margin-top: 0.3em; } @for $i from 1 to 6 { h#{$i} { font-size: (((6em - $i) / 6) * 2) + 0.3em; @if $i >= 2 { &::before { display: inline; margin-right: 0.2em; } } section > & ~ * { margin-left: 0.5em * $i; } } } @if using(pathbar) { @media screen { /* dim the pathbar */ h1, h3 { a[href] { color: hsl(var(--hue),50%,70%); } } } } p { margin: 0.7em 0; line-height: 1.5em; } del { color: var(--faint-color); text-decoration-color: hsl(var(--hue), 80%, 60%); } ins { all: unset; border: 1px solid black; @media screen { color: hsl(142, 100%, 65%); background-color: hsl(142, 100%, 10%); }; padding: 0.3ex 0.8ex; font-style: italic; } @if using(code) { %listing, p code, li code, { display: inline-block; background-color: hsl(var(--hue), 71%, 25%); font-size: 0.8em; padding: 0 0.5em; // border-radius: 0.3em; text-shadow: 0px 1.2px 0px #2A0017; border: 1px solid #2A0017; font-family: "Inconsolata", monospace; box-shadow: 0 0 5px -2px black inset; @if using(hilite) { strong { /* keywords */ color: hsl(var(--hue), 100%, 70%); } var { /* variables */ color: hsl(calc(var(--hue) - 30), 80%, 50%); } dfn { /* literals */ color: hsl(calc(var(--hue) + 30), 50%, 60%); } em { /* strings */ color: hsl(calc(var(--hue) - 20), 90%, 70%); } i { /* comments */ color: hsl(var(--hue), 70%, 70%); } em i { font-style: italic; } b { /* pragmata */ font-weight: normal; color: hsl(calc(var(--hue) - 20), 50%, 65%); } cite { /* imports */ font-style: normal; color: hsl(calc(var(--hue) - 40), 70%, 70%); } } } body > code, pre > code, code.listing { @extend %listing; display: block; box-shadow: 0 0 8px -2px black inset; white-space: pre-wrap; padding: 0.5em 1em; line-height: 1.2em; tab-size: 4; width: 100%; overflow: scroll; } } a[href] { @media print { color: black; } @media screen { /* define the numbers */ --link-t: var(--hue), 100%, var(--link-br); --hi-t: var(--hue), 100%, calc(var(--link-br) + var(--hover)); /* define the two alpha variants */ --link-c: hsl(var(--link-t)); --ul-c: hsla(var(--link-t), 30%); --hi-c: hsl(var(--hi-t)); --ul-hi-c: hsla(var(--hi-t), 60%); --glow-c: hsla(var(--link-t), 50%); color: var(--link-c); text-decoration-color: var(--ul-c); // otherwise sass tries to intercept the hsl call text-decoration-width: 1px; // it'll look nice when CSS4 gets here text-underline-offset: 2px; @if using(glow) { text-shadow: 0px 0px 30pt hsl(var(--hue),60%,40%); } %linkbody &:focus, %linkbody &:hover:focus { /* a11y: keyboard users need an unambiguous, easy-to * spot identifier for what's currently focused. this * style inverts the default colors to create a highly- * visible reverse-video effect. */ color: var(--bg-color) !important; background: var(--fg-color) !important; box-shadow: 0 0 30px var(--ul-c); text-decoration: none; /* browsers normally supply their own (ugly, useless) * indicator; we suppress these by blanking outline */ outline: none; } @at-root p, li, span, h1, h2, h3 { @extend %linkbody; } &:hover, &:active { color: var(--hi-c); text-decoration: underline; text-decoration-color: var(--ul-hi-c); text-shadow: 0px 0px 30px var(--glow-c); background: none !important; box-shadow: none; } } } @if using(directory) { div.dir > div { /* for div-type directory lists */ > *:first-child { font-weight: bold; } margin-left: 2em; text-indent: -2em; } } ol, ul { padding-left: 1.2em; list-style: none; line-height: 1.4em; ol, ul, li { margin-top: 0.5em; } li > a[href]:first-child { display: inline-block; } li::before { display: inline-block; color: hsl(var(--hue), 40%, 60%); } @if using(directory) == yes { &.dir > li { margin-left: 2em; &::before { margin-left: -2em; } > *:first-child { font-weight: bold; } } } } ul li::before { hanging-punctuation: none; // eurghhhh content: "»"; width: 0.7em; margin-left: -0.7em; } ol { counter-reset: li; li::before { counter-increment: li; content: counter(li); width: 1.5em; margin-left: -1.9em; text-align: right; padding-right: 0.4em; } } .byline { margin-left: 1.5em; margin-top: -0.5; padding: 0em; font-style: italic; color: var(--faint-color); } hr { border: none; border-bottom: 1px solid hsl(var(--hue),50%,30%); width: 90%; &[data-dec]::before { display: block; content: attr(data-dec); position: relative; letter-spacing: 1em; text-align:center; top: 0.8em; color: hsl(var(--hue),50%,40%); font-size: 60%; @if using(glow) { text-shadow: 0px 0px 15px hsl(var(--hue),30%,70%), 4px 0px 0px var(--bg-color), -4px 0px 0px var(--bg-color); } } &[data-dec=""]::before {content: "◆";} } .imgbox { margin: 0 calc((20vw - 20%) * -1); break-inside: avoid; } /* entries in definition lists, numbered footnotes */ .entry { $spacing: 1em; margin-left: $spacing; text-indent: 0-$spacing; } /* links to previous and next chapter */ nav { @media print { display: none; } padding-bottom: 1em; /* hideous evil clearfix */ &::after { display: table; content: ""; /* ಠ_ಠ */ clear:both; } a[href] { --fg-color: hsl(var(--hue), 100%, 80%); display: block; color: var(--fg-color); background-color: hsl(var(--hue),100%, calc(var(--bright) / 2)); border: 1px solid var(--fg-color); text-decoration:none; line-height: .7em; transition-property: border-color, text-shadow, color, --fg-color, background; transition-duration: 0.2s; &:hover { --fg-color: hsl(var(--hue),80%,90%); background: hsl(var(--hue),70%,10%) !important; text-decoration: none; } &:active, &:focus { padding: 0; margin: 0; } /* back and forward buttons */ &.next::after, &.prev::before { display: inline-block; color: var(--bg-color); font-weight:bold; background-color: var(--fg-color); padding: 1.7ex 1.5ex; text-shadow:none; transition-property: background-color, --fg-color; transition-duration: 0.2s; } &.next { float: right; padding-left: 2ex; border-radius: 0 0 0 10px; &::after { margin-left:2ex; content: "⮞"; } } &.prev { float: left; padding-right: 2ex; border-radius: 0 0 10px 0; &::before { margin-right:2ex; content: "⮜"; } } } } %box { page-break-inside: avoid; margin-left: 1em; margin-right: 1em; padding: 0.1px 1em; /* heavy sigh */ //background: hsl(var(--hue), 84%, calc(var(--bright) - 5%)); font-size: 90%; @media screen { background: rgba(0,0,0,0.5); outline: 1px solid hsl(var(--hue), 100%, calc(var(--bright) - 8%)); } &>& { margin-bottom: 1em; } &+& { margin-top: 1em; } } blockquote { @extend %box; margin: 0; border-left: 5px solid hsl(var(--hue), 60%, calc(var(--bright) + 20%)); @media print { border-color: black; } } aside { --asize: 28px; --padsize: 4px; @extend %box; padding-left: calc(var(--asize) + (var(--padsize) * 2) + 0.5em; transform: translateY(-50%); &::before { line-height: 55px; display: block; position: absolute; left: 0; padding: 0 var(--padsize); height: 100%; content: "➤"; color: black; font-size: var(--asize); @media screen { background: hsl(var(--hue), 60%, calc(var(--bright) + 20%)); } } @media (min-width: 60em) { // float: right; position: absolute; left: calc(10px + var(--width) + (50vw - (var(--width) / 2))); margin: 0; // width: 70%; // margin-left: 0.5em; // margin-right: calc(-1 * (50vw - (var(--width) / 2)) + 10em); } } /* endnote mechanism */ @if using(endnote) { .endnote .entry a.backlink { text-decoration: underline !important; font-weight: bold; } @media screen { %el { display: inline-block; text-decoration:none; color: var(--fg-color); background-color: hsl(var(--hue),60%,25%); /* yes, this is weird. unfortunately padding * doesn't work to provide a consistent height - * webkit uses x-height as the font's bounding * box whereas blink uses the em square. */ height: 100%; padding: 0 0.4em; margin: 0em; /* the following two stanzas are unfortunately * necessary and i don't know why; trying to * incorporate them into one consistently * breaks cross-browser. shruggo */ --border-color: hsl(var(--hue),80%,8%); border: 1px solid var(--border-color); } a[href].endnote-link { @extend %el; &:focus, &:hover:focus { @extend %el; // this is such bullshit but necessary } &:hover { background-color: hsl(var(--hue),76%,35%) !important; /* i don't know why the hell the !important is needed, and the inspector won't tell me */ } } .endnote { bottom: 0.5em; /* try to only use the popup mechanism in browsers * that can support it - this is a little wacky */ @supports(position: fixed) { position: fixed; display: none; // hide until needed border: 1px solid rgba(255,255,255,0.5); background-color: hsl(var(--hue),61%,15%); --box-shadow-color: hsla(var(--hue),54%,30%,0.7); box-shadow: 0 0 40px 0 var(--box-shadow-color); /* center the element */ left: 0; right: 0; max-width: calc(var(--width) + 2em); /* same width as body */ margin:auto; } &:target { display: block; } > * { font-size: 90%; } .entry { margin-left: 0em; padding: 0.7em 1.0em; text-indent: -0.5em; max-height: calc(100vh - 2em); overflow-x: visible; overflow-y: auto; line-height: 1.4em; a.backlink { text-decoration: none; } } .ui { display: none; } @supports(position: fixed) { %uilink { text-decoration: none; font-weight: bold; } .ui { display: block; /* hover it over the corner of the interface */ position: absolute; top: -1.2em; right: -0.8em; a[href] { @extend %uilink; } background: hsl(var(--hue),51%,5%); border: 1px solid rgba(255,255,255,0.5); padding: 0.1em .5em; } a[href].ui { @extend %uilink; background: hsl(var(--hue),51%,5%) !important; cursor: default; &:hover { border-style: outset; } &:active { border-style: inset; } } } } } @media print { a[href].endnote-link { text-decoration: none; color: black; } .endnote { .ui { display: none; } .entry a.backlink { color: black; } } } /* this is a grotesque hack and i don't understand * why it works, but: for some reason, the following * line does not succeed in removing the underline in * Dillo (which doesn't obey media queries or feature * queries properly), so we have to rely on the * glitched behavior of !important to produce the * desired effect. */ @supports(position: fixed) { .endnote .entry a.backlink { text-decoration: none !important; } } }