diff --git a/public/assets/css/style-extra.css b/public/assets/css/style-extra.css
new file mode 100644
index 0000000..6da7e8f
--- /dev/null
+++ b/public/assets/css/style-extra.css
@@ -0,0 +1,123 @@
+header {
+ background-color: transparent;
+ overflow: hidden;
+}
+header::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ backdrop-filter: blur(12px);
+ background: linear-gradient(to bottom, #1A1A1A 0%, transparent 50%), #1A1A1A80;
+ mask-image: linear-gradient(to bottom,
+ black 0%,
+ black 50%,
+ transparent 100%
+ );
+}
+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://nercone.dev/assets/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://nercone.dev/assets/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://nercone.dev/assets/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://nercone.dev/assets/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);
+}
diff --git a/public/assets/css/style-light.css b/public/assets/css/style-light.css
deleted file mode 100644
index efc73cd..0000000
--- a/public/assets/css/style-light.css
+++ /dev/null
@@ -1,375 +0,0 @@
-html {
- color: #E0E0E0;
- background-color: #1A1A1A;
- margin: 0;
- padding: 0;
- padding-top: 0;
- padding-bottom: 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 {
- background-color: #1A1A1A;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- padding: 24px;
- display: flex;
- align-items: center;
- gap: 16px;
- position: fixed;
- z-index: 10;
-}
-main {
- padding: 24px;
- padding-top: 76px;
- padding-bottom: 0px;
- flex: 1;
-}
-footer {
- padding: 24px;
- padding-top: 0px;
- display: flex;
- align-items: center;
- gap: 16px;
- z-index: 10;
-}
-
-h1, h2, h3, h4, h5, h6 {
- color: #FFFFFF;
-}
-
-/* Layout */
-section {
- padding-top: 4px;
- padding-bottom: 4px;
-}
-
-.block {
- background-color: #272727;
- 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 */
-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 */
-.text-white {
- color: #FFFFFF;
-}
-
-.text-bg {
- color: #1A1A1A;
-}
-.text-bg-alt {
- color: #272727;
-}
-.text-tx {
- color: #E0E0E0;
-}
-.text-tx-alt {
- color: #939393;
-}
-
-.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-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;
-}
-
-/* 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;
- }
-}
-
-/* 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;
-}
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 44a48c7..ad6ab3e 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -3,8 +3,6 @@ html {
background-color: #1A1A1A;
margin: 0;
padding: 0;
- padding-top: 0;
- padding-bottom: 0;
font-family: "Inter", "BIZ UDGothic", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif;
font-size: 12pt;
font-optical-sizing: auto;
@@ -18,6 +16,7 @@ body {
flex-direction: column;
}
header {
+ background-color: #1A1A1A;
position: fixed;
top: 0;
left: 0;
@@ -27,33 +26,14 @@ header {
align-items: center;
gap: 16px;
z-index: 10;
- overflow: hidden;
-}
-header::before {
- content: '';
- position: absolute;
- inset: 0;
- z-index: -1;
- backdrop-filter: blur(12px);
- background: linear-gradient(to bottom, #1A1A1A 0%, transparent 50%), #1A1A1A80;
- mask-image: linear-gradient(to bottom,
- black 0%,
- black 50%,
- transparent 100%
- );
}
main {
- view-transition-name: main-content;
padding: 24px;
- padding-top: 60px;
+ padding-top: 76px;
padding-bottom: 0px;
flex: 1;
}
-main > *:first-child {
- margin-top: 16px;
-}
footer {
- view-transition-name: footer-content;
padding: 24px;
padding-top: 0px;
display: flex;
@@ -125,39 +105,6 @@ code {
}
/* Fonts */
-@font-face {
- font-family: "MesloLGS Nerd Font";
- font-style: normal;
- font-weight: 400;
- src:
- local("MesloLGS Nerd Font"),
- url("https://nercone.dev/assets/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://nercone.dev/assets/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://nercone.dev/assets/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://nercone.dev/assets/fonts/MesloLGSNerdFont-BoldItalic.woff2") format("woff2")
-}
-
a {
text-decoration: underline;
color: inherit;
@@ -403,82 +350,6 @@ 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(header-content),
- ::view-transition-new(header-content) {
- z-index: 1;
- pointer-events: none;
- }
-}
-@media (prefers-reduced-motion: reduce) {
- ::view-transition-old(main-content),
- ::view-transition-new(main-content) {
- z-index: 1;
- pointer-events: none;
- }
-}
-@media (prefers-reduced-motion: reduce) {
- ::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);
-}
-
/* Miscellaneous */
.unselectable {
-webkit-touch-callout: none;
diff --git a/public/base-light.html b/public/base-light.html
index bdd4331..a4ea098 100644
--- a/public/base-light.html
+++ b/public/base-light.html
@@ -23,7 +23,7 @@
-
+
{% block extra_head %}{% endblock %}
diff --git a/public/base.html b/public/base.html
index 964d9ae..e857233 100644
--- a/public/base.html
+++ b/public/base.html
@@ -43,11 +43,13 @@
+
+
+
+
-
-
{% block extra_head %}{% endblock %}
{% block custom_body %}