--
This commit is contained in:
@@ -16,7 +16,10 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
header {
|
||||
background-color: var(--color-dark-grey);
|
||||
view-transition-name: header;
|
||||
will-change: transform;
|
||||
background-image: transparent;
|
||||
backdrop-filter: blur(16px);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -27,13 +30,23 @@ header {
|
||||
gap: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
@supports (-webkit-backdrop-filter: blur(1px)) {
|
||||
header {
|
||||
background-image: linear-gradient(to bottom, var(--color-dark-grey), transparent);
|
||||
}
|
||||
}
|
||||
main {
|
||||
view-transition-name: main-content;
|
||||
padding: 24px;
|
||||
padding-top: 76px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 0px;
|
||||
flex: 1;
|
||||
}
|
||||
main > *:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
footer {
|
||||
view-transition-name: footer-content;
|
||||
padding: 24px;
|
||||
padding-top: 0px;
|
||||
display: flex;
|
||||
@@ -105,6 +118,39 @@ code {
|
||||
}
|
||||
|
||||
/* 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")
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
@@ -365,6 +411,96 @@ s {
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
--size: clamp(340px, 28vmin, 380px);
|
||||
width: var(--size);
|
||||
height: calc(var(--size) * 512 / 832);
|
||||
opacity: 0;
|
||||
filter: blur(20px);
|
||||
transform: scale(1);
|
||||
will-change: opacity, filter, transform;
|
||||
}
|
||||
#loading-overlay polyline {
|
||||
will-change: stroke-dashoffset;
|
||||
}
|
||||
|
||||
/* Miscellaneous */
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
@@ -1,146 +0,0 @@
|
||||
header {
|
||||
view-transition-name: header-content;
|
||||
will-change: transform;
|
||||
background-color: transparent;
|
||||
background-image: transparent;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
@supports (-webkit-backdrop-filter: blur(1px)) {
|
||||
header {
|
||||
background-image: linear-gradient(to bottom, var(--color-dark-grey), transparent);
|
||||
}
|
||||
}
|
||||
main {
|
||||
view-transition-name: main-content;
|
||||
padding-top: 60px;
|
||||
}
|
||||
main > *:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
footer {
|
||||
view-transition-name: footer-content;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
--size: clamp(340px, 28vmin, 380px);
|
||||
width: var(--size);
|
||||
height: calc(var(--size) * 512 / 832);
|
||||
opacity: 0;
|
||||
filter: blur(20px);
|
||||
transform: scale(1);
|
||||
will-change: opacity, filter, transform;
|
||||
}
|
||||
#loading-overlay polyline {
|
||||
will-change: stroke-dashoffset;
|
||||
}
|
||||
Reference in New Issue
Block a user