$background : “../assets/DSCN136150-QHD.JPG”;
body::before {
background-size: cover; background-attachment: fixed; content: ''; will-change: transform; z-index: -1; left: 0; right: 0; bottom: 0; top: 0; position: fixed;
}
@media (max-width: 512px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 512px) and (min-resolution: 1.5dppx), (max-width: 1024px) and (-webkit-max-device-pixel-ratio: 1.5), (max-width: 1024px) and (max-resolution: 1.5dppx) {
body::before { background-image: url($background); background-size: cover/center; } #github { background-image: "GitHub-Mark-32px.png"; }
}
@media (min-width: 513px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx), (min-width: 1025px) and (max-width: 2048px) and (-webkit-max-device-pixel-ratio: 1.5), (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {
body::before { background-image: url($background); background-size: cover/center; } #github { background-image: "../assets/GitHub-Mark-32px.png"; }
}
@media (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1025px) and (min-resolution: 1.5dppx), (min-width: 2049px) and (-webkit-max-device-pixel-ratio: 1.5), (min-width: 2049px) and (max-resolution: 1.5dppx) {
body::before { background-image: url($background); background-size: cover/center; } #github { background-image: "../assets/GitHub-Mark-32px.png"; }
}
.title-no-picture {
background-color: #263238;
}
h3.quote a {
color: white; text-decoration: none;
}
body .blog {
font-family: 'Roboto', 'Helvetica', sans-serif;
}
.page-content {
max-width: 900px; width: 100%; margin: auto;
}
.blog {
.mdl-card h3 { margin: 0; } &.mdl-layout .mdl-layout__content { padding-top: 200px; } .mdl-card { min-height: 360px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .mdl-card__media, .mdl-card__title { /* box-sizing: border-box; */ background-size: cover; padding: 24px; display: -webkit-flex; display: -ms-flexbox; /* display: flex; */ -webkit-flex-grow: 2; -ms-flex-positive: 2; /* flex-grow: 1; */ -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: flex-end; -ms-flex-align: end; /* align-items: flex-end; */ cursor: pointer; } .card-meta { > * { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: auto; justify-content: flex-start; box-sizing: border-box; } .mdl-card__supporting-text { min-height: 64px; } } &:not(.blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text { border-top: 1px solid rgba(0, 0, 0, 0.1); }
}
.blog_posts {
max-width: 900px; padding: 0; display: flex; margin: 0 auto; flex-shrink: 0;
}
.blog-post {
&:hover, &:focus { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
}
.mdl-mini-footer__link-list {
max-height: 16px;
}
.disclaimer {
font-size: 90%;
}
.heart {
color: red;
}
.mdl-mini-footer .me {
font-weight: 600;
}
.blog .mdl-mini-footer {
margin-top: 80px; height: 120px; padding: 40px; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: white; box-sizing: border-box;
}
pre.highlight {
background: #282c34; color: #abb2bf;
}
.blog {
.blog__posts > .nav { margin: 12px 15px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: white; font-weight: 500; > .nav__button { color: white; text-decoration: none; } } .section-spacer { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .meta { box-sizing: border-box; padding: 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; height: auto; > * { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } }
}
.blog–blogpost .meta > * {
-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.blog .mdl-card__supporting-text.meta {
width: 100%; padding: 16px; min-height: 64px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.blog–post .mdl-card__supporting-text p {
max-width: 512px; margin: 16px auto; font-size: 16px; line-height: 28px;
}
.blog .blog__posts {
max-width: 900px; padding: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin: 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.blog–post .back {
position: absolute; top: 16px; left: 16px; color: white; z-index: 9999;
}
.highlight .lineno {
word-break: keep-all; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;
}
.gutter.gl {
text-align: right; padding-right: 15px; padding-left: 5px; border-right: 1px solid #aaa;
}
.highlight {
.code { padding-left: 10px; } box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.blog–post .mdl-card__supporting-text {
margin: auto;
}
.blog_posts .mdl-card__media {
height: 170px; a{ text-decoration:none; }
}
.layout-transparent {
.mdl-layout__header, .mdl-layout__drawer-button { /* This background is dark, so we set text to white. Use 87% black instead if your background is light. */ color: white; }
}
.mdl-layout__header-row .mdl-navigation__link {
/* This background is dark, so we set text to white. Use 87% black instead if your background is light. */ color: white;
}
.blog–post img {
max-width: 100%;
}