골목 테마 우측바
/* ---------- 전역 변수 ---------- */
:root {
    --header-padding: calc(((100vw - 1300px) / 2) + 40px);
    --header-padding-second: 2.5rem;
    --header-padding-third: 5vw;
    --topbar-height: 30px;
    --theme-color: 209, 232, 255;
 
    --body-font: 'Rubik', 'Nanum Gothic', sans-serif;
}
 
/* ---------- 글꼴 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&family=Rubik:wght@300;500&display=swap');
 
@font-face {
    font-family: GmarketSans;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
 
@font-face {
    font-family: GmarketSans;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: var(--body-font);
    font-size: .85em;
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--body-font);
}
 
/* ---------- 속성 초기화 ---------- */
#content-wrap {
    max-width: 1300px;
}
 
#header, #top-bar {
    width: 100%;
    max-width: 100%;
    height: var(--topbar-height);
}
 
#extra-div-1 {
    background: rgb(66, 66, 66);
    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);
}
 
@media (max-width: 1299px) {
    #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);
    }
 
    #login-status,
    #search-top-box {
        margin-right: var(--header-padding-third);
    }
 
}
 
#header h1 a span,
#header h2 span {
    font-size: 0;
}
 
#header h1 {
    position: absolute;
    top: -6.5rem;
    margin-left: 0;
    float: inherit;
    max-height: inherit;
    text-shadow: none;
}
 
#header h1 a {
    padding: 0;
    color: rgb(var(--theme-color));
    font-family: GmarketSans;
    font-size: 180%;
    line-height: inherit;
    letter-spacing: 0;
    text-shadow: none;
    transition: text-shadow .1s ease-in-out;
}
 
#header h1 a:hover {
    text-shadow: 0 0 2rem rgb(255, 255, 255);
}
 
#header h1 a::after {
    content: "골목길"
}
 
#header h2 {
    position: absolute;
    top: -3.5rem;
    color: rgb(var(--theme-color));
    font-family: GmarketSans;
    font-size: 160%;
    text-shadow: none;
}
 
#header h2::after {
    content: "우리골목길";
}
 
#header h2 span {
    padding: 0;
}
 
#top-bar {
    position: inherit;
    background: rgb(var(--theme-color));
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
 
#top-bar ul li a {
    padding-top: calc(var(--topbar-height) / 2);
    padding-bottom: calc(var(--topbar-height) / 2);
}
 
#top-bar > div > ul > li > a {
    color: inherit;
    font-weight: bold;
}
 
/* Nested topbar fix */
#top-bar ul li ul li ul {
    left: 174px;
}
 
.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;
}
 
#search-top-box-input {
    background: rgb(var(--theme-color));
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
}
 
#search-top-box-input:hover, #search-top-box-input:focus {
    background: rgba(var(--theme-color), .5);
}
 
#search-top-box-form input[type=submit] {
    background: rgb(var(--theme-color));
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}
 
#search-top-box-form input[type=submit]:hover {
    background: rgba(var(--theme-color), .5);
}
 
#container {
    padding-top: 140px;
}
 
/* 사이드바 임시디자인, 안 예쁨 */
#side-bar .side-block {
    background: rgb(255, 255, 255) !important;
    border: 2px solid rgb(187, 187, 187);
    border-radius: 5px;
    box-shadow: none;
}
 
#side-bar div.menu-item::before {
    color: rgb(187, 187, 187);
    content: "▸ ";
}
 
#side-bar div.menu-item img {
    display: none;
}
 
h1, #page-title {
    color: inherit;
    font-weight: bold;
}
 
/* 재조정 필요? */
a {
    color: rgb(91, 145, 191);
}
 
a.newpage {
    color: rgb(216, 185, 116);
}
#main-content {
    margin: 0 22em;
}
 
.rightbar {
    position: absolute;
    top: .5rem;
    right: -16rem;
    width: 217.188px;
}
 
.right-block {
    margin-bottom: 15px;
    padding: 10px;
    background: rgb(255, 255, 255);
    border: 2px solid rgb(187, 187, 187);
    border-radius: 5px;
}
 
.rightbar .title p {
    color: #600;
    border-bottom: solid 1px #600;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
 
.rightbar .ad:hover {
    cursor: pointer;
}
 
@media (min-width: 768px) and (max-width: 979px) {
    #main-content {
        margin: 0 4em 0 20em;
    }
 
    .rightbar {
        display: none;
    }
}
 
@media (max-width: 767px) {
    #main-content {
        max-width: 90%;
        margin: 0 5%;
    }
 
    .rightbar {
        display: none;
    }
}

파일명: ICSUT.png
저작자: DenevolaDenevola
라이선스: CC BY-SA 3.0
원본 출처: Flickr (erik forsberg), CC BY 2.0
원본 출처: DeviantArt (MingoMongo), CC BY-SA 3.0

Site-2021K | Contact | License | Made with ❤️ in Seoul