참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
COASTLINE: BLACK ICE - MainPage
로고 + 카테고리 네비 전용 최소 대문
========================================= */
/*
책임 범위
-----------------------------------------
- 대문 본문 .main-portal 내부만 담당한다.
- 사이트 공통 셸은 Layout.css가 담당한다.
- 카테고리 네비의 SVG 구조는 CategoryNav.js가 생성한다.
- 콘솔, 그래프, STATUS, INFORMATION, PROJECTS는 대문에서 제거한다.
*/
.main-portal {
--panel:#1d1d1d;
--well:#080808;
--edge:#050505;
--highlight:#555555;
--shadow:#101010;
--text:#e2e2e2;
--text-strong:#ffffff;
--block-gap:2px;
--frame:8px;
width:100%;
min-height:100%;
margin:0;
padding:0;
display:flex;
flex-direction:column;
color:var(--text);
background:transparent;
font-size:12px;
line-height:18px;
box-sizing:border-box;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output {
display:flex !important;
flex-direction:column !important;
}
body.action-view.clbi-main-page .liberty-content-main .mw-parser-output > .main-portal {
flex:1 0 auto;
min-height:0;
}
.main-portal *,
.main-portal *::before,
.main-portal *::after {
box-sizing:border-box;
}
.main-portal a,
.main-portal a:visited {
color:var(--text) !important;
text-decoration:none !important;
}
.main-portal a:hover,
.main-portal a:focus {
color:var(--text-strong) !important;
text-decoration:none !important;
}
/* 과거 대문 구조가 캐시에 남아 있어도 화면에는 나타나지 않게 한다. */
.main-portal > .console,
.main-portal > .portal-bottom-row,
.main-portal > [data-archive-graph] {
display:none !important;
}
/* -----------------------------------------
공통 돌출 프레임
----------------------------------------- */
.main-portal .lab-logo {
background:var(--panel, #1d1d1d);
border:1px solid var(--edge, #050505);
border-radius:0;
box-shadow:
inset 0 1px 0 var(--highlight, #555555),
inset -1px 0 0 var(--highlight, #555555),
inset 1px 0 0 var(--shadow, #101010),
inset 0 -1px 0 var(--shadow, #101010);
}
.main-portal .lab-logo {
flex:0 0 auto;
margin:0 0 var(--block-gap);
}
.main-portal [data-component="category-nav"] {
flex:0 0 auto;
display:block;
width:100%;
margin:0;
}
/* -----------------------------------------
로고 프레임
----------------------------------------- */
.main-portal .lab-logo {
padding:var(--frame);
overflow:hidden;
}
.main-portal .portal-logo-well {
min-height:86px;
padding:10px 8px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:var(--well);
border:0;
box-shadow:
inset 0 1px 0 var(--shadow),
inset -1px 0 0 var(--shadow),
inset 1px 0 0 var(--highlight),
inset 0 -1px 0 var(--highlight);
line-height:0;
}
.main-portal .portal-logo-well a,
.main-portal .portal-logo-well .mw-file-description {
display:inline-block;
line-height:0;
}
.main-portal .portal-logo-well img,
.main-portal .portal-logo-well .mw-file-element {
display:block;
width:1000px;
max-width:144%;
height:auto;
filter:grayscale(1) contrast(1.04) brightness(1.02);
}
/* -----------------------------------------
카테고리 네비
----------------------------------------- */
.portal-category-nav {
position:relative;
width:100%;
height:24px;
margin:0;
padding:0;
overflow:hidden;
background:var(--well, #080808);
border:0;
border-radius:0;
box-shadow:none;
}
.portal-category-svg {
display:block;
width:100%;
height:100%;
overflow:visible;
}
/*
각 버튼은 SVG 안에서 독립된 사선 프레임으로 그린다.
- 외곽 1px: #050505
- 본체: #1d1d1d
- 상단/우측 inset: #555555
- 좌측/하단 inset: #101010
- 버튼 사이 배경: #080808 2px
*/
.portal-cat-edge {
fill:#050505;
stroke:none;
}
.portal-cat-surface {
fill:#1d1d1d;
stroke:none;
}
.portal-cat-inset {
fill:none;
stroke-width:1;
shape-rendering:geometricPrecision;
}
.portal-cat-inset-top,
.portal-cat-inset-right {
stroke:#555555;
}
.portal-cat-inset-bottom,
.portal-cat-inset-left {
stroke:#101010;
}
.portal-cat-hit {
fill:transparent;
stroke:none;
cursor:pointer;
}
.portal-cat-anchor:hover .portal-cat-surface,
.portal-cat-anchor:focus .portal-cat-surface {
fill:#242424;
}
.portal-cat-anchor:active .portal-cat-surface {
fill:#101010;
}
.portal-cat-anchor:active .portal-cat-inset-top,
.portal-cat-anchor:active .portal-cat-inset-right {
stroke:#101010;
}
.portal-cat-anchor:active .portal-cat-inset-bottom,
.portal-cat-anchor:active .portal-cat-inset-left {
stroke:#555555;
}
.portal-cat-label {
fill:#e2e2e2;
font-family:inherit;
font-size:12px;
font-weight:700;
text-anchor:middle;
dominant-baseline:middle;
pointer-events:none;
paint-order:stroke;
stroke:#050505;
stroke-width:2px;
stroke-linejoin:round;
}
.portal-cat-anchor:hover .portal-cat-label,
.portal-cat-anchor:focus .portal-cat-label {
fill:#ffffff;
}
.main-portal a,
.main-portal .portal-cat-surface,
.main-portal .portal-cat-inset,
.main-portal .portal-cat-label {
transition:none !important;
}
@media screen and (max-width:820px) {
.portal-cat-label {
font-size:11px;
}
}
@media screen and (max-width:620px) {
.main-portal {
--frame:6px;
}
}
/* -----------------------------------------
대문 선언문
----------------------------------------- */
.main-portal .main-manifesto {
flex:1 0 auto;
min-height:0;
width:100%;
padding:clamp(34px, 5vh, 64px) clamp(24px, 7vw, 112px);
display:flex;
align-items:center;
justify-content:center;
}
.main-portal .main-manifesto-inner {
width:min(860px, 100%);
margin:0 auto;
color:#d8d8d8;
font-size:14px;
line-height:1.9;
letter-spacing:0.01em;
word-break:keep-all;
overflow-wrap:break-word;
}
.main-portal .main-manifesto-title {
margin:0 0 34px;
color:#ffffff;
font-size:36px;
font-weight:800;
line-height:1;
letter-spacing:0.12em;
text-align:center;
}
.main-portal .main-manifesto p {
margin:0 0 20px;
}
.main-portal .main-manifesto p:last-child {
margin-bottom:0;
}
@media screen and (max-width:820px) {
.main-portal .main-manifesto {
padding:32px 24px;
}
.main-portal .main-manifesto-inner {
font-size:13px;
line-height:1.85;
}
.main-portal .main-manifesto-title {
margin-bottom:28px;
font-size:32px;
}
}
@media screen and (max-width:620px) {
.main-portal .main-manifesto {
padding:28px 16px;
}
.main-portal .main-manifesto-inner {
font-size:12px;
line-height:1.8;
}
.main-portal .main-manifesto-title {
margin-bottom:24px;
font-size:28px;
}
}