--
This commit is contained in:
@@ -8,7 +8,7 @@ header::before {
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(12px);
|
||||
background: linear-gradient(to bottom, #1A1A1A 0%, transparent 50%), #1A1A1A80;
|
||||
background: linear-gradient(to bottom, var(--color-dark-grey) 0%, transparent 50%), color-mix(in srgb, var(--color-dark-grey) 50%, transparent);
|
||||
mask-image: linear-gradient(to bottom,
|
||||
black 0%,
|
||||
black 50%,
|
||||
|
||||
+94
-79
@@ -1,6 +1,6 @@
|
||||
html {
|
||||
color: #E0E0E0;
|
||||
background-color: #1A1A1A;
|
||||
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;
|
||||
@@ -16,7 +16,7 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
header {
|
||||
background-color: #1A1A1A;
|
||||
background-color: var(--color-dark-grey);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -43,7 +43,7 @@ footer {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #FFFFFF;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
@@ -53,7 +53,7 @@ section {
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color: #272727;
|
||||
background-color: var(--color-dark-grey-alt);
|
||||
border-radius: 8px;
|
||||
padding: 16px 16px;
|
||||
margin-bottom: 16px;
|
||||
@@ -248,84 +248,99 @@ s {
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
.text-white {
|
||||
color: #FFFFFF;
|
||||
: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-bg {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.text-bg-alt {
|
||||
color: #272727;
|
||||
}
|
||||
.text-tx {
|
||||
color: #E0E0E0;
|
||||
}
|
||||
.text-tx-alt {
|
||||
color: #939393;
|
||||
}
|
||||
/* Text Colors */
|
||||
.text-black { color: var(--color-black); }
|
||||
.text-white { color: var(--color-white); }
|
||||
|
||||
.text-red {
|
||||
color: #A03333;
|
||||
}
|
||||
.text-yellow {
|
||||
color: #CCA000;
|
||||
}
|
||||
.text-green {
|
||||
color: #00A050;
|
||||
}
|
||||
.text-teal {
|
||||
color: #00A0A0;
|
||||
}
|
||||
.text-blue {
|
||||
color: #0080C0;
|
||||
}
|
||||
.text-orange {
|
||||
color: #C86000;
|
||||
}
|
||||
.text-brown {
|
||||
color: #A07033;
|
||||
}
|
||||
.text-purple {
|
||||
color: #7844A0;
|
||||
}
|
||||
.text-magenta {
|
||||
color: #A043A0;
|
||||
}
|
||||
.text-indigo {
|
||||
color: #334DA0;
|
||||
}
|
||||
.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-bright-red {
|
||||
color: #C84040;
|
||||
}
|
||||
.text-bright-yellow {
|
||||
color: #FFC800;
|
||||
}
|
||||
.text-bright-green {
|
||||
color: #00C878;
|
||||
}
|
||||
.text-bright-teal {
|
||||
color: #00C8C8;
|
||||
}
|
||||
.text-bright-blue {
|
||||
color: #00C0FF;
|
||||
}
|
||||
.text-bright-orange {
|
||||
color: #FA7800;
|
||||
}
|
||||
.text-bright-brown {
|
||||
color: #C88C40;
|
||||
}
|
||||
.text-bright-purple {
|
||||
color: #C84040;
|
||||
}
|
||||
.text-bright-magenta {
|
||||
color: #C854C8;
|
||||
}
|
||||
.text-bright-indigo {
|
||||
color: #4060C8;
|
||||
}
|
||||
.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 {
|
||||
|
||||
Reference in New Issue
Block a user