21K 테마실험실
평가: 0+x

갖은 실험용

  • 그라디언트 ONLY 헤더
  • SVG 로고
  • 합쳐진 검색창
  • BHL 스타일 모바일 로고

[[include :scpkrsandbox:theme:21k]]

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&family=Noto+Sans+KR:wght@400;700&display=swap');
 
div#container-wrap {
    background: #c33764;
    background: -webkit-linear-gradient(to bottom, #1d2671 1rem, #c33764 140px, #434343 140px, #434343 161px, #f3f3f3 161px, #f3f3f3 200px, #fff 250px);
    background: linear-gradient(to bottom, #1d2671 1rem, #c33764 140px, #434343 140px, #434343 161px, #f3f3f3 161px, #f3f3f3 200px, #fff 250px);
}
 
#header {
    background: url('https://scpkrsandbox.wdfiles.com/local--files/theme%3A21k/scp-ko-logo-white.svg') 10px 40px no-repeat;
    background-size: 6rem;
}
 
#header h1 a,
#header h2 span {
    font-family: 'Montserrat Alternates' ,BauhausLTDemi, 'Noto Sans KR', 'Nanum Gothic', Arial, sans-serif;
    text-shadow: none;
    line-height: 0;
    max-height: 0;
    color: transparent;
    user-select: none;
}
 
#header h1 a::before {
    content: "제21K기지";
    color: #eee;
    text-shadow: 3px 3px 5px #000;
}
 
#header h2 span::before {
    content: "여명을 지나 다시 아침으로";
    color: #f0f0c0;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 80%);
}
 
#search-top-box {
    width: unset;
    text-align: unset;
}
 
#search-top-box input {
    padding: .35rem;
}
 
#search-top-box-form {
    display: inline-flex;
}
 
#search-top-box-input {
    margin: 0;
    margin-right: -1px;
    border-radius: 5px 0 0 5px;
}
 
#search-top-box-form input[type=submit] {
    margin: 0;
    border-radius: 0 5px 5px 0;
    box-shadow: none;
}
 
#side-bar .side-block {
    border: 1px solid #000000;
    box-shadow: 0 2px 6px rgb(0 0 0 / 50%);
}
 
@media (max-width: 767px) {
    #header {
        background: none;
    }
 
    div#extra-div-2 {
        height: 8.7rem;
        width: 100%;
        top: 0;
        position: absolute;
        background: url('https://scpkrsandbox.wdfiles.com/local--files/theme%3A21k/scp-ko-logo-white.svg') -60px -13px no-repeat;
        background-size: 12rem;
        z-index: 0;
    }
}
 
@media (max-width: 479px) {
    #search-top-box-form input[type=submit] {
        border-radius: 5px;
    }
}