--

public/assets/css/main.css

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

public/assets/css/style-extra.css

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

public/assets/images/icons/lightweight-mode-false.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="_レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: rgba(147, 147, 147, .85);
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M38.37,46.07l-13.02,16.29c-1.93,2.39-4.98.82-3.87-2.1l8.38-22.69,8.51,8.51ZM49.89,26.3c1.19,0,2.02.85,2.02,1.93,0,.65-.26,1.22-.74,1.82l-5.87,7.35-11.1-11.1h15.7ZM13.89,37.22c-1.19,0-2.05-.82-2.05-1.93,0-.63.28-1.19.77-1.82l5.84-7.3,11.06,11.06h-15.63ZM42.29,3.26l-8.4,22.74-8.52-8.52L38.43,1.19c1.93-2.42,4.95-.85,3.87,2.08Z"/>
-  <path class="cls-1" d="M51.79,54.76c.85.85,2.28.85,3.1,0,.85-.82.85-2.22,0-3.1L11.98,8.75c-.85-.85-2.3-.85-3.13,0-.82.82-.82,2.28,0,3.1l42.94,42.91Z"/>
-</svg>

public/assets/images/icons/lightweight-mode.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="_レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: rgba(255, 255, 255, .85);
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M11.88,35.28c0,1.11.85,1.93,2.05,1.93h16.07l-8.47,23.03c-1.11,2.93,1.93,4.49,3.84,2.1l25.85-32.31c.48-.6.74-1.17.74-1.82,0-1.08-.85-1.93-2.05-1.93h-16.07L42.31,3.26c1.11-2.93-1.93-4.49-3.84-2.08L12.62,33.46c-.48.63-.74,1.19-.74,1.82Z"/>
-</svg>