Created
May 10, 2016 08:57
-
-
Save thebriancat/1a0cfca420a7470c3ed64b455431b7cf to your computer and use it in GitHub Desktop.
Vancouverの全コード (LESS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "utf-8"; | |
/* | |
Theme: Vancouver | |
Author: Brian Cat | |
URL: http://brian.hatenablog.jp/ | |
Description: | |
シンプルなテーマ【Vancouver】を作ってみました。 | |
*/ | |
/* ------------------------------ | |
0. LESS設定 | |
------------------------------ */ | |
//ここにLESS関数などを記載 | |
/* import normalize */ | |
/*@import "less/_normalize.less";*/ | |
/* import mixin */ | |
@import "less/_mixin.less"; | |
/* import variable */ | |
@import "less/_variable.less"; | |
.flex-container(@direction; @justify; @align){ | |
display: flex; | |
flex-direction: @direction; | |
justify-content: @justify; | |
align-items: @align; | |
} | |
.flex-item(@grow: 1; @shrink: 1; @basis: auto){ | |
flex: @grow, @shrink, @basis; | |
} | |
.borderui(){ | |
padding: 4px 20px; | |
border-radius: 20px; | |
} | |
.awesome(@unicode; @padding: 4px){ | |
content: "\f@{unicode}"; | |
font-family: FontAwesome; | |
margin-right: @padding; | |
} | |
// BACKGROUND | |
@background: white; | |
// TEXTILE | |
@text: #333; | |
@text-header: black; | |
@text-light: #666; | |
@link: #0060e6; | |
@hover: deeppink; | |
@visited: lighten(@link, 5%); | |
@text-shadow: 0 0 6px #333; | |
@box-shadow: 0 0 2px #999; | |
@border: #333; | |
@border-weight: 4px; | |
// BTN | |
@btn-text: white; | |
@btn-background: #1abc9c; | |
@btn-hover: lighten(@btn-background, 20%); | |
// OTHERS | |
@trtime: .3s; | |
/* ------------------------------ | |
1. Common | |
------------------------------ */ | |
// FONT IMPORT | |
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css); | |
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); | |
@import url(https://fonts.googleapis.com/css?family=Merienda+One); | |
@import url(https://fonts.googleapis.com/css?family=Montserrat); | |
@import url(https://fonts.googleapis.com/css?family=Play); | |
@import url(https://fonts.googleapis.com/css?family=Ubuntu); | |
html, | |
body { | |
background-size: cover; | |
font-family: 'Ubuntu', 'Noto Sans Japanese', sans-serif; | |
color: @text; | |
} | |
a { | |
color: @link; | |
text-decoration: none; | |
transition: @trtime; | |
&:hover { | |
color: @hover; | |
} | |
&:visited { | |
color: @visited; | |
} | |
&:visited:hover { | |
color: lighten(@hover, 5%); | |
} | |
&.keyword{ | |
color: @text; | |
border-bottom: 1px dotted #ddd; | |
} | |
} | |
h1,h2,h3,h4,h5,h6 { | |
font-family: 'Montserrat', sans-serif; | |
a,a:visited { | |
color: @text-header; | |
text-decoration: none; | |
} | |
a:hover{ | |
color: lighten(@text-header, 30%); | |
} | |
} | |
.btn { | |
.inline-block; | |
padding: 4px 10px 4px; | |
margin-bottom: 0; | |
line-height: 18px; | |
color: @btn-text; | |
background-color: @btn-background; | |
text-align: center; | |
vertical-align: middle; | |
.border-radius(2px); | |
cursor: pointer; | |
font-size: 12px; | |
text-decoration: none; | |
font-weight: bold; | |
text-decoration: none !important; | |
&:hover { | |
background-color: @btn-hover; | |
text-decoration: none !important; | |
} | |
} | |
.btn-small { | |
padding: 2px 10px !important; | |
font-size: 11px !important; | |
} | |
.btn-large { | |
padding: 13px 19px; | |
font-size: 17px; | |
line-height: normal; | |
font-weight: bold; | |
} | |
/* ------------------------------ | |
2. Container | |
------------------------------ */ | |
#globalheader-container { | |
background: rgba(0,0,0,0.8); | |
color: white; | |
box-shadow: @box-shadow; | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
} | |
#container { | |
width: 100%; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 30px; | |
padding-top: 37px; // グローバルヘッダを fixed にしているため | |
} | |
.globalheader-off #container { | |
padding-top: 0; // グローバルヘッダ非表示の時 | |
} | |
#content{ | |
.flex-container(row, center, stretch); | |
} | |
#content-inner{ | |
width: 960px; | |
.flex-container(row, center, stretch); | |
} | |
#main { | |
width: 640px; | |
} | |
#box2 { | |
margin-left:20px; | |
width: 300px; | |
} | |
/* ------------------------------ | |
3. Header | |
------------------------------ */ | |
#blog-title { | |
margin: 0 0 30px 0; | |
padding: 100px 0; | |
letter-spacing: 2px; | |
text-align:center; | |
background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/x/x93mg/20160509/20160509204951.jpg'); | |
background-size: cover; | |
box-shadow: 0 0 6px #333; | |
} | |
#title { | |
font-family: 'Merienda One', sans-serif; | |
margin: 0; | |
a { | |
font-size: 250% !important; | |
color: white; | |
text-shadow: @text-shadow; | |
transition: @trtime; | |
} | |
a:hover{ | |
color: lemonchiffon; | |
} | |
} | |
#blog-description { | |
font-family: 'Play', sans-serif; | |
font-weight: bold; | |
font-size: 80%; | |
margin: 40px 0 0 0; | |
color: white; | |
text-shadow: @text-shadow; | |
} | |
.header-image-enable { | |
#title { | |
padding-top: 70px; | |
} | |
#title, | |
#blog-description { | |
padding-left: 20px; | |
} | |
} | |
#top-box { | |
margin: 10px auto 20px; | |
font-size: 90%; | |
.breadcrumb { | |
border: 1px solid @border; | |
padding: 10px; | |
} | |
} | |
/* ------------------------------ | |
4. Entry | |
------------------------------ */ | |
.entry { | |
padding: 15px; | |
border: @border-weight solid @border; | |
background: rgba(255, 255, 255, .95); | |
box-shadow: @box-shadow; | |
margin-bottom: 100px; | |
} | |
.entry-header { | |
padding: 30px; | |
margin-bottom: 30px; | |
border: @border-weight solid @border; | |
text-align: center; | |
} | |
.entry-title { | |
display: block; | |
margin: 20px 0; | |
padding: 20px 0; | |
border-top: (@border-weight - 1) solid @border; | |
border-bottom: (@border-weight - 1) solid @border; | |
line-height: 1.3; | |
font-size: 160%; | |
text-align:left; | |
} | |
.date { | |
font-weight: bold; | |
margin-bottom: 10px; | |
letter-spacing: 3px; | |
a { | |
font-family: 'Play', sans-serif; | |
font-size: 90%; | |
padding: 4px 20px; | |
background: @btn-background; | |
color: white; | |
text-decoration: none; | |
border-radius:20px; | |
transition: @trtime; | |
} | |
a:hover { | |
background: @btn-hover; | |
} | |
} | |
.categories { | |
margin-top: 10px; | |
font-size: 70%; | |
a { | |
color: white; | |
background: rgba(0, 0, 0, 0.4); | |
.borderui; | |
transition: @trtime; | |
} | |
a:hover { | |
background: rgba(0, 0, 0, 0.2); | |
} | |
a:before { | |
.awesome(115); | |
} | |
&.no-categories { | |
margin: 0; // カテゴリー無いとき | |
} | |
} | |
/* 「編集する」ボタン */ | |
.entry-header-menu { | |
position: absolute; | |
bottom: 0px; | |
left: -60px; | |
a { | |
.btn; | |
} | |
} | |
.entry-see-more{ | |
font-size: 90%; | |
background: rgba(0, 0, 0, 0.4); | |
.borderui; | |
transition: @trtime; | |
color: white !important; | |
&:hover{ | |
color: white !important; | |
background: rgba(0, 0, 0, 0.2); | |
} | |
} | |
.entry-content { | |
font-size: 95%; | |
line-height: 1.7; | |
padding-bottom: 10px; | |
border-bottom: 1px solid @border; | |
p { | |
margin: 0 0 1em 0; | |
} | |
img { | |
max-width: 100%; | |
border-radius: 3px; | |
} | |
h1,h2,h3,h4,h5,h6 { | |
margin: 1.3em 0 0.8em 0; | |
line-height: 1.5; | |
} | |
h1 { | |
font-size: 200%; | |
} | |
h2 { | |
font-size: 150%; | |
} | |
h3 { | |
display: block; | |
padding:30px 15px; | |
border-top:1px solid @border; | |
border-bottom:1px solid @border; | |
font-size: 140%; | |
&:first-letter{ | |
color: #1abc9c; | |
} | |
} | |
h4 { | |
display: block; | |
padding-bottom:15px; | |
border-bottom:1px solid @border; | |
font-size: 130%; | |
&:first-letter{ | |
color: #e74c3c; | |
} | |
} | |
h5 { | |
display: block; | |
font-size: 110%; | |
&:first-letter{ | |
color: #2980b9; | |
} | |
} | |
h6 { | |
display: block; | |
font-size: 100%; | |
&:first-color{ | |
color: #d35400; | |
} | |
} | |
strong{ | |
background: linear-gradient(transparent 60%, #ffff66 60%); | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
margin-bottom: 1em; | |
img { | |
max-width: none; | |
} | |
} | |
table th, | |
table td { | |
border: 1px solid #ddd; | |
padding: 5px 10px; | |
} | |
table th { | |
background: @bg-light; | |
} | |
blockquote { | |
font-size: 90%; | |
background: rgba(0, 0, 0, 0.1); | |
margin: 0 0 10px; | |
padding: 20px; | |
p { | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
} | |
pre { | |
background: white; | |
border: 1px solid @border; | |
margin: 0 0 10px; | |
padding: 20px; | |
white-space: pre; | |
} | |
pre>code { | |
margin: 0; | |
padding: 0; | |
white-space: pre; | |
border: 0; | |
background: transparent; | |
font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif; | |
} | |
code { | |
font-size: 90%; | |
margin: 0 2px; | |
padding: 0 5px; | |
border: 1px solid #eaeaea; | |
background-color: #f8f8f8; | |
border-radius: 3px; | |
font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif; | |
} | |
.hatena-asin-detail { | |
li { | |
line-height: 1.4; | |
} | |
} | |
} | |
.entry-footer { | |
margin-top: 10px; | |
} | |
.entry-footer-section { | |
font-size: 80%; | |
color: @text-light; | |
a { | |
color: @text-light; | |
} | |
} | |
.social-buttons, | |
.entry-footer-html { | |
margin: 10px 0; | |
} | |
.comment-box { | |
ul { | |
list-style: none; | |
margin: 0 0 15px 0; | |
padding: 0; | |
font-size: 95%; | |
line-height: 1.7; | |
} | |
li { | |
padding: 10px 0 10px 60px; | |
border-bottom: 1px solid @border; | |
position: relative; | |
&:first-child { | |
border-top: 1px solid @border; | |
} | |
} | |
.read-more-comments { | |
padding-left: 0; | |
} | |
.hatena-id-icon { | |
position: absolute; | |
top: 10px; | |
left: 0; | |
width: 50px !important; | |
height: 50px !important; | |
border-radius: 50%; | |
border: (@border-weight - 1) solid black; | |
} | |
} | |
.comment-user-name { | |
color: @text-light; | |
margin: 0 0 10px 0; | |
font-weight: bold; | |
& a{ | |
color: @link; | |
} | |
& a:hover{ | |
color: @hover; | |
} | |
} | |
.comment-content { | |
font-size: 90%; | |
margin: 0 0 10px 0; | |
word-wrap: break-word; | |
p { | |
margin: 0 0 10px 0; | |
} | |
} | |
.comment-metadata { | |
font-size: 75%; | |
color: @text-light; | |
margin: 0; | |
a { | |
color: @text-light; | |
} | |
} | |
.leave-comment-title { | |
.btn; | |
& a:hover{ | |
color: white; | |
} | |
} | |
/* ------------------------------ | |
5. Sidebar | |
------------------------------ */ | |
#box2 { | |
font-size: 85%; | |
line-height: 1.5; | |
} | |
.hatena-module { | |
padding: 15px; | |
border: @border-weight solid @border; | |
background: rgba(255, 255, 255, .95); | |
box-shadow: @box-shadow; | |
margin-bottom: 60px; | |
} | |
.hatena-module-title { | |
position: relative; | |
font-weight: bold; | |
margin-bottom: 15px; | |
font-size: 120%; | |
border-bottom: (@border-weight - 1) solid @border; | |
padding-bottom:8px; | |
letter-spacing:4px; | |
a { | |
color: @text; | |
text-decoration: none; | |
&:hover { | |
text-decoration: underline; | |
} | |
} | |
a:first-letter{ | |
color: @btn-background; | |
} | |
&:after{ | |
top: 100%; | |
left: 50%; | |
border: solid transparent; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
border-color: rgba(255, 255, 255, 0); | |
border-top-color: #ffffff; | |
border-width: 8px; | |
margin-left: -8px; | |
} | |
&:before{ | |
top: 100%; | |
left: 50%; | |
border: solid transparent; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
border-color: rgba(0, 0, 0, 0); | |
border-top-color: @border; | |
border-width: 12px; | |
margin-left: -12px; | |
} | |
} | |
.hatena-module-profile { | |
.profile-icon { | |
float: left; | |
margin: 0 10px 10px 0; | |
border-radius: 50%; | |
border: (@border-weight - 1) solid black; | |
} | |
.id { | |
display: block; | |
font-weight: bold; | |
font-size: 110%; | |
margin-bottom: 5px; | |
} | |
.profile-description { | |
font-size: 70%; | |
p{ | |
margin-top: 0; | |
} | |
} | |
} | |
.hatena-urllist { | |
list-style: none; | |
margin: 0 0 0 0; | |
padding: 0 0 0 0; | |
li { | |
padding: 8px 0; | |
border-bottom: 1px dotted @border; | |
line-height: 1.5; | |
&:last-child { | |
border-bottom: 0 solid transparent; | |
} | |
a { | |
text-decoration: none; | |
} | |
} | |
} | |
.hatena-module-search-box { | |
.search-form { | |
width: 100%; | |
display:flex ; | |
} | |
.search-module-input { | |
padding: 5px; | |
color: @text; | |
background: none; | |
border: none; | |
outline: none; | |
height: 20px; | |
width: 80%; | |
&:focus{ | |
color: @hover; | |
} | |
} | |
.search-module-button { | |
width: 20%; | |
padding:5px 10px; | |
outline: none; | |
background: rgba(0, 0, 0, .5); | |
border-radius: 3px; | |
&:hover { | |
opacity: 0.85; | |
} | |
} | |
} | |
/* ------------------------------ | |
6. Pager | |
------------------------------ */ | |
.pager { | |
display: flex; | |
justify-content: space-between; | |
align-items: stretch; | |
} | |
.pager { | |
margin: 1em 0; | |
.pager-prev { | |
text-align: left; | |
width: 45%; | |
} | |
.pager-next { | |
text-align: right; | |
width: 45%; | |
} | |
} | |
/* ------------------------------ | |
7. Footer | |
------------------------------ */ | |
#footer { | |
padding: 30px 0; | |
text-align: center; | |
color: @text-light; | |
line-height: 1.5; | |
font-size: 80%; | |
letter-spacing: 3px; | |
p { | |
margin: 0; | |
} | |
a { | |
color: @text-light; | |
} | |
img{ | |
border-radius:50%; | |
} | |
} | |
/* ------------------------------ | |
8. Other Page Components | |
------------------------------ */ | |
/* About ページ */ | |
.page-about { | |
dt { | |
font-size: 16px; | |
font-weight: bold; | |
border-bottom: 1px solid #dfdfdf; | |
margin-bottom: 5px; | |
} | |
dd { | |
margin-left: 0; | |
margin-bottom: 30px; | |
} | |
} | |
/* archive ページ */ | |
.page-archive { | |
.archive-entries { | |
.archive-entry { | |
margin-bottom: 3em; | |
} | |
.entry-title { | |
font-size: 130%; | |
margin: 0 0 .5em; | |
} | |
.categories { | |
margin: 0 0 .5em; | |
} | |
.entry-description { | |
margin: 0 0 1em; | |
line-height: 1.7em; | |
font-size: 95%; | |
} | |
} | |
.categories a { | |
font-size: 70%; | |
background: #aaa; | |
padding: 3px 5px; | |
border-radius: 3px; | |
text-decoration: none; | |
.inline-block; | |
margin-right: 2px; | |
} | |
} | |
/* ------------------------------ | |
9. Media Queries | |
------------------------------ */ | |
@media (max-width: 960px) { | |
#globalheader-container { | |
position: static; | |
} | |
#container { | |
display:flex; | |
justify-content: center; | |
} | |
#content{ | |
display:flex; | |
justify-content: center; | |
} | |
#content-inner { | |
width: 100%; | |
word-wrap: break-word; | |
overflow: hidden; | |
display: flex; | |
flex-direction: column; | |
} | |
#title a{ | |
font-size:160% !important; | |
} | |
#main { | |
margin-left: 20px; | |
margin-right: 20px; | |
width: auto; | |
} | |
#box2 { | |
margin-left: 5px; | |
margin-right: 5px; | |
width: auto; | |
} | |
.hatena-module { | |
margin-bottom: 15px; | |
} | |
.entry-header-menu { | |
top: -30px; | |
left: 0px; | |
} | |
} | |
@media (max-width: 476px) { | |
#container{ | |
padding-top: 0px; | |
} | |
#title a{ | |
padding-left: 10px; | |
padding-right: 10px; | |
font-size:140% !important; | |
} | |
#blog-description{ | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.entry-header { | |
border: 0 solid transparent; | |
padding: 0px; | |
} | |
.entry-title{ | |
font-size: 120%; | |
} | |
.categories{ | |
margin-bottom: 10px; | |
} | |
#main { | |
margin-left: 5px; | |
margin-right: 5px; | |
} | |
#box2 { | |
margin-left: 5px; | |
margin-right: 5px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment