From 48b002ca7587717b5b4bd11a91ce3de7e8ebb9a5 Mon Sep 17 00:00:00 2001 From: nercone-dev Date: Tue, 21 Apr 2026 16:16:06 +0900 Subject: [PATCH] -- --- public/assets/css/style-extra.css | 123 ++++++++++ public/assets/css/style-light.css | 375 ------------------------------ public/assets/css/style.css | 133 +---------- public/base-light.html | 2 +- public/base.html | 6 +- 5 files changed, 130 insertions(+), 509 deletions(-) create mode 100644 public/assets/css/style-extra.css delete mode 100644 public/assets/css/style-light.css 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 %}