From 586c36602fe8f07e4b2d6cf8325d917f8d5b3ba7 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 12 Jan 2026 23:19:09 +0900 Subject: [PATCH] =?UTF-8?q?[260112]=20-=20=EB=AA=A8=EB=93=9C=20=EC=A0=84?= =?UTF-8?q?=ED=99=98=20=EA=B8=B0=EB=8A=A5=20-=20=EC=86=94=EB=9D=BC?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=20=EB=AA=A8=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- font/Solaris-3-Script.otf | Bin 0 -> 13896 bytes index.html | 14 ++-- script.js | 50 +++++++++-- style.css | 172 +++++++++++--------------------------- 4 files changed, 96 insertions(+), 140 deletions(-) create mode 100644 font/Solaris-3-Script.otf diff --git a/font/Solaris-3-Script.otf b/font/Solaris-3-Script.otf new file mode 100644 index 0000000000000000000000000000000000000000..67149492edd94cc881660605ea1170974cbea516 GIT binary patch literal 13896 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index b4dafbe..c0e9fda 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,9 @@ - +
-

sori.studio

+

sori.studio

@@ -29,7 +29,7 @@
-
Proxy Manager
+
Proxy Manager
Nginx Proxy Manager
@@ -50,7 +50,7 @@
-
Gitea
+
Gitea
Gitea
@@ -71,7 +71,7 @@
-
Pocket Base
+
Pocket Base
Pocket Base
@@ -99,7 +99,7 @@
-
UNIARE
+
UNIARE
Union Arena Deck Builder
@@ -128,7 +128,7 @@
-
Mastodon
+
Mastodon
Sori.Space Mastodon
diff --git a/script.js b/script.js index 8e61ea8..8c06df6 100644 --- a/script.js +++ b/script.js @@ -92,18 +92,52 @@ document.querySelectorAll('.card').forEach((card, cardIndex) => { }); }); +// 1. 사용할 테마 리스트 +const themes = ['semi-nova', 'nova', 'semi-solaris', 'solaris']; +const STORAGE_KEY = 'selected-theme'; + +// 2. 초기 로드 시 테마 적용 (기본값: semi-nova) +const savedTheme = localStorage.getItem(STORAGE_KEY) || themes[0]; +document.body.classList.add(savedTheme); + window.addEventListener('keydown', (e) => { + // OS별 수정 키 판별 (Mac: Command, Win: Control) const isMac = navigator.platform.toUpperCase().includes('MAC'); + const isModifierPressed = isMac ? e.metaKey : e.ctrlKey; + + // 방향키 좌/우 확인 + const isLeft = e.code === 'ArrowLeft'; + const isRight = e.code === 'ArrowRight'; if ( - isMac && - e.metaKey && - e.shiftKey && - e.code === 'KeyD' && - !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) + isModifierPressed && + (isLeft || isRight) && + // 입력창 안에서 커서 이동을 방해하지 않도록 체크 + !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) && + !document.activeElement?.isContentEditable // 에디터 영역 대응 ) { e.preventDefault(); - document.body.classList.toggle('is-nova'); - } -}); + // 현재 인덱스 찾기 + let currentIndex = themes.findIndex(t => document.body.classList.contains(t)); + if (currentIndex === -1) currentIndex = 0; + + // 3. 좌/우 방향에 따른 인덱스 순환 + if (isRight) { + // 오른쪽 화살표: 다음 테마 + currentIndex = (currentIndex + 1) % themes.length; + } else if (isLeft) { + // 왼쪽 화살표: 이전 테마 + currentIndex = (currentIndex - 1 + themes.length) % themes.length; + } + + const nextTheme = themes[currentIndex]; + + // 4. 클래스 교체 및 저장 + themes.forEach(t => document.body.classList.remove(t)); + document.body.classList.add(nextTheme); + localStorage.setItem(STORAGE_KEY, nextTheme); + + console.log(`Current Theme: ${nextTheme}`); + } +}); \ No newline at end of file diff --git a/style.css b/style.css index 8d42765..960565d 100644 --- a/style.css +++ b/style.css @@ -3,18 +3,27 @@ @import url("https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap"); @font-face { - font-family: "Nova"; + font-family: "nova"; src: url("./font/NovaBySoristudio-Regular.otf") format("opentype"); font-weight: normal; font-style: normal; } -*, -*::before, -*::after { - /* font-family: "Nova" !important; */ +@font-face { + font-family: "solaris"; + src: url("./font/Solaris-3-Script.otf") format("opentype"); + font-weight: normal; + font-style: normal; } +/* Nova: Stella Sora, Solaris: Wuthering Waves */ +.glyph { font-family: "solaris"; } +.nova *, .nova *::before, .nova *::after { font-family: "nova" !important; } +.semi-nova .glyph { font-family: "nova"; } +.solaris *, .solaris *::before, .solaris *::after { font-family: "solaris" !important; } +.semi-solaris .glyph { font-family: "solaris"; } + + body { margin: 0; @@ -54,6 +63,7 @@ header h1 { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } +.solaris header h1, .semi-solaris header h1 { font-size: 2.5rem; margin-top:30px;} header h1 .dot-point { background: none; @@ -257,44 +267,6 @@ header h1 .dot-point { transform: translate(-50%, -50%) rotate(100deg); } -.card-inner { - display: flex; - width: 100%; - gap: 1rem; - align-items: center; -} - -.card-icon { - flex-shrink: 0; - width: auto; - height: 60px; - border-radius: 15px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow: hidden; - font-family: "Nova"; - - font-size: 36px; - line-height: 1; -} - -.icon-nova { - font-family: "Nova"; - font-size: 3rem; - line-height: 1; - -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); -} - -.icon-ruby { - font-family: "pretendard", sans-serif; - font-size: 12px; - line-height: 1; - color: #eaeaea; - font-weight: 700; -} - .card__header { width: 100%; min-width: 0; @@ -311,8 +283,7 @@ header h1 .dot-point { max-width: 100%; min-width: 0; - font-family: "Nova"; - font-size: 3rem; + font-size: 2rem; line-height: 1; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); @@ -322,6 +293,8 @@ header h1 .dot-point { text-align: center; } +.nova .card__title, .semi-nova .card__title {font-size: 2.5rem;} + .card__subtitle { max-width: 100%; min-width: 0; @@ -345,14 +318,6 @@ header h1 .dot-point { min-width: 0; } -.title-wrapper { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - width: 100%; -} - .card__meta--url { margin: 1.25rem 0 0.25rem; font-size: 1.125rem; @@ -369,6 +334,9 @@ header h1 .dot-point { flex: 1; font-family: "Pretendard", sans-serif; } +.nova .card__meta--url { + margin: 0.5rem 0 0 ; +} .card__desc { margin: 0.25rem 0 0; @@ -383,17 +351,6 @@ header h1 .dot-point { display: none; } -.status-dot { - position: absolute; - top: 1rem; - right: 1rem; - flex-shrink: 0; - width: 1rem; - height: 1rem; - border-radius: 50%; - transition: background-color 0.5s ease; -} - .status-online { background-color: #00ff88; box-shadow: 0 0 10px #00ff88; @@ -411,12 +368,10 @@ header h1 .dot-point { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } - 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } - 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); @@ -429,43 +384,14 @@ header h1 .dot-point { } } -@keyframes card__decor-full-cycle { - 0% { - transform: translate(-50%, -50%) rotate(var(--r, 0deg)); - } - - 15% { - transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 1080deg)); - } - - 85% { - transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 1080deg)); - } - - 100% { - transform: translate(-50%, -50%) rotate(var(--r, 0deg)); - } -} - @keyframes bolt-spin-return { - - /* 시작: 기본 각도 */ - 0% { - transform: translate(-50%, -50%) rotate(var(--r)); - } - - /* 오른쪽으로 3바퀴 */ + 0% { transform: translate(-50%, -50%) rotate(var(--r)); } 60% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); - /* 360 * 3 */ } - - /* 잠깐 정지 */ 70% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); } - - /* 왼쪽으로 복귀 */ 100% { transform: translate(-50%, -50%) rotate(var(--r)); } @@ -496,10 +422,8 @@ header h1 .dot-point { border-color: #050505; } -/* 5. (선택사항) 스크롤바가 작동할 때 나사 불빛과 맞춘 포인트 */ ::-webkit-scrollbar-thumb:active { background: #00ff88; - /* 나사 LED 컬러로 포인트 */ box-shadow: 0 0 10px #00ff88; } @@ -508,28 +432,21 @@ header h1 .dot-point { scrollbar-color: #333 #050505; } -.is-nova *, -.is-nova *::before, -.is-nova *::after { - font-family: "Nova", sans-serif !important; -} -.is-nova .section-title { + +.solaris .section-title, .nova .section-title { font-size: 1.75rem; margin: 1rem 0 1.5rem; } -.is-nova .card__subtitle { - /* color: transparent; */ - /* position: relative; */ +.solaris .card__subtitle, .nova .card__subtitle { display: none; } -.is-nova .card__title::after { +.solaris .card__title::after, .nova .card__title::after { content: ""; display: block; width: 100%; height: 1rem; - border-radius: 0.25rem; opacity: 0.25; /* Glass base */ @@ -549,34 +466,39 @@ header h1 .dot-point { animation: glass-skeleton 1.6s ease-in-out infinite; } -.is-nova .card__meta--url { - font-size: 1.5rem; +.solaris .card__meta--url { + font-size: 1rem; margin-bottom: 0; } -.is-nova .card__desc[data-lang="ko"] { + +.nova .card__meta--url { + font-size: 1.5rem; +} + +.solaris .card__desc[data-lang="ko"], +.nova .card__desc[data-lang="ko"] { display: none; } -.is-nova .card__desc[data-lang="ko"] { +.solaris .card__desc[data-lang="ko"], +.nova .card__desc[data-lang="ko"] { display: none; } -.is-nova .card__desc[data-lang="en"] { +.solaris .card__desc[data-lang="en"] { + font-size: 0.875rem; + display: block; + margin: 0; +} + +.nova .card__desc[data-lang="en"] { font-size: 1.25rem; display: block; margin: 0; } @keyframes glass-skeleton { - 0% { - background-position: 0% 0; - } - - 50% { - background-position: 100% 0; - } - - 100% { - background-position: 0% 0; - } + 0% { background-position: 0% 0; } + 50% { background-position: 100% 0; } + 100% { background-position: 0% 0; } } \ No newline at end of file