|
|
Line 50: |
Line 50: |
| min-width: 17em; | | min-width: 17em; |
| text-align: right; | | text-align: right; |
− | width: 80em; | + | width: 17em; |
| } | | } |
| | | |
Line 143: |
Line 143: |
| } | | } |
| | | |
− | @media screen and (max-width: 980px) { | + | |
− | | + | |
− | .post {
| + | |
− | border-left: 0;
| + | |
− | border-right: 0;
| + | |
− | left: -3em;
| + | |
− | width: calc(100% + (3em * 2));
| + | |
− | }
| + | |
− | | + | |
− | .post > header {
| + | |
− | -moz-flex-direction: column;
| + | |
− | -webkit-flex-direction: column;
| + | |
− | -ms-flex-direction: column;
| + | |
− | flex-direction: column;
| + | |
− | padding: 3.75em 3em 1.25em 3em ;
| + | |
− | border-left: 0;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .title {
| + | |
− | -ms-flex: 0 1 auto;
| + | |
− | margin: 0 0 2em 0;
| + | |
− | padding: 0;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta {
| + | |
− | -moz-align-items: center;
| + | |
− | -webkit-align-items: center;
| + | |
− | -ms-align-items: center;
| + | |
− | align-items: center;
| + | |
− | display: -moz-flex;
| + | |
− | display: -webkit-flex;
| + | |
− | display: -ms-flex;
| + | |
− | display: flex;
| + | |
− | -moz-justify-content: center;
| + | |
− | -webkit-justify-content: center;
| + | |
− | -ms-justify-content: center;
| + | |
− | justify-content: center;
| + | |
− | border-left: 0;
| + | |
− | margin: 0 0 2em 0;
| + | |
− | padding-top: 0;
| + | |
− | padding: 0;
| + | |
− | text-align: left;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta > * {
| + | |
− | border-left: solid 1px rgba(160, 160, 160, 0.3);
| + | |
− | margin-left: 2em;
| + | |
− | padding-left: 2em;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta > :first-child {
| + | |
− | border-left: 0;
| + | |
− | margin-left: 0;
| + | |
− | padding-left: 0;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta .published {
| + | |
− | margin-bottom: 0;
| + | |
− | margin-top: 0;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta .author {
| + | |
− | -moz-flex-direction: row-reverse;
| + | |
− | -webkit-flex-direction: row-reverse;
| + | |
− | -ms-flex-direction: row-reverse;
| + | |
− | flex-direction: row-reverse;
| + | |
− | margin-bottom: 0;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta .author .name {
| + | |
− | margin: 0 0 0 1.5em;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta .author img {
| + | |
− | width: 3.5em;
| + | |
− | }
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media screen and (max-width: 736px) {
| + | |
− | | + | |
− | .post {
| + | |
− | padding: 1.5em 1.5em 0.1em 1.5em ;
| + | |
− | left: -1.5em;
| + | |
− | margin: 0 0 2em 0;
| + | |
− | width: calc(100% + (1.5em * 2));
| + | |
− | }
| + | |
− | | + | |
− | .post > header {
| + | |
− | padding: 3em 1.5em 0.5em 1.5em ;
| + | |
− | left: -1.5em;
| + | |
− | margin: -1.5em 0 1.5em 0;
| + | |
− | width: calc(100% + 3em);
| + | |
− | }
| + | |
− | | + | |
− | .post > header .title h2 {
| + | |
− | font-size: 1.1em;
| + | |
− | }
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media screen and (max-width: 480px) {
| + | |
− | | + | |
− | .post > header .meta {
| + | |
− | -moz-align-items: center;
| + | |
− | -webkit-align-items: center;
| + | |
− | -ms-align-items: center;
| + | |
− | align-items: center;
| + | |
− | -moz-flex-direction: column;
| + | |
− | -webkit-flex-direction: column;
| + | |
− | -ms-flex-direction: column;
| + | |
− | flex-direction: column;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta > * {
| + | |
− | border-left: 0;
| + | |
− | margin: 1em 0 0 0;
| + | |
− | padding-left: 0;
| + | |
− | }
| + | |
− | | + | |
− | .post > header .meta .author .name {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .post > .image.featured {
| + | |
− | margin-left: -1.5em;
| + | |
− | margin-top: calc(-1.5em - 1px);
| + | |
− | width: calc(100% + 3em);
| + | |
− | }
| + | |
− | | + | |
− | .post > footer {
| + | |
− | -moz-align-items: stretch;
| + | |
− | -webkit-align-items: stretch;
| + | |
− | -ms-align-items: stretch;
| + | |
− | align-items: stretch;
| + | |
− | -moz-flex-direction: column-reverse;
| + | |
− | -webkit-flex-direction: column-reverse;
| + | |
− | -ms-flex-direction: column-reverse;
| + | |
− | flex-direction: column-reverse;
| + | |
− | }
| + | |
− | | + | |
− | .post > footer .stats {
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .post > footer .stats li {
| + | |
− | margin: 0 0 0 1.25em;
| + | |
− | padding: 0 0 0 1.25em;
| + | |
− | }
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− |
| + | |
| | | |
| | | |