From 87f7e36333222c1e7eb6f309fc4cbe60cde87d72 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 5 Dec 2022 16:12:06 -0400 Subject: clean up site2.css --- src/static/site2.css | 907 ++++++++++++++++++++++++++------------------------- 1 file changed, 470 insertions(+), 437 deletions(-) (limited to 'src/static') diff --git a/src/static/site2.css b/src/static/site2.css index 070d89ee..26c7ae34 100644 --- a/src/static/site2.css +++ b/src/static/site2.css @@ -7,8 +7,11 @@ --primary-color: #0088ff; } +/* Layout - Common + * + */ + body { - background: black; margin: 10px; overflow-y: scroll; } @@ -21,22 +24,12 @@ body::before { width: 100%; height: 100%; z-index: -1; - - background-image: url("../media/bg.jpg"); - background-position: center; - background-size: cover; - opacity: 0.5; } #page-container { - background-color: var(--bg-color, rgba(35, 35, 35, 0.8)); - color: #ffffff; - max-width: 1100px; margin: 10px auto 50px; padding: 15px 0; - - box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } #page-container > * { @@ -44,28 +37,25 @@ body::before { margin-right: 15px; } +#skippers:focus-within { + position: static; + width: unset; + height: unset; +} + #banner { margin: 10px 0; width: 100%; - background: black; - background-color: var(--dim-color); - border-bottom: 1px solid var(--primary-color); position: relative; } #banner::after { content: ""; - box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 0; left: 0; right: 0; bottom: 0; - pointer-events: none; -} - -#banner.dim img { - opacity: 0.8; } #banner img { @@ -74,15 +64,6 @@ body::before { height: auto; } -a { - color: var(--primary-color); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - #skippers { position: absolute; left: -10000px; @@ -91,17 +72,6 @@ a:hover { height: 1px; } -#skippers:focus-within { - position: static; - width: unset; - height: unset; -} - -#skippers > .skipper:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - .layout-columns { display: flex; align-items: stretch; @@ -112,7 +82,6 @@ a:hover { #skippers, #footer { padding: 5px; - font-size: 0.85em; } #header, @@ -158,44 +127,49 @@ a:hover { align-self: start; } -.nav-main-links > span { - white-space: nowrap; -} - -.nav-main-links > span > a.current { - font-weight: 800; +.sidebar-column { + flex: 1 1 20%; + min-width: 150px; + max-width: 250px; + flex-basis: 250px; + align-self: flex-start; } -.nav-links-index > span:not(:first-child):not(.no-divider)::before, -.nav-links-groups > span:not(:first-child):not(.no-divider)::before { - content: "\0020\00b7\0020"; - font-weight: 800; +.sidebar-multiple { + display: flex; + flex-direction: column; } -.nav-links-hierarchy > span:not(:first-child):not(.no-divider)::before { - content: "\0020/\0020"; +.sidebar-multiple .sidebar:not(:first-child) { + margin-top: 15px; } -#header .chronology { - display: block; +.sidebar { + --content-padding: 5px; + padding: var(--content-padding); } -#header .chronology .heading, -#header .chronology .buttons { - display: inline-block; +#sidebar-left { + margin-right: 10px; } -#secondary-nav { - text-align: center; +#sidebar-right { + margin-left: 10px; } -#secondary-nav:not(.no-hide) { - display: none; +.sidebar.wide { + max-width: 350px; + flex-basis: 300px; + flex-shrink: 0; + flex-grow: 1; } -footer { - text-align: center; - font-style: oblique; +#content { + --content-padding: 20px; + box-sizing: border-box; + padding: var(--content-padding); + flex-grow: 1; + flex-shrink: 3; } .footer-content { @@ -214,56 +188,135 @@ footer { margin: 5px 12%; } -.footer-localization-links > span:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; +#cover-art-container { + float: right; + width: 40%; + max-width: 400px; + margin: -5px 0 10px 10px; } -.nowrap { - white-space: nowrap; +/* Layout - Wide (most computers) */ + +@media not all and (max-width: 900px) { + #secondary-nav:not(.no-hide) { + display: none; + } } -.icons { - font-style: normal; - white-space: nowrap; +/* Layout - Medium (tablets, some landscape mobiles) + * + * Note: Rules defined here are exclusive to "medium" width, i.e. they don't + * additionally apply to "thin". Use the later section which applies to both + * if so desired. + */ + +@media not all and (min-width: 900px), (max-width: 800px) { + body { + background: blue !important; + } } -.icon { - display: inline-block; - width: 24px; - height: 1em; - position: relative; +/* Layout - Medium or Thin */ + +@media (max-width: 900px) { + .sidebar-column:not(.no-hide) { + display: none; + } + + #secondary-nav { + display: block; + } + + .layout-columns.vertical-when-thin { + flex-direction: column; + } + + .layout-columns.vertical-when-thin > *:not(:last-child) { + margin-bottom: 10px; + } + + .sidebar-column.no-hide { + max-width: unset !important; + flex-basis: unset !important; + margin-right: 0 !important; + margin-left: 0 !important; + } + + .sidebar .news-entry:not(.first-news-entry) { + display: none; + } } -.icon > svg { - width: 24px; - height: 24px; - top: -0.25em; - position: absolute; - fill: var(--primary-color); +/* Layout - Thin (phones) */ + +@media (max-width: 600px) { + .content-columns { + columns: 1; + } + + #cover-art-container { + float: none; + margin: 0 0 40px 0; + width: 100%; + max-width: unset; + } + + /* Disable grid features, just line header children up vertically */ + + #header { + display: block; + } + + #header > div:not(:first-child) { + margin-top: 0.5em; + } } -.rerelease, -.other-group-accent { - opacity: 0.7; - font-style: oblique; +/* Design & Appearance - Layout elements */ + +body { + background: black; } -.other-group-accent { - white-space: nowrap; +body::before { + background-image: url("../media/bg.jpg"); + background-position: center; + background-size: cover; + opacity: 0.5; } -.content-columns { - columns: 2; +#page-container { + background-color: var(--bg-color, rgba(35, 35, 35, 0.8)); + color: #ffffff; + box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } -.content-columns .column { - break-inside: avoid; +#skippers > .skipper:not(:last-child)::after { + content: " \00b7 "; + font-weight: 800; } -.content-columns .column h2 { - margin-top: 0; - font-size: 1em; +#banner { + background: black; + background-color: var(--dim-color); + border-bottom: 1px solid var(--primary-color); +} + +#banner::after { + box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35); + pointer-events: none; +} + +#banner.dim img { + opacity: 0.8; +} + +#header, +#secondary-nav, +#skippers, +#footer, +.sidebar { + font-size: 0.85em; } .sidebar, @@ -288,67 +341,20 @@ footer { border-style: solid; } -.sidebar-column { - flex: 1 1 20%; - min-width: 150px; - max-width: 250px; - flex-basis: 250px; - align-self: flex-start; -} - -.sidebar-multiple { - display: flex; - flex-direction: column; +.sidebar > h1, +.sidebar > h2, +.sidebar > h3, +.sidebar > p { + text-align: center; } -.sidebar-multiple .sidebar:not(:first-child) { - margin-top: 15px; +.sidebar h1 { + font-size: 1.25em; } -.sidebar { - --content-padding: 5px; - padding: var(--content-padding); - font-size: 0.85em; -} - -#sidebar-left { - margin-right: 10px; -} - -#sidebar-right { - margin-left: 10px; -} - -.sidebar.wide { - max-width: 350px; - flex-basis: 300px; - flex-shrink: 0; - flex-grow: 1; -} - -#content { - --content-padding: 20px; - box-sizing: border-box; - padding: var(--content-padding); - flex-grow: 1; - flex-shrink: 3; - overflow-wrap: anywhere; -} - -.sidebar > h1, -.sidebar > h2, -.sidebar > h3, -.sidebar > p { - text-align: center; -} - -.sidebar h1 { - font-size: 1.25em; -} - -.sidebar h2 { - font-size: 1.1em; - margin: 0; +.sidebar h2 { + font-size: 1.1em; + margin: 0; } .sidebar h3 { @@ -464,11 +470,106 @@ footer { font-weight: normal; } +#content { + overflow-wrap: anywhere; +} + +footer { + text-align: center; + font-style: oblique; +} + +.footer-localization-links > span:not(:last-child)::after { + content: " \00b7 "; + font-weight: 800; +} + +/* Design & Appearance - Content elements */ + +a { + color: var(--primary-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.nav-main-links > span { + white-space: nowrap; +} + +.nav-main-links > span > a.current { + font-weight: 800; +} + +.nav-links-index > span:not(:first-child):not(.no-divider)::before, +.nav-links-groups > span:not(:first-child):not(.no-divider)::before { + content: "\0020\00b7\0020"; + font-weight: 800; +} + +.nav-links-hierarchy > span:not(:first-child):not(.no-divider)::before { + content: "\0020/\0020"; +} + +#header .chronology .heading, +#header .chronology .buttons { + white-space: nowrap; +} + +#secondary-nav { + text-align: center; +} + +.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(--primary-color); +} + +.rerelease, +.other-group-accent { + opacity: 0.7; + font-style: oblique; +} + +.other-group-accent { + white-space: nowrap; +} + +.content-columns { + columns: 2; +} + +.content-columns .column { + break-inside: avoid; +} + +.content-columns .column h2 { + margin-top: 0; + font-size: 1em; +} + #cover-art-container { - float: right; - width: 40%; - max-width: 400px; - margin: -5px 0 10px 10px; font-size: 0.8em; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.25); } @@ -483,6 +584,187 @@ footer { margin-top: 5px; } +.js-hide, +.js-show-once-data, +.js-hide-once-data { + display: none; +} + +a.box:focus { + outline: 3px double var(--primary-color); +} + +a.box:focus:not(:focus-visible) { + outline: none; +} + +a.box img { + display: block; + width: 100%; + height: 100%; +} + +h1 { + font-size: 1.5em; +} + +#content li { + margin-bottom: 4px; +} + +#content li i { + white-space: nowrap; +} + +#content.top-index h1, +#content.flash-index h1 { + text-align: center; + font-size: 2em; +} + +#content.flash-index h2 { + text-align: center; + font-size: 2.5em; + 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.25em; +} + +.quick-info { + text-align: center; +} + +ul.quick-info { + list-style: none; + padding-left: 0; +} + +ul.quick-info li { + display: inline-block; +} + +ul.quick-info li:not(:last-child)::after { + content: " \00b7 "; + font-weight: 800; +} + +#intro-menu { + margin: 24px 0; + padding: 10px; + background-color: #222222; + text-align: center; + border: 1px dotted var(--primary-color); + border-radius: 2px; +} + +#intro-menu p { + margin: 12px 0; +} + +#intro-menu a { + margin: 0 6px; +} + +li .by { + display: inline-block; + font-style: oblique; +} + +li .by a { + display: inline-block; +} + +p code { + font-size: 1em; + font-family: "courier new"; + font-weight: 800; +} + +blockquote { + margin-left: 40px; + max-width: 600px; + margin-right: 0; +} + +.long-content { + margin-left: 12%; + margin-right: 12%; +} + +p img { + max-width: 100%; + height: auto; +} + +dl dt { + padding-left: 40px; + max-width: 600px; +} + +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; + padding-left: 0; +} + +.album-group-list dd { + margin-left: 0; +} + +.group-chronology-link { + font-style: oblique; +} + +hr.split::before { + content: "(split)"; + color: #808080; +} + +hr.split { + position: relative; + overflow: hidden; + border: none; +} + +hr.split::after { + display: inline-block; + content: ""; + border: 1px inset #808080; + width: 100%; + position: absolute; + top: 50%; + margin-top: -2px; + margin-left: 10px; +} + +li > ul { + margin-top: 5px; +} + +/* Images */ + .image-container { border: 2px solid var(--primary-color); box-sizing: border-box; @@ -532,38 +814,42 @@ img { */ } -.js-hide, -.js-show-once-data, -.js-hide-once-data { - display: none; -} - -a.box:focus { - outline: 3px double var(--primary-color); +.reveal { + position: relative; + width: 100%; + height: 100%; } -a.box:focus:not(:focus-visible) { - outline: none; +.reveal img { + filter: blur(20px); + opacity: 0.4; } -a.box img { - display: block; - width: 100%; - height: 100%; +.reveal-text { + color: white; + position: absolute; + top: 15px; + left: 10px; + right: 10px; + text-align: center; + font-weight: bold; } -h1 { - font-size: 1.5em; +.reveal-interaction { + opacity: 0.8; } -#content li { - margin-bottom: 4px; +.reveal.revealed img { + filter: none; + opacity: 1; } -#content li i { - white-space: nowrap; +.reveal.revealed .reveal-text { + display: none; } +/* Grid listings */ + .grid-listing { display: flex; flex-wrap: wrap; @@ -648,6 +934,8 @@ h1 { font-size: 0.9em; } +/* Squares */ + .square { position: relative; width: 100%; @@ -676,186 +964,7 @@ h1 { padding-right: 100%; } -.reveal { - position: relative; - width: 100%; - height: 100%; -} - -.reveal img { - filter: blur(20px); - opacity: 0.4; -} - -.reveal-text { - color: white; - position: absolute; - top: 15px; - left: 10px; - right: 10px; - text-align: center; - font-weight: bold; -} - -.reveal-interaction { - opacity: 0.8; -} - -.reveal.revealed img { - filter: none; - opacity: 1; -} - -.reveal.revealed .reveal-text { - display: none; -} - -#content.top-index h1, -#content.flash-index h1 { - text-align: center; - font-size: 2em; -} - -#content.flash-index h2 { - text-align: center; - font-size: 2.5em; - 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.25em; -} - -.quick-info { - text-align: center; -} - -ul.quick-info { - list-style: none; - padding-left: 0; -} - -ul.quick-info li { - display: inline-block; -} - -ul.quick-info li:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - -#intro-menu { - margin: 24px 0; - padding: 10px; - background-color: #222222; - text-align: center; - border: 1px dotted var(--primary-color); - border-radius: 2px; -} - -#intro-menu p { - margin: 12px 0; -} - -#intro-menu a { - margin: 0 6px; -} - -li .by { - display: inline-block; - font-style: oblique; -} - -li .by a { - display: inline-block; -} - -p code { - font-size: 1em; - font-family: "courier new"; - font-weight: 800; -} - -blockquote { - margin-left: 40px; - max-width: 600px; - margin-right: 0; -} - -.long-content { - margin-left: 12%; - margin-right: 12%; -} - -p img { - max-width: 100%; - height: auto; -} - -dl dt { - padding-left: 40px; - max-width: 600px; -} - -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; - padding-left: 0; -} - -.album-group-list dd { - margin-left: 0; -} - -.group-chronology-link { - font-style: oblique; -} - -hr.split::before { - content: "(split)"; - color: #808080; -} - -hr.split { - position: relative; - overflow: hidden; - border: none; -} - -hr.split::after { - display: inline-block; - content: ""; - border: 1px inset #808080; - width: 100%; - position: absolute; - top: 50%; - margin-top: -2px; - margin-left: 10px; -} - -li > ul { - margin-top: 5px; -} +/* Info card */ #info-card-container { position: absolute; @@ -981,7 +1090,7 @@ li > ul { margin-bottom: 0; } -/* sticky headers */ +/* Sticky heading */ #content:not(.no-sticky-heading) > h1:first-of-type, .sidebar:not(.no-sticky-heading) h1:first-of-type { @@ -1095,7 +1204,7 @@ li > ul { contain: paint; } -/* sticky sidebar */ +/* Sticky sidebar */ .sidebar-column.sidebar.sticky-column, .sidebar-column.sidebar.sticky-last, @@ -1113,87 +1222,11 @@ li > ul { align-self: flex-start; } -/* responsive layout */ - -@media (max-width: 900px) { - .sidebar-column:not(.no-hide) { - display: none; - } - - #secondary-nav:not(.no-hide) { - display: block; - } - - .layout-columns.vertical-when-thin { - flex-direction: column; - } - - .layout-columns.vertical-when-thin > *:not(:last-child) { - margin-bottom: 10px; - } - - .sidebar-column.no-hide { - max-width: unset !important; - flex-basis: unset !important; - margin-right: 0 !important; - margin-left: 0 !important; - } - - .sidebar .news-entry:not(.first-news-entry) { - display: none; - } -} - -@media (max-width: 600px) { - .content-columns { - columns: 1; - } - - #cover-art-container { - float: none; - margin: 0 0 40px 0; - width: 100%; - max-width: unset; - } - - #header { - display: block; - } - - #header > div:not(:first-child) { - margin-top: 0.5em; - } - - #content { - border-top-style: solid; - } -} - /* important easter egg mode */ -html[data-language-code="preview-en"][data-url-key="localized.home"] - #content +html[data-language-code="preview-en"][data-url-key="localized.home"] #content h1::after { font-family: cursive; display: block; content: "(Preview Build)"; } - -html[data-language-code="preview-en"] #header h2 > :first-child::before { - content: "(Preview Build! ✨) "; - animation: preview-notice 4s infinite; -} - -@keyframes preview-notice { - 0% { - color: #cc5500; - } - - 50% { - color: #ffaa00; - } - - 100% { - color: #cc5500; - } -} -- cgit 1.3.0-6-gf8a5