미디어위키:Common.css: 두 판 사이의 차이
외관
Pretendard 적용 및 타이포그래피 조정 |
대문 구성요소 스타일 추가 |
||
| 1번째 줄: | 1번째 줄: | ||
/* ──────────────────────────────────────────────────────────────── | /* ──────────────────────────────────────────────────────────────── | ||
전역 스타일. 폰트는 /custom/fonts/ 에서 자체 호스팅한다(폐쇄망 대비). | 전역 스타일. 폰트는 /custom/fonts/ 에서 자체 호스팅한다(폐쇄망 대비). | ||
──────────────────────────────────────────────────────────────── */ | ──────────────────────────────────────────────────────────────── */ | ||
| 12번째 줄: | 11번째 줄: | ||
} | } | ||
body, | body, .mw-body, .mw-parser-output { | ||
.mw-body, | |||
.mw-parser-output { | |||
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, | font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, | ||
system-ui, 'Malgun Gothic', sans-serif; | system-ui, 'Malgun Gothic', sans-serif; | ||
} | } | ||
.mw-parser-output h2 { | .mw-parser-output h2 { | ||
font-size: 1.65em; | font-size: 1.65em; font-weight: 700; | ||
padding-bottom: 0.25em; | padding-bottom: 0.25em; | ||
border-bottom: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.12)); | border-bottom: 1px solid var(--border-color-base, rgba(255,255,255,0.12)); | ||
margin-top: 1.6em; | margin-top: 1.6em; | ||
} | } | ||
.mw-parser-output h3 { font-size: 1.3em; font-weight: 600; margin-top: 1.3em; } | |||
.mw-parser-output { line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; } | |||
.mw-parser-output p { margin: 0.7em 0; } | |||
.mw-parser-output .wikitable { border-collapse: collapse; font-size: 0.95em; } | |||
.mw-parser-output .wikitable > * > tr > th, | |||
.mw-parser-output .wikitable > * > tr > td { padding: 0.45em 0.7em; } | |||
.mw-parser-output .reference { font-size: 0.82em; } | |||
/* ──────────────────────────────────────────────────────────────── | |||
대문 구성요소 | |||
──────────────────────────────────────────────────────────────── */ | |||
. | .kw-hero { | ||
text-align: center; | |||
padding: 2.2em 1em 1.8em; | |||
margin-bottom: 1.4em; | |||
border-radius: 12px; | |||
background: linear-gradient(135deg, rgba(0,110,160,0.22), rgba(120,190,60,0.16)); | |||
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12)); | |||
} | } | ||
.kw-hero-sub { font-size: 0.95em; opacity: 0.75; margin-bottom: 0.3em; } | |||
.kw-hero-title { font-size: 1.9em; font-weight: 800; line-height: 1.3; } | |||
.kw-hero-desc { font-size: 0.95em; opacity: 0.8; margin-top: 0.6em; } | |||
.kw-notice { | |||
. | border-left: 4px solid #d98a00; | ||
background: rgba(217,138,0,0.10); | |||
padding: 0.8em 1em; | |||
border-radius: 0 8px 8px 0; | |||
margin: 1.2em 0; | |||
font-size: 0.94em; | |||
} | } | ||
. | .kw-cards { | ||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 0.9em; | |||
margin: 1.2em 0; | |||
} | |||
.kw-card { | |||
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12)); | |||
border-radius: 10px; | |||
padding: 1em 1.1em; | |||
background: rgba(127,127,127,0.06); | |||
} | } | ||
.kw-card-title { font-weight: 700; margin-bottom: 0.35em; font-size: 1.02em; } | |||
.kw-card-body { font-size: 0.9em; opacity: 0.85; line-height: 1.6; } | |||
/* | /* 둘러보기 틀 — 나무위키의 행 레이블 + 링크 나열 형태 */ | ||
. | .kw-navbox { | ||
border- | border: 1px solid var(--border-color-base, rgba(255,255,255,0.12)); | ||
border-radius: 10px; | |||
margin: 1.2em 0; | |||
overflow: hidden; | |||
} | |||
.kw-navbox-head { | |||
background: rgba(127,127,127,0.14); | |||
padding: 0.6em 1em; | |||
font-weight: 700; | |||
} | } | ||
.kw-navbox-row { display: flex; border-top: 1px solid var(--border-color-base, rgba(255,255,255,0.10)); } | |||
. | .kw-navbox-label { | ||
. | flex: 0 0 8.5em; | ||
padding: 0. | padding: 0.55em 0.9em; | ||
font-weight: 600; | |||
font-size: 0.9em; | |||
background: rgba(127,127,127,0.07); | |||
} | } | ||
.kw-navbox-links { padding: 0.55em 0.9em; font-size: 0.92em; line-height: 1.8; } | |||
@media (max-width: 640px) { | |||
. | .kw-navbox-row { flex-direction: column; } | ||
font-size: | .kw-navbox-label { flex: none; } | ||
.kw-hero-title { font-size: 1.45em; } | |||
} | } | ||
2026년 8월 10일 (월) 18:11 판
/* ────────────────────────────────────────────────────────────────
전역 스타일. 폰트는 /custom/fonts/ 에서 자체 호스팅한다(폐쇄망 대비).
──────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Pretendard Variable';
font-weight: 45 920;
font-style: normal;
font-display: swap;
src: url('/custom/fonts/PretendardVariable.woff2') format('woff2-variations');
}
body, .mw-body, .mw-parser-output {
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
system-ui, 'Malgun Gothic', sans-serif;
}
.mw-parser-output h2 {
font-size: 1.65em; font-weight: 700;
padding-bottom: 0.25em;
border-bottom: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
margin-top: 1.6em;
}
.mw-parser-output h3 { font-size: 1.3em; font-weight: 600; margin-top: 1.3em; }
.mw-parser-output { line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
.mw-parser-output p { margin: 0.7em 0; }
.mw-parser-output .wikitable { border-collapse: collapse; font-size: 0.95em; }
.mw-parser-output .wikitable > * > tr > th,
.mw-parser-output .wikitable > * > tr > td { padding: 0.45em 0.7em; }
.mw-parser-output .reference { font-size: 0.82em; }
/* ────────────────────────────────────────────────────────────────
대문 구성요소
──────────────────────────────────────────────────────────────── */
.kw-hero {
text-align: center;
padding: 2.2em 1em 1.8em;
margin-bottom: 1.4em;
border-radius: 12px;
background: linear-gradient(135deg, rgba(0,110,160,0.22), rgba(120,190,60,0.16));
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
}
.kw-hero-sub { font-size: 0.95em; opacity: 0.75; margin-bottom: 0.3em; }
.kw-hero-title { font-size: 1.9em; font-weight: 800; line-height: 1.3; }
.kw-hero-desc { font-size: 0.95em; opacity: 0.8; margin-top: 0.6em; }
.kw-notice {
border-left: 4px solid #d98a00;
background: rgba(217,138,0,0.10);
padding: 0.8em 1em;
border-radius: 0 8px 8px 0;
margin: 1.2em 0;
font-size: 0.94em;
}
.kw-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.9em;
margin: 1.2em 0;
}
.kw-card {
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
border-radius: 10px;
padding: 1em 1.1em;
background: rgba(127,127,127,0.06);
}
.kw-card-title { font-weight: 700; margin-bottom: 0.35em; font-size: 1.02em; }
.kw-card-body { font-size: 0.9em; opacity: 0.85; line-height: 1.6; }
/* 둘러보기 틀 — 나무위키의 행 레이블 + 링크 나열 형태 */
.kw-navbox {
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
border-radius: 10px;
margin: 1.2em 0;
overflow: hidden;
}
.kw-navbox-head {
background: rgba(127,127,127,0.14);
padding: 0.6em 1em;
font-weight: 700;
}
.kw-navbox-row { display: flex; border-top: 1px solid var(--border-color-base, rgba(255,255,255,0.10)); }
.kw-navbox-label {
flex: 0 0 8.5em;
padding: 0.55em 0.9em;
font-weight: 600;
font-size: 0.9em;
background: rgba(127,127,127,0.07);
}
.kw-navbox-links { padding: 0.55em 0.9em; font-size: 0.92em; line-height: 1.8; }
@media (max-width: 640px) {
.kw-navbox-row { flex-direction: column; }
.kw-navbox-label { flex: none; }
.kw-hero-title { font-size: 1.45em; }
}