--

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);
+}

public/assets/css/style-light.css

@@ -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;
-}

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;

public/base-light.html

@@ -23,7 +23,7 @@
         <link rel="icon" type="image/png" href="https://assets.nercone.dev/images/favicon.png" sizes="1200x1200">
         <link rel="icon" type="image/svg+xml" href="https://assets.nercone.dev/images/favicon.svg" sizes="1200x1200">
         <!-- Stylesheets / Scripts -->
-        <link rel="stylesheet" href="/assets/css/style-light.css">
+        <link rel="stylesheet" href="/assets/css/style.css">
         <script src="/assets/js/script-light.js" defer></script>
         {% block extra_head %}{% endblock %}
     </head>

public/base.html

@@ -43,11 +43,13 @@
         <link rel="icon" type="image/png" href="https://assets.nercone.dev/images/favicon.png" sizes="1200x1200">
         <link rel="icon" type="image/svg+xml" href="https://assets.nercone.dev/images/favicon.svg" sizes="1200x1200">
         <!-- Stylesheets / Scripts -->
+        <link rel="stylesheet" href="/assets/css/style.css">
+        <link rel="stylesheet" href="/assets/css/style-extra.css">
+        <script src="/assets/js/script.js" defer></script>
+        <!-- External Stylesheets / Scripts -->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=BIZ+UDGothic&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap">
-        <link rel="stylesheet" href="/assets/css/style.css">
-        <script src="/assets/js/script.js" defer></script>
         {% block extra_head %}{% endblock %}
     </head>
     {% block custom_body %}