524 lines
12 KiB
CSS
524 lines
12 KiB
CSS
html {
|
|
color: var(--color-light-grey);
|
|
background-color: var(--color-dark-grey);
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Inter", "BIZ UDGothic", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif;
|
|
font-size: 12pt;
|
|
font-optical-sizing: auto;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
header {
|
|
view-transition-name: header;
|
|
will-change: transform;
|
|
background-image: transparent;
|
|
backdrop-filter: blur(16px);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
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: 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;
|
|
align-items: center;
|
|
gap: 16px;
|
|
z-index: 10;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
/* Layout */
|
|
section {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.block {
|
|
background-color: var(--color-dark-grey-alt);
|
|
border-radius: 8px;
|
|
padding: 16px 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.block > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.block > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.flex > * {
|
|
margin: 0;
|
|
}
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
.flex-vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Code */
|
|
pre {
|
|
background-color: #202020;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
line-height: 24px;
|
|
font-size: small;
|
|
font-family: "MesloLGS Nerd Font", "BIZ UDGothic", monospace;
|
|
font-optical-sizing: auto;
|
|
font-style: normal;
|
|
}
|
|
.block pre {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
code {
|
|
padding: 4px;
|
|
font-family: "MesloLGS Nerd Font", "BIZ UDGothic", monospace;
|
|
font-optical-sizing: auto;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
b {
|
|
font-weight: 600;
|
|
}
|
|
i {
|
|
font-style: italic;
|
|
}
|
|
u {
|
|
text-decoration: underline;
|
|
}
|
|
s {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.font-thin {
|
|
font-weight: 100;
|
|
}
|
|
.font-extralight {
|
|
font-weight: 200;
|
|
}
|
|
.font-light {
|
|
font-weight: 300;
|
|
}
|
|
.font-regular {
|
|
font-weight: 400;
|
|
}
|
|
.font-medium {
|
|
font-weight: 500;
|
|
}
|
|
.font-bold {
|
|
font-weight: 600;
|
|
}
|
|
.font-extrabold {
|
|
font-weight: 700;
|
|
}
|
|
.font-black {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.font-weight-100 {
|
|
font-weight: 100;
|
|
}
|
|
.font-weight-200 {
|
|
font-weight: 200;
|
|
}
|
|
.font-weight-300 {
|
|
font-weight: 300;
|
|
}
|
|
.font-weight-400 {
|
|
font-weight: 400;
|
|
}
|
|
.font-weight-500 {
|
|
font-weight: 500;
|
|
}
|
|
.font-weight-600 {
|
|
font-weight: 600;
|
|
}
|
|
.font-weight-700 {
|
|
font-weight: 700;
|
|
}
|
|
.font-weight-800 {
|
|
font-weight: 800;
|
|
}
|
|
.font-weight-900 {
|
|
font-weight: 900;
|
|
}
|
|
.font-weight-1000 {
|
|
font-weight: 1000;
|
|
}
|
|
|
|
.text-no-decoration {
|
|
text-decoration: none;
|
|
}
|
|
.text-italic {
|
|
font-style: italic;
|
|
}
|
|
.text-underline {
|
|
text-decoration: underline;
|
|
}
|
|
.text-overline {
|
|
text-decoration: overline;
|
|
}
|
|
.text-line-through {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.font-xx-small {
|
|
font-size: xx-small;
|
|
}
|
|
.font-x-small {
|
|
font-size: x-small;
|
|
}
|
|
.font-small {
|
|
font-size: small;
|
|
}
|
|
.font-medium {
|
|
font-size: medium;
|
|
}
|
|
.font-large {
|
|
font-size: large;
|
|
}
|
|
.font-x-large {
|
|
font-size: x-large;
|
|
}
|
|
.font-xx-large {
|
|
font-size: xx-large;
|
|
}
|
|
.font-xxx-large {
|
|
font-size: xxx-large;
|
|
}
|
|
.font-smaller {
|
|
font-size: smaller;
|
|
}
|
|
.font-larger {
|
|
font-size: larger;
|
|
}
|
|
|
|
.font-inter {
|
|
font-family: "Inter";
|
|
}
|
|
.font-bizud {
|
|
font-family: "BIZ UDGothic";
|
|
}
|
|
.font-nsajp {
|
|
font-family: "Noto Sans JP";
|
|
}
|
|
.font-nsatc {
|
|
font-family: "Noto Sans TC";
|
|
}
|
|
.font-nsasc {
|
|
font-family: "Noto Sans SC";
|
|
}
|
|
.font-nsakr {
|
|
font-family: "Noto Sans KR";
|
|
}
|
|
.font-meslo {
|
|
font-family: "MesloLGS Nerd Font";
|
|
}
|
|
|
|
/* Colors */
|
|
:root {
|
|
--color-black: #000000;
|
|
--color-white: #FFFFFF;
|
|
|
|
--color-dark-grey: #1A1A1A;
|
|
--color-dark-grey-alt: #272727;
|
|
--color-light-grey: #E0E0E0;
|
|
--color-light-grey-alt: #939393;
|
|
|
|
--color-red: #A03333;
|
|
--color-yellow: #CCA000;
|
|
--color-green: #00A050;
|
|
--color-teal: #00A0A0;
|
|
--color-blue: #0080C0;
|
|
--color-orange: #C86000;
|
|
--color-brown: #A07033;
|
|
--color-purple: #7844A0;
|
|
--color-magenta: #A043A0;
|
|
--color-indigo: #334DA0;
|
|
|
|
--color-bright-red: #C84040;
|
|
--color-bright-yellow: #FFC800;
|
|
--color-bright-green: #00C878;
|
|
--color-bright-teal: #00C8C8;
|
|
--color-bright-blue: #00C0FF;
|
|
--color-bright-orange: #FA7800;
|
|
--color-bright-brown: #C88C40;
|
|
--color-bright-purple: #C84040;
|
|
--color-bright-magenta: #C854C8;
|
|
--color-bright-indigo: #4060C8;
|
|
}
|
|
|
|
/* Text Colors */
|
|
.text-black { color: var(--color-black); }
|
|
.text-white { color: var(--color-white); }
|
|
|
|
.text-dark-grey { color: var(--color-dark-grey); }
|
|
.text-dark-grey-alt { color: var(--color-dark-grey-alt); }
|
|
.text-light-grey { color: var(--color-light-grey); }
|
|
.text-light-grey-alt { color: var(--color-light-grey-alt); }
|
|
|
|
.text-red { color: var(--color-red); }
|
|
.text-yellow { color: var(--color-yellow); }
|
|
.text-green { color: var(--color-green); }
|
|
.text-teal { color: var(--color-teal); }
|
|
.text-blue { color: var(--color-blue); }
|
|
.text-orange { color: var(--color-orange); }
|
|
.text-brown { color: var(--color-brown); }
|
|
.text-purple { color: var(--color-purple); }
|
|
.text-magenta { color: var(--color-magenta); }
|
|
.text-indigo { color: var(--color-indigo); }
|
|
|
|
.text-bright-red { color: var(--color-bright-red); }
|
|
.text-bright-yellow { color: var(--color-bright-yellow); }
|
|
.text-bright-green { color: var(--color-bright-green); }
|
|
.text-bright-teal { color: var(--color-bright-teal); }
|
|
.text-bright-blue { color: var(--color-bright-blue); }
|
|
.text-bright-orange { color: var(--color-bright-orange); }
|
|
.text-bright-brown { color: var(--color-bright-brown); }
|
|
.text-bright-purple { color: var(--color-bright-purple); }
|
|
.text-bright-magenta { color: var(--color-bright-magenta); }
|
|
.text-bright-indigo { color: var(--color-bright-indigo); }
|
|
|
|
/* Background Colors */
|
|
.bg-black { background-color: var(--color-black); }
|
|
.bg-white { background-color: var(--color-white); }
|
|
|
|
.bg-dark-grey { background-color: var(--color-dark-grey); }
|
|
.bg-dark-grey-alt { background-color: var(--color-dark-grey-alt); }
|
|
.bg-light-grey { background-color: var(--color-light-grey); }
|
|
.bg-light-grey-alt { background-color: var(--color-light-grey-alt); }
|
|
|
|
.bg-red { background-color: var(--color-red); }
|
|
.bg-yellow { background-color: var(--color-yellow); }
|
|
.bg-green { background-color: var(--color-green); }
|
|
.bg-teal { background-color: var(--color-teal); }
|
|
.bg-blue { background-color: var(--color-blue); }
|
|
.bg-orange { background-color: var(--color-orange); }
|
|
.bg-brown { background-color: var(--color-brown); }
|
|
.bg-purple { background-color: var(--color-purple); }
|
|
.bg-magenta { background-color: var(--color-magenta); }
|
|
.bg-indigo { background-color: var(--color-indigo); }
|
|
|
|
.bg-bright-red { background-color: var(--color-bright-red); }
|
|
.bg-bright-yellow { background-color: var(--color-bright-yellow); }
|
|
.bg-bright-green { background-color: var(--color-bright-green); }
|
|
.bg-bright-teal { background-color: var(--color-bright-teal); }
|
|
.bg-bright-blue { background-color: var(--color-bright-blue); }
|
|
.bg-bright-orange { background-color: var(--color-bright-orange); }
|
|
.bg-bright-brown { background-color: var(--color-bright-brown); }
|
|
.bg-bright-purple { background-color: var(--color-bright-purple); }
|
|
.bg-bright-magenta { background-color: var(--color-bright-magenta); }
|
|
.bg-bright-indigo { background-color: var(--color-bright-indigo); }
|
|
|
|
/* Responsive Design */
|
|
.hide {
|
|
display: none;
|
|
}
|
|
@media (max-width: 740px) {
|
|
.bold-on-small {
|
|
font-weight: 600;
|
|
}
|
|
.hide.show-on-small {
|
|
display: block;
|
|
}
|
|
}
|
|
@media (min-width: 740px) and (max-width: 1080px) {
|
|
.hide.show-on-medium {
|
|
display: block;
|
|
}
|
|
}
|
|
@media (min-width: 1080px) {
|
|
.hide.show-on-large {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.banner {
|
|
height: 50px;
|
|
width: auto;
|
|
border-radius: 6px;
|
|
}
|
|
.small-icon {
|
|
width: 12pt;
|
|
height: 12pt;
|
|
display: block;
|
|
}
|