오프 캔버스 플란넬 네이처

개요

반응형 웹 디자인 오프 캔버스 시리즈의 플란넬 네이처 스킨입니다.

이 스킨의 원본은 Wikidot 사이트의 기본 테마입니다.

이 스킨은 방랑자의 도서관 사이트 전용으로 Dr Devan이 수정한 위키닷 테마입니다.

설치법

+ 설치법

1. 사이트에 있는 사이트 매니저(_admin)에서, 외관 & 작동(Appearances & Behavior)의 테마(Themes)로 가셔서 커스텀(Custom) 탭을 선택하시고, 새 테마를 만들어주세요.

2. 새로 만들 테마를 설정해주세요.
# 테마명(Theme name)은 마음대로 설정해주세요.
# 확장할 테마(Which theme to extend)는 Flannel Nature로 설정해주세요.
# 레이아웃 설정(Choose layout)은 Wikidot Basic으로 설정해주세요.
# CSS 코드(CSS Code)는 아래 코드를 넣어주세요. 커스텀이 필요하다면 이 코드 아래에 새 CSS 코드를 삽입하시면 됩니다.

@import url('http://devan.ga/skin:off-canvas-flannel-nature/code')

3. 사이드바 설정
# 사이드바(nav:side)에다 black.png 파일을 업로드해주세요.
# 사이드바 아래에 아래 코드를 입력해주세요.

~~~~

[[image black.png class="close-menu" link="#asdf" style="z-index:-1; opacity: 0.3;"]]

4. 상단바 설정
# 상단바(nav:top)는 아래와 같은 방식으로 설정해주세요.
# 주의: div.open-menu 부분은 반드시 div.mobile-top-bar의 안에 넣어주세요.

