mirror of
https://github.com/CoderSherlock/CoderSherlock.github.io.git
synced 2026-06-13 08:08:10 -07:00
Update
This commit is contained in:
@@ -0,0 +1 @@
|
||||
/* Please override here. */
|
||||
|
||||
+168
-303
@@ -1,351 +1,216 @@
|
||||
/*
|
||||
* #eceff1
|
||||
* #b0bec5
|
||||
* #78909c
|
||||
*/
|
||||
|
||||
/* Reset */
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Noticia Text", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
|
||||
font-size: inherit;
|
||||
font-family: 'Open Sans', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: inherit;
|
||||
color: #000;
|
||||
line-height: 1rem;
|
||||
background-color: #eceff1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover, a:focus, a:active {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
padding-left: 1.5rem;
|
||||
a {
|
||||
transition-duration: .2s;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5rem;
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
a.tag {
|
||||
font-size: .8rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
a.tag:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
code:not(.hljs) {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 ,h6 { margin: 0; }
|
||||
h1 { font-size: 1.6rem; line-height: 2rem; }
|
||||
h2 { font-size: 1.3rem; line-height: 2rem; }
|
||||
h3 { font-size: 1.1rem; line-height: 2rem; }
|
||||
h4 { font-size: 1rem; line-height: 1rem; }
|
||||
h5 { font-size: 1rem; line-height: 1rem; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 { font-size: 1.4rem; line-height: 1.5rem; }
|
||||
h2 { font-size: 1.2rem; line-height: 1.5rem; }
|
||||
.share {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.share a {
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
/* Override */
|
||||
#TableOfContents {
|
||||
header.site nav.navbar {
|
||||
border-radius: 0;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
header.site .navbar-default .navbar-nav>li>a {
|
||||
font-size: .8rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
#TableOfContents a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#TableOfContents ul ul a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#TableOfContents>ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#TableOfContents>ul>li {
|
||||
font-weight: 900;
|
||||
header.page-title {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#TableOfContents>ul ul {
|
||||
padding-left: 0;
|
||||
font-weight: normal;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#TableOfContents>ul ul ul {
|
||||
padding-left: 1rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Layouts */
|
||||
.l-header {
|
||||
background-color: #fff;
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.l-footer {
|
||||
margin-top: 4rem;
|
||||
padding: 1rem 0;
|
||||
font-size: .8rem;
|
||||
color: #b0bec5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.l-footer a {
|
||||
color: #78909c;
|
||||
}
|
||||
|
||||
/* Parts:logo */
|
||||
.p-logo a {
|
||||
font-family: 'Marcellus SC', cursive;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* Parts:menu */
|
||||
.p-menu {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.p-menu a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-menu ul {
|
||||
font-size: .8rem;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.p-menu ul a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-menu ul ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* Parts:share */
|
||||
.p-share {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-share a {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
background-color: #263238;
|
||||
border-radius: 100%;
|
||||
color: #eceff1;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
/* Parts:page-title */
|
||||
.p-page-title {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Parts:paging */
|
||||
.p-paging a {
|
||||
display: inline-block;
|
||||
line-height: 2rem;
|
||||
padding: 0 1rem;
|
||||
background-color: #b0bec5;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Parts:section */
|
||||
section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
section>header {
|
||||
margin-bottom: .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
section>div {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
/* Parts:article */
|
||||
article {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
article>a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
article .image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
article .date {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
/* Parts:article:li */
|
||||
article.li {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
article.li .image {
|
||||
float: left;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
article.li footer {
|
||||
display: table-cell;
|
||||
height: 2.5rem;
|
||||
vertical-align: middle;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
article.li .date {
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
article.li .title {
|
||||
font-size: .8rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Parts:article:grid */
|
||||
article.grid {
|
||||
margin-bottom: 2rem;
|
||||
background-color: #fff;
|
||||
height: 24rem;
|
||||
max-height: 24rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article.grid .image {
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
article.grid .title {
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5rem;
|
||||
max-height: 4.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article.grid .summary {
|
||||
color: #333;
|
||||
max-height: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article.grid footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Parts:article:single */
|
||||
article.single {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
article.single .image {
|
||||
min-height: 24rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
article.single .image {
|
||||
min-height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
article.single aside {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
article.single .body {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
article.single .body {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
article.single .body a {
|
||||
color: #78909c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
article.single .body p {
|
||||
margin: 1rem 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
article.single .body pre {
|
||||
margin: 1rem -2rem;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: .7rem;
|
||||
article.li .date {
|
||||
font-size: .8rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
article.single .body pre code {
|
||||
padding: 1rem 2rem;
|
||||
article.li .title {
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
article.li .body {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
article.single .article-header {
|
||||
margin: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
article.single .article-header time {
|
||||
font-size: .8rem;
|
||||
line-height: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article.single .article-title {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
article.single .article-body {
|
||||
max-width: 650px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
article.single .body pre {
|
||||
margin: 1rem -1rem;
|
||||
}
|
||||
article.single .body pre code {
|
||||
padding: 1rem 1rem;
|
||||
article.single .article-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
article.single .body p>code {
|
||||
article.single .article-body h1,
|
||||
article.single .article-body h2,
|
||||
article.single .article-body h3,
|
||||
article.single .article-body h4,
|
||||
article.single .article-body h5,
|
||||
article.single .article-body h6 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
article.single h1 { font-size: 1.6rem; line-height: 2.4rem; }
|
||||
article.single h2 { font-size: 1.4rem; line-height: 2.1rem; }
|
||||
article.single h3 { font-size: 1.1rem; line-height: 1.7rem; }
|
||||
article.single h4 { font-size: 1rem; line-height: 1.5rem; }
|
||||
article.single h5 { font-size: 1rem; line-height: 1.5rem; }
|
||||
|
||||
article.single .article-body h1:first-child,
|
||||
article.single .article-body h2:first-child,
|
||||
article.single .article-body h3:first-child,
|
||||
article.single .article-body h4:first-child,
|
||||
article.single .article-body h5:first-child,
|
||||
article.single .article-body h6:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
article.single .article-body h1 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
article.single .article-body h2 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
article.single .article-body h3,
|
||||
article.single .article-body h4,
|
||||
article.single .article-body h5,
|
||||
article.single .article-body h6 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
article.single .article-body p {
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
article.single .article-body blockquote {
|
||||
padding: .5rem;
|
||||
font-size: .8rem;
|
||||
border-left: none;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
article.single .article-body blockquote p {
|
||||
line-height: 1rem;
|
||||
background-color: #eceff1;
|
||||
color: #78909c;
|
||||
}
|
||||
|
||||
article.single .body h1 { margin: 2rem 0; font-weight: 700; }
|
||||
article.single .body h2 { margin: 2rem 0; font-weight: 700; }
|
||||
article.single .body h3 { margin: 1rem 0; font-weight: 700; }
|
||||
|
||||
/* Helpers */
|
||||
ul.h-inline,
|
||||
ol.h-inline {
|
||||
padding-left: 0;
|
||||
article.single .article-body blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.h-inline li {
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
article.single .article-body pre {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
article.single aside {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
article.single aside {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
article.single aside .section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
footer.site {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
footer.site p {
|
||||
font-size: .8rem;
|
||||
margin-bottom: .5rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user