Created
May 10, 2016 09:00
-
-
Save thebriancat/d0ac7ef4e594c78183a705a82f9e1f29 to your computer and use it in GitHub Desktop.
Vancouverの全コード (CSS)
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設定 | |
------------------------------ */ | |
/* import normalize */ | |
/*@import "less/_normalize.less";*/ | |
/* import mixin */ | |
@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); | |
.clearfix { | |
display: block; | |
*zoom: 1; | |
} | |
.clearfix:after { | |
display: block; | |
visibility: hidden; | |
font-size: 0; | |
height: 0; | |
clear: both; | |
content: "."; | |
} | |
.inline-block { | |
display: inline-block; | |
*display: inline; | |
*zoom: 1; | |
} | |
.ellipsis { | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
} | |
/* import variable */ | |
/* ------------------------------ | |
1. Common | |
------------------------------ */ | |
html, | |
body { | |
background-size: cover; | |
font-family: 'Ubuntu', 'Noto Sans Japanese', sans-serif; | |
color: #333; | |
} | |
a { | |
color: #0060e6; | |
text-decoration: none; | |
transition: 0.3s; | |
} | |
a:hover { | |
color: deeppink; | |
} | |
a:visited { | |
color: #006bff; | |
} | |
a:visited:hover { | |
color: #ff2e9f; | |
} | |
a.keyword { | |
color: #333; | |
border-bottom: 1px dotted #ddd; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-family: 'Montserrat', sans-serif; | |
} | |
h1 a, | |
h2 a, | |
h3 a, | |
h4 a, | |
h5 a, | |
h6 a, | |
h1 a:visited, | |
h2 a:visited, | |
h3 a:visited, | |
h4 a:visited, | |
h5 a:visited, | |
h6 a:visited { | |
color: black; | |
text-decoration: none; | |
} | |
h1 a:hover, | |
h2 a:hover, | |
h3 a:hover, | |
h4 a:hover, | |
h5 a:hover, | |
h6 a:hover { | |
color: #4d4d4d; | |
} | |
.btn { | |
display: inline-block; | |
*display: inline; | |
*zoom: 1; | |
padding: 4px 10px 4px; | |
margin-bottom: 0; | |
line-height: 18px; | |
color: white; | |
background-color: #1abc9c; | |
text-align: center; | |
vertical-align: middle; | |
border-top-right-radius: 2px; | |
border-bottom-right-radius: 0; | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
border-radius: 2px; | |
background-clip: padding-box; | |
cursor: pointer; | |
font-size: 12px; | |
text-decoration: none; | |
font-weight: bold; | |
text-decoration: none !important; | |
} | |
.btn:hover { | |
background-color: #55e7ca; | |
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: 0 0 2px #999; | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
} | |
#container { | |
width: 100%; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 30px; | |
padding-top: 37px; | |
} | |
.globalheader-off #container { | |
padding-top: 0; | |
} | |
#content { | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
align-items: stretch; | |
} | |
#content-inner { | |
width: 960px; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
align-items: 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; | |
} | |
#title a { | |
font-size: 250% !important; | |
color: white; | |
text-shadow: 0 0 6px #333; | |
transition: 0.3s; | |
} | |
#title 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: 0 0 6px #333; | |
} | |
.header-image-enable #title { | |
padding-top: 70px; | |
} | |
.header-image-enable #title, | |
.header-image-enable #blog-description { | |
padding-left: 20px; | |
} | |
#top-box { | |
margin: 10px auto 20px; | |
font-size: 90%; | |
} | |
#top-box .breadcrumb { | |
border: 1px solid #333; | |
padding: 10px; | |
} | |
/* ------------------------------ | |
4. Entry | |
------------------------------ */ | |
.entry { | |
padding: 15px; | |
border: 4px solid #333; | |
background: rgba(255, 255, 255, 0.95); | |
box-shadow: 0 0 2px #999; | |
margin-bottom: 100px; | |
} | |
.entry-header { | |
padding: 30px; | |
margin-bottom: 30px; | |
border: 4px solid #333; | |
text-align: center; | |
} | |
.entry-title { | |
display: block; | |
margin: 20px 0; | |
padding: 20px 0; | |
border-top: 3px solid #333; | |
border-bottom: 3px solid #333; | |
line-height: 1.3; | |
font-size: 160%; | |
text-align: left; | |
} | |
.date { | |
font-weight: bold; | |
margin-bottom: 10px; | |
letter-spacing: 3px; | |
} | |
.date a { | |
font-family: 'Play', sans-serif; | |
font-size: 90%; | |
padding: 4px 20px; | |
background: #1abc9c; | |
color: white; | |
text-decoration: none; | |
border-radius: 20px; | |
transition: 0.3s; | |
} | |
.date a:hover { | |
background: #55e7ca; | |
} | |
.categories { | |
margin-top: 10px; | |
font-size: 70%; | |
} | |
.categories a { | |
color: white; | |
background: rgba(0, 0, 0, 0.4); | |
padding: 4px 20px; | |
border-radius: 20px; | |
transition: 0.3s; | |
} | |
.categories a:hover { | |
background: rgba(0, 0, 0, 0.2); | |
} | |
.categories a:before { | |
content: "\f115"; | |
font-family: FontAwesome; | |
margin-right: 4px; | |
} | |
.categories.no-categories { | |
margin: 0; | |
} | |
/* 「編集する」ボタン */ | |
.entry-header-menu { | |
position: absolute; | |
bottom: 0px; | |
left: -60px; | |
} | |
.entry-header-menu a { | |
display: inline-block; | |
*display: inline; | |
*zoom: 1; | |
padding: 4px 10px 4px; | |
margin-bottom: 0; | |
line-height: 18px; | |
color: white; | |
background-color: #1abc9c; | |
text-align: center; | |
vertical-align: middle; | |
border-top-right-radius: 2px; | |
border-bottom-right-radius: 0; | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
border-radius: 2px; | |
background-clip: padding-box; | |
cursor: pointer; | |
font-size: 12px; | |
text-decoration: none; | |
font-weight: bold; | |
text-decoration: none !important; | |
} | |
.entry-header-menu a:hover { | |
background-color: #55e7ca; | |
text-decoration: none !important; | |
} | |
.entry-see-more { | |
font-size: 90%; | |
background: rgba(0, 0, 0, 0.4); | |
padding: 4px 20px; | |
border-radius: 20px; | |
transition: 0.3s; | |
color: white !important; | |
} | |
.entry-see-more: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 #333; | |
} | |
.entry-content p { | |
margin: 0 0 1em 0; | |
} | |
.entry-content img { | |
max-width: 100%; | |
border-radius: 3px; | |
} | |
.entry-content h1, | |
.entry-content h2, | |
.entry-content h3, | |
.entry-content h4, | |
.entry-content h5, | |
.entry-content h6 { | |
margin: 1.3em 0 0.8em 0; | |
line-height: 1.5; | |
} | |
.entry-content h1 { | |
font-size: 200%; | |
} | |
.entry-content h2 { | |
font-size: 150%; | |
} | |
.entry-content h3 { | |
display: block; | |
padding: 30px 15px; | |
border-top: 1px solid #333; | |
border-bottom: 1px solid #333; | |
font-size: 140%; | |
} | |
.entry-content h3:first-letter { | |
color: #1abc9c; | |
} | |
.entry-content h4 { | |
display: block; | |
padding-bottom: 15px; | |
border-bottom: 1px solid #333; | |
font-size: 130%; | |
} | |
.entry-content h4:first-letter { | |
color: #e74c3c; | |
} | |
.entry-content h5 { | |
display: block; | |
font-size: 110%; | |
} | |
.entry-content h5:first-letter { | |
color: #2980b9; | |
} | |
.entry-content h6 { | |
display: block; | |
font-size: 100%; | |
} | |
.entry-content h6:first-color { | |
color: #d35400; | |
} | |
.entry-content strong { | |
background: linear-gradient(transparent 60%, #ffff66 60%); | |
} | |
.entry-content table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
margin-bottom: 1em; | |
} | |
.entry-content table img { | |
max-width: none; | |
} | |
.entry-content table th, | |
.entry-content table td { | |
border: 1px solid #ddd; | |
padding: 5px 10px; | |
} | |
.entry-content table th { | |
background: #f5f5f5; | |
} | |
.entry-content blockquote { | |
font-size: 90%; | |
background: rgba(0, 0, 0, 0.1); | |
margin: 0 0 10px; | |
padding: 20px; | |
} | |
.entry-content blockquote p { | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.entry-content pre { | |
background: white; | |
border: 1px solid #333; | |
margin: 0 0 10px; | |
padding: 20px; | |
white-space: pre; | |
} | |
.entry-content pre > code { | |
margin: 0; | |
padding: 0; | |
white-space: pre; | |
border: 0; | |
background: transparent; | |
font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif; | |
} | |
.entry-content 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; | |
} | |
.entry-content .hatena-asin-detail li { | |
line-height: 1.4; | |
} | |
.entry-footer { | |
margin-top: 10px; | |
} | |
.entry-footer-section { | |
font-size: 80%; | |
color: #666; | |
} | |
.entry-footer-section a { | |
color: #666; | |
} | |
.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; | |
} | |
.comment-box li { | |
padding: 10px 0 10px 60px; | |
border-bottom: 1px solid #333; | |
position: relative; | |
} | |
.comment-box li:first-child { | |
border-top: 1px solid #333; | |
} | |
.comment-box .read-more-comments { | |
padding-left: 0; | |
} | |
.comment-box .hatena-id-icon { | |
position: absolute; | |
top: 10px; | |
left: 0; | |
width: 50px !important; | |
height: 50px !important; | |
border-radius: 50%; | |
border: 3px solid black; | |
} | |
.comment-user-name { | |
color: #666; | |
margin: 0 0 10px 0; | |
font-weight: bold; | |
} | |
.comment-user-name a { | |
color: #0060e6; | |
} | |
.comment-user-name a:hover { | |
color: deeppink; | |
} | |
.comment-content { | |
font-size: 90%; | |
margin: 0 0 10px 0; | |
word-wrap: break-word; | |
} | |
.comment-content p { | |
margin: 0 0 10px 0; | |
} | |
.comment-metadata { | |
font-size: 75%; | |
color: #666; | |
margin: 0; | |
} | |
.comment-metadata a { | |
color: #666; | |
} | |
.leave-comment-title { | |
display: inline-block; | |
*display: inline; | |
*zoom: 1; | |
padding: 4px 10px 4px; | |
margin-bottom: 0; | |
line-height: 18px; | |
color: white; | |
background-color: #1abc9c; | |
text-align: center; | |
vertical-align: middle; | |
border-top-right-radius: 2px; | |
border-bottom-right-radius: 0; | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
border-radius: 2px; | |
background-clip: padding-box; | |
cursor: pointer; | |
font-size: 12px; | |
text-decoration: none; | |
font-weight: bold; | |
text-decoration: none !important; | |
} | |
.leave-comment-title:hover { | |
background-color: #55e7ca; | |
text-decoration: none !important; | |
} | |
.leave-comment-title a:hover { | |
color: white; | |
} | |
/* ------------------------------ | |
5. Sidebar | |
------------------------------ */ | |
#box2 { | |
font-size: 85%; | |
line-height: 1.5; | |
} | |
.hatena-module { | |
padding: 15px; | |
border: 4px solid #333; | |
background: rgba(255, 255, 255, 0.95); | |
box-shadow: 0 0 2px #999; | |
margin-bottom: 60px; | |
} | |
.hatena-module-title { | |
position: relative; | |
font-weight: bold; | |
margin-bottom: 15px; | |
font-size: 120%; | |
border-bottom: 3px solid #333; | |
padding-bottom: 8px; | |
letter-spacing: 4px; | |
} | |
.hatena-module-title a { | |
color: #333; | |
text-decoration: none; | |
} | |
.hatena-module-title a:hover { | |
text-decoration: underline; | |
} | |
.hatena-module-title a:first-letter { | |
color: #1abc9c; | |
} | |
.hatena-module-title: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; | |
} | |
.hatena-module-title: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: #333; | |
border-width: 12px; | |
margin-left: -12px; | |
} | |
.hatena-module-profile .profile-icon { | |
float: left; | |
margin: 0 10px 10px 0; | |
border-radius: 50%; | |
border: 3px solid black; | |
} | |
.hatena-module-profile .id { | |
display: block; | |
font-weight: bold; | |
font-size: 110%; | |
margin-bottom: 5px; | |
} | |
.hatena-module-profile .profile-description { | |
font-size: 70%; | |
} | |
.hatena-module-profile .profile-description p { | |
margin-top: 0; | |
} | |
.hatena-urllist { | |
list-style: none; | |
margin: 0 0 0 0; | |
padding: 0 0 0 0; | |
} | |
.hatena-urllist li { | |
padding: 8px 0; | |
border-bottom: 1px dotted #333; | |
line-height: 1.5; | |
} | |
.hatena-urllist li:last-child { | |
border-bottom: 0 solid transparent; | |
} | |
.hatena-urllist li a { | |
text-decoration: none; | |
} | |
.hatena-module-search-box .search-form { | |
width: 100%; | |
display: flex ; | |
} | |
.hatena-module-search-box .search-module-input { | |
padding: 5px; | |
color: #333; | |
background: none; | |
border: none; | |
outline: none; | |
height: 20px; | |
width: 80%; | |
} | |
.hatena-module-search-box .search-module-input:focus { | |
color: deeppink; | |
} | |
.hatena-module-search-box .search-module-button { | |
width: 20%; | |
padding: 5px 10px; | |
outline: none; | |
background: rgba(0, 0, 0, 0.5); | |
border-radius: 3px; | |
} | |
.hatena-module-search-box .search-module-button:hover { | |
opacity: 0.85; | |
} | |
/* ------------------------------ | |
6. Pager | |
------------------------------ */ | |
.pager { | |
display: flex; | |
justify-content: space-between; | |
align-items: stretch; | |
} | |
.pager { | |
margin: 1em 0; | |
} | |
.pager .pager-prev { | |
text-align: left; | |
width: 45%; | |
} | |
.pager .pager-next { | |
text-align: right; | |
width: 45%; | |
} | |
/* ------------------------------ | |
7. Footer | |
------------------------------ */ | |
#footer { | |
padding: 30px 0; | |
text-align: center; | |
color: #666; | |
line-height: 1.5; | |
font-size: 80%; | |
letter-spacing: 3px; | |
} | |
#footer p { | |
margin: 0; | |
} | |
#footer a { | |
color: #666; | |
} | |
#footer 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; | |
} | |
.page-about dd { | |
margin-left: 0; | |
margin-bottom: 30px; | |
} | |
/* archive ページ */ | |
.page-archive .archive-entries .archive-entry { | |
margin-bottom: 3em; | |
} | |
.page-archive .archive-entries .entry-title { | |
font-size: 130%; | |
margin: 0 0 .5em; | |
} | |
.page-archive .archive-entries .categories { | |
margin: 0 0 .5em; | |
} | |
.page-archive .archive-entries .entry-description { | |
margin: 0 0 1em; | |
line-height: 1.7em; | |
font-size: 95%; | |
} | |
.page-archive .categories a { | |
font-size: 70%; | |
background: #aaa; | |
padding: 3px 5px; | |
border-radius: 3px; | |
text-decoration: none; | |
display: inline-block; | |
*display: inline; | |
*zoom: 1; | |
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