diff --git a/font/Solaris-3-Script.otf b/font/Solaris-3-Script.otf
new file mode 100644
index 0000000..6714949
Binary files /dev/null and b/font/Solaris-3-Script.otf differ
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 @@
@@ -50,7 +50,7 @@
@@ -71,7 +71,7 @@
@@ -99,7 +99,7 @@
@@ -128,7 +128,7 @@
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