804 lines
14 KiB
CSS
804 lines
14 KiB
CSS
:root {
|
|
--header-background-color: #1b2b34;
|
|
--main-background-color: #343D46;
|
|
--text: #d8dee9;
|
|
--link: #f2b705;
|
|
--footer-link: #d8dee9;
|
|
--title: #f28322;
|
|
--post-title: #a7adba;
|
|
--border: #424650;
|
|
--figcaption: #9EABB3;
|
|
}
|
|
|
|
@font-face {
|
|
font-family:'icons';
|
|
src:url("../fonts/icons.eot");
|
|
src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
|
|
url("../fonts/icons.woff") format("woff"),
|
|
url("../fonts/icons.ttf") format("truetype"),
|
|
url("../fonts/icons.svg#icons") format("svg");
|
|
font-weight:normal;
|
|
font-style:normal
|
|
}
|
|
.icon-ghost,
|
|
.icon-feed {
|
|
font-family:'icons';
|
|
font-style:normal;
|
|
font-weight:normal;
|
|
font-variant:normal;
|
|
text-transform:none;
|
|
line-height:1;
|
|
-webkit-font-smoothing:antialiased;
|
|
text-decoration:none
|
|
}
|
|
.icon-ghost-text {
|
|
font-family:"Courier New", Courier, monospace
|
|
}
|
|
.icon-ghost:before {
|
|
content:"\e000"
|
|
}
|
|
.icon-feed:before {
|
|
content:"\e000"
|
|
}
|
|
html {
|
|
height:100%;
|
|
max-height:100%;
|
|
font-size:62.5%
|
|
}
|
|
body {
|
|
height:100%;
|
|
max-height:100%;
|
|
font-family:"Courier New", Courier, monospace;
|
|
font-size:2.0rem;
|
|
line-height:1.6em;
|
|
color: var(--text);
|
|
background: var(--main-background-color)
|
|
}
|
|
::-moz-selection {
|
|
color: var(--header-background-color);
|
|
background:#a3be8c;
|
|
text-shadow:none
|
|
}
|
|
::selection {
|
|
color: var(--header-background-color);
|
|
background:#a3be8c;
|
|
text-shadow:none
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
text-rendering:optimizeLegibility;
|
|
line-height:1;
|
|
margin-top:20px;
|
|
letter-spacing:2px;
|
|
font-weight:normal
|
|
}
|
|
h1 a,
|
|
h2 a,
|
|
h3 a,
|
|
h4 a,
|
|
h5 a,
|
|
h6 a {
|
|
color: var(--post-title)
|
|
}
|
|
.blog-title {
|
|
font-size:5rem;
|
|
letter-spacing:-1px;
|
|
text-align:center;
|
|
}
|
|
a {
|
|
color: var(--link);
|
|
-webkit-transition:color ease 0.3s;
|
|
transition:color ease 0.3s;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
p,
|
|
ul,
|
|
ol {
|
|
/* margin:1.6em 0 */
|
|
margin:0 0 1.6em 0
|
|
}
|
|
ol ol,
|
|
ul ul,
|
|
ul ol,
|
|
ol ul {
|
|
margin:0.4em 0
|
|
}
|
|
hr {
|
|
display:block;
|
|
height:1px;
|
|
border:0;
|
|
border-top:1px solid var(--border);
|
|
margin:3.2em 0;
|
|
padding:0
|
|
}
|
|
blockquote {
|
|
-webkit-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
margin:1.6em 0 1.6em -2.2em;
|
|
padding:0 0 0 1.6em;
|
|
border-left:#4f586b 0.4em solid
|
|
}
|
|
blockquote p {
|
|
margin:0.8em 0;
|
|
font-style:italic
|
|
}
|
|
blockquote small {
|
|
display:inline-block;
|
|
margin:0.8em 0 0.8em 1.5em;
|
|
font-size:0.9em;
|
|
color:#ccc
|
|
}
|
|
blockquote small:before {
|
|
content:'\2014 \00A0'
|
|
}
|
|
blockquote cite {
|
|
font-weight:bold
|
|
}
|
|
blockquote cite a {
|
|
font-weight:normal
|
|
}
|
|
dl {
|
|
margin:1.6em 0
|
|
}
|
|
dl dt {
|
|
float:left;
|
|
width:180px;
|
|
overflow:hidden;
|
|
clear:left;
|
|
text-align:right;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
font-weight:bold;
|
|
margin-bottom:1em
|
|
}
|
|
dl dd {
|
|
margin-left:200px;
|
|
margin-bottom:1em
|
|
}
|
|
mark {
|
|
background-color:#ffc336
|
|
}
|
|
code,
|
|
tt {
|
|
padding:1px 3px;
|
|
font-family:"Courier New", Courier, monospace;
|
|
font-size:0.75em;
|
|
white-space:pre;
|
|
border:1px solid #424a5a;
|
|
background:#4f586b;
|
|
border-radius:2px
|
|
}
|
|
pre {
|
|
-webkit-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
margin:1.6em 0;
|
|
border:1px solid #424a5a;
|
|
width:100%;
|
|
padding:10px;
|
|
font-family:"Courier New", Courier, monospace;
|
|
font-size:0.8em;
|
|
white-space:pre;
|
|
overflow:auto;
|
|
background:#4f586b;
|
|
border-radius:3px
|
|
}
|
|
pre code,
|
|
tt {
|
|
font-size:inherit;
|
|
white-space:-moz-pre-wrap;
|
|
white-space:pre-wrap;
|
|
background:transparent;
|
|
border:none;
|
|
padding:0
|
|
}
|
|
kbd {
|
|
display:inline-block;
|
|
margin-bottom:0.4em;
|
|
padding:1px 8px;
|
|
border:#ccc 1px solid;
|
|
color:#666;
|
|
text-shadow:#fff 0 1px 0;
|
|
font-size:0.9em;
|
|
font-weight:bold;
|
|
background:#f4f4f4;
|
|
border-radius:4px;
|
|
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 1px 0 0 #fff inset;
|
|
box-shadow:0 1px 0 rgba(0,0,0,0.2),0 1px 0 0 #fff inset
|
|
}
|
|
table {
|
|
-webkit-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
margin:1.6em 0;
|
|
width:100%;
|
|
max-width:100%;
|
|
background-color:transparent
|
|
}
|
|
table th,
|
|
table td {
|
|
padding:8px;
|
|
line-height:20px;
|
|
text-align:left;
|
|
vertical-align:top;
|
|
border-top:1px solid #424a5a
|
|
}
|
|
table th {
|
|
color:#000
|
|
}
|
|
table caption+thead tr:first-child th,
|
|
table caption+thead tr:first-child td,
|
|
table colgroup+thead tr:first-child th,
|
|
table colgroup+thead tr:first-child td,
|
|
table thead:first-child tr:first-child th,
|
|
table thead:first-child tr:first-child td {
|
|
border-top:0
|
|
}
|
|
table tbody+tbody {
|
|
border-top:2px solid #efefef
|
|
}
|
|
table table table {
|
|
background-color:#fff
|
|
}
|
|
table tbody>tr:nth-child(odd)>td,
|
|
table tbody>tr:nth-child(odd)>th {
|
|
background-color:#4f586b
|
|
}
|
|
table.plain tbody>tr:nth-child(odd)>td,
|
|
table.plain tbody>tr:nth-child(odd)>th {
|
|
background:transparent
|
|
}
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
background:#4f586b;
|
|
border:1px solid #424a5a;
|
|
color: var(--text);
|
|
outline-color: var(--link)
|
|
}
|
|
.nav {
|
|
margin:0;
|
|
}
|
|
.site-nav ul {
|
|
padding:0
|
|
}
|
|
.site-nav li {
|
|
padding-right: 16px;
|
|
}
|
|
.site-nav ul li {
|
|
display:inline-block;
|
|
list-style:none
|
|
}
|
|
.post-header .site-nav {
|
|
text-align:center
|
|
}
|
|
.site-nav {
|
|
overflow: hidden;
|
|
}
|
|
.site-nav-left {
|
|
float: left;
|
|
}
|
|
.site-nav-right {
|
|
float: right;
|
|
}
|
|
.hidden {
|
|
text-indent:-9999px;
|
|
visibility:hidden;
|
|
display:none
|
|
}
|
|
.inner {
|
|
position:relative;
|
|
width:80%;
|
|
max-width:850px;
|
|
margin:0 auto
|
|
}
|
|
#site-head {
|
|
position:relative;
|
|
display:table;
|
|
width:100%;
|
|
margin-bottom:5rem;
|
|
color: var(--title);
|
|
background: var(--header-background-color) no-repeat center center;
|
|
}
|
|
#back {
|
|
color:rgba(0,0,0,0.2);
|
|
position:fixed;
|
|
top:8px;
|
|
left:8px;
|
|
padding:6px;
|
|
font-size:16px
|
|
}
|
|
.post {
|
|
position:relative;
|
|
width:80%;
|
|
max-width:850px;
|
|
margin:4rem auto;
|
|
padding-bottom:4rem;
|
|
border-bottom:var(--border) 1px solid;
|
|
word-break:break-word;
|
|
-webkit-hyphens:auto;
|
|
-ms-hyphens:auto;
|
|
hyphens:auto
|
|
}
|
|
.post-title {
|
|
color: var(--link);
|
|
margin:0;
|
|
}
|
|
.post-excerpt p {
|
|
margin:1.6rem 0 0 0;
|
|
line-height:1.6em
|
|
}
|
|
.post-meta {
|
|
display:inline-block;
|
|
margin:0 0 5px 0;
|
|
font-size:1.5rem;
|
|
color: var(--text)
|
|
}
|
|
.post .post-title {
|
|
margin-bottom: 25px;
|
|
}
|
|
.post a {
|
|
color: var(--link);
|
|
text-decoration:none
|
|
}
|
|
.post a:hover {
|
|
text-decoration:underline;
|
|
}
|
|
.user-meta {
|
|
position:relative;
|
|
padding:0.3rem 40px 0 100px;
|
|
min-height:77px
|
|
}
|
|
.user-image {
|
|
position:absolute;
|
|
top:0;
|
|
left:0
|
|
}
|
|
.user-name {
|
|
display:block;
|
|
font-weight:bold
|
|
}
|
|
.user-bio {
|
|
display:block;
|
|
max-width:440px;
|
|
font-size:1.4rem;
|
|
line-height:1.5em
|
|
}
|
|
.publish-meta {
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
padding:4.3rem 0 4rem 0;
|
|
text-align:right
|
|
}
|
|
.publish-heading {
|
|
display:block;
|
|
font-weight:bold
|
|
}
|
|
.publish-date {
|
|
display:block;
|
|
font-size:1.4rem;
|
|
line-height:1.5em
|
|
}
|
|
.post-template .post {
|
|
margin-top:0;
|
|
border-bottom:none;
|
|
padding-bottom:0
|
|
}
|
|
.post-template .post:after {
|
|
display:none
|
|
}
|
|
.post-template .post-header {
|
|
padding:60px 0
|
|
}
|
|
.post-content img {
|
|
display:block;
|
|
max-width:100%;
|
|
margin:0 auto
|
|
}
|
|
.post-footer {
|
|
position:relative;
|
|
margin:4rem 0 0 0;
|
|
padding:4rem 0 0 0;
|
|
border-top:var(--border) 1px solid
|
|
}
|
|
.post-footer h4 {
|
|
font-size:1.8rem;
|
|
margin:0
|
|
}
|
|
.post-footer p {
|
|
margin:1rem 0;
|
|
font-size:1.4rem;
|
|
line-height:1.6em
|
|
}
|
|
.post-footer .author {
|
|
margin-right:180px
|
|
}
|
|
.pagination {
|
|
position:relative;
|
|
width:80%;
|
|
max-width:850px;
|
|
margin:4rem auto;
|
|
font-family:"Courier New", Courier, monospace;
|
|
font-size:1.3rem;
|
|
color:#9EABB3;
|
|
text-align:center
|
|
}
|
|
.pagination a {
|
|
color:#9EABB3
|
|
}
|
|
.pagination a:hover {
|
|
color:#acb7be;
|
|
-webkit-transition:all ease 800ms;
|
|
transition:all ease 800ms
|
|
}
|
|
.older-posts,
|
|
.newer-posts {
|
|
position:absolute;
|
|
display:inline-block;
|
|
padding:0 15px;
|
|
border:var(--border) 1px solid;
|
|
text-decoration:none;
|
|
border-radius:5px;
|
|
-webkit-transition:border ease 0.3s;
|
|
transition:border ease 0.3s;
|
|
background:#363c4a
|
|
}
|
|
.older-posts {
|
|
right:0
|
|
}
|
|
.page-number {
|
|
display:inline-block;
|
|
padding:2px 0
|
|
}
|
|
.newer-posts {
|
|
left:0
|
|
}
|
|
.older-posts:hover,
|
|
.newer-posts:hover {
|
|
border-color:#9EABB3
|
|
}
|
|
.site-footer {
|
|
position:relative;
|
|
margin:8rem 0 0 0;
|
|
padding:4rem 0;
|
|
border-top:#1a1e27 1px solid;
|
|
font-size:1.3rem;
|
|
line-height:1.7em;
|
|
color: var(--footer-link);
|
|
text-align:center;
|
|
background: var(--header-background-color)
|
|
}
|
|
.site-footer a {
|
|
color: var(--footer-link);
|
|
text-decoration:none;
|
|
}
|
|
.site-footer a:hover {
|
|
text-decoration:underline;
|
|
}
|
|
.poweredby .icon-ghost {
|
|
color: var(--link);
|
|
font-weight:700;
|
|
text-decoration:none
|
|
}
|
|
.poweredby .icon-ghost:hover {
|
|
text-decoration:none
|
|
}
|
|
.poweredby .icon-ghost:before {
|
|
font-size:1rem;
|
|
margin-right:0.2em
|
|
}
|
|
@media only screen and (max-width: 900px) {
|
|
blockquote {
|
|
margin-left:0
|
|
}
|
|
#site-head {
|
|
-webkit-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
height:auto;
|
|
min-height:240px;
|
|
padding:15% 0
|
|
}
|
|
.blog-title {
|
|
font-size:4rem;
|
|
letter-spacing:-1px;
|
|
text-align:center;
|
|
}
|
|
.blog-description {
|
|
font-size:1.7rem;
|
|
line-height:1.5em
|
|
}
|
|
.post {
|
|
font-size:0.9em;
|
|
line-height:1.6em
|
|
}
|
|
.post-template .post {
|
|
padding-bottom:1rem
|
|
}
|
|
.post-template .post-header {
|
|
padding:40px 0
|
|
}
|
|
h1 {
|
|
font-size:4.8rem;
|
|
text-indent:-2px
|
|
}
|
|
h2 {
|
|
font-size:3.8rem
|
|
}
|
|
h3 {
|
|
font-size:3.3rem
|
|
}
|
|
h4 {
|
|
font-size:2.8rem
|
|
}
|
|
}
|
|
@media only screen and (max-width: 500px) {
|
|
.inner,
|
|
.pagination {
|
|
width:auto;
|
|
margin-left:16px;
|
|
margin-right:16px
|
|
}
|
|
.post {
|
|
width:auto;
|
|
margin-left:16px;
|
|
margin-right:16px;
|
|
font-size:0.8em;
|
|
line-height:1.6em
|
|
}
|
|
#site-head {
|
|
padding:10% 0
|
|
}
|
|
.blog-title {
|
|
font-size:3rem;
|
|
text-align:center;
|
|
}
|
|
.blog-description {
|
|
font-size:1.5rem
|
|
}
|
|
h1,
|
|
h2 {
|
|
font-size:3rem;
|
|
line-height:1.1em;
|
|
letter-spacing:-1px
|
|
}
|
|
h3 {
|
|
font-size:2.8rem
|
|
}
|
|
h4 {
|
|
font-size:2.3rem
|
|
}
|
|
.post-template .post {
|
|
padding-bottom:0
|
|
}
|
|
.post-template .post-header {
|
|
padding:30px 0
|
|
}
|
|
.post-meta {
|
|
font-size:1.3rem
|
|
}
|
|
.post-footer {
|
|
padding:4rem 0;
|
|
text-align:center
|
|
}
|
|
.post-footer .author {
|
|
margin:0 0 2rem 0;
|
|
padding:0 0 1.6rem 0;
|
|
border-bottom:var(--border) 1px dashed
|
|
}
|
|
.older-posts,
|
|
.newer-posts {
|
|
position:static;
|
|
margin:10px 0
|
|
}
|
|
.page-number {
|
|
display:block
|
|
}
|
|
.site-footer {
|
|
margin-top:6rem;
|
|
font-size:1.1rem
|
|
}
|
|
}
|
|
.post-content {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-box-orient:vertical;
|
|
-webkit-box-direction:normal;
|
|
-ms-flex-direction:column;
|
|
flex-direction:column;
|
|
-webkit-box-align:center;
|
|
-ms-flex-align:center;
|
|
max-width:920px
|
|
}
|
|
.post-template .post-content>p:first-child {
|
|
line-height:1.5em
|
|
}
|
|
.post-full-content .kg-image {
|
|
max-width:100%
|
|
}
|
|
.post-full-image+.post-full-content .kg-content *:first-child .kg-image {
|
|
width:100%
|
|
}
|
|
.post-full-content .kg-width-wide .kg-image {
|
|
max-width:1040px
|
|
}
|
|
.post-full-content .kg-width-full .kg-image {
|
|
max-width:100vw
|
|
}
|
|
.post-full-content figure {
|
|
margin:1.5em 0 3em
|
|
}
|
|
.post-full-content figure img {
|
|
margin:0
|
|
}
|
|
.post-content figcaption {
|
|
margin:1.0em auto;
|
|
width: 80%;
|
|
font-size:70%;
|
|
font-style: italic;
|
|
line-height:1.6em;
|
|
text-align:center;
|
|
color: var(--figcaption);
|
|
}
|
|
.kg-width-full figcaption {
|
|
padding:0 1.5em
|
|
}
|
|
.kg-embed-card {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-box-orient:vertical;
|
|
-webkit-box-direction:normal;
|
|
-ms-flex-direction:column;
|
|
flex-direction:column;
|
|
-webkit-box-align:center;
|
|
-ms-flex-align:center;
|
|
align-items:center;
|
|
min-width:100%
|
|
}
|
|
.kg-embed-card .fluid-width-video-wrapper {
|
|
margin:0
|
|
}
|
|
@media (max-width: 1040px) {
|
|
.post-full-content .kg-width-full .kg-image {
|
|
width:100vw
|
|
}
|
|
}
|
|
.kg-gallery-container {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-box-orient:vertical;
|
|
-webkit-box-direction:normal;
|
|
-ms-flex-direction:column;
|
|
flex-direction:column;
|
|
max-width:1040px;
|
|
width:100vw
|
|
}
|
|
.kg-gallery-row {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-box-orient:horizontal;
|
|
-webkit-box-direction:normal;
|
|
-ms-flex-direction:row;
|
|
flex-direction:row;
|
|
-webkit-box-pack:center;
|
|
-ms-flex-pack:center;
|
|
justify-content:center
|
|
}
|
|
.kg-gallery-image img {
|
|
display:block;
|
|
margin:0;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
.kg-gallery-row:not(:first-of-type) {
|
|
margin:0.75em 0 0 0
|
|
}
|
|
.kg-gallery-image:not(:first-of-type) {
|
|
margin:0 0 0 0.75em
|
|
}
|
|
.kg-gallery-card+.kg-image-card.kg-width-wide,
|
|
.kg-gallery-card+.kg-gallery-card,
|
|
.kg-image-card.kg-width-wide+.kg-gallery-card,
|
|
.kg-image-card.kg-width-wide+.kg-image-card.kg-width-wide {
|
|
margin:-2.25em 0 3em
|
|
}
|
|
.kg-bookmark-card {
|
|
width:100%;
|
|
position:relative
|
|
}
|
|
.kg-bookmark-container {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-ms-flex-wrap:wrap;
|
|
flex-wrap:wrap;
|
|
-webkit-box-orient:horizontal;
|
|
-webkit-box-direction:reverse;
|
|
-ms-flex-direction:row-reverse;
|
|
flex-direction:row-reverse;
|
|
color:currentColor;
|
|
font-family:inherit;
|
|
text-decoration:none;
|
|
border:1px solid rgba(0,0,0,0.1)
|
|
}
|
|
.kg-bookmark-container:hover {
|
|
text-decoration:none
|
|
}
|
|
.kg-bookmark-content {
|
|
-ms-flex-preferred-size:0;
|
|
flex-basis:0;
|
|
-webkit-box-flex:999;
|
|
-ms-flex-positive:999;
|
|
flex-grow:999;
|
|
padding:20px;
|
|
-webkit-box-ordinal-group:2;
|
|
-ms-flex-order:1;
|
|
order:1
|
|
}
|
|
.kg-bookmark-title {
|
|
font-weight:600
|
|
}
|
|
.kg-bookmark-metadata,
|
|
.kg-bookmark-description {
|
|
margin-top:.5em
|
|
}
|
|
.kg-bookmark-metadata {
|
|
-webkit-box-align:center;
|
|
-ms-flex-align:center;
|
|
align-items:center;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis
|
|
}
|
|
.kg-bookmark-description {
|
|
display:-webkit-box;
|
|
-webkit-box-orient:vertical;
|
|
-webkit-line-clamp:2;
|
|
overflow:hidden
|
|
}
|
|
.kg-bookmark-icon {
|
|
display:inline-block;
|
|
width:1em;
|
|
height:1em;
|
|
vertical-align:text-bottom;
|
|
margin-right:.5em;
|
|
margin-bottom:.05em
|
|
}
|
|
.kg-bookmark-thumbnail {
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-ms-flex-preferred-size:24rem;
|
|
flex-basis:24rem;
|
|
-webkit-box-flex:1;
|
|
-ms-flex-positive:1;
|
|
flex-grow:1
|
|
}
|
|
.kg-bookmark-thumbnail img {
|
|
max-width:100%;
|
|
height:auto;
|
|
vertical-align:bottom;
|
|
-o-object-fit:cover;
|
|
object-fit:cover
|
|
}
|
|
.kg-bookmark-author {
|
|
white-space:nowrap;
|
|
text-overflow:ellipsis;
|
|
overflow:hidden
|
|
}
|
|
.kg-bookmark-publisher::before {
|
|
content:"•";
|
|
margin:0 .5em
|
|
}
|
|
|