mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
Victor Westerlund
56cf142e0d
The PR is a huge refactor of all Reflect and Vegvisir code. I've merged the API and "Front-end" codebases together into the same root, this will allow for both Reflect and Vegvisir to use the same resources. Not only that, but I've also added proper database modeling with actual OOP inheritance for database tables. Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/23
484 lines
No EOL
9 KiB
CSS
484 lines
No EOL
9 KiB
CSS
:root {
|
|
--primer-color-accent: 255, 255, 0;
|
|
--color-accent: yellow;
|
|
--hue-accent: 0deg;
|
|
|
|
--padding: 20px;
|
|
--running-size: 80px;
|
|
--header-search-size: var(--running-size);
|
|
}
|
|
|
|
/* # Cornerstones */
|
|
|
|
* {
|
|
margin: 0;
|
|
fill: inherit;
|
|
box-sizing: border-box;
|
|
font-family: "Roboto Mono", sans-serif;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
justify-items: center;
|
|
grid-template-rows: var(--running-size) 1fr;
|
|
overscroll-behavior: none;
|
|
background-color: black;
|
|
color: white;
|
|
overflow-x: hidden;
|
|
min-height: 100svh;
|
|
font-size: 15px;
|
|
}
|
|
|
|
body::before {
|
|
transition: 1s opacity;
|
|
content: "";
|
|
position: absolute;
|
|
top: -5%;
|
|
right: 0;
|
|
width: 20%;
|
|
height: 5%;
|
|
border-radius: 100%;
|
|
z-index: 1000;
|
|
box-shadow:
|
|
0 0 30svh 10svh rgba(var(--primer-color-accent), .2),
|
|
0 0 30svh 60svh rgba(var(--primer-color-accent), .1),
|
|
0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
|
|
;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* "enable" the corner glow effect on initial load when a page has been fully loaded */
|
|
body[vv-top-page]::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
a {
|
|
display: contents;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* # Components */
|
|
|
|
:is(h1, h2, h3, p, li) > a {
|
|
--underline-tickness: 3px;
|
|
|
|
display: initial;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: var(--underline-tickness);
|
|
text-underline-offset: var(--underline-tickness);
|
|
text-decoration-color: var(--color-accent);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 25px;
|
|
}
|
|
|
|
/* ## Page transition */
|
|
|
|
[vv-loading] * {
|
|
transition: 200ms opacity;
|
|
}
|
|
|
|
[vv-loading="true"] * {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[vv-loading="true"]::after {
|
|
content: "";
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 45px;
|
|
height: 49px;
|
|
background-size: contain;
|
|
image-rendering: pixelated;
|
|
transform: translate(-50%, -50%);
|
|
background-image: url("/assets/media/spinner.gif");
|
|
-webkit-filter: hue-rotate(var(--hue-accent));
|
|
filter: hue-rotate(var(--hue-accent));
|
|
}
|
|
|
|
/* ## Buttons */
|
|
|
|
button {
|
|
border: none;
|
|
background-color: transparent;
|
|
color: inherit;
|
|
fill: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ### Inline */
|
|
|
|
button.inline {
|
|
gap: 10px;
|
|
display: flex;
|
|
border-radius: 7px;
|
|
align-items: center;
|
|
fill: var(--color-accent);
|
|
padding: calc(var(--padding) / 1.5);
|
|
background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(var(--primer-color-accent), .1) 100%);
|
|
}
|
|
|
|
button.inline:not(.solid) {
|
|
box-shadow:
|
|
0 0 0 2px rgba(var(--primer-color-accent), .1),
|
|
10px 7px 40px 3px rgba(var(--primer-color-accent), .06)
|
|
;
|
|
}
|
|
|
|
button.inline svg {
|
|
flex: none;
|
|
height: 1em;
|
|
}
|
|
|
|
button.inline svg:last-child {
|
|
width: 1.5em;
|
|
margin-left: auto;
|
|
}
|
|
|
|
button.inline svg.chevron:last-child {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
button.inline.solid {
|
|
fill: black;
|
|
color: black;
|
|
border: solid 2px rgba(var(--primer-color-accent), 1);
|
|
border-color: var(--color-accent);
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
/* ## Header */
|
|
|
|
header {
|
|
--border-style: solid 1px rgba(255, 255, 255, .2);
|
|
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
height: var(--running-size);
|
|
border-bottom: var(--border-style);
|
|
display: grid;
|
|
align-items: stretch;
|
|
grid-template-columns: 1fr var(--header-search-size) var(--running-size);
|
|
grid-template-rows: var(--running-size);
|
|
background-color: rgba(0, 0, 0, .8);
|
|
z-index: 100;
|
|
perspective: 3000px;
|
|
-webkit-backdrop-filter: blur(20px);
|
|
backdrop-filter: blur(20px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
header > * {
|
|
--anim-3d-depth: 5px;
|
|
--anim-3d-peek: 25deg;
|
|
|
|
transition: 300ms background-color;
|
|
transform: rotateX(0deg);
|
|
backface-visibility: hidden;
|
|
box-shadow: 0 var(--anim-3d-depth) 0 0 rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
/* enable 3d flip animation */
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
header > * {
|
|
--transform-duration: 600ms;
|
|
|
|
transition: var(--transform-duration) transform, 300ms background-color;
|
|
}
|
|
}
|
|
|
|
header nav {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--padding);
|
|
}
|
|
|
|
header .logo {
|
|
fill: none;
|
|
}
|
|
|
|
header .logo path.stroke {
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
header header .search {
|
|
display: none;
|
|
}
|
|
|
|
/* ### Buttons */
|
|
|
|
header button {
|
|
--icon-size: 25px;
|
|
|
|
display: grid;
|
|
width: 100%;
|
|
border-left: var(--border-style);
|
|
grid-template-columns: 1fr;
|
|
align-items: center;
|
|
justify-items: center;
|
|
padding: var(--padding);
|
|
gap: var(--padding);
|
|
fill: var(--color-accent);
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, .5);
|
|
cursor: pointer;
|
|
}
|
|
|
|
header button:not(.logo) svg {
|
|
width: var(--icon-size);
|
|
}
|
|
|
|
header button.search p {
|
|
display: none;
|
|
}
|
|
|
|
/* ### Searchbox */
|
|
|
|
header searchbox {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
height: var(--running-size);
|
|
background-color: var(--color-accent);
|
|
display: grid;
|
|
align-items: stretch;
|
|
grid-template-columns: 1fr var(--running-size);
|
|
grid-template-rows: var(--running-size);
|
|
box-shadow: none;
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
header searchbox > * {
|
|
box-shadow: 0 calc(var(--anim-3d-depth) * -1) 0 0 rgba(var(--primer-color-accent), .8);
|
|
}
|
|
|
|
header searchbox button {
|
|
transition: 300ms background-color, 300ms border-color;
|
|
border-color: rgba(0, 0, 0, .1);
|
|
fill: black;
|
|
}
|
|
|
|
header searchbox input {
|
|
padding: 0 var(--padding);
|
|
background-color: transparent;
|
|
outline: none;
|
|
color: black;
|
|
border: none;
|
|
}
|
|
|
|
/* #### Active */
|
|
|
|
header.searchboxActive > * {
|
|
transform: rotateX(-180deg);
|
|
}
|
|
|
|
header.searchboxActive searchbox {
|
|
transform: rotateX(0);
|
|
}
|
|
|
|
/* ## vv-shell */
|
|
|
|
vv-shell {
|
|
position: relative;
|
|
padding: calc(var(--padding) * 1.5);
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
/* ## Search results */
|
|
|
|
search-results {
|
|
transition: 500ms opacity, 300ms transform;
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--padding);
|
|
top: var(--running-size);
|
|
right: 0;
|
|
width: 100%;
|
|
padding: var(--padding);
|
|
height: calc(100svh - var(--running-size));
|
|
background-color: black;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transform: scale(.99);
|
|
transform-origin: 100% 0;
|
|
overflow-y: scroll;
|
|
z-index: 50;
|
|
}
|
|
|
|
header.searchboxActive ~ search-results {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
transform: scale(1);
|
|
}
|
|
|
|
search-results section.search {
|
|
display: none;
|
|
}
|
|
|
|
/* ### "Start typing" prompt */
|
|
|
|
search-results .info {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin: auto;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
search-results .info :is(svg, img) {
|
|
width: 60px;
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
/* # Feature queries */
|
|
|
|
@media (hover: hover) {
|
|
:is(h1, h2, h3, p, li) > a:hover {
|
|
text-underline-offset: 1px;
|
|
text-decoration-thickness: calc(var(--underline-tickness) * 2);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* # Components */
|
|
|
|
button.inline {
|
|
transition-duration: 300ms;
|
|
transition-property: background-color, border-color, box-shadow, color, fill;
|
|
}
|
|
|
|
button:hover {
|
|
border-color: rgba(255, 255, 255, .2);
|
|
background-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
button.inline:hover {
|
|
fill: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
button.inline:not(.solid):hover {
|
|
box-shadow:
|
|
0 0 0 2px rgba(var(--primer-color-accent), 1),
|
|
10px 7px 30px 3px rgba(var(--primer-color-accent), .07)
|
|
;
|
|
}
|
|
|
|
button.solid:hover {
|
|
border-color: rgba(var(--primer-color-accent), .2);
|
|
background-color: rgba(var(--primer-color-accent), .2);
|
|
box-shadow: 0 -10px 20px 10px rgba(var(--primer-color-accent), .05);
|
|
}
|
|
|
|
/* ## Header */
|
|
|
|
header .logo:hover path.solid {
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
header searchbox button:hover {
|
|
background-color: rgba(0, 0, 0, .08);
|
|
}
|
|
|
|
/* ### Search */
|
|
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
header:not(.searchboxActive) button.search:hover,
|
|
header:not(.searchboxActive) button.search:hover + button.logo {
|
|
transform: rotateX(calc(var(--anim-3d-peek) * -1));
|
|
}
|
|
|
|
header:not(.searchboxActive) button.search:hover ~ searchbox {
|
|
transform: rotateX(calc(180deg - var(--anim-3d-peek)));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media (min-width: 700px) {
|
|
:root {
|
|
--header-search-size: 250px;
|
|
}
|
|
|
|
/* # Cornerstones */
|
|
|
|
body::before {
|
|
right: unset;
|
|
left: 0;
|
|
box-shadow:
|
|
0 0 30svh 10svh rgba(var(--primer-color-accent), .1),
|
|
0 0 30svh 60svh rgba(var(--primer-color-accent), .05),
|
|
0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
|
|
;
|
|
}
|
|
|
|
/* ## Header */
|
|
|
|
header nav {
|
|
margin: 0 calc(var(--padding) / 2);
|
|
}
|
|
|
|
header > button.search {
|
|
grid-template-columns: var(--icon-size) 1fr;
|
|
}
|
|
|
|
header > button.search p {
|
|
display: initial;
|
|
}
|
|
|
|
header.searchboxActive > nav {
|
|
transform: rotateX(0deg);
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* ### Searchbox */
|
|
|
|
header searchbox {
|
|
width: calc(var(--header-search-size) + var(--running-size));
|
|
}
|
|
|
|
/* ### Menu */
|
|
|
|
/* Move the search box to the header */
|
|
header > button.search {
|
|
display: grid;
|
|
justify-items: baseline;
|
|
}
|
|
|
|
@media (min-height: 600px) {
|
|
search-results {
|
|
top: calc(var(--running-size) + var(--padding));
|
|
width: 50%;
|
|
height: calc(100svh - 100px);
|
|
background-color: rgba(0, 0, 0, .8);
|
|
box-shadow:
|
|
inset 0 0 100px 200px rgba(0, 0, 0, 1),
|
|
0 0 100px 200px rgba(0, 0, 0, 1)
|
|
;
|
|
--webkit-backdrop-filter: blur(15px);
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
}
|
|
} |