|
|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Filadelfia web portal</title>
|
|
|
|
|
<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">
|
|
|
|
|
@ -83,8 +83,9 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
|
|
|
|
|
|
|
|
|
|
#header { background: var(--bg-component); }
|
|
|
|
|
|
|
|
|
|
#header nav { display: flex; }
|
|
|
|
|
#header nav,
|
|
|
|
|
#header .nav { display: flex; padding: 0.5rem 1rem 0.5rem 0; }
|
|
|
|
|
#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; }
|
|
|
|
|
@ -103,7 +104,7 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
|
|
|
|
|
#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 { flex: 2 1 auto; display: flex; justify-content: center; }
|
|
|
|
|
#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; }
|
|
|
|
|
@ -131,7 +132,7 @@ footer a { font-size: 0.8rem; }
|
|
|
|
|
.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: 40vw; 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 { 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; }
|
|
|
|
|
|
|
|
|
|
@ -192,6 +193,16 @@ footer a { font-size: 0.8rem; }
|
|
|
|
|
|
|
|
|
|
@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>
|
|
|
|
|
|
Jonatan Nilsson