305 lines
6.7 KiB
CSS
305 lines
6.7 KiB
CSS
body {
|
|
background-image: url('images/bg.jpg');
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
/* FIXME: Temp. workaround for vertical scrollbars */
|
|
margin: 0;
|
|
}
|
|
|
|
body::before {
|
|
background-image: url('/images/head.jpg');
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
content: '';
|
|
will-change: transform;
|
|
z-index: 1;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
position: fixed;
|
|
}
|
|
|
|
.demo-blog .mdl-layout__header {
|
|
margin-bottom: 30vh;
|
|
}
|
|
.demo-blog .mdl-layout__content {
|
|
padding: 0;
|
|
display: flex;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
flex-shrink: 0;
|
|
overflow: visible;
|
|
}
|
|
.demo-blog .mdl-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
min-height: 360px;
|
|
}
|
|
.demo-blog .mdl-card__title {
|
|
padding: 16px;
|
|
flex-grow: 1;
|
|
}
|
|
.demo-blog .mdl-card__media {
|
|
box-sizing: border-box;
|
|
background-size: cover;
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
cursor: pointer;
|
|
}
|
|
.demo-blog .mdl-card__media a,
|
|
.demo-blog .mdl-card__title a {
|
|
color: inherit;
|
|
}
|
|
.demo-blog .mdl-card__supporting-text {
|
|
width: 100%;
|
|
padding: 16px;
|
|
min-height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.demo-blog .mdl-card__media ~ .mdl-card__supporting-text {
|
|
min-height: 64px;
|
|
}
|
|
.demo-blog .mdl-card__supporting-text:not(:last-child) {
|
|
box-sizing: border-box;
|
|
min-height: 76px;
|
|
}
|
|
.demo-blog .mdl-card__supporting-text ~ .mdl-card__supporting-text {
|
|
border-top: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.demo-blog .mdl-card__actions:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.demo-blog .meta {
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
height: auto;
|
|
}
|
|
.demo-blog .meta > .meta__favorites{
|
|
flex-direction: row;
|
|
margin: 0 8px;
|
|
}
|
|
.demo-blog .meta > .meta__favorites .material-icons {
|
|
font-size: 2em;
|
|
cursor: pointer;
|
|
}
|
|
.demo-blog .mdl-card .meta.meta--fill {
|
|
justify-content: space-between;
|
|
}
|
|
.demo-blog .meta > *:first-child {
|
|
margin-right: 16px;
|
|
}
|
|
.demo-blog .meta > * {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.demo-blog .coffee-pic .mdl-card__media {
|
|
background-image: url('images/coffee.jpg');
|
|
}
|
|
.demo-blog .something-else .mdl-card__media {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.demo-blog .something-else > button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 28px;
|
|
transform: translate(0px, -28px);
|
|
}
|
|
.demo-blog .something-else .mdl-card__media img {
|
|
width: 33%;
|
|
height: 33;
|
|
margin-bottom: 10px;
|
|
}
|
|
.demo-blog .something-else .mdl-card__supporting-text {
|
|
background-color: #F5F5F5;
|
|
}
|
|
.demo-blog .on-the-road-again .mdl-card__media {
|
|
background-image: url('images/road.jpg');
|
|
}
|
|
.demo-blog .shopping .mdl-card__media {
|
|
background-image: url('images/shopping.jpg');
|
|
}
|
|
.demo-blog .mdl-layout__content > .demo-nav {
|
|
margin: 12px 15px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 30vh;
|
|
color: white;
|
|
}
|
|
.demo-blog .mdl-layout__content > .demo-nav > .demo-nav__button {
|
|
cursor: pointer;
|
|
}
|
|
.demo-blog .mdl-layout__content > .demo-nav .mdl-button {
|
|
color: black;
|
|
background-color: white;
|
|
}
|
|
.demo-blog .mdl-layout__content > .demo-nav > .demo-nav__button:first-child .mdl-button {
|
|
margin-right: 16px;
|
|
}
|
|
.demo-blog .mdl-layout__content > .demo-nav > .demo-nav__button:last-child .mdl-button {
|
|
margin-left: 16px;
|
|
}
|
|
.demo-blog .mdl-card > a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: inherit;
|
|
}
|
|
.demo-blog .mdl-card h3 a {
|
|
text-decoration: none;
|
|
}
|
|
.demo-blog .mdl-card h3.quote:before, .demo-blog .mdl-card h3.quote:after {
|
|
display: block;
|
|
font-size: 3em;
|
|
margin-top: 0.5em;
|
|
}
|
|
.demo-blog .mdl-card h3.quote:before {
|
|
content: '“';
|
|
}
|
|
.demo-blog .mdl-card h3.quote:after {
|
|
content: '”';
|
|
}
|
|
.demo-blog--blogpost .custom-header {
|
|
background-color: transparent;
|
|
}
|
|
.demo-blog--blogpost .mdl-layout__content > .mdl-card {
|
|
margin-top: 230px;
|
|
}
|
|
.demo-blog--blogpost .mdl-layout__content > .mdl-card .mdl-card__media {
|
|
background-image: url('images/road_big.jpg');
|
|
height: 280px;
|
|
}
|
|
.demo-blog--blogpost .comments {
|
|
background-color: #EEE;
|
|
}
|
|
.demo-blog--blogpost .meta > * {
|
|
align-items: center;
|
|
}
|
|
.demo-blog--blogpost .meta + .mdl-card__supporting-text {
|
|
border: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.demo-blog--blogpost .meta + .mdl-card__supporting-text p {
|
|
max-width: 512px;
|
|
margin: 16px auto;
|
|
font-size: 16px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.demo-blog--blogpost .comments {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
padding: 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
.demo-blog--blogpost .comments > form {
|
|
display: flex;
|
|
flex-diretion: row;
|
|
margin-bottom: 16px;
|
|
}
|
|
.demo-blog--blogpost .comments > form .mdl-textfield {
|
|
flex-grow: 1;
|
|
margin-right: 16px;
|
|
}
|
|
.demo-blog--blogpost .comments > form .mdl-textfield input,
|
|
.demo-blog--blogpost .comments > form .mdl-textfield textarea {
|
|
resize: none;
|
|
}
|
|
.demo-blog--blogpost .comments > form button {
|
|
margin-top: 20px;
|
|
background-color: rgba(0, 0, 0, 0.24);
|
|
color: white;
|
|
}
|
|
.demo-blog--blogpost .comments .comment {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__header > .comment__avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 24px;
|
|
margin-right: 16px;
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__header > .comment__author {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__text {
|
|
line-height: 1.5em;
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: 0.8em;
|
|
margin-top: 16px;
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__actions button {
|
|
margin-right: 16px;
|
|
color: rgba(0, 0, 0, 0.24);
|
|
}
|
|
.demo-blog--blogpost .comments .comment > .comment__answers {
|
|
padding-top: 32px;
|
|
padding-left: 48px;
|
|
}
|
|
|
|
.demo-blog--blogpost .demo-back {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
color: white;
|
|
}
|
|
.demo-blog .demo-spacer {
|
|
flex-grow: 1;
|
|
}
|
|
.demo-blog .something-else {
|
|
overflow: visible;
|
|
z-index: 10;
|
|
}
|
|
.demo-blog .amazing .mdl-card__title {
|
|
background-color: #263238;
|
|
}
|
|
.demo-blog .minilogo {
|
|
width: 44px;
|
|
height: 44px;
|
|
background-image: url('images/logo.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 50%;
|
|
border-radius: 22px;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
/* Fixes for IE 10 */
|
|
.mdl-grid {
|
|
display: flex !important;
|
|
}
|