214 lines
9.7 KiB
HTML
214 lines
9.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Filadelfia myndhvelfing</title>
|
|
<base href="/">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
|
<style>
|
|
|
|
[hidden] { display: none !important; }
|
|
|
|
:root { --bg: #fff; --bg-component: #f3f7ff; --bg-component-half: #f3f7ff77; --bg-component-alt: #ffd99c; --color: #031131; --color-alt: #7a9ad3; --main: #18597d; --main-fg: #fff; --error: red; --error-bg: hsl(0, 75%, 80%); } /* Box sizing rules */
|
|
*, *::before, *::after { box-sizing: border-box;
|
|
}
|
|
|
|
/* Remove default margin */
|
|
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
|
|
|
|
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; font-size: 16px; font-family: 'Inter var', Helvetica, Arial, sans-serif; font-variation-settings: "slnt" 0; font-feature-settings: "case", "frac", "tnum", "ss02", "calt", "ccmp", "kern"; background: var(--bg); color: var(--color); display: flex; flex-direction: column; }
|
|
|
|
.italic { font-variation-settings: "slnt" 10deg; }
|
|
|
|
input, button, textarea, select { font: inherit; }
|
|
|
|
h1 { font-size: 1.88rem; }
|
|
h2 { font-size: 1.66rem; }
|
|
h3 { font-size: 1.44rem; }
|
|
h4 { font-size: 1.22rem; }
|
|
h5 { font-size: 1.0rem; }
|
|
|
|
a, a:visited, button { text-decoration: underline; border: none; padding: 0; margin: 0; font-weight: bold; cursor: pointer; color: var(--main); background: transparent; }
|
|
h1 { margin-bottom: 1rem; }
|
|
#main { flex: 2 1 auto; display: flex; flex-direction: column; }
|
|
.page { flex: 2 1 auto; display: flex; flex-direction: column; }
|
|
.modal { flex: 2 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
|
|
.modal h3 { text-align: center; margin-bottom: 1rem; }
|
|
.error { color: var(--error); }
|
|
.modal form { background: var(--bg-component); border-radius: 20px; width: 100%; max-width: 500px; margin: 2rem; padding: 1rem; display: flex; flex-direction: column; }
|
|
.loading-spinner { display: inline-block; width: 80px; height: 80px; margin-top: 0.5rem; align-self: center; }
|
|
.loading-spinner:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid var(--main); border-color: var(--main) transparent var(--main) transparent; animation: loading-spinner 1.2s linear infinite; }
|
|
@keyframes loading-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
|
|
/* Common components */
|
|
|
|
.row { display: flex; }
|
|
.column { display: flex; flex-direction: column; }
|
|
.filler { flex-grow: 2; }
|
|
|
|
input[type=text],
|
|
input[type=password],
|
|
input[type=datetime] { border: 1px solid var(--main); background: #fff; color: var(--color); border-radius: 0; padding: 0.25rem; line-height: 1rem; outline: none; width: 100%; }
|
|
|
|
input[type=text]:disabled,
|
|
input[type=password]:disabled,
|
|
input[type=datetime]:disabled { background: var(--bg-component); border-color: var(--color-alt); color: var(--color-alt); }
|
|
|
|
.form-row input:disabled + button { border-color: var(--color-alt); }
|
|
.form-row { display: flex; position: relative; flex-wrap: wrap; }
|
|
.form-row input { flex: 2 1 auto; }
|
|
.form-row > input { width: auto; }
|
|
.form-row .form-column { display: flex; flex-direction: column; justify-content: space-around; }
|
|
.form-row button { min-width: 30px; text-align: center; border: 1px solid var(--main); border-left: none; background: var(--bg-component); text-decoration: none; }
|
|
.form-row.image-banner { background-size: cover; background-color: white; border: 2px dashed var(--main); aspect-ratio: 16 / 9; align-self: center; width: 100%; max-width: 360px; }
|
|
.form-row .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
|
|
|
|
input[type=text]:focus,
|
|
input[type=password]:focus,
|
|
input[type=datetime]:focus { outline: 1px solid var(--main); }
|
|
.button, input[type=submit] { background: var(--main); color:var(--main-fg); border-radius: 10px; padding: 0.25rem 1rem; border: none; margin: 1rem 0 2rem; align-self: center; cursor: pointer; text-decoration: none; }
|
|
|
|
.button.spinner, input[type=submit].spinner { height: 2rem; margin-top: 2rem; margin-bottom: 1.5rem; }
|
|
.button-alert { background: var(--error-bg); color: var(--color); }
|
|
|
|
.loading-bar { border: 1px solid var(--main); background: var(--bg-component); }
|
|
.loading-bar::after { height: 1rem; background: var(--main); min-width: 1px; content: ''; display: block; width: var(--progress); transition: width 3s; }
|
|
|
|
form p, label { font-size: 0.75rem; font-weight: 500; margin: 0.75rem 0 0.5rem 0; display: block; }
|
|
form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-alt); }
|
|
|
|
/* Nav */
|
|
|
|
#header { background: var(--bg-component); }
|
|
|
|
#header nav { display: flex; }
|
|
#header nav,
|
|
#header .nav { text-align: center; padding: 0.5rem 1rem 0.5rem 0; justify-content: flex-end; flex-wrap: wrap; }
|
|
|
|
#header nav a,
|
|
#header nav button { margin-left: 1rem; }
|
|
|
|
#header h4 { flex: 2 1 auto; margin: -0.5rem; }
|
|
|
|
#header h4 a,
|
|
#header h4 a:visited { background: url('/assets/logo_nobg.svg') left center no-repeat; background-size: auto calc(3rem - 4px); height: 3rem; display: inline-block; padding-left: 3rem; line-height: 3rem; }
|
|
|
|
#header .link { font-size: 1.0rem; line-height: 2rem; font-weight: normal; padding: 0 0.5rem; }
|
|
#header .changelang { font-size: 1.2rem; }
|
|
#header .logout,
|
|
#header .upload { padding: 0.25rem 1.5rem; border-radius: 2rem; text-decoration: none; }
|
|
|
|
#header .logout { background: var(--bg-component-alt); color: var(--color); }
|
|
#header .upload { background: var(--main); color: var(--main-fg); }
|
|
#header .nav { overflow-x: hidden; padding: 0.75rem 1rem 0.25rem; min-height: 4rem; align-items: flex-start; border-bottom: 1px solid #0001; }
|
|
#header .nav:hover { overflow-x: auto; }
|
|
#header .nav .inner { padding-top: 0.5rem; }
|
|
#header .nav a { margin: 0 0.25rem; padding: 0.25rem 1.5rem; border-radius: 3rem; }
|
|
#header .nav a.empty { opacity: 0.5; }
|
|
#header .nav a.active { background: var(--bg-component-alt); color: var(--color); text-decoration: none; }
|
|
#header .error { background: var(--error-bg); color: var(--color); font-size: 0.8rem; text-align: center; padding: 0.25rem; cursor: pointer; }
|
|
|
|
/* Main */
|
|
|
|
.full-error { background: var(--error-bg); color: var(--color); font-size: 0.8rem; text-align: center; padding: 0.25rem; cursor: pointer; flex: 2 1 auto; display: flex; justify-content: center; align-items: center; }
|
|
|
|
footer { text-align: center; padding: 1rem; }
|
|
|
|
footer a { font-size: 0.8rem; }
|
|
|
|
/* login */
|
|
/* upload */
|
|
|
|
.page-login,
|
|
.page-upload { background-image: url('./assets/bg.avif'); background-repeat: no-repeat; background-position: center; background-size: cover; }
|
|
.page-login .modal form,
|
|
.page-upload .modal form { backdrop-filter: blur(10px); background: var(--bg-component-half); }
|
|
|
|
/* browse */
|
|
|
|
.gallery { margin: 1rem; display: flex; flex-direction: column; }
|
|
.gallery-year { margin: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--main); text-align: center; font-size: 2rem; }
|
|
.gallery-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; }
|
|
.gallery .group { display: flex; flex-wrap: wrap; }
|
|
.gallery .group a { width: calc(50vw - 4rem); max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); }
|
|
|
|
.gallery .group a span { align-self: stretch; text-align: center; background: #fffb; }
|
|
|
|
/* Player */
|
|
|
|
.player { background: black; text-align: center; margin-bottom: 1rem; }
|
|
.player video { margin: 0 auto; width: 1280px; max-width: 100%; aspect-ratio: 16 / 9; }
|
|
|
|
/* article */
|
|
|
|
.article { width: 100%; max-width: 1280px; padding: 0.5rem; align-self: center; margin-bottom: 5rem; }
|
|
.article .full-error { margin-top: 1rem; }
|
|
.article-name { flex: 2 1 auto; margin-left: 1rem; }
|
|
.article h1 { margin: 0; }
|
|
.article h1,
|
|
.article p { padding: 0 0.5rem 0.5rem; }
|
|
|
|
/* table */
|
|
|
|
.table { display: grid; column-gap: 0; row-gap: 0; grid-template-columns: minmax(150px, 1.33fr) minmax(150px, 2.33fr); }
|
|
.table-row { display: contents; }
|
|
.table-row:nth-child(odd) .table-item { background: #f8f6ff; }
|
|
.table-item { padding: 0.5rem; }
|
|
|
|
/* holdbutton */
|
|
.holdbutton {
|
|
--hold-bg: var(--bg-component);
|
|
--hold-color: var(--main);
|
|
--hold-fill: var(--main);
|
|
--hold-fill-fg: white;
|
|
display: inline-block;
|
|
background: var(--hold-bg);
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
.holdbutton .inner {
|
|
padding: 0.25rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
background: var(--hold-color);
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.holdbutton.holdbutton-active {
|
|
background: linear-gradient( var(--hold-fill) , var(--hold-fill)) var(--hold-bg) no-repeat 0 0;
|
|
background-size: 0 100%;
|
|
animation: stripes 2s linear 1 forwards;
|
|
}
|
|
.holdbutton.holdbutton-active div.inner {
|
|
background: linear-gradient( var(--hold-fill-fg), var(--hold-fill-fg)) var(--hold-color) no-repeat 0 0;
|
|
background-size: 0 100%;
|
|
animation: stripes 2s linear 1 forwards;
|
|
background-clip: text;
|
|
}
|
|
|
|
@keyframes stripes { to { background-size: 100% 100%; } }
|
|
|
|
@media (pointer:coarse) {
|
|
#header .nav { overflow-x: scroll; }
|
|
}
|
|
@media screen and (max-width: 700px){
|
|
.gallery, .gallery-year { margin: 0.25rem; }
|
|
.gallery-month { margin: 0rem 0.25rem 0.25rem; }
|
|
.gallery .group a { margin: 0 0.25rem 0.25rem; width: calc(50vw - 1rem); font-size: min(3vw, 1rem); }
|
|
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header"></div>
|
|
<main id="main"></main>
|
|
<script type="text/javascript" src="/assets/app.js?v=2"></script>
|
|
</body>
|
|
</html>
|