골목 테마 (이름 바꿀 것)

할 일


  • 검색창 디자인
  • 계정창 디자인 (타 플랫폼처럼)
  • 링크, 사이드바 링크, 상단바 링크의 붉은색을 적당히 푸른 하이퍼링크로 교체
  • 제목의 붉은색 제거
  • 기본 글꼴?
  • 글자 기본 색상 (#333?)
  • 글자 기본 크기 확대
  • 헤더 기본 이미지?

organometallic compound라고 하면 좁은 의미에서는 metal-carbon bonding이 있는 화합물을 이야기하는데, 여기서 보면 nitrogen oxide, dinitrogen, phosphine 같은 것들이 metal과 covalent bond를 만든 것도 이것과 유사한 characteristic을 보이지. 유기화학 시간에 Grignard reagent를 배웠을텐데, 아주 대표적인 organometallic compound야. 여기 magnesium이랑 carbon 사이에 sigma bond가 있는 게 보이지?

/* ---------- 전역 변수 ---------- */
: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);
}
Site-2021K | Contact | License | Made with ❤️ in Seoul