nercone-dev/website
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Activity

--

Browse Source
This commit is contained in:
nercone
2026-04-21 16:16:06 +09:00
parent 10dd6e355b
commit 48b002ca75
5 changed files with 130 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+123
View File
@@ -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
-375
View File
@@ -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
+2 -131
View File
@@ -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;