2018년 제타위키 CSS 초안

by JM note

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id='gnb'>
  <div class='core'>
    <div id='g-left'>
      <a id='brand' href="#"></a>
      <div id="g-search">
        <form action="/w/index.php" id="searchform" class="mw-search">
          <input type="search" name="search" placeholder="제타위키 검색" title="검색 [alt-shift-f]" accesskey="f" id="searchInput" class="form-control" autocomplete="off">
          <button class='btn btn1'><i class="fa fa-search" aria-hidden="true"></i></button>
          <button class='btn btn2'><i class="fa fa-random" aria-hidden="true"></i></button>
        </form>
      </div>
    </div>
    <div id="g-right">
      <a href="#"><i class="fa fa-university" aria-hidden="true"></i></a>
      <a href="#"><i class="fa fa-wrench" aria-hidden="true"></i></a>
      <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

<div id="main">
  <div class="core">
    <div id="navbox">
      <header>헤더</header>
      <a hreft="#">가가</a>
      <a hreft="#" class="active">나나</a>
      <header>헤더</header>
      <a hreft="#">다다</a>
    </div>
    <div id="doc">
      <header>
        <h2>제목 제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목</h2>
        <div style='float:left; margin: 5px 15px; color: #919191;'>2018-01-05</div>
        <div style='float:right'>
          <a href="#" class="btn">편집</a>
          <a href="#" class="btn">이력</a>
          <a href="#" class="btn">역링크</a>
          <a href="#" class="btn">공유</a>
          <a href="#" class="btn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></a>
        </div>
      </header>
      <article>
        <h2>개요</h2>
        <p>우리나라의 말이...

SCSS

$full_width: 700px;
$doc_width: 500px;
$img_width: 480px;
html, body { background-color:#eee !important; }
.core {
  max-width: $full_width;
  margin: 0 auto;
  width: 100%;
  display: flex;
}

#gnb {
  background: #4d85a4;
  color: #fff;
  a {
    color: #fff;
  }
}
#g-left {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 265px;
}
#g-search {
  width: 600px;
  margin: 5px;
  form {
    display: flex;
    height: 33px;
  }
  .btn {
    color: #999;
    border: 1px solid #eee;
    background: #fff;
        padding: 0 .5em;
  }
  .btn1 {
    border-radius: 0;
  }
  .btn2 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
#g-right {
  float: right;
  width: 140px;
  min-width: 140px;
  overflow: hidden;
  a {
    text-align:center;
    display: inline-block;
    padding: 11px 12px;
    margin-bottom: 0;
    font-size: 16px;
    &:hover {
      background: #2ae;
    }
  }
  
}
#searchInput {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#brand {
  min-width: 40px;
  background: url(//cdn.zetawiki.com/png/z-only.png) no-repeat center center/auto 50%;
}

#main { diplay:flex }
#navbox {
  flex: 1;
  background: #f5f9ff;
  header { padding-left: 10px; font-size:1.2em; line-height: 2 }
  a {
    font-size:1.1em;
    cursor: pointer;
    padding-left: 10px;
    display: block;
    text-decoration: none;
    &:hover {
      background: #fff;
    }
    &.active {
      background: #e1e8ed;
    }
  }
}
#doc {
  background: #fff;
  max-width: $doc_width;
  border: 1px solid #ccc;
  flex: 5;
  header {
    background: #e1e8ed;
    overflow: hidden;
    h2 {
      margin: 15px 15px 0;
    }
  }
  article {
    padding: 10px;
  }
  img {
    max-width: $img_width;
  }
}
#recent {
  flex: 1;
  > div {
    margin: .5em 0 0 .5em;
    background: #fff;
    header {
      border: 1px solid #e1e8ed;
      background-color: #f5f8fa;
    }
    div {
      border-bottom: 1px solid #e1e8ed;
      padding: 0.2rem 0.6rem;
    }
  ...