1582 lines
33 KiB
CSS
1582 lines
33 KiB
CSS
/* variables */
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-Thin.ttf');
|
|
font-weight: 100;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-Light.ttf');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-Regular.ttf');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-Italic.ttf');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-Medium.ttf');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-MediumItalic.ttf');
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-Bold.ttf');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/theme/fonts/ClearSans/ClearSans-BoldItalic.ttf');
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Michroma';
|
|
src: url('/theme/fonts/Michroma/Michroma-Regular.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-ExtraLight.otf');
|
|
font-weight: 200;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-ExtraLightIt.otf');
|
|
font-weight: 200;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-Light.otf');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-LightIt.otf');
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-Regular.otf');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-It.otf');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-Medium.otf');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-MediumIt.otf');
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-Semibold.otf');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-SemiboldIt.otf');
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-Bold.otf');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-BoldIt.otf');
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-Black.otf');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
src: url('/theme/fonts/SourceCodePro/SourceCodePro-BlackIt.otf');
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
}
|
|
|
|
:root {
|
|
|
|
--scrollbar-width: 20px; /* dumb thing that css still doesn't handle */
|
|
|
|
--hue-highlight: 80deg;
|
|
--hue-success: var(--hue-highlight);
|
|
--hue-warning: 30deg;
|
|
--hue-error: 320deg;
|
|
--hue-problem: 360deg;
|
|
|
|
--alpha-inactive: 30%;
|
|
|
|
--color-bg-main: hsl(0 0% 10%);
|
|
--color-text-main: hsl(0 0% 95%);
|
|
--color-bg-alt: hsl(0 0% 5% / 80%);
|
|
--color-bg-alt-alt: hsl(0 0% 100% / 10%);
|
|
|
|
--color-highlight: hsl(var(--hue-highlight) 100% 50%);
|
|
--color-highlight-inactive: hsl(var(--hue-highlight) 100% 50% / var(--alpha-inactive));
|
|
--color-highlight-contrast: var(--color-bg-main);
|
|
|
|
--color-success: hsl(var(--hue-success) 100% 50%);
|
|
--color-success-inactive: hsl(var(--hue-success) 100% 50% / var(--alpha-inactive));
|
|
|
|
--color-warning: hsl(var(--hue-warning) 100% 50%);
|
|
--color-warning-inactive: hsl(var(--hue-warning) 100% 50% / var(--alpha-inactive));
|
|
|
|
--color-error: hsl(var(--hue-error) 100% 50%);
|
|
--color-error-inactive: hsl(var(--hue-error) 100% 50% / var(--alpha-inactive));
|
|
|
|
--color-problem-off: hsl(var(--hue-problem) 100% 50% / 0%);
|
|
--color-problem-on: hsl(var(--hue-problem) 100% 50% / 100%);
|
|
|
|
--font-main: 'Clear Sans', sans;
|
|
--font-decorative: 'Michroma', sans;
|
|
--font-monospace: 'Source Code Pro', monospace;
|
|
|
|
--distance-typographic-width: 50rem; /* make this 80rex whenever rex support drops in firefox */
|
|
--distance-main: 1rem;
|
|
--distance-major: 5rem;
|
|
--distance-minor: 0.5rem;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* animations */
|
|
|
|
@keyframes problem {
|
|
|
|
0% {
|
|
background: var(--color-bg-alt);
|
|
box-shadow: 0 0 5rem var(--color-problem-off);
|
|
}
|
|
|
|
45% {
|
|
background: var(--color-bg-alt);
|
|
box-shadow: 0 0 5rem var(--color-problem-off);
|
|
}
|
|
|
|
50% {
|
|
background: var(--color-problem-on);
|
|
box-shadow: 0 0 5rem var(--color-problem-on);
|
|
}
|
|
|
|
95% {
|
|
background: var(--color-problem-on);
|
|
box-shadow: 0 0 5rem var(--color-problem-on);
|
|
}
|
|
|
|
100% {
|
|
background: var(--color-bg-alt);
|
|
box-shadow: 0 0 5rem var(--color-problem-off);
|
|
}
|
|
}
|
|
|
|
/* scroll behavior */
|
|
:target {
|
|
scroll-margin-top: var(--distance-major);
|
|
}
|
|
|
|
/* common elements */
|
|
|
|
a {
|
|
color: var(--color-highlight-inactive);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--color-highlight);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a + .scoredlink-icon {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
ul {
|
|
list-style: square;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* layout? */
|
|
|
|
html {
|
|
background: var(--color-bg-main);
|
|
color: var(--color-text-main);
|
|
font-family: var(--font-main);
|
|
}
|
|
|
|
html, body {
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
body > header,
|
|
body > footer,
|
|
body > .menus {
|
|
background: var(--color-bg-alt);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 1000;
|
|
}
|
|
|
|
body > header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.security-info,
|
|
.seal-message {
|
|
max-width: 20rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.security-info span {
|
|
font-size: 70%;
|
|
color: var(--color-highlight-inactive);
|
|
}
|
|
|
|
.security-info .client-cert-fingerprint {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.security-info .client-cert-fingerprint.unmatched {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.logo {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logo img {
|
|
display: block;
|
|
height: 10rem;
|
|
margin: var(--distance-main) 0;
|
|
}
|
|
|
|
.seal-message {
|
|
margin-top: calc(2 * var(--distance-main));
|
|
padding: var(--distance-minor);
|
|
right: calc(2 * var(--distance-major));
|
|
font-family: var(--font-decorative);
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
font-size: 120%;
|
|
text-align: center;
|
|
background: var(--color-highlight);
|
|
color: var(--color-highlight-contrast);
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
body > .menus {
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
body > footer {
|
|
/*position: sticky;
|
|
top: 100%;*/
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: var(--distance-main);
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1; /* let main fill available screen space */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
main > .tabs {
|
|
border-bottom: var(--distance-minor) solid var(--color-highlight-inactive);
|
|
}
|
|
|
|
main > .tabs:has(a:hover),
|
|
main > .tabs:has(a:focus) {
|
|
border-color: var(--color-highlight);
|
|
}
|
|
|
|
main > h1 {
|
|
display: block;
|
|
width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* deleteme */
|
|
article > section {
|
|
margin: var(--distance-major) 0;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
article > section > .content {
|
|
background: hsla(0 0 5 / 90%);
|
|
backdrop-filter: blur(8px);
|
|
width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
padding: var(--distance-main);
|
|
} /* /deleteme */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-decorative);
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* notifications */
|
|
|
|
.notifications .messages {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.notifications .message {
|
|
background: var(--color-bg-alt);
|
|
padding: var(--distance-minor);
|
|
color: var(--color-text-main);
|
|
margin-top: var(--distance-minor);
|
|
}
|
|
|
|
.notifications .message::before {
|
|
content: "ⓘ";
|
|
margin-right: 0.5rem;
|
|
font-size: 200%;
|
|
line-height: 100%;
|
|
vertical-align: -20%; /* not middle because glyphs arent vertically centered */
|
|
}
|
|
|
|
.success {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.success::before {
|
|
content: "✔";
|
|
}
|
|
|
|
.warning {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.warning::before {
|
|
content: "⚠";
|
|
}
|
|
|
|
.error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.error::before {
|
|
content: "✖";
|
|
}
|
|
|
|
/* menus */
|
|
|
|
nav menu {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: var(--distance-main);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav a {
|
|
display: block;
|
|
color: var(--color-text-main);
|
|
text-decoration: none;
|
|
font-family: var(--font-decorative);
|
|
font-size: 150%;
|
|
padding: var(--distance-main);
|
|
}
|
|
|
|
nav a.active {
|
|
background: var(--color-highlight-inactive);
|
|
color: var(--color-highlight-contrast);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a:hover,
|
|
nav a:focus {
|
|
background: var(--color-highlight);
|
|
color: var(--color-highlight-contrast);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a.trail {
|
|
box-sizing: border-box;
|
|
border-bottom: var(--distance-minor) solid var(--color-highlight);
|
|
padding-bottom: calc( var(--distance-main) - var(--distance-minor) );
|
|
}
|
|
|
|
/* footer */
|
|
|
|
body > footer menu {
|
|
height: 100%;
|
|
}
|
|
|
|
body > footer menu li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
body > footer menu a {
|
|
background: transparent;
|
|
font-size: 1.1rem;
|
|
color: hsl(0 0% 60%);
|
|
}
|
|
|
|
body > footer menu a:hover,
|
|
body > footer menu a:focus {
|
|
color: hsl(0 0% 90%) !important;
|
|
background: transparent;
|
|
}
|
|
|
|
body > footer menu a.active,
|
|
body > footer menu a.trail {
|
|
background: transparent;
|
|
color: hsl(0 0% 75%);
|
|
}
|
|
|
|
/* content types */
|
|
|
|
/* fallback error page */
|
|
#problem::before {
|
|
content: '';
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
border-radius: 5rem;
|
|
border: 1rem solid #666;
|
|
margin: 0 auto;
|
|
animation: problem 2s ease-in-out infinite;
|
|
}
|
|
|
|
#problem {
|
|
position: relative;
|
|
width: 20rem;
|
|
min-height: 30rem;
|
|
margin: 0 auto;
|
|
padding: var(--distance-main);
|
|
background: var(--color-bg-alt);
|
|
top: 50vh;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
#problem h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
/* regular error page */
|
|
|
|
body.content-type-errorpage main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
article.errorpage {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: relative;
|
|
width: 40rem;
|
|
min-height: 10rem;
|
|
margin: 0 auto;
|
|
padding: var(--distance-main);
|
|
background: var(--color-highlight);
|
|
color: var(--color-highlight-contrast);
|
|
font-size: 200%;
|
|
font-family: var(--font-decorative);
|
|
}
|
|
|
|
article.errorpage > .moji {
|
|
font-size: 300%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
article.errorpage > .content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
margin-left: var(--distance-main);
|
|
}
|
|
|
|
article.errorpage > .content > h1 {
|
|
margin: 0;
|
|
font-size: 200%;
|
|
font-weight: bold;
|
|
background: var(--color-highlight-contrast);
|
|
color: var(--color-highlight);
|
|
}
|
|
|
|
article.errorpage > .content > .message {
|
|
margin-top: var(--distance-main);
|
|
}
|
|
|
|
.pagination {
|
|
font-size: 0.7rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pagination nav menu {
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination nav a {
|
|
line-height: 1em;
|
|
text-align: center;
|
|
background: var(--color-highlight-inactive);
|
|
}
|
|
|
|
.pagination nav a.current-page {
|
|
background: var(--color-highlight);
|
|
}
|
|
|
|
/* common constructs */
|
|
|
|
article .unpublished {
|
|
position: absolute;
|
|
font-size: 250%;
|
|
margin-left: var(--distance-minor);
|
|
margin-top: var(--distance-minor);
|
|
cursor: help;
|
|
}
|
|
|
|
/* generic modals */
|
|
|
|
.modal {
|
|
display: none;
|
|
}
|
|
|
|
.modal:target,
|
|
.modal:has(:target) {
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
z-index: 2000;
|
|
min-width: 100vw;
|
|
/*backdrop-filter: blur(8px); */ /* breaks fixed for a[href="#close"] */
|
|
/* see: https://stackoverflow.com/a/1384613 */
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.modal a[href="#close"] {
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 2100;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 1rem;
|
|
font-size: 4rem;
|
|
line-height: 4rem;
|
|
text-decoration: none;
|
|
background: var(--color-bg-alt);
|
|
backdrop-filter: blur(8px);
|
|
color: var(--color-error-inactive);
|
|
|
|
}
|
|
|
|
.modal a[href="#close"]:hover {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.modal img {
|
|
/* enable images to be shown at full scale, even if too big for viewport */
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
overflow: visible !important;
|
|
object-fit: none;
|
|
}
|
|
|
|
/* checkbox for clean content toggles */
|
|
/* we use this construct because <details> isn't animatable */
|
|
|
|
.toggle-input {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-label {
|
|
display: inline-block !important;
|
|
padding: var(--distance-minor) var(--distance-main);
|
|
background: var(--color-highlight-inactive);
|
|
color: var(--color-highlight-contrast);
|
|
cursor: s-resize;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
transition: background 0.2s ease-in-out;
|
|
}
|
|
|
|
.toggle-label::after {
|
|
content: '' !important;
|
|
}
|
|
|
|
.toggle-label:hover,
|
|
.toggle-input:focus + .toggle-label {
|
|
background: var(--color-highlight);
|
|
}
|
|
|
|
.toggle-input + .toggle-label + * {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-in-out;
|
|
}
|
|
|
|
.toggle-input:checked + .toggle-label {
|
|
cursor: n-resize;
|
|
}
|
|
|
|
.toggle-input:checked + .toggle-label + * {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
/* comments */
|
|
|
|
.comment {
|
|
border-left: var(--distance-minor) solid;
|
|
}
|
|
|
|
/* teasers */
|
|
|
|
.mode-teaser,
|
|
.mode-admin-teaser {
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.mode-teaser > :first-child,
|
|
.mode-admin-teaser > :first-child {
|
|
margin: 0 var(--distance-main);
|
|
margin-top: var(--distance-main);
|
|
}
|
|
|
|
/* lead images */
|
|
|
|
.mode-teaser .lead-image img,
|
|
.mode-admin-teaser .lead-image img {
|
|
width: 100%;
|
|
height: 20rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mode-teaser .lead-image .lead-image-fallback,
|
|
.mode-admin-teaser .lead-image .lead-image-fallback {
|
|
/* fallback is the logo, which is quadratic, center it at 20rem height */
|
|
display: block;
|
|
width: 20rem;
|
|
max-width: 100%;
|
|
height: 20rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mode-teaser .lead-image .description,
|
|
.mode-admin-teaser .lead-image .description {
|
|
display: none;
|
|
}
|
|
|
|
.mode-full .lead-image img {
|
|
max-width: 100vw;
|
|
max-height: 50vh;
|
|
}
|
|
|
|
.mode-teaser > footer .tabs,
|
|
.mode-admin-teaser > footer .tabs {
|
|
font-size: 80%
|
|
}
|
|
|
|
.mode-teaser img,
|
|
.mode-admin-teaser img,
|
|
.mode-teaser video,
|
|
.mode-admin-teaser video {
|
|
/*max-height: calc(100vh - (3 * var(--distance-major)));*/
|
|
max-height: 50vh;
|
|
}
|
|
|
|
article.administerable > header {
|
|
position: relative; /* makes absolute in > h1 relative to header bounds */
|
|
}
|
|
|
|
article.administerable > header > h1 {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
font-size: 200%;
|
|
width: 100vw;
|
|
background: var(--color-bg-alt);
|
|
backdrop-filter: blur(8px);
|
|
margin: 0;
|
|
padding: var(--distance-main) calc(var(--distance-major) * 3);
|
|
text-align: center;
|
|
}
|
|
|
|
article.administerable > header > h1.on-lead-image {
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
translate: 0 -50%;
|
|
|
|
}
|
|
|
|
article.administerable > header > article.upload {
|
|
margin-bottom: var(--distance-major);
|
|
}
|
|
|
|
/* listings */
|
|
|
|
.listing {
|
|
margin: var(--distance-main) 0;
|
|
}
|
|
|
|
.listing > .noitems {
|
|
display: block;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.listing > ul {
|
|
list-style: none;
|
|
margin: var(--distance-main) var(--distance-major);
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--distance-main);
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.listing > ul > li {
|
|
flex-basis: calc(33vw - (2 * var(--distance-main)) - (2 * var(--distance-major)) );
|
|
flex-grow: 1;
|
|
min-width: 20rem;
|
|
max-width: 40rem;
|
|
}
|
|
|
|
.listing > ul > li > .mode-teaser,
|
|
.listing > ul > li > .mode-admin-teaser {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
|
|
/* renderables */
|
|
|
|
article.renderable > .content > h1,
|
|
article.renderable > .content > h2,
|
|
article.renderable > .content > h3,
|
|
article.renderable > .content > h4,
|
|
article.renderable > .content > h5,
|
|
article.renderable > .content > h6 {
|
|
width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
article.administerable > .content section {
|
|
background: hsla(0 0 5 / 90%);
|
|
backdrop-filter: blur(8px);
|
|
max-width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
padding: var(--distance-main);
|
|
margin-bottom: var(--distance-main);
|
|
}
|
|
|
|
article.administerable > .content section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
article.administerable > .content section:has(p:empty:only-child) {
|
|
|
|
/* this is a hack that takes care of an edge case for another hack.
|
|
* namely, the inline_renderable and section markdown plugins have
|
|
* no awareness of each other (because they happen in different "chains",
|
|
* 'core' vs. 'inline'). inlin_renderable does `</section>{ body}<section>`
|
|
* to break its contents out of the current <section>, but if another
|
|
* heading is encountered directly after a renderable, it will result in
|
|
* an "empty" <section><p></p></section>.
|
|
*/
|
|
display: none;
|
|
}
|
|
|
|
/* uploads */
|
|
|
|
article.upload .description {
|
|
position: absolute;
|
|
translate: 0 -100%;
|
|
background: var(--color-bg-alt);
|
|
backdrop-filter: blur(8px);
|
|
padding: var(--distance-main);
|
|
font-style: italic;
|
|
}
|
|
|
|
article.image img,
|
|
article.video video {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
article.image img {
|
|
overflow: hidden;
|
|
}
|
|
|
|
article.image img,
|
|
article.image source {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* galleries (and their modal behavior) */
|
|
|
|
article.gallery {}
|
|
|
|
article.gallery .gallery-preview {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
article.gallery img.preview {
|
|
width: 10rem;
|
|
height: 10rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
article.gallery .gallery-item {
|
|
position: fixed;
|
|
z-index: 2001;
|
|
background: var(--color-bg-main);
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
article.gallery .gallery-item:target {
|
|
z-index: 2002;
|
|
}
|
|
|
|
article.gallery .gallery-item-image {
|
|
width: 100vw;
|
|
height: calc(100vh - 10rem);
|
|
}
|
|
|
|
article.gallery .gallery-item-image > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: scale-down;
|
|
}
|
|
|
|
article.gallery .gallery-item-image > .description {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 10rem; /* this should hopefully mean that multi-line descriptions grow upwards */
|
|
/* TODO: max-height + overflow-y: hidden to make really long descriptions scrollable? */
|
|
z-index: 2003;
|
|
background: var(--color-bg-alt);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
article.gallery .gallery-item-image .gallery-arrows ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
article.gallery .gallery-item-image .gallery-arrows ul a {
|
|
display: inline-block;
|
|
position: fixed;
|
|
z-index: 2003;
|
|
top: calc((100vh - 10rem) / 2);
|
|
translate: 0 -50%;
|
|
font-size: 5rem;
|
|
opacity: 0.5;
|
|
text-shadow: 0 0 1rem #000;
|
|
}
|
|
|
|
article.gallery .gallery-item-image .gallery-arrows ul a:hover {
|
|
background: transparent;
|
|
color: var(--color-text-main);
|
|
opacity: 1;
|
|
}
|
|
|
|
article.gallery .gallery-item-image .gallery-arrows ul .previous {
|
|
left: var(--distance-major);
|
|
}
|
|
|
|
article.gallery .gallery-item-image .gallery-arrows ul .next {
|
|
right: var(--distance-major);
|
|
}
|
|
|
|
article.gallery .gallery-item .gallery-item-preview {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
article.gallery .gallery-item .gallery-item-preview.active {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
/* forms */
|
|
|
|
input, textarea {
|
|
--color-border: var(--color-highlight-inactive);
|
|
|
|
padding: var(--distance-main);
|
|
background: var(--color-bg-alt);
|
|
color: var(--color-text-main);
|
|
font-size: 100%;
|
|
border: 0 none;
|
|
border-bottom: 2px solid var(--color-border);
|
|
font-family: var(--font-monospace);
|
|
font-weight: 500;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
width: auto;
|
|
}
|
|
|
|
select {
|
|
--color-border: var(--color-highlight-inactive);
|
|
padding: var(--distance-minor);
|
|
background: var(--color-bg-alt);
|
|
color: var(--color-text-main);
|
|
font-size: 120%;
|
|
border: 0 none;
|
|
border-bottom: 2px solid var(--color-border);
|
|
}
|
|
|
|
select,
|
|
input[type="file"] {
|
|
min-width: 10rem;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
--color-border: var(--color-highlight);
|
|
outline: none;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
min-height: 15em;
|
|
}
|
|
|
|
fieldset {
|
|
|
|
border: 0 none;
|
|
background: var(--color-bg-alt-alt);
|
|
}
|
|
|
|
fieldset fieldset {
|
|
background: var(--color-bg-main);
|
|
}
|
|
|
|
fieldset fieldset fieldset {
|
|
background: var(--color-bg-alt-alt);
|
|
}
|
|
|
|
fieldset fieldset fieldset fieldset {
|
|
background: var(--color-bg-main);
|
|
}
|
|
|
|
fieldset fieldset fieldset fieldset fieldset {
|
|
background: var(--color-bg-alt-alt);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
background: var(--color-bg-alt);
|
|
color: var(--color-text-main);
|
|
border: 0 none;
|
|
padding: var(--distance-main);
|
|
font-family: var(--font-decorative);
|
|
font-size: 120%;
|
|
}
|
|
|
|
button:hover,
|
|
button:active {
|
|
background: var(--color-highlight);
|
|
color: var(--color-highlight-contrast);
|
|
}
|
|
|
|
form .field,
|
|
form .buttons {
|
|
max-width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
form .field {
|
|
margin-top: var(--distance-main);
|
|
}
|
|
|
|
form .field .invalid,
|
|
form .field :invalid {
|
|
border-color: var(--color-error-inactive);
|
|
}
|
|
|
|
form .field .invalid:focus,
|
|
form .field :invalid:focus {
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
form .field label {
|
|
display: block;
|
|
margin-bottom: var(--distance-minor);
|
|
font-weight: bold;
|
|
}
|
|
|
|
form .field label::after {
|
|
content: ':';
|
|
}
|
|
|
|
form .field.groupablefield label {
|
|
display: inline;
|
|
}
|
|
|
|
form .field.groupablefield label::after {
|
|
content: '';
|
|
}
|
|
|
|
form .field-help-wrapper {
|
|
margin-top: var(--distance-minor);
|
|
}
|
|
|
|
.field input[type="range"]::-moz-range-thumb,
|
|
.field input[type="range"]::-webkit-slider-thumb {
|
|
background: var(--color-text-main);
|
|
}
|
|
|
|
.field input[type="range"]::-moz-range-progress {
|
|
background: #aaa;
|
|
}
|
|
|
|
.field input[type="range"]::-moz-range-track {
|
|
background: #333;
|
|
}
|
|
|
|
form .buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: var(--distance-main);
|
|
}
|
|
|
|
form .buttons:has(button:only-child) {
|
|
justify-content: end;
|
|
}
|
|
|
|
/* search */
|
|
|
|
body > .menus .searchminiform {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
body > .menus .searchminiform .field,
|
|
body > .menus .searchminiform input,
|
|
body > .menus .searchminiform button {
|
|
height: 100%;
|
|
}
|
|
|
|
body > .menus .searchminiform .field,
|
|
body > .menus .searchminiform .buttons {
|
|
/* reset some of the normal form styles */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body > .menus .searchminiform input {
|
|
background: var(--color-bg-alt-alt);
|
|
}
|
|
|
|
body > .menus .searchminiform .field-help-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.searchpage #search-help-wrapper {
|
|
max-width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ScoredLink view */
|
|
.scoredlink {
|
|
max-width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
.scoredlink ul.fields {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.scoredlink a.url {
|
|
/*background-image: url('/theme/svg/link.svg#active');*/
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position-x: right;
|
|
padding-right: 1.5em; /* leave enough space for background icon */
|
|
font-size: 150%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.scoredlink .field.external-site-count {
|
|
font-size: 120%;
|
|
}
|
|
|
|
.scoredlink .field .value {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.scoredlink .field .explanation {
|
|
font-size: 1rem;
|
|
margin-bottom: var(--distance-main);
|
|
}
|
|
|
|
/* Propaganda view */
|
|
|
|
.propaganda .text,
|
|
.propaganda .pieces {
|
|
margin-top: var(--distance-main);
|
|
}
|
|
|
|
.propaganda.mode-full .propagandapiece {
|
|
/*padding: var(--distance-main) 0;*/
|
|
margin-bottom: var(--distance-main);
|
|
padding-bottom: 1px; /* hack to ensure margin doesn't spill out of container */
|
|
}
|
|
|
|
.propagandapiece .preview img {
|
|
max-width: 100%;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.propagandapiece:nth-child(odd) {
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.propagandapiece:nth-child(odd) > .content > section {
|
|
background: transparent;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.propagandapiece:nth-child(even) {
|
|
}
|
|
|
|
.propagandapiece .files {
|
|
width: var(--distance-typographic-width);
|
|
padding: var(--distance-main);
|
|
margin: var(--distance-main) auto;
|
|
}
|
|
|
|
.propagandapiece:nth-child(odd) .files {
|
|
background: var(--color-bg-main);
|
|
}
|
|
|
|
.propagandapiece:nth-child(even) .files {
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo {
|
|
height: 4rem; /* remove -100% y-translated filesize from height */
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo a.download {
|
|
display: block;
|
|
padding-left: 4.5rem;
|
|
line-height: 4rem; /* smaller size, determines background size */
|
|
background-image: url('/theme/svg/download.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo a.download:hover {
|
|
background-image: url('/theme/svg/download.svg#hover');
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo a.download:active {
|
|
background-image: url('/theme/svg/download.svg#pressed');
|
|
}
|
|
|
|
.propagandapiece .files .fileinfo .filesize {
|
|
display: block;
|
|
margin-left: 4.5rem;
|
|
translate: 0 -100%;
|
|
}
|
|
|
|
/*.propagandapiece .files > .fileinfo {
|
|
display: table-row;
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo > * {
|
|
display: table-cell;
|
|
background: var(--color-highlight);
|
|
color: var(--color-highlight-contrast);
|
|
padding: var(--distance-minor);
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo > *:first-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.propagandapiece .files > .fileinfo > *:last-child {
|
|
text-align: right;
|
|
}*/
|
|
|
|
.propagandapiece .modal article,
|
|
.propagandapiece .modal .content {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.propagandapiece .modal .content {
|
|
/* vertical centering for smaller than viewport height */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.propagandapiece .modal img {
|
|
}
|
|
|
|
.propaganda.mode-teaser .preview {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.propaganda.mode-teaser .preview > * {
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
flex-basis: 25%;
|
|
}
|
|
|
|
.propaganda.mode-teaser .preview > :first-child {
|
|
flex-basis: 100%;
|
|
flex-grow: 4;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.propaganda.mode-teaser .preview > :nth-child(2),
|
|
.propaganda.mode-teaser .preview > :nth-child(3) {
|
|
flex-basis: 50%;
|
|
flex-grow: 2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
|
|
.propaganda.mode-teaser .preview .content,
|
|
.propaganda.mode-teaser .preview article.upload,
|
|
.propaganda.mode-teaser .preview img {
|
|
height: 100%;
|
|
}
|
|
|
|
.propaganda.mode-teaser .preview img {
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Propaganda admin */
|
|
|
|
fieldset.propagandapiece-wrapper {
|
|
|
|
/* reset default form width */
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
fieldset.propagandapiece-wrapper > .fields {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
fieldset.propagandapiece-wrapper > .fields > .propagandapieceform {
|
|
max-width: calc(100% - 8rem);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
fieldset.propagandapiece-wrapper > .fields > .form-order {
|
|
}
|
|
|
|
fieldset.propagandapiece-wrapper > .fields > .form-order > .buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 0;
|
|
height: 100%;
|
|
font-size: 500%;
|
|
}
|
|
|
|
.propagandapieceform > .fields {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.propagandapieceform > .fields > .field {
|
|
margin: 0;
|
|
margin-top: var(--distance-main);
|
|
}
|
|
|
|
.propagandapieceform > .fields > .field-collection_id,
|
|
.propagandapieceform > .fields > .field-order_pos,
|
|
.propagandapieceform > .fields > .field-description {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.propagandapieceform > .fields > .field-collection_id > select,
|
|
.propagandapieceform > .fields > .field-collection_id > label,
|
|
.propagandapieceform > .fields > .field-order_pos > input,
|
|
.propagandapieceform > .fields > .field-order_pos > label,
|
|
.propagandapieceform > .fields > .field-description > textarea,
|
|
.propagandapieceform > .fields > .field-description > label {
|
|
display: block;
|
|
min-width: var(--distance-typographic-width);
|
|
width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.propagandapieceform > .fields > .field-preview {
|
|
flex-basis: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.propagandapieceform > .fields > .field-items {
|
|
flex-basis: 67%;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.propagandapieceform .propagandapieceitemform.form-new,
|
|
.propagandapieceform .propagandapieceitem-wrapper,
|
|
.propagandapieceform .propagandapieceitem-wrapper > .fields > .field {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.galleryitem-wrapper > .fields,
|
|
.propagandapieceitem-wrapper > .fields {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.form-order > .buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: calc(100% - var(--distance-main));
|
|
}
|
|
|
|
.propagandapieceitemform.form-new > .fields::before {
|
|
content: ' ';
|
|
flex-basis: 25%;
|
|
}
|
|
|
|
.propagandapieceitemform {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.propagandapieceitemform > .fields {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.propagandapieceitemform > .fields > .field-piece_id,
|
|
.propagandapieceitemform > .fields > .field-order_pos {
|
|
min-width: 100%; /* enforces full width, even with flex */
|
|
}
|
|
|
|
.propagandapieceitemform > .fields > .field-piece_id > select,
|
|
.propagandapieceitemform > .fields > .field-piece_id > label,
|
|
.propagandapieceitemform > .fields > .field-order_pos > input,
|
|
.propagandapieceitemform > .fields > .field-order_pos > label {
|
|
display: block;
|
|
width: var(--distance-typographic-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.propagandapieceitemform > .fields > .field-preview {
|
|
max-width: 25%;
|
|
}
|
|
|
|
.propagandapieceitemform > .fields > .fieldset {
|
|
flex-basis: 25%;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.propagandapieceitemform > .fields > .fieldset.form-order > .buttons {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin: 0;
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.propagandapieceitemform > .fields > .fieldset.form-order > .buttons > button {
|
|
font-size: 200%;
|
|
}
|
|
|
|
.propagandapieceitemform > .buttons {
|
|
max-width: 100%;
|
|
flex-basis: 100%; /* ensures fieldset buttons are *below* the row-oriented rest of the fieldset */
|
|
}
|
|
|
|
/* THE BUTTON */
|
|
|
|
.buttonform {
|
|
padding-bottom: 2rem; /* 1 rem fake 3d side / translation + 1rem space */
|
|
}
|
|
|
|
.buttonform > .intro {
|
|
display: block;
|
|
text-align: center;
|
|
font-family: var(--font-decorative);
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.buttonform > .intro em {
|
|
color: var(--color-highlight);
|
|
}
|
|
|
|
#the-button {
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: var(--distance-major);
|
|
padding: 0;
|
|
width: 12rem;
|
|
height: 12rem;
|
|
font-size: 9rem;
|
|
font-family: revert;
|
|
background: hsl(var(--hue-error) 100% 30%);
|
|
color: var(--color-bg-alt);
|
|
border: 0 none;
|
|
border-radius: 6rem;
|
|
box-shadow: 0 1rem hsl(var(--hue-error) 100% 20%);
|
|
transition:
|
|
translate 0.5s ease-in-out,
|
|
box-shadow 0.5s ease-in-out,
|
|
background 0.5s ease-in-out;
|
|
}
|
|
|
|
#the-button:hover,
|
|
#the-button:focus,
|
|
#the-button:active {
|
|
translate: 0 0.75rem;
|
|
box-shadow: 0 0.25rem hsl(var(--hue-error) 100% 20%);
|
|
background: hsl(var(--hue-error) 100% 40%);
|
|
}
|
|
|
|
#the-button:active {
|
|
translate: 0 1rem;
|
|
box-shadow: 0 0 hsl(var(--hue-error) 100% 20%);
|
|
background: var(--color-error);
|
|
}
|
|
|
|
/* no-adblock detection */
|
|
.ad {
|
|
display: none;
|
|
}
|