나의 사이트 수정
This commit is contained in:
@@ -448,209 +448,37 @@ em {
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
6. 인라인 카테고리 필터 — 칩이 아니라 글자
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.filter {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-1) 0;
|
||||
color: var(--text-mute);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: color var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.filter:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.filter.is-active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 활성 항목은 카테고리 색 밑줄 */
|
||||
.filter.is-active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--card-accent);
|
||||
}
|
||||
|
||||
.filter__count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-mute);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.filter.is-active .filter__count {
|
||||
color: var(--card-accent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
7. 인덱스 목록 + 커서 썸네일
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
/* 대표 작업 — 목록 맨 앞 글을 크게 보여 준다.
|
||||
글이 하나뿐이어도 화면이 비어 보이지 않게 하는 역할. */
|
||||
.lead {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-7);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lead__media {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.lead__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 620ms var(--ease);
|
||||
}
|
||||
|
||||
.lead:hover .lead__media img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* 이미지가 없는 글의 자리 — 카테고리 색으로 옅게 물든 판 + 첫 글자 */
|
||||
.lead__media--none,
|
||||
/* 이미지가 없는 글의 자리 — 카테고리 색으로 옅게 물든 판 + 제목 첫 글자 */
|
||||
.idx__thumb--none {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background-color: var(--surface-2);
|
||||
background-image:
|
||||
linear-gradient(140deg,
|
||||
color-mix(in srgb, var(--card-accent) 16%, transparent) 0%,
|
||||
color-mix(in srgb, var(--card-accent) 18%, transparent) 0%,
|
||||
transparent 62%);
|
||||
color: color-mix(in srgb, var(--card-accent) 45%, var(--text-mute));
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead__media--none {
|
||||
font-size: clamp(56px, 8vw, 104px);
|
||||
}
|
||||
|
||||
.idx__thumb--none {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* color-mix 미지원 브라우저 대비 */
|
||||
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
|
||||
.lead__media--none,
|
||||
.idx__thumb--none {
|
||||
background-image: none;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
}
|
||||
|
||||
.lead__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 한글은 자간을 크게 벌리면 글자가 흩어져 보인다. 살짝만 준다. */
|
||||
.lead__label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--step--2);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
.lead__label::before {
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--card-accent);
|
||||
}
|
||||
|
||||
.lead__cat {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--card-accent);
|
||||
}
|
||||
|
||||
.lead__title {
|
||||
font-size: var(--step-3);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.2;
|
||||
word-break: keep-all;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lead__sum {
|
||||
font-size: var(--step-0);
|
||||
color: var(--text-dim);
|
||||
line-height: 1.75;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.lead__meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
.lead__more {
|
||||
margin-top: var(--space-2);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
color: var(--card-accent);
|
||||
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--card-accent) 32%, transparent);
|
||||
transition: box-shadow var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.lead__more::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
.lead:hover .lead__more {
|
||||
box-shadow: inset 0 -2px 0 var(--card-accent);
|
||||
}
|
||||
|
||||
/* 인덱스 행의 작은 썸네일 */
|
||||
/* 인덱스 행의 썸네일 */
|
||||
.idx__thumb {
|
||||
margin: 0;
|
||||
width: 96px;
|
||||
width: 132px;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -671,6 +499,41 @@ em {
|
||||
border-color: color-mix(in srgb, var(--card-accent) 45%, var(--rule));
|
||||
}
|
||||
|
||||
/* 카테고리 묶음 — 분야 제목 + 그 아래 목록 */
|
||||
.group {
|
||||
margin-bottom: var(--space-7);
|
||||
}
|
||||
|
||||
.group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.group__dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--card-accent);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.group__count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--2);
|
||||
font-weight: 700;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
.index {
|
||||
list-style: none;
|
||||
border-top: 1px solid var(--rule-strong);
|
||||
@@ -683,11 +546,12 @@ em {
|
||||
/* 행 하나. 번호 / 본문 / 메타 세 칸 그리드. */
|
||||
.idx {
|
||||
display: grid;
|
||||
/* 번호 · 썸네일 · 본문 · 메타 */
|
||||
grid-template-columns: 2.6rem auto 1fr auto;
|
||||
/* 번호 · 썸네일 · 본문 · 날짜 */
|
||||
grid-template-columns: 2.4rem auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) 0;
|
||||
gap: var(--space-5);
|
||||
/* 썸네일이 잘 보이도록 위아래를 넉넉히 둔다 */
|
||||
padding: var(--space-5) 0;
|
||||
color: var(--text);
|
||||
transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
|
||||
}
|
||||
@@ -1794,13 +1658,17 @@ a.sr-only:focus-visible {
|
||||
|
||||
/* 좁은 화면에서는 메타를 제목 아래로 내린다 */
|
||||
.idx {
|
||||
grid-template-columns: 2rem 64px 1fr;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 2rem 88px 1fr;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.idx__thumb {
|
||||
width: 64px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.group {
|
||||
margin-bottom: var(--space-7);
|
||||
}
|
||||
|
||||
.idx__meta {
|
||||
|
||||
Reference in New Issue
Block a user