163 lines
3.7 KiB
CSS
163 lines
3.7 KiB
CSS
main {
|
|
view-transition-name: main-content;
|
|
padding-top: 60px;
|
|
}
|
|
main > *:first-child {
|
|
margin-top: 16px;
|
|
}
|
|
footer {
|
|
view-transition-name: footer-content;
|
|
}
|
|
|
|
/* Progressive Blur */
|
|
header {
|
|
view-transition-name: header-content;
|
|
will-change: transform;
|
|
background-color: transparent;
|
|
overflow: hidden;
|
|
}
|
|
header::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
backdrop-filter: blur(12px);
|
|
mask-image: linear-gradient(to top,
|
|
transparent 0%,
|
|
black 100%
|
|
);
|
|
}
|
|
header::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background: linear-gradient(to top,
|
|
transparent 0%,
|
|
var(--color-dark-grey) 100%
|
|
);
|
|
}
|
|
|
|
/* Fonts */
|
|
@font-face {
|
|
font-family: "MesloLGS Nerd Font";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src:
|
|
local("MesloLGS Nerd Font"),
|
|
url("https://assets.nercone.dev/fonts/MesloLGSNerdFont-Regular.woff2") format("woff2")
|
|
}
|
|
@font-face {
|
|
font-family: "MesloLGS Nerd Font";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src:
|
|
local("MesloLGS Nerd Font"),
|
|
url("https://assets.nercone.dev/fonts/MesloLGSNerdFont-Bold.woff2") format("woff2")
|
|
}
|
|
@font-face {
|
|
font-family: "MesloLGS Nerd Font";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src:
|
|
local("MesloLGS Nerd Font"),
|
|
url("https://assets.nercone.dev/fonts/MesloLGSNerdFont-Italic.woff2") format("woff2")
|
|
}
|
|
@font-face {
|
|
font-family: "MesloLGS Nerd Font";
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
src:
|
|
local("MesloLGS Nerd Font"),
|
|
url("https://assets.nercone.dev/fonts/MesloLGSNerdFont-BoldItalic.woff2") format("woff2")
|
|
}
|
|
|
|
/* View Transition */
|
|
@keyframes vt-fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
@keyframes vt-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes vt-blur-out {
|
|
from { filter: blur(0px); }
|
|
to { filter: blur(6px); }
|
|
}
|
|
@keyframes vt-blur-in {
|
|
from { filter: blur(6px); }
|
|
to { filter: blur(0px); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
::view-transition-old(main-content),
|
|
::view-transition-new(main-content),
|
|
::view-transition-old(footer-content),
|
|
::view-transition-new(footer-content) {
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/* Cursor */
|
|
* { cursor: none; }
|
|
#cursor {
|
|
view-transition-name: none;
|
|
position: fixed;
|
|
z-index: 99999;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background: #FFFFFFC0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
opacity: 0;
|
|
transition:
|
|
left 0.08s ease-out,
|
|
top 0.08s ease-out,
|
|
width 0.15s cubic-bezier(0.22, 1, 0.36, 1),
|
|
height 0.15s cubic-bezier(0.22, 1, 0.36, 1),
|
|
border-radius 0.15s cubic-bezier(0.22, 1, 0.36, 1),
|
|
background 0.15s ease,
|
|
transform 0.08s ease-out,
|
|
opacity 0.3s ease;
|
|
}
|
|
#cursor.visible { opacity: 1; }
|
|
#cursor.on-text {
|
|
width: 3px;
|
|
border-radius: 1.5px;
|
|
background: #FFFFFFC0;
|
|
}
|
|
#cursor.on-link {
|
|
border-radius: 6px;
|
|
background: #FFFFFF40;
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
/* Loading Overlay */
|
|
#loading-overlay {
|
|
view-transition-name: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--color-dark-grey);
|
|
backdrop-filter: blur(40px);
|
|
-webkit-backdrop-filter: blur(40px);
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
}
|
|
#loading-overlay svg {
|
|
width: 50vmin;
|
|
height: calc(50vmin * 512 / 832);
|
|
opacity: 0;
|
|
filter: blur(20px);
|
|
transform: scale(1);
|
|
will-change: opacity, filter, transform;
|
|
}
|
|
#loading-overlay polyline {
|
|
will-change: stroke-dashoffset;
|
|
}
|