[[div class="top-bar"]]
* [# 메뉴 1]
* [[[item-1 | 항목 1]]]
* [[[item-2 | 항목 2]]]
* [[[item-3 | 항목 3]]]
* [# 메뉴 2]
* [[[item-1 | 항목 1]]]
* [[[item-2 | 항목 2]]]
* [# 메뉴 3]
* [[[item-1 | 항목 1]]]
* [[[item-2 | 항목 2]]]
* [[[item-3 | 항목 3]]]
* [[[item-4 | 항목 4]]]
* [[[item-5 | 항목 5]]]
[[/div]]

[[div class="mobile-top-bar"]]

[[div class="open-menu"]]
[#side-bar ≡]
[[/div]]

* [# 메뉴 1]
* [[[item-1 | 항목 1]]]
* [[[item-2 | 항목 2]]]
* [[[item-3 | 항목 3]]]
* [[[item-1 | 항목 4]]]
* [[[item-2 | 항목 5]]]
[[/div]]

오프 캔버스 사이드바

이 스킨은 사이드바를 화면 밖으로 밀었다가 버튼을 클릭하면 화면에 나타나는 오프 캔버스 방식을 사용한 스킨입니다.

• 모바일에서 좌측 하단에 사이드바 버튼을 터치하여 열기
• 열린 상태에서 사이드바 이외의 부분을 터치하면 닫힘
• 사이드바에서 따로 스크롤이 가능

코드

+ 코드 보기

@charset "utf-8";
 
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
 
/*
    Off-canvas Flannel Nature
    [Responsive Web Design]
    Created for 방랑자의 도서관 by Dr Devan
*/
 
/* Ruby by Nanimono Demonai */
 
.ruby, ruby {
    display:inline-table;
    text-align:center;
    white-space:nowrap;
    line-height:1;
    height:1em;
    vertical-align:text-bottom;
}
 
.rt, rt {
    display:table-header-group;
    font-size:0.6em;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
}
 
/* Keycap */
 
.keycap {
border: 1px solid;
border-color: #ddd #bbb #bbb #ddd;
border-bottom-width: 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #f9f9f9;
padding: 1px 3px;
font-family: inherit;
font-size: 0.85em;
white-space: nowrap;
}
 
/* tag style */
 
.tags {
display: inline-block;
margin: 0 0 0 5px;
padding: 3px 5px 3px 0px;
height: 13px;
line-height: 13px;
font-size: 11px;
background: #666;
color: #fff;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
 
.tags:before {
content: "";
padding: 0px 1px 3px 1px;
float: left;
position: relative;
top: -3px;
left: -10px;
width: 0;
height: 0;
border-color: transparent #666 transparent transparent;
border-style: solid;
border-width: 8px 8px 8px 0px;
}
 
.tags:after {
content: "";
position: relative;
top: 4.5px;
left: -8px;
float: left;
width: 4px;
height: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff;
-moz-box-shadow: -1px -1px 2px #004977;
-webkit-box-shadow: -1px -1px 2px #333;
box-shadow: -1px -1px 2px #333;
}
 
/* table */
 
table {
border-collapse: collapse;
}
 
.basic-table {
border: 1px solid rgb(136, 136, 136);
border-collapse: collapse;
margin: 0.5em auto;
}
 
.th {
border: 1px solid rgb(136, 136, 136);
text-align: center;
background-color: rgb(238, 238, 238);
padding: 0.3em 0.7em;
font-weight: bold;
}
 
.td {
border: 1px solid rgb(136, 136, 136);
text-align: left;
padding: 0.3em 0.7em;
}
 
/* viewport */
 
@viewport {
width: device-width;
zoom: 1.0;
}
 
/* IE viewport */
@-ms-viewport {
width: device-width;
zoom: 1.0;
}
 
/* opera viewport */
@-o-viewport {
width: device-width;
zoom: 1.0;
}
 
/* chrome viewport - maybe it isn't work... */
@-webkit-viewport {
width: device-width;
zoom: 1.0;
}
 
/* firefox viewport - maybe it isn't work too... */
@-moz-viewport {
width: device-width;
zoom: 1.0;
}
 
/* adblock */
.wd-adunit {
display: none;
}
 
/* webkit scrollbar */
::-webkit-scrollbar
{
  width: 9px;  /* for vertical scrollbars */
  height: 9px; /* for horizontal scrollbars */
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-round: 0.5px;
}
 
::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}
 
::-webkit-scrollbar-thumb
{
  background: rgba(50, 50, 50, 0.3);
}
 
/* Responsive Web Design */
img, embed, video, object, iframe, table {
    max-width: 100%;
}
 
#page-content div, #page-content div table {
    max-width: 100%;
}
 
.owindow {
    max-width: 99%;
}
 
.mobile-top-bar {
display: none;
}
 
#edit-page-comments {
width: 100%;
}
 
/* Mobile Media Query */
@media (max-width: 479px) { 
#search-top-box-input {
    width: 5em;
}
 
#content-wrap {
    margin: 0 auto;
}
 
#page-content {
    font-size: 0.9em;
}
 
#main-content {
    margin: 0;
}
 
#recent-posts-category {
width: 100%;
}
 
#side-bar {
    width: 80%;
    position: relative;
}
 
.top-bar {
    display:none;
}
 
.mobile-top-bar {
    display: block;
    padding: 0;
}
 
.mobile-top-bar ul {
    display: block;
}
 
.mobile-top-bar li a {
    display: block;
}
 
.mobile-top-bar li ul li {
    display: block;
}
 
.page-options-bottom a {
    padding: 0 4px;
}
 
#header h1 a {
    font-size: 80%;
}
 
blockquote {
    margin: 1em 0;
}
 
.license-area {
    font-size: 0.8em;
}
 
#header h1, #header h2 {
    max-width: 85%;
    text-align: left;
}
 
table.form td, table.form th {
    float: left;
}
 
#edit-page-title {
width: 100%;
}
}
 
/* Note Media Query */
@media (min-width: 480px) and (max-width: 580px) { 
#search-top-box-input {
    width: 7em;
}
 
#main-content {
    margin: 0 2em 0 2em;
}
 
#side-bar {
    width: 80%;
    position: relative;
}
 
.top-bar {
    display:none;
}
 
.mobile-top-bar {
    display: block;
}
 
.mobile-top-bar ul {
    display: block;
}
 
.mobile-top-bar li a {
    display: block;
}
 
.mobile-top-bar li ul li {
    display: block;
}
 
.page-options-bottom a {
    padding: 0 5px;
}
 
#header h1 a {
    font-size: 90%;
}
 
blockquote {
    margin: 0.5em;
}
 
.license-area {
    font-size: 0.85em;
}
 
#header h1, #header h2 {
    max-width: 85%;
    text-align: left;
    padding-left: 0.5em;
}
}
 
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 767px) { 
#search-top-box-input {
    width: 8em;
}
#side-bar {
    width: 80%;
    position: relative;
}
 
.top-bar {
    display:none;
}
 
.mobile-top-bar {
    display: block;
}
 
.mobile-top-bar ul {
    display: block;
}
 
.mobile-top-bar li a {
    display: block;
}
 
.mobile-top-bar li ul li {
    display: block;
}
 
#main-content {
    margin: 0 3em 0 2em;
}
 
.page-options-bottom a {
    padding: 0 6px;
}
 
.license-area {
    font-size: 0.9em;
}
 
#header h1, #header h2 {
    max-width: 85%;
    text-align: left;
    padding-left: 1.5em;
}
}
 
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 979px) {
#main-content {
margin: 0 4em 0 23em;
}
 
.top-bar {
display:block;
}
 
.mobile-top-bar {
display: none;
}
 
.top-bar li {
margin: 0;
}
 
.top-bar ul li.sfhover ul li a, .top-bar ul li:hover ul li a {
width: 100px;
}
 
.page-options-bottom a {
padding: 0 7px;
}
 
.license-area {
font-size: 0.95em;
}
}
 
/* Wide Monitor Media Query */
@media (min-width: 1400px) {
 
#content-wrap {
max-width: 1500px;
}
}
 
}
 
/* off-canvas */
 
.close-menu {
    display: none;
}
 
@media (max-width: 767px) {
 
.yui-navset {
z-index: 1;
}
 
#navi-bar, #navi-bar-shadow {
    display: none;
}
 
.open-menu a {
    position: fixed;
    bottom: 0.5em;
    left: 0.5em;
    z-index: 45;
    font-family: 'Nanum Gothic', san-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid rgba(75,114,75,1) !important;
    background-color: #fff !important;
    border-radius: 3em;
    color: rgba(75,114,75,1) !important;
    text-decoration: none;
}
 
.open-menu a:hover {
    text-decoration: none !important;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(75,114,75,1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(75,114,75,1);
    -ms-box-shadow: 0px 0px 20px 3px rgba(75,114,75,1);
    -o-box-shadow: 0px 0px 20px 3px rgba(75,114,75,1);
    box-shadow: 0px 0px 20px 3px rgba(75,114,75,1);
}
 
#main-content {
    max-width: 90%;
    margin: 0 5%;
    padding: 0;
    -webkit-transition: 0.5s ease-in-out 0.1s;
    -moz-transition: 0.5s ease-in-out 0.1s;
    -ms-transition: 0.5s ease-in-out 0.1s;
    -o-transition: 0.5s ease-in-out 0.1s;
    transition: 0.5s ease-in-out 0.1s;
}
 
#side-bar {
    display: block;
    position: fixed;
    top: 0;
    left: -25em;
    width: 17em;
    height: 100%;
    overflow-y: auto;
    z-index: 30;
    padding: 1em 1em 0 1em;
    -webkit-transition: left 0.5s ease-in-out 0.1s;
    -moz-transition: left 0.5s ease-in-out 0.1s;
    -ms-transition: left 0.5s ease-in-out 0.1s;
    -o-transition: left 0.5s ease-in-out 0.1s;
    transition: left 0.5s ease-in-out 0.1s;
}
 
#side-bar:after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
 
#side-bar .side-block {
background-color: #fffdd9;
border: solid 1px #dedede;
border-radius: 0.5em;
padding: 1em;
}
 
.close-menu a {
    display: none;
}
 
#side-bar:target {
    display: block;
    left: 0;
    width: 17em;
    margin: 0;
    border: 1px solid #dedede;
    z-index: 30;
}
 
#side-bar:target + #main-content {
    left: 0;
}
 
#side-bar:target a .close-menu {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
}

페이지 댓글

comments powered by Disqus