Skip to content

B
blog
Commit bd5c5076 authored by John's avatar John
Browse files
Options

Site updated: 2018-04-30 18:02:42

parent 12c190c8
Hide whitespace changes
Inline Side-by-side
Showing with 1000 additions and 2 deletions
css/index.css
View file @ bd5c5076
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}body{font-family:Spoqa Han Sans,Spoqa Han Sans JP,Noto Sans Korean,sans-serif;text-shadow:0 0 .1px rgba(0,0,0,.3);-webkit-text-size-adjust:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%;font-size:14px}@media only screen and (min-width:624px){html{font-size:16px}}body{display:table;width:100%;height:100%;margin:0;color:#454545;line-height:1.5em;-webkit-font-smoothing:antialiased;table-layout:fixed}a{text-decoration:none;color:#59abe3;-webkit-transition:color .3s ease;transition:color .3s ease}a:hover{color:#4789b6}hr{margin:1.5rem 0;border:0;border-bottom:1px solid #ededed}h1,h2,h3,h4,h5,h6{font-weight:500}.page-background{z-index:-1;background-color:#fff;position:fixed;top:0;right:0;bottom:0;left:0}.content-outer{margin-top:8rem}@media only screen and (min-width:624px){.content-outer{margin-top:4rem}}.content-inner{width:100%;padding:1.5rem 0}.menu{display:table-row;width:100%;background-color:#fff;border-bottom:1px solid #ededed;list-style:none;margin:0;padding:0;overflow:hidden;position:absolute;top:0;z-index:3;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}@media only screen and (min-width:624px){.menu{position:fixed}}@media only screen and (min-width:624px){.menu--hide{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}}.menu-inner{width:100%;max-width:72rem;margin:auto;padding:0 1rem;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:624px){.menu-inner{padding:0}}.menu__left-area{float:left;height:4rem}@media only screen and (max-width:624px){.menu__left-area{width:100%;text-align:center;border-bottom:1px solid #f6f6f6}.menu__left-area .menu__item{float:none}}.menu__right-area{float:right;height:4rem}@media only screen and (max-width:624px){.menu__right-area{width:100%;overflow-x:auto;white-space:nowrap;padding:0 1.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}}.menu__item{position:relative;display:inline-block;float:left;margin-right:1.5rem}.menu__item:last-child{margin-right:0}.menu__item:after{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;background-color:transparent;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:background-color .3s ease,-webkit-transform .3s ease;transition:background-color .3s ease,-webkit-transform .3s ease;transition:background-color .3s ease,transform .3s ease;transition:background-color .3s ease,transform .3s ease,-webkit-transform .3s ease}.menu__item:hover .menu__item__link{color:#999}.menu__item:hover:after{background-color:#999;-webkit-transform:translateY(0);transform:translateY(0)}@media only screen and (max-width:624px){.menu__item{float:none}}.menu__item--active .menu__item__link{color:#59abe3}.menu__item--active:after{background-color:#59abe3;-webkit-transform:translateY(0);transform:translateY(0)}.menu__item__link{color:#666;font-size:1rem;display:inline-block;height:4rem;line-height:4rem}.menu__item__link--brand{color:#454545}.menu__item__link--brand__image{width:2.5rem;height:2.5rem;margin:.75rem 1rem .75rem 0;display:inline-block;float:left}.menu__item__link--brand__label{height:4rem;line-height:4rem;display:inline-block;float:left;font-weight:500}.article{position:relative;padding:1rem;overflow:hidden;max-width:45rem;margin:auto}@media only screen and (max-width:624px){.article{padding-top:0}}.article .article__contents img{display:block;margin:1rem}@media only screen and (max-width:624px){.article .article__contents img{width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem}}@media only screen and (min-width:624px){.article .article__contents img{max-width:100%;margin-left:auto;margin-right:auto}}.article .article__contents h1,.article .article__contents h2,.article .article__contents h3,.article .article__contents h4,.article .article__contents h5,.article .article__contents h6{color:#222;margin-top:3rem}.article .article__contents blockquote{background-color:#f6f6f6;padding:1.5rem 1rem;margin-left:-1rem;margin-right:-1rem}.article .article__contents blockquote p{margin:0}.article .article__contents blockquote p+p{margin-top:1rem}.article .article__contents blockquote code{background-color:transparent;padding:0;font-style:italic}.article .article__contents blockquote.pullquote.left{float:left;margin:0 1.5rem 1.5rem 0}.article .article__contents blockquote.pullquote.right{float:right;margin:0 0 1.5rem 1.5rem}.article .article__contents cite:before{content:"-";margin:0 7px;margin:0 .5rem}.article .article__contents code{font-family:consolas,monospace;background-color:#f6f6f6;color:#e28f0b;padding:.125rem .25rem;border-radius:2px;margin-left:0;margin-right:0}.article .article__contents figure.highlight{padding:0 1rem;margin-left:-1rem;margin-right:-1rem}.article .article__contents figure.highlight *{font-family:consolas,monospace}.article .article__contents figure.highlight figcaption{margin-top:1rem}.article .article__contents figure.highlight figcaption span{color:#999;margin-right:.5rem}.article .article__contents figure.highlight figcaption a{float:right}.article .article__contents figure.highlight table{border:0}.article .article__contents figure.highlight table tr td{padding:0}.article .article__contents figure.highlight .line{min-height:1.5rem}.article .article__contents figure.highlight .line.marked{background-color:rgba(0,0,0,.3)}.article .article__contents figure.highlight .gutter{width:1rem;padding-right:1rem;color:#999}.article .article__contents table{border-top:1px solid #999;width:100%;text-align:left;border-collapse:collapse}.article .article__contents table thead tr th{border-bottom:2px solid #f6f6f6;padding:.25rem 0}.article .article__contents table tbody tr td{border-bottom:1px solid #f6f6f6;padding:.25rem 0}.article .article__contents table tbody tr:last-child td{border-color:#999}.article .article__contents iframe{display:block;margin:1rem -1rem;width:calc(100% + 2rem)}.article .article__contents .video-container{position:relative;padding-top:56.25%;overflow:hidden}@media only screen and (max-width:624px){.article .article__contents .video-container{margin:0 -1rem;width:calc(100% + 2rem)}}.article .article__contents .video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;margin:0}.article .article__contents ol,.article .article__contents ul{list-style:none}.article .article__contents ol li,.article .article__contents ul li{position:relative}.article .article__contents ol li:before,.article .article__contents ul li:before{position:absolute}.article .article__contents ul{padding-left:1.5rem}.article .article__contents ul li:before{content:"•";left:-21px;left:-1.5rem}.article .article__contents ol{padding-left:2rem;counter-reset:a}.article .article__contents ol li:before{left:-28px;left:-2rem;display:inline-block;content:counter(a) ".";counter-increment:a;width:21px;width:1.5rem;text-align:right}.article .article__contents #footnotelist ol{padding-left:2rem!important}.article .article__contents #footnotelist ol li span:first-child{display:none!important}.article .article__contents #footnotelist ol li span:nth-child(2){display:inline!important}.article .article__contents hr{position:relative;border:0;margin:0;height:4rem}.article .article__contents hr:after{content:"• • •";position:absolute;top:50%;left:50%;margin-top:-10.5px;margin-top:-.75rem;margin-left:-21px;margin-left:-1.5rem}.article__title{line-height:1.2em}.article__image{display:block;margin:1.5rem -1rem;width:calc(100% + 2rem)}@media only screen and (min-width:624px){.article__image{max-width:100%;margin-left:auto;margin-right:auto}}.article__meta{font-size:14px;color:#999;overflow:hidden;width:100%}.article__meta__time{float:left}@media only screen and (max-width:624px){.article__meta__time{width:100%}}.article__meta__categories{float:right}@media only screen and (max-width:624px){.article__meta__categories{float:left;width:100%}}.article__meta__categories__item{color:#999}.article__meta__categories__item:hover{color:#59abe3}.article__meta__categories__separator{margin:0 8px;color:#999}.article__tags{margin:2rem 0}.article__tags__item{background-color:#ededed;color:#454545;border-radius:2px;font-size:.875rem;display:inline-block;padding:0 .5rem;margin-right:.5rem;margin-bottom:.5rem;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.article__tags__item:hover{background-color:#7abce9;color:#454545}.article__author{position:relative;padding:2rem 0 2rem 8rem;margin-bottom:2rem;border-top:1px solid #f6f6f6;border-bottom:1px solid #f6f6f6}.article__author__image{position:absolute;left:0;top:1.5rem;width:5rem;height:5rem;border-radius:50%}.article__author__link{font-size:1.5rem;font-weight:500;color:#454545}.article__author__link:hover{color:#59abe3}.article__author__desc{margin:0}.article__author__socials{margin-top:1rem}.article__author__socials__item{color:#999;font-size:1.25rem;margin-right:.75rem}.related-posts{text-align:center;overflow:hidden;width:100%;max-width:72rem;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (min-width:624px){.related-posts{padding:0 .5rem;margin:1rem auto}.related-posts h3{margin-bottom:0}}.related-posts__item__wrapper{width:100%;height:15rem;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (min-width:624px){.related-posts__item__wrapper{display:inline-block;width:33.33%;padding:0 .5rem;margin-top:.75rem}}.related-posts__item{position:relative;display:block;width:100%;height:100%;overflow:hidden}.related-posts__item:hover .related-posts__item__background{-webkit-transform:scale(1.2);transform:scale(1.2)}.related-posts__item__background{display:block;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;position:absolute;top:0;right:0;left:0;bottom:0;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.related-posts__item__overlay{background-color:rgba(0,0,0,.4);position:absolute;top:0;right:0;left:0;bottom:0}.related-posts__item__title{font-size:1.25rem;line-height:1.5em;font-weight:500;color:#fff;padding:0 1rem;position:absolute;top:50%;right:0;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.sharer{position:fixed;left:0;right:0;bottom:0;height:3rem;background-color:#fff;z-index:2;border-top:1px solid #ededed;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.sharer--hide{-webkit-transform:translateY(3rem);transform:translateY(3rem)}.sharer-inner{padding:0 1rem;max-width:45rem;margin:auto}.sharer__right{float:right}.sharer__item{background:none;border:0;padding:0;margin-left:1.5rem;font-size:1.5rem;line-height:3rem;color:#999;cursor:pointer;-webkit-transition:color .3s ease;transition:color .3s ease}#sharer-facebook:hover{color:#3b5998}#sharer-twitter:hover{color:#00aced}#sharer-pinterest:hover{color:#b5071a}#sharer-pocket:hover{color:#ef4056}.post-list{position:relative;width:100%;max-width:45rem;margin:auto;padding:0 1rem;-webkit-box-sizing:border-box;box-sizing:border-box}.post-list__item{overflow:hidden;padding:1rem 0;border-bottom:1px solid #f6f6f6}.post-list__item:last-child{border:0}.post-list__item__col-1{width:33.3333%;padding-right:.5rem}.post-list__item__col-1,.post-list__item__col-2{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}.post-list__item__col-2{width:66.6666%;padding-left:.5rem}.post-list__item__link{display:block;overflow:hidden;position:relative;width:100%;padding-top:75%}.post-list__item__link:hover .post-list__item__link__background{-webkit-transform:scale(1.2);transform:scale(1.2)}.post-list__item__link__background{position:absolute;top:0;right:0;bottom:0;left:0;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.post-list__item__meta__link{color:#999}.post-list__item__meta__link:hover{color:#59abe3}.post-list__item__meta__label{color:#999;margin:0 .5rem}.post-list__item__title{margin:.5rem 0}@media only screen and (max-width:624px){.post-list__item__title{height:1.5rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}.post-list__item__title a{color:#454545}.post-list__item__title a:hover{color:#59abe3}.post-list__item__description{margin:0}@media only screen and (max-width:624px){.post-list__item__description{height:1.5rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}.pagination{width:100%;text-align:center;padding:1rem 0}.pagination .current,.pagination a{display:inline-block;height:1.5rem;line-height:1.5rem;padding:0 .25rem;margin:0 .25rem;border-bottom:2px solid}.pagination .current{color:#454545}.pagination .space{color:#999}.pagination a{color:#999;border-color:transparent;-webkit-transition:border-color .3s ease,color .3s ease;transition:border-color .3s ease,color .3s ease}.pagination a:hover{color:#59abe3;border-color:#59abe3}.widgets{background-color:#f6f6f6}.widgets-inner{width:100%;max-width:72rem;margin:auto;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}@media only screen and (min-width:624px){.widgets-inner{padding:0 .5rem;text-align:center}}.widgets__item{width:100%;float:left;-webkit-box-sizing:border-box;box-sizing:border-box;margin:1rem 0;padding:0 1rem}@media only screen and (min-width:624px){.widgets__item{width:33.33%;padding:0 .5rem;display:inline-block;float:none;vertical-align:top;text-align:left}}.widgets__item ul{padding:0;list-style:none}.widgets__item ul ul{padding-left:1rem}.widgets__item ul ul li:before{float:left;padding-right:3.5px;padding-right:.25rem;content:"-"}.widgets__item li{overflow:hidden;width:100%}.widgets__item a{color:#666}.widgets__item a:hover{color:#59abe3}.widgets__item__heading{margin-top:0}.archive-list-link,.category-list-link,.tag-list-link{float:left}.archive-list-count,.category-list-count,.tag-list-count{font-size:.75em;padding-left:.5em;float:left}.archive-list-count:before,.category-list-count:before,.tag-list-count:before{content:"("}.archive-list-count:after,.category-list-count:after,.tag-list-count:after{content:")"}.copyright{background-color:#ededed;text-align:center;padding:2rem 0 5rem;margin:0}img[alt]{width:}
\ No newline at end of file
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
line-height:1.15;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}
article,aside,footer,header,nav,section {
display:block
}
h1 {
font-size:2em;
margin:.67em 0
}
figcaption,figure,main {
display:block
}
figure {
margin:1em 40px
}
hr {
-webkit-box-sizing:content-box;
box-sizing:content-box;
height:0;
overflow:visible
}
pre {
font-family:monospace,monospace;
font-size:1em
}
a {
background-color:transparent;
-webkit-text-decoration-skip:objects
}
abbr[title] {
border-bottom:none;
text-decoration:underline;
-webkit-text-decoration:underline dotted;
text-decoration:underline dotted
}
b,strong {
font-weight:inherit;
font-weight:bolder
}
code,kbd,samp {
font-family:monospace,monospace;
font-size:1em
}
dfn {
font-style:italic
}
mark {
background-color:#ff0;
color:#000
}
small {
font-size:80%
}
sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sub {
bottom:-.25em
}
sup {
top:-.5em
}
audio,video {
display:inline-block
}
audio:not([controls]) {
display:none;
height:0
}
img {
border-style:none
}
svg:not(:root) {
overflow:hidden
}
button,input,optgroup,select,textarea {
font-family:sans-serif;
font-size:100%;
line-height:1.15;
margin:0
}
button,input {
overflow:visible
}
button,select {
text-transform:none
}
[type=reset],[type=submit],button,html [type=button] {
-webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
border-style:none;
padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
outline:1px dotted ButtonText
}
fieldset {
padding:.35em .75em .625em
}
legend {
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:inherit;
display:table;
max-width:100%;
padding:0;
white-space:normal
}
progress {
display:inline-block;
vertical-align:baseline
}
textarea {
overflow:auto
}
[type=checkbox],[type=radio] {
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
height:auto
}
[type=search] {
-webkit-appearance:textfield;
outline-offset:-2px
}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
details,menu {
display:block
}
summary {
display:list-item
}
canvas {
display:inline-block
}
[hidden],template {
display:none
}
body {
font-family:Spoqa Han Sans,Spoqa Han Sans JP,Noto Sans Korean,sans-serif;
text-shadow:0 0 .1px rgba(0,0,0,.3);
-webkit-text-size-adjust:antialiased;
-moz-osx-font-smoothing:grayscale
}
html {
height:100%;
font-size:14px
}
@media only screen and (min-width:624px) {
html {
font-size:16px
}
}
body {
display:table;
width:100%;
height:100%;
margin:0;
color:#454545;
line-height:1.5em;
-webkit-font-smoothing:antialiased;
table-layout:fixed
}
a {
text-decoration:none;
color:#59abe3;
-webkit-transition:color .3s ease;
transition:color .3s ease
}
a:hover {
color:#4789b6
}
hr {
margin:1.5rem 0;
border:0;
border-bottom:1px solid #ededed
}
h1,h2,h3,h4,h5,h6 {
font-weight:500
}
.page-background {
z-index:-1;
background-color:#fff;
position:fixed;
top:0;
right:0;
bottom:0;
left:0
}
.content-outer {
margin-top:8rem
}
@media only screen and (min-width:624px) {
.content-outer {
margin-top:4rem
}
}
.content-inner {
width:100%;
padding:1.5rem 0
}
.menu {
display:table-row;
width:100%;
background-color:#fff;
border-bottom:1px solid #ededed;
list-style:none;
margin:0;
padding:0;
overflow:hidden;
position:absolute;
top:0;
z-index:3;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:-webkit-transform .3s ease;
transition:-webkit-transform .3s ease;
transition:transform .3s ease;
transition:transform .3s ease,-webkit-transform .3s ease
}
@media only screen and (min-width:624px) {
.menu {
position:fixed
}
}
@media only screen and (min-width:624px) {
.menu--hide {
-webkit-transform:translateY(-4rem);
transform:translateY(-4rem)
}
}
.menu-inner {
width:100%;
max-width:72rem;
margin:auto;
padding:0 1rem;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
@media only screen and (max-width:624px) {
.menu-inner {
padding:0
}
}
.menu__left-area {
float:left;
height:4rem
}
@media only screen and (max-width:624px) {
.menu__left-area {
width:100%;
text-align:center;
border-bottom:1px solid #f6f6f6
}
.menu__left-area .menu__item {
float:none
}
}
.menu__right-area {
float:right;
height:4rem
}
@media only screen and (max-width:624px) {
.menu__right-area {
width:100%;
overflow-x:auto;
white-space:nowrap;
padding:0 1.5rem;
-webkit-box-sizing:border-box;
box-sizing:border-box;
text-align:center
}
}
.menu__item {
position:relative;
display:inline-block;
float:left;
margin-right:1.5rem
}
.menu__item:last-child {
margin-right:0
}
.menu__item:after {
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
height:2px;
background-color:transparent;
-webkit-transform:translateY(2px);
transform:translateY(2px);
-webkit-transition:background-color .3s ease,-webkit-transform .3s ease;
transition:background-color .3s ease,-webkit-transform .3s ease;
transition:background-color .3s ease,transform .3s ease;
transition:background-color .3s ease,transform .3s ease,-webkit-transform .3s ease
}
.menu__item:hover .menu__item__link {
color:#999
}
.menu__item:hover:after {
background-color:#999;
-webkit-transform:translateY(0);
transform:translateY(0)
}
@media only screen and (max-width:624px) {
.menu__item {
float:none
}
}
.menu__item--active .menu__item__link {
color:#59abe3
}
.menu__item--active:after {
background-color:#59abe3;
-webkit-transform:translateY(0);
transform:translateY(0)
}
.menu__item__link {
color:#666;
font-size:1rem;
display:inline-block;
height:4rem;
line-height:4rem
}
.menu__item__link--brand {
color:#454545
}
.menu__item__link--brand__image {
width:2.5rem;
height:2.5rem;
margin:.75rem 1rem .75rem 0;
display:inline-block;
float:left
}
.menu__item__link--brand__label {
height:4rem;
line-height:4rem;
display:inline-block;
float:left;
font-weight:500
}
.article {
position:relative;
padding:1rem;
overflow:hidden;
max-width:45rem;
margin:auto
}
@media only screen and (max-width:624px) {
.article {
padding-top:0
}
}
.article .article__contents img {
display:block;
margin:1rem
}
@media only screen and (max-width:624px) {
.article .article__contents img {
width:calc(100% + 2rem);
margin-left:-1rem;
margin-right:-1rem
}
}
@media only screen and (min-width:624px) {
.article .article__contents img {
max-width:100%;
margin-left:auto;
margin-right:auto
}
}
.article .article__contents h1,.article .article__contents h2,.article .article__contents h3,.article .article__contents h4,.article .article__contents h5,.article .article__contents h6 {
color:#222;
margin-top:3rem
}
.article .article__contents blockquote {
background-color:#f6f6f6;
padding:1.5rem 1rem;
margin-left:-1rem;
margin-right:-1rem
}
.article .article__contents blockquote p {
margin:0
}
.article .article__contents blockquote p+p {
margin-top:1rem
}
.article .article__contents blockquote code {
background-color:transparent;
padding:0;
font-style:italic
}
.article .article__contents blockquote.pullquote.left {
float:left;
margin:0 1.5rem 1.5rem 0
}
.article .article__contents blockquote.pullquote.right {
float:right;
margin:0 0 1.5rem 1.5rem
}
.article .article__contents cite:before {
content:"-";
margin:0 7px;
margin:0 .5rem
}
.article .article__contents code {
font-family:consolas,monospace;
background-color:#f6f6f6;
color:#e28f0b;
padding:.125rem .25rem;
border-radius:2px;
margin-left:0;
margin-right:0
}
.article .article__contents figure.highlight {
padding:0 1rem;
margin-left:-1rem;
margin-right:-1rem
}
.article .article__contents figure.highlight * {
font-family:consolas,monospace
}
.article .article__contents figure.highlight figcaption {
margin-top:1rem
}
.article .article__contents figure.highlight figcaption span {
color:#999;
margin-right:.5rem
}
.article .article__contents figure.highlight figcaption a {
float:right
}
.article .article__contents figure.highlight table {
border:0
}
.article .article__contents figure.highlight table tr td {
padding:0
}
.article .article__contents figure.highlight .line {
min-height:1.5rem
}
.article .article__contents figure.highlight .line.marked {
background-color:rgba(0,0,0,.3)
}
.article .article__contents figure.highlight .gutter {
width:1rem;
padding-right:1rem;
color:#999
}
.article .article__contents table {
border-top:1px solid #999;
width:100%;
text-align:left;
border-collapse:collapse
}
.article .article__contents table thead tr th {
border-bottom:2px solid #f6f6f6;
padding:.25rem 0
}
.article .article__contents table tbody tr td {
border-bottom:1px solid #f6f6f6;
padding:.25rem 0
}
.article .article__contents table tbody tr:last-child td {
border-color:#999
}
.article .article__contents iframe {
display:block;
margin:1rem -1rem;
width:calc(100% + 2rem)
}
.article .article__contents .video-container {
position:relative;
padding-top:56.25%;
overflow:hidden
}
@media only screen and (max-width:624px) {
.article .article__contents .video-container {
margin:0 -1rem;
width:calc(100% + 2rem)
}
}
.article .article__contents .video-container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0
}
.article .article__contents ol,.article .article__contents ul {
list-style:none
}
.article .article__contents ol li,.article .article__contents ul li {
position:relative
}
.article .article__contents ol li:before,.article .article__contents ul li:before {
position:absolute
}
.article .article__contents ul {
padding-left:1.5rem
}
.article .article__contents ul li:before {
content:"•";
left:-21px;
left:-1.5rem
}
.article .article__contents ol {
padding-left:2rem;
counter-reset:a
}
.article .article__contents ol li:before {
left:-28px;
left:-2rem;
display:inline-block;
content:counter(a) ".";
counter-increment:a;
width:21px;
width:1.5rem;
text-align:right
}
.article .article__contents #footnotelist ol {
padding-left:2rem!important
}
.article .article__contents #footnotelist ol li span:first-child {
display:none!important
}
.article .article__contents #footnotelist ol li span:nth-child(2) {
display:inline!important
}
.article .article__contents hr {
position:relative;
border:0;
margin:0;
height:4rem
}
.article .article__contents hr:after {
content:"• • •";
position:absolute;
top:50%;
left:50%;
margin-top:-10.5px;
margin-top:-.75rem;
margin-left:-21px;
margin-left:-1.5rem
}
.article__title {
line-height:1.2em
}
.article__image {
display:block;
margin:1.5rem -1rem;
width:calc(100% + 2rem)
}
@media only screen and (min-width:624px) {
.article__image {
max-width:100%;
margin-left:auto;
margin-right:auto
}
}
.article__meta {
font-size:14px;
color:#999;
overflow:hidden;
width:100%
}
.article__meta__time {
float:left
}
@media only screen and (max-width:624px) {
.article__meta__time {
width:100%
}
}
.article__meta__categories {
float:right
}
@media only screen and (max-width:624px) {
.article__meta__categories {
float:left;
width:100%
}
}
.article__meta__categories__item {
color:#999
}
.article__meta__categories__item:hover {
color:#59abe3
}
.article__meta__categories__separator {
margin:0 8px;
color:#999
}
.article__tags {
margin:2rem 0
}
.article__tags__item {
background-color:#ededed;
color:#454545;
border-radius:2px;
font-size:.875rem;
display:inline-block;
padding:0 .5rem;
margin-right:.5rem;
margin-bottom:.5rem;
-webkit-transition:background-color .3s ease;
transition:background-color .3s ease
}
.article__tags__item:hover {
background-color:#7abce9;
color:#454545
}
.article__author {
position:relative;
padding:2rem 0 2rem 8rem;
margin-bottom:2rem;
border-top:1px solid #f6f6f6;
border-bottom:1px solid #f6f6f6
}
.article__author__image {
position:absolute;
left:0;
top:1.5rem;
width:5rem;
height:5rem;
border-radius:50%
}
.article__author__link {
font-size:1.5rem;
font-weight:500;
color:#454545
}
.article__author__link:hover {
color:#59abe3
}
.article__author__desc {
margin:0
}
.article__author__socials {
margin-top:1rem
}
.article__author__socials__item {
color:#999;
font-size:1.25rem;
margin-right:.75rem
}
.related-posts {
text-align:center;
overflow:hidden;
width:100%;
max-width:72rem;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
@media only screen and (min-width:624px) {
.related-posts {
padding:0 .5rem;
margin:1rem auto
}
.related-posts h3 {
margin-bottom:0
}
}
.related-posts__item__wrapper {
width:100%;
height:15rem;
text-align:center;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
@media only screen and (min-width:624px) {
.related-posts__item__wrapper {
display:inline-block;
width:33.33%;
padding:0 .5rem;
margin-top:.75rem
}
}
.related-posts__item {
position:relative;
display:block;
width:100%;
height:100%;
overflow:hidden
}
.related-posts__item:hover .related-posts__item__background {
-webkit-transform:scale(1.2);
transform:scale(1.2)
}
.related-posts__item__background {
display:block;
background-size:cover;
background-position:50% 50%;
background-repeat:no-repeat;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
-webkit-transition:-webkit-transform .3s ease;
transition:-webkit-transform .3s ease;
transition:transform .3s ease;
transition:transform .3s ease,-webkit-transform .3s ease
}
.related-posts__item__overlay {
background-color:rgba(0,0,0,.4);
position:absolute;
top:0;
right:0;
left:0;
bottom:0
}
.related-posts__item__title {
font-size:1.25rem;
line-height:1.5em;
font-weight:500;
color:#fff;
padding:0 1rem;
position:absolute;
top:50%;
right:0;
left:0;
-webkit-transform:translateY(-50%);
transform:translateY(-50%)
}
.sharer {
position:fixed;
left:0;
right:0;
bottom:0;
height:3rem;
background-color:#fff;
z-index:2;
border-top:1px solid #ededed;
-webkit-transition:-webkit-transform .3s ease;
transition:-webkit-transform .3s ease;
transition:transform .3s ease;
transition:transform .3s ease,-webkit-transform .3s ease
}
.sharer--hide {
-webkit-transform:translateY(3rem);
transform:translateY(3rem)
}
.sharer-inner {
padding:0 1rem;
max-width:45rem;
margin:auto
}
.sharer__right {
float:right
}
.sharer__item {
background:none;
border:0;
padding:0;
margin-left:1.5rem;
font-size:1.5rem;
line-height:3rem;
color:#999;
cursor:pointer;
-webkit-transition:color .3s ease;
transition:color .3s ease
}
#sharer-facebook:hover {
color:#3b5998
}
#sharer-twitter:hover {
color:#00aced
}
#sharer-pinterest:hover {
color:#b5071a
}
#sharer-pocket:hover {
color:#ef4056
}
.post-list {
position:relative;
width:100%;
max-width:45rem;
margin:auto;
padding:0 1rem;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.post-list__item {
overflow:hidden;
padding:1rem 0;
border-bottom:1px solid #f6f6f6
}
.post-list__item:last-child {
border:0
}
.post-list__item__col-1 {
width:33.3333%;
padding-right:.5rem
}
.post-list__item__col-1,.post-list__item__col-2 {
float:left;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.post-list__item__col-2 {
width:66.6666%;
padding-left:.5rem
}
.post-list__item__link {
display:block;
overflow:hidden;
position:relative;
width:100%;
padding-top:75%
}
.post-list__item__link:hover .post-list__item__link__background {
-webkit-transform:scale(1.2);
transform:scale(1.2)
}
.post-list__item__link__background {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-position:50% 50%;
background-size:cover;
background-repeat:no-repeat;
-webkit-transition:-webkit-transform .3s ease;
transition:-webkit-transform .3s ease;
transition:transform .3s ease;
transition:transform .3s ease,-webkit-transform .3s ease
}
.post-list__item__meta__link {
color:#999
}
.post-list__item__meta__link:hover {
color:#59abe3
}
.post-list__item__meta__label {
color:#999;
margin:0 .5rem
}
.post-list__item__title {
margin:.5rem 0
}
@media only screen and (max-width:624px) {
.post-list__item__title {
height:1.5rem;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
}
.post-list__item__title a {
color:#454545
}
.post-list__item__title a:hover {
color:#59abe3
}
.post-list__item__description {
margin:0
}
@media only screen and (max-width:624px) {
.post-list__item__description {
height:1.5rem;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
}
.pagination {
width:100%;
text-align:center;
padding:1rem 0
}
.pagination .current,.pagination a {
display:inline-block;
height:1.5rem;
line-height:1.5rem;
padding:0 .25rem;
margin:0 .25rem;
border-bottom:2px solid
}
.pagination .current {
color:#454545
}
.pagination .space {
color:#999
}
.pagination a {
color:#999;
border-color:transparent;
-webkit-transition:border-color .3s ease,color .3s ease;
transition:border-color .3s ease,color .3s ease
}
.pagination a:hover {
color:#59abe3;
border-color:#59abe3
}
.widgets {
background-color:#f6f6f6
}
.widgets-inner {
width:100%;
max-width:72rem;
margin:auto;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden
}
@media only screen and (min-width:624px) {
.widgets-inner {
padding:0 .5rem;
text-align:center
}
}
.widgets__item {
width:100%;
float:left;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin:1rem 0;
padding:0 1rem
}
@media only screen and (min-width:624px) {
.widgets__item {
width:33.33%;
padding:0 .5rem;
display:inline-block;
float:none;
vertical-align:top;
text-align:left
}
}
.widgets__item ul {
padding:0;
list-style:none
}
.widgets__item ul ul {
padding-left:1rem
}
.widgets__item ul ul li:before {
float:left;
padding-right:3.5px;
padding-right:.25rem;
content:"-"
}
.widgets__item li {
overflow:hidden;
width:100%
}
.widgets__item a {
color:#666
}
.widgets__item a:hover {
color:#59abe3
}
.widgets__item__heading {
margin-top:0
}
.archive-list-link,.category-list-link,.tag-list-link {
float:left
}
.archive-list-count,.category-list-count,.tag-list-count {
font-size:.75em;
padding-left:.5em;
float:left
}
.archive-list-count:before,.category-list-count:before,.tag-list-count:before {
content:"("
}
.archive-list-count:after,.category-list-count:after,.tag-list-count:after {
content:")"
}
.copyright {
background-color:#ededed;
text-align:center;
padding:2rem 0 5rem;
margin:0
}
img[alt] {
width:
}
css/layout.scss
View file @ bd5c5076
......@@ -25,7 +25,7 @@
padding: $base-margin 0;
}
body p{
.article__contents > p{
text-indent: 1em;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment