diff --git a/static/css/main.css b/static/css/main.css
@@ -1,8 +1,14 @@
-/* sqzer.com
+/* sqzass 테마 — jade
*
- * 중립 니어블랙 위의 가운데 정렬 갤러리. 색은 평상시에 없고 손이 닿을 때만
+ * 이 사이트가 쓰는 테마이자 sqzass 로 만든 첫 테마다. 이름은 이 시트의 유일한
+ * 색에서 따왔다. 두 번째 테마가 생기면 그것도 자기 색으로 불리면 된다.
+ *
+ * 청록 니어블랙 위의 가운데 정렬 갤러리. 색은 평상시에 없고 손이 닿을 때만
* 나온다 — 액센트가 브랜딩이 아니라 보상이다.
*
+ * 누르면 눌린다. hover 는 빛이 아니라 압축이고(scale 0.988), 그건 이 집의
+ * 이름들이 전부 모음을 눌러 뺀 것이기 때문이다 — sqzer, sqzass, ommp, uaf.
+ *
* 목소리는 굵기로 만든다. 디스플레이는 230~350 의 초경량에 **양수** 트래킹이고,
* 라벨은 작고 넓게 벌어진 대문자다. 큰 글자는 가늘고 작은 글자는 벌어진다.
* 굵은 글씨는 이 사이트에 없다.
@@ -48,25 +54,33 @@
:root {
color-scheme: dark;
- --bg-recess: #010102;
- --bg: #050506;
- --bg-2: #0d0d0f;
- --bg-3: #141416;
-
- --ink: #f1f1ee;
- --ink-2: #a3a39e;
- --ink-3: #7b7b74;
- --ink-4: #3b3b38;
-
- --rule: #191919;
- --rule-2: #262628;
- --rule-3: #39393d;
-
- /* 색이 아니라 삼원소. 토큰 하나로 alpha 0.03~0.75 를 전부 낸다. */
- --glow: 241, 241, 238;
-
- /* 단 하나의 색조. 평상시에는 어디에도 없고 hover·focus·현재 위치에만 나온다. */
- --accent: #d9bb90;
+ /* 바닥에 색이 있다. 이 집 사이트들은 전부 그렇다 — ommp 는 청보라(#0A051E,
+ 앱의 BG_DARK 를 그대로), blog 는 청록, sqzass 문서는 청흑, 랜딩은 웜브라운.
+ 순수 중립 회색은 아무 말도 하지 않는다. */
+ --bg-recess: #030405;
+ --bg: #07090a;
+ --bg-2: #0e1112;
+ --bg-3: #151819;
+
+ --ink: #eaeeec;
+ --ink-2: #9ba39f;
+ --ink-3: #737b77;
+ --ink-4: #363c39;
+
+ --rule: #16191a;
+ --rule-2: #232728;
+ --rule-3: #363b3c;
+
+ /* 색이 아니라 삼원소. 토큰 하나로 alpha 0.03~0.75 를 전부 낸다 —
+ hex 였다면 매번 color-mix 를 거쳐야 했을 값들이다. */
+ --ink-rgb: 234, 238, 236;
+
+ /* 제이드. 이 테마의 이름이자 유일한 색이고, 평상시에는 어디에도 없다.
+ 링크·포커스 링·현재 항목·손이 닿은 것에만 나온다 — 초록이면 갈 수 있는
+ 것이거나 지금 있는 자리다.
+ 자식 사이트들이 쓰는 자리를 피해 고른 색이다: sqzass 는 피치와 코랄,
+ blog 는 앰버, ommp 는 네온 핑크·시안·바이올렛. 청록만 비어 있었다. */
+ --accent: #2fd6a3;
/* 선화 마크는 순수 흑 아니면 순수 백이다. 중간 회색은 비활성으로 읽힌다. */
--mark-ink: #ffffff;
@@ -90,22 +104,23 @@
:root[data-theme="light"] {
color-scheme: light;
- --bg-recess: #eeeeec;
- --bg: #fbfbfa;
- --bg-2: #f4f4f2;
- --bg-3: #ececeb;
+ --bg-recess: #e9ecea;
+ --bg: #fafbfa;
+ --bg-2: #f2f4f3;
+ --bg-3: #eaeded;
- --ink: #14140f;
- --ink-2: #56564f;
- --ink-3: #78786f;
- --ink-4: #c2c2bb;
+ --ink: #0e1211;
+ --ink-2: #515856;
+ --ink-3: #737a78;
+ --ink-4: #bdc3c1;
- --rule: #e6e6e2;
- --rule-2: #d8d8d3;
- --rule-3: #bebeb7;
+ --rule: #e4e8e6;
+ --rule-2: #d5dad8;
+ --rule-3: #bac0be;
- --glow: 20, 20, 15;
- --accent: #8a6a34;
+ --ink-rgb: 14, 18, 17;
+ /* 니어블랙에서 읽히는 제이드가 니어화이트에서는 대비를 잃는다. 둘 다 어둡게. */
+ --accent: #0f7a5a;
--mark-ink: #000000;
}
@@ -123,8 +138,10 @@ body {
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
- font-size: clamp(0.96rem, 0.9rem + 0.2vw, 1.0625rem);
- line-height: 1.72;
+ /* 루트가 이미 유동이라(clamp 16→19px) 본문까지 vw 에 매달면 두 번 조정된다.
+ 1100px 위에서는 어차피 최대값에 고정돼 있던 값이다. */
+ font-size: 1.0625rem;
+ line-height: 1.7;
/* 한국어는 어절 안에서 줄바꿈하지 않는다. */
word-break: keep-all;
overflow-wrap: anywhere;
@@ -161,7 +178,7 @@ a { color: inherit; text-decoration: none; }
padding-inline: var(--gutter);
}
.wrap-read { max-width: var(--read); }
-.wrap-ledger { max-width: 60rem; }
+.wrap-ledger { max-width: 68ch; }
main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
@@ -171,7 +188,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
position: sticky; top: 0; z-index: 30;
height: var(--masthead-h);
background: color-mix(in srgb, var(--bg) 82%, transparent);
- backdrop-filter: saturate(140%) blur(14px);
+ backdrop-filter: blur(14px) saturate(1.5);
border-bottom: 1px solid var(--rule);
}
@@ -193,7 +210,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
transition: transform var(--tr-light);
}
.brand:hover .brand-mark { transform: scale(1.08); }
-@supports not ((mask: url("")) or (-webkit-mask: url(""))) { .brand-mark { display: none; } }
+@supports not (mask-image: url("")) { .brand-mark { display: none; } }
.brand-name {
font-size: 0.82rem; font-weight: 500;
@@ -467,7 +484,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
background:
repeating-linear-gradient(45deg,
transparent, transparent 7px,
- rgba(var(--glow), 0.022) 7px, rgba(var(--glow), 0.022) 14px);
+ rgba(var(--ink-rgb), 0.022) 7px, rgba(var(--ink-rgb), 0.022) 14px);
}
.noimg::after {
content: "no image";
@@ -502,7 +519,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
/* 빛웅덩이. 채우는 것이 아니라 아래에서 번지는 것이라 경계가 없다. */
.tile::before {
content: ""; position: absolute; inset: 0; z-index: -1;
- background: radial-gradient(closest-side, rgba(var(--glow), 0.05), transparent 72%);
+ background: radial-gradient(closest-side, rgba(var(--ink-rgb), 0.05), transparent 72%);
opacity: 0; transition: opacity var(--tr-light);
}
.tile:hover::before, .tile:focus-within::before { opacity: 1; }
@@ -589,7 +606,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
transition: background var(--tr-light);
}
.ledger-link:hover, .ledger-link:focus-visible {
- background: linear-gradient(100deg, rgba(var(--glow), 0.045), transparent 70%);
+ background: linear-gradient(100deg, rgba(var(--ink-rgb), 0.045), transparent 70%);
}
.ledger-date {
@@ -790,7 +807,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.cell:hover { z-index: 1; border-color: var(--rule-2); }
.cell::before {
content: ""; position: absolute; inset: 0; z-index: -1;
- background: radial-gradient(closest-side, rgba(var(--glow), 0.045), transparent 72%);
+ background: radial-gradient(closest-side, rgba(var(--ink-rgb), 0.045), transparent 72%);
opacity: 0; transition: opacity var(--tr-light);
}
.cell:hover::before { opacity: 1; }
diff --git a/static/images/apple-touch-icon.png b/static/images/apple-touch-icon.png
Binary files differ.
diff --git a/static/images/favicon-dark.png b/static/images/favicon-dark.png
Binary files differ.
diff --git a/static/images/favicon.png b/static/images/favicon.png
Binary files differ.
diff --git a/tools/icons.py b/tools/icons.py
@@ -24,8 +24,9 @@ ROOT = Path(__file__).resolve().parent.parent
IMG = ROOT / "static" / "images"
SRC_DIR = Path(sys.argv[1] if len(sys.argv) > 1 else "/home/himesama/Downloads")
-INK = (16, 20, 26)
-PAPER = (232, 236, 241)
+# main.css 의 --ink / --bg 와 같은 값이어야 파비콘 판이 사이트와 같은 물건으로 보인다.
+INK = (14, 18, 17)
+PAPER = (234, 238, 236)
def shape(path: Path) -> Image.Image:
|
