mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
Victor Westerlund
80c6579136
This PR adds basic support for the upcoming release Vegvisir 3.1 Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/11 Co-authored-by: Victor Westerlund <victor.vesterlund@gmail.com> Co-committed-by: Victor Westerlund <victor.vesterlund@gmail.com>
184 lines
2.8 KiB
CSS
184 lines
2.8 KiB
CSS
/* # Overrides */
|
|
|
|
body[vv-top-page="/"]::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* # vv-shell styles */
|
|
|
|
/* ## Picture */
|
|
|
|
vv-shell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
vv-shell img {
|
|
margin: auto;
|
|
width: 25vh;
|
|
pointer-events: none;
|
|
-webkit-filter: hue-rotate(var(--hue-accent));
|
|
filter: hue-rotate(var(--hue-accent));
|
|
}
|
|
|
|
/* ## Menu */
|
|
|
|
.menu {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.menu menu {
|
|
margin: var(--padding) 0;
|
|
list-style: none;
|
|
padding: unset;
|
|
text-align: right;
|
|
font-size: clamp(20px, 8vh, 60px);
|
|
font-weight: 900;
|
|
line-height: clamp(20px, 8vh, 60px);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.menu menu li {
|
|
transition: 200ms opacity, 200ms color;
|
|
}
|
|
|
|
.menu svg {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ### Copy email button */
|
|
|
|
.menu button {
|
|
text-align: right;
|
|
border: unset;
|
|
padding: var(--padding) 0;
|
|
}
|
|
|
|
.menu button p:first-of-type {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* # Email-copied splash */
|
|
|
|
splash {
|
|
--confetti: unset;
|
|
--text-shadow: 0 0 30px black;
|
|
|
|
display: initial !important;
|
|
transition: 300ms opacity;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 80px;
|
|
color: white;
|
|
z-index: 200;
|
|
font-weight: 900;
|
|
pointer-events: none;
|
|
perspective: 300px;
|
|
text-shadow:
|
|
var(--text-shadow),
|
|
var(--text-shadow),
|
|
var(--text-shadow),
|
|
var(--text-shadow)
|
|
;
|
|
animation: splash-reveal 1s ease;
|
|
}
|
|
|
|
splash.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
splash::after {
|
|
content: "";
|
|
top: 50%;
|
|
left: 50%;
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 16px;
|
|
background-color: transparent;
|
|
box-shadow: var(--confetti);
|
|
animation: splash-confetti 1s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ## Keyframes */
|
|
|
|
@keyframes splash-confetti {
|
|
0% {
|
|
transform: rotate(12deg) scale(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(-10deg) scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes splash-reveal {
|
|
0% { transform: translate(-50%, -50%) rotate(-8deg) scale(0); }
|
|
35% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.1); }
|
|
100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
|
|
}
|
|
|
|
/* # Features */
|
|
|
|
.cta::before {
|
|
content: "tap ";
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
.cta::before {
|
|
content: "click ";
|
|
}
|
|
}
|
|
|
|
/* # Feature queries */
|
|
|
|
@media (hover: hover) {
|
|
.menu menu:hover li {
|
|
opacity: .6;
|
|
}
|
|
|
|
.menu menu li:hover {
|
|
opacity: 1;
|
|
font-weight: 100;
|
|
text-shadow: 0 0 10px rgba(var(--primer-color-accent), .4);
|
|
}
|
|
|
|
button.email:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* enable font-weight hover animation */
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
.menu menu li {
|
|
transition: 200ms opacity, 200ms color, 300ms font-weight;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* # Size quries */
|
|
|
|
@media (min-width: 900px) {
|
|
vv-shell {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
vv-shell img {
|
|
width: 35vh;
|
|
}
|
|
}
|