아지트 테마
골목뉴스능구렁이 손 재정난으로 파산신청페이로이 연구이사관보 직원들 사무실에서 재워... 연구팀 사망해 시민들 "경악"이강수 이사관의 갑질논란, 서류던지기가 취미사슴대 학생회, 총장 신체 탈취해 총장 영혼은 가까스로 탈출
AD
할 일
- 검색창 디자인
- 계정창 디자인 (타 플랫폼처럼)
- 링크, 사이드바 링크, 상단바 링크의 붉은색을 적당히 푸른 하이퍼링크로 교체
- 제목의 붉은색 제거
- 기본 글꼴?
- 글자 기본 색상 (#333?)
- 글자 기본 크기 확대
- 헤더 기본 이미지?
파일명: ad-foundation.png
저작자: Denevola
라이선스: CC BY-SA 3.0
원본 출처: Wikimedia Commons (Aelanna, Vizorsols), CC BY-SA 3.0
작업 중 다른 사람이 이 페이지를 편집할 수 없도록 15분간 잠급니다. 잠금은 899 초 간 아무것도 하지 않으면 풀립니다.
blockquote
nested blockquote
/* ---------- 전역 변수 ---------- */ :root { --header-padding: calc(((100vw - var(--content-size)) / 2) + 40px); --header-padding-second: 2.5rem; --header-padding-third: 5vw; --topbar-height: 30px; --content-size: 1500px; --theme-color: 209, 232, 255; --body-font: -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif; } /* ---------- 글꼴 ---------- */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap'); body { font-family: var(--body-font); font-size: .9em; } li, p { line-height: 180%; } h1, h2, h3, h4, h5, h6 { font-family: var(--body-font); } /* ---------- 속성 초기화 ---------- */
input { -webkit-appearance: none; -webkit-border-radius: 0; } #content-wrap { max-width: var(--content-size); min-height: 2350px; margin-top: 3em; } #header, #top-bar { width: 100%; max-width: 100%; height: var(--topbar-height); } #extra-div-1 { background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(128,128,128)); height: 140px; width: 100%; top: 0; position: absolute; } #header { top: 0; box-sizing: border-box; position: sticky; } #header h1 a, #header h2 { margin-left: var(--header-padding); } #login-status, #search-top-box { margin-right: var(--header-padding); } #login-status ul a:hover { background-color: rgb(var(--theme-color)); text-decoration: none; } @media (max-width: 1499px) { #header h1 a, #header h2 { margin-left: var(--header-padding-second); } #login-status, #search-top-box { margin-right: var(--header-padding-second); } } @media (max-width: 767px) { #header h1 a, #header h2 { margin-left: var(--header-padding-third); } #header h2::after { display: none; } #login-status, #search-top-box { margin-right: var(--header-padding-third); } #top-bar .open-menu a { display: flex; justify-content: center; bottom: 1rem; left: 1rem; padding: 6px; background-color: rgb(53, 53, 53); border: none; border-radius: 0; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2), 0 3px 10px 0 rgba(0, 0, 0, .19); color: rgb(255, 255, 255); transition: .1s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-top-bar > ul > li:nth-last-child(2) > ul { right: 0; } #side-bar { background-color: rgb(255, 255, 255); } } #header h1 a span, #header h2 span { font-size: 0; } #header h1 { position: absolute; top: -6rem; margin-left: 0; float: inherit; max-height: inherit; text-shadow: none; } #header h1 a { padding: 0; color: rgb(var(--theme-color)); font-size: 180%; line-height: 1; letter-spacing: 0; text-shadow: none; transition: text-shadow .1s ease-in-out; } #header h1 a::after { display: block; width: 178.5px; height: 80px; background-image: url('https://2021.wdfiles.com/local--files/theme%3Ahideout/front.svg'); background-position: bottom; background-repeat: no-repeat; background-size: contain; color: transparent; content: ''; } #header h2 { position: absolute; top: -2.5rem; color: rgb(var(--theme-color)); font-family: inherit; text-shadow: none; letter-spacing: .5em; } #header h2::after { margin-left: 178.5px; content: '양지로 나가지 못하는 사람들'; } #header h2 span { padding: 0; } #top-bar { position: inherit; background-color: rgb(53, 53, 53); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); color: rgb(255, 255, 255); } #top-bar ul li a { padding-top: calc(var(--topbar-height) / 2); padding-bottom: calc(var(--topbar-height) / 2.1); transition: background .1s cubic-bezier(0.4, 0, 0.2, 1); } #top-bar ul li a { background-color: rgb(53, 53, 53) !important; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: rgb(255, 255, 255) !important; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top: none; } #top-bar > div > ul > li > a { color: inherit; font-weight: bold; } #top-bar ul li.sfhover a, #top-bar ul li:hover a, .c_topbar_arrow { color: darkgray; } /* Nested topbar fix */ #top-bar ul li ul li ul { left: 176px; } .top-bar > ul { display: flex !important; justify-content: center; width: 100%; } .mobile-top-bar { position: inherit; display: flex; justify-content: center; width: 100%; max-width: 100%; } @media (min-width: 768px) { .mobile-top-bar { display: none; } } #login-status { top: -8rem; } #search-top-box { top: -4rem; } #search-top-box-form { display: inline-flex; background-color: rgb(53, 53, 53); border: 3px solid rgb(53, 53, 53); } #search-top-box-form > * { padding: .25em .5em; border: none !important; border-radius: 0; box-shadow: none !important; } #search-top-box-input { background-color: rgb(85, 85, 85) !important; transition: .1s cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box-input:hover { background-color: rgb(119, 119, 119) !important; cursor: pointer; } #search-top-box-input:focus-visible { background-color: rgb(119, 119, 119) !important; cursor: text; } #search-top-box-form input[type=submit] { margin: 0; background: rgb(53, 53, 53) !important; border-radius: 0; } #search-top-box-form input[type=submit]:hover { background: rgb(119, 119, 119) !important; } #container { padding-top: 140px; } /* 사이드바 임시디자인, 안 예쁨 */ #side-bar { color: rgba(0, 0, 0, .2); font-weight: bold; } #side-bar a, #side-bar a:visited { color: rgb(51, 51, 51); } #side-bar .side-block { padding: 10px 0; background-color: rgb(255, 255, 255) !important; border: none; border-radius: 0; box-shadow: none; } #side-bar div.menu-item { margin: 10px; } #side-bar div.menu-item img { display: none; } #side-bar div.menu-item a { font-weight: normal; letter-spacing: -2px; } #side-bar .heading { margin-top: 20px; margin-bottom: 10px; padding: .5em 1em; border-bottom: none; font-size: 1em; } #main-content { margin: 0 24em; } #u-side-bar { position: absolute; top: 6px; right: -22em; width: 230px; } #u-side-bar p { margin: 0; } .right-block { margin-bottom: 15px; padding: 10px 0; background-color: rgb(255, 255, 255); box-shadow: inset 0 0 6px rgba(0, 0, 0, .2); } #u-side-bar .heading { display: block; margin-top: 20px; margin-bottom: 10px; padding: .5em 1em; padding-left: 15px; background-color: rgb(62, 62, 62); border-bottom: none; color: rgb(255, 255, 255); font-size: 1em; font-weight: bold; } #u-side-bar .menu-item { display: flex; padding: 10px; } #u-side-bar .ad { transition: filter ease-out .2s; } #u-side-bar .ad:hover { cursor: pointer; filter: brightness(.75); } @media (max-width: 1410px) { #main-content { margin: 0 2em 0 22em; } #u-side-bar { position: fixed; top: 0; right: -20em; padding: 1em; height: 100%; background-color: rgb(255, 255, 255); box-shadow: 0 0 1rem rgba(0, 0, 0, .5); overflow-y: scroll; overscroll-behavior: none; transition: .5s; transition-delay: .13s; z-index: 10; } #u-side-bar::before { display: flex; position: fixed; top: 50%; right: 0; bottom: 0; width: 1rem; height: 10rem; background-color: rgba(0, 0, 0, .7); border-radius: .5rem 0 0 .5rem; box-shadow: 0 0 3px black; color: white; transform: translateY(-50%); transition: .1s; content: '🡄\A \A🡄\A \A🡄'; align-items: center; } #u-side-bar:hover::before { right: -2rem; cursor: pointer; transition-delay: .63s; } #u-side-bar:hover { right: 0; } } @media (min-width: 768px) and (max-width: 979px) { #top-bar ul li ul li ul { left: 136px; } #main-content { margin: 0 4em 0 20em; } } @media (max-width: 767px) { #main-content { max-width: 90%; margin: 0 5%; } } #page-options-container { margin-top: 2em; } #page-options-container > * { text-align: center; } .page-watch-options { display: none; } .page-options-bottom > .btn { display: inline-block; } h1, #page-title { color: inherit; } #page-title { font-size: 1.4em; font-weight: normal; } blockquote, div.blockquote { margin-block-start: 1.5em; margin-block-end: 1.5em; padding: .5em 1em; background-color: rgb(250, 250, 250); border: 2px solid rgba(0, 0, 0, .05); border-left: 5px solid rgb(var(--theme-color)); } /* 재조정 필요? */ a { color: rgb(91, 145, 191); } a:visited { color: rgb(57, 99, 135); } a.newpage { color: rgb(216, 185, 116); }