diff options
Diffstat (limited to 'site.css')
| -rw-r--r-- | site.css | 483 |
1 files changed, 0 insertions, 483 deletions
diff --git a/site.css b/site.css deleted file mode 100644 index fc940bae..00000000 --- a/site.css +++ /dev/null @@ -1,483 +0,0 @@ -/* A frontend file! Wow. - * This file is just loaded statically 8y <link>s in the HTML files, so there's - * no need to re-run upd8.js when tweaking values here. Handy! - */ - -/* Pages can specify their own theme colors (used for links, and may8e other - * things) by changing this CSS varia8le through their 8ody's style attri8ute. - * And yes, CSS varia8les are supported in 8asically every major 8rowser. - * No, I don't care a8out Internet Explorer. - */ -:root { - --fg-color: #0088ff; - --bg-color: #222222; - --theme: 0; /* 0: dark (below light), 1: light (below dark) */ -} - -body { - background-color: var(--bg-color); - - --bg-shade: calc(255 * var(--theme)); - --fg-shade: calc(255 * (1 - var(--theme))); - - color: rgb(var(--fg-shade), var(--fg-shade), var(--fg-shade)); - - padding: 15px; -} - -a { - color: var(--fg-color); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -.columns { - display: flex; -} - -#header { - margin-bottom: 10px; - padding: 5px; - font-size: 0.85em; - display: flex; -} - -#header > h2 { - font-size: 1em; - margin: 0 20px 0 0; - font-weight: normal; -} - -#header > h2 a.current, -#header > h2.highlight-last-link > a:last-of-type { - font-weight: 800; -} - -#header > h2.dot-between-spans > span:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - -#header > h2 > span { - white-space: nowrap; -} - -#header > div { - flex-grow: 1; -} - -#header > div > *:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - -#header .chronology { - display: inline; - white-space: nowrap; -} - -.nowrap { - white-space: nowrap; -} - -.icons { - font-style: normal; - white-space: nowrap; -} - -.icon { - display: inline-block; - width: 24px; - height: 1em; - position: relative; -} - -.icon > svg { - width: 24px; - height: 24px; - top: -0.25em; - position: absolute; - fill: var(--fg-color); -} - -@media (max-width: 780px) { - #sidebar:not(.no-hide) { - display: none; - } - - .columns.vertical-when-thin { - flex-direction: column; - } - - .columns.vertical-when-thin > *:not(:last-child) { - margin-bottom: 10px; - } - - #sidebar.no-hide { - max-width: unset !important; - flex-basis: unset !important; - margin-right: 0; - } -} - -#sidebar, #content, #header { - background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6); - border: 1px dotted var(--fg-color); - border-radius: 3px; -} - -#sidebar { - flex: 1 1 20%; - min-width: 200px; - max-width: 250px; - flex-basis: 250px; - float: left; - padding: 5px; - margin-right: 10px; - font-size: 0.85em; - height: 100%; -} - -#sidebar.wide { - max-width: 350px; - flex-basis: 300px; - flex-shrink: 0; - flex-grow: 1; -} - -#content { - padding: 20px; - flex-grow: 1; -} - -#sidebar h1 { - font-size: 1.25em; - text-align: center; -} - -#sidebar h2 { - font-size: 1.1em; - text-align: center; - margin: 0; -} - -#sidebar h3 { - font-size: 1.1em; - text-align: center; - font-style: oblique; - font-variant: small-caps; - margin-top: 0.3em; - margin-bottom: 0em; -} - -#sidebar p { - text-align: center; - margin: 0.5em 0; -} - -#sidebar p:last-child { - margin-bottom: 0; -} - -#sidebar hr { - color: #555; - margin: 10px 5px; -} - -#sidebar > ol, #sidebar > ul { - padding-left: 30px; - padding-right: 15px; -} - -#sidebar > dl { - padding-right: 15px; - padding-left: 0; -} - -#sidebar > dl dt { - padding-left: 15px; - margin-top: 0.5em; -} - -#sidebar > dl dt.current { - font-weight: 800; -} - -#sidebar > dl dd { - margin-left: 0; -} - -#sidebar > dl dd ul { - padding-left: 30px; - margin-left: 0; -} - -#sidebar > dl .side { - padding-left: 10px; -} - -#sidebar li.current { - font-weight: 800; -} - -#sidebar li { - overflow-wrap: break-word; -} - -#cover-art { - float: right; - width: 40%; - max-width: 400px; - margin: 0 0 10px 10px; - background-color: #181818; -} - -#cover-art img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; -} - -img { - border: 2px solid var(--fg-color); - box-sizing: border-box; - position: relative; - padding: 5px; - text-align: left; - background-color: var(--dim-color); - color: white; - /* these unfortunately dont take effect while loading, so... - text-align: center; - line-height: 2em; - text-shadow: 0 0 5px black; - font-style: oblique; - */ -} - -.js-hide { - display: none; -} - -a.box:focus { - outline: 3px double var(--fg-color); -} - -a.box:focus:not(:focus-visible) { - outline: none; -} - -h1 { - font-size: 1.5em; -} - -#content li { - margin-bottom: 4px; -} - -#content li i { - white-space: nowrap; -} - -.grid-listing { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; -} - -.grid-item { - display: inline-block; - margin: 15px; - text-align: center; - background-color: #111111; - border: 1px dotted var(--fg-color); - border-radius: 2px; - padding: 5px; -} - -.grid-item img { - display: block; - width: 100%; - height: 100%; -} - -.grid-item span { - margin-top: 0.45em; - display: block; -} - -.grid-listing > .grid-item { - flex: 1 1 26%; -} - -.grid-actions { - display: flex; - flex-direction: column; - margin: 15px; -} - -.grid-actions > .grid-item { - flex-basis: unset !important; - margin: 5px; -} - -.grid-item { - flex-basis: 240px; - min-width: 200px; - max-width: 240px; -} - -.grid-item:not(.large-grid-item) { - flex-basis: 180px; - min-width: 120px; - max-width: 180px; - font-size: 0.9em; -} - -.square { - position: relative; - width: 100%; -} - -.square::after { - content: ""; - display: block; - padding-bottom: 100%; -} - -.square-content { - position: absolute; - width: 100%; - height: 100%; -} - -#content.top-index h1, -#content.flash-index h1 { - text-align: center; - font-size: 2em; -} - -#content.flash-index h2 { - text-align: center; - font-size: 3em; - font-variant: small-caps; - font-style: oblique; - margin-bottom: 0; - text-align: center; - width: 100%; -} - -#content.top-index h2 { - text-align: center; - font-size: 2em; - font-weight: normal; - margin-bottom: 0; -} - -#intro-menu { - margin: 24px 0; - padding: 10px; - background-color: #222222; - text-align: center; - border: 1px dotted var(--fg-color); - border-radius: 2px; -} - -#intro-menu p { - margin: 12px 0; -} - -#intro-menu a { - margin: 0 6px; -} - -li .by { - white-space: nowrap; - font-style: oblique; -} - -p code { - font-size: 1em; - font-family: 'courier new'; - font-weight: 800; -} - -blockquote { - max-width: 600px; -} - -.long-content { - margin-left: 12%; - margin-right: 12%; -} - -p img { - max-width: 100%; -} - -dl dt { - padding-left: 2em; -} - -dl dt { - margin-bottom: 2px; -} - -dl dd { - margin-bottom: 1em; -} - -dl ul, dl ol { - margin-top: 0; - margin-bottom: 0; -} - -.album-group-list dt { - font-style: oblique; -} - -.new { - animation: new 1s infinite; -} - -@keyframes new { - 0% { - color: #bbdd00; - } - - 50% { - color: #eeff22; - } - - 100% { - color: #bbdd00; - } -} - -/* fake :P */ -.loading::after { - content: '.'; - animation: loading 6s infinite; -} - -@keyframes loading { - 0 { - content: '.'; - } - - 33% { - content: '..'; - } - - 66% { - content: '...'; - } - - 100% { - content: '.'; - } -} |