X-Git-Url: https://git.shemshak.org/~bandali/bndl.org/blobdiff_plain/65641ab439f507b8cf0f24bca67b03fbcfbfa218..b307aaa9dfa368f039b2ea79efadfc217d3f3355:/source/style.css diff --git a/source/style.css b/source/style.css new file mode 100644 index 0000000..cab0597 --- /dev/null +++ b/source/style.css @@ -0,0 +1,218 @@ +html, body { + margin: 0; + height: 100%; +} + +body { + font-family: "Liberation Sans", "Arial", sans-serif; + color: #232323; +} + +main { + margin: 0 auto; + max-width: 34em; + padding: 1em; +} + +/* Header and Footer */ + +#aminb { font-size: 0.9em; } + +#preamble, +#postamble { + color: #888888; + padding: 1em; + margin: 0 auto 2em; + max-width: 34em; +} + +#preamble { padding: 2em 1em 0em 1em; } + +#preamble h2 { display: inline; } + +#preamble a { border: none !important; color: #888 !important; } + +#preamble h2 a { color: #3a89c9 !important; } + +#preamble .bar { + color: #ccc; + font-size: 12pt; + vertical-align: bottom; + padding-left: 1px; + padding-right: 1px; +} + +#postamble a { + color: #888888 !important; + border-bottom: 1px solid #cccccc !important; +} + +/* Content */ + +#content { + line-height: 1.6em; +} + +#content h1, #content h2 { + line-height: 1em; + font-weight: 700; + letter-spacing: -0.03em; + word-spacing: -0.03em; +} + +#content h1 { font-size: 1.6em; } + +#content h2 { + font-size: 1.2em; + padding: 0.25em 0; +} + +#content p { + margin: 1em 0; +} + +#content code { + background-color: #f5f5f5; + padding: 1px 3px; +} + +#content code, +#content pre { + font-family: "DejaVu Sans Mono", monospace; + font-size: 0.9em; + line-height: 1.5em; + margin: 0; +} + +#content pre { + background-color: #f5f5f5; + color: #232323; + margin: 0 -1em; + overflow-x: auto; + padding: 1em; + word-wrap: normal; +} + +#content ul { + padding: 0; + margin: 0.3em 0 0 1.6em; +} + +#content ul li { + /* list-style: none; */ +} + +#content li { + margin: 0.5em 0; +} + +.pub-desc { + font-size: 0.95em; +} + +#text-publications p { + margin: 0.5em 0; +} + +.light-off:checked ~ .page #content pre, +.light-off:checked ~ .page #content code { + background-color: #232323; +} + +.clear { clear: both; } + +#hello { float: left; line-height: 50px !important; } + +#content .picture__avatar { + margin: 0; + height: 64px; + width: 64px; + border-radius: 50%; + float: right; +} + +@media only screen and (min-width: 570px) { + .picture__avatar { + margin-right: 3em !important; + } +} + +.page { + background-color: #ffffff; + color: #232323; + min-height: 100%; +} + +.page a { + color: #357edd; + text-decoration: none; + border-bottom: 1px solid #a5ceff; +} + +pre { margin-left: 0 } + +/* Light switch */ + +#light-off { + position: absolute; + visibility: hidden; +} + +.light-off-button { + cursor: pointer; + vertical-align: middle; +} + +.light-off-button, +.light-off-button-inline { + color: #888888; + -webkit-user-select: none; + user-select: none; + cursor: pointer; + text-align: right; +} + +.light-off-button:hover:after, +.light-off-button-inline:hover:after { + color: #357edd; + border-bottom: 0; +} + +.light-off:checked ~ .page .light-off-button:hover:after +.light-off:checked ~ .page .light-off-button-inline:hover:after { + color: #ddddb6; + border-bottom: 0; +} + +.light-off-button:after, +.light-off-button-inline:after { + content: "\1F4A1"; + font-family: "Noto Color Emoji", "Noto Sans", "Arial", sans-serif; +} + +.light-off:checked ~ .page { + background-color: #141414; + color: #cccccc; +} + +.page:selection { + background: #ddddb6; +} +.light-off:checked ~ .page:selection { + background: #357edd; +} + +.light-off:checked ~ .page a, .light-off:checked ~ header a { + color: #ddddb6 !important; + border-bottom: 1px solid #aaaa96; +} + +.light-off:checked ~ .page a:visited { + color: #888888; + border-bottom: 1px solid #444444; +} + +.light-off:checked ~ .page a:hover { + color: #ddddb6; + border-bottom: 1px solid #ddddb6; +}