updated readme, started new home layout
This commit is contained in:
221
css/base.css
221
css/base.css
@@ -11,7 +11,7 @@
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility; }
|
||||
|
||||
/* html element 62.5% font-size for REM use */
|
||||
@@ -521,120 +521,141 @@ object {
|
||||
position: relative; } }
|
||||
|
||||
.home main section {
|
||||
/* ------------------------------ home article ------------------------------ */ }
|
||||
/* --------------------------- home article mobile -------------------------- */
|
||||
/* ------------------------ home article desktop big ------------------------ */
|
||||
/* ----------------------- home article desktop small ----------------------- */ }
|
||||
@media (min-width: 769px) {
|
||||
.home main section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 10rem 0 10rem;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: fit-content; } }
|
||||
.home main section article {
|
||||
height: 100vh;
|
||||
/* -------------------------- home article metadata ------------------------- */ }
|
||||
height: 100vh; }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article {
|
||||
width: calc(100vw - (10rem * 3));
|
||||
flex: 0 0 auto;
|
||||
.home main section article > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: inline-block; } }
|
||||
|
||||
@media (min-width: 769px) and (min-width: 769px) {
|
||||
.home main section article .thumbnailwrapper {
|
||||
height: calc(100% - 4rem); } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
object-fit: cover; } }
|
||||
@media (min-width: 769px) and (min-width: 769px) {
|
||||
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
|
||||
width: 50%;
|
||||
height: 100%; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article h2 {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
padding: 2rem;
|
||||
padding-top: 3rem;
|
||||
margin: 0; } }
|
||||
@media (min-width: 769px) and (min-width: 769px) {
|
||||
.home main section article h2 {
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
padding: 4rem; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article h2 a {
|
||||
font: bold 3rem "Westeinde Caption";
|
||||
color: #000; } }
|
||||
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
|
||||
.home main section article h2 a {
|
||||
font-size: 2.5rem !important; } }
|
||||
@media (min-width: 769px) and (min-width: 769px) {
|
||||
.home main section article h2 a {
|
||||
font-size: 5rem; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section .home-wrapper-big {
|
||||
flex: 0 0 auto; }
|
||||
.home main section .home-wrapper-big article {
|
||||
position: relative;
|
||||
width: calc(100vw - (10rem * 3));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: 10rem;
|
||||
padding-top: 4rem;
|
||||
border-left: #000 1px solid; }
|
||||
.home main section article:first-child {
|
||||
border-left-color: transparent; }
|
||||
.home main section article::before {
|
||||
border-right: #000 1px solid;
|
||||
/* -------------------------- home article metadata big------------------------- */ }
|
||||
.home main section .home-wrapper-big article::before {
|
||||
content: "<hr>";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #000; } }
|
||||
.home main section article > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: inline-block; }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article .thumbnailwrapper {
|
||||
height: calc(100% - 4rem); } }
|
||||
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
object-fit: cover; }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
|
||||
width: 50%;
|
||||
height: 100%; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article .metadata {
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch; }
|
||||
.home main section article .metadata::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: none;
|
||||
width: calc(100% - 4rem);
|
||||
border-top: #000 1px solid;
|
||||
left: calc(4rem);
|
||||
background-color: transparent;
|
||||
margin-left: -0; }
|
||||
.home main section article .metadata::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: calc(4rem);
|
||||
height: calc(4rem);
|
||||
top: 0;
|
||||
left: -0;
|
||||
border-left: #000 solid 1px;
|
||||
border-top: #000 1px solid;
|
||||
-moz-transform: skewX(-45deg);
|
||||
-o-transform: skewX(-45deg);
|
||||
-ms-transform: skewX(-45deg);
|
||||
-webkit-transform: skewX(-45deg);
|
||||
transform: skewX(-45deg);
|
||||
transform-origin: left bottom;
|
||||
background-color: transparent;
|
||||
z-index: 9; }
|
||||
.home main section article .metadata > div {
|
||||
width: 30%;
|
||||
padding-top: 2rem; } }
|
||||
@media (-webkit-min-device-pixel-ratio: 2.1) {
|
||||
.home main section article .metadata {
|
||||
height: calc(10rem / 2); } }
|
||||
.home main section article .metadata .categories {
|
||||
display: none; }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article .metadata .categories {
|
||||
display: block;
|
||||
border-right: #000 solid 1px; } }
|
||||
.home main section article h2 {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
padding: 2rem;
|
||||
padding-top: 3rem;
|
||||
margin: 0; }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article h2 {
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
padding: 4rem; } }
|
||||
.home main section article h2 a {
|
||||
font: bold 3rem "Westeinde Caption";
|
||||
color: #000; }
|
||||
@media (-webkit-min-device-pixel-ratio: 2.1) {
|
||||
.home main section article h2 a {
|
||||
font-size: 2.5rem !important; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section article h2 a {
|
||||
font-size: 5rem; } }
|
||||
background: #000; }
|
||||
.home main section .home-wrapper-big article .metadata {
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch; }
|
||||
.home main section .home-wrapper-big article .metadata::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: none;
|
||||
width: calc(100% - 4rem);
|
||||
border-top: #000 1px solid;
|
||||
left: calc(4rem);
|
||||
background-color: transparent;
|
||||
margin-left: -0; }
|
||||
.home main section .home-wrapper-big article .metadata::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: calc(4rem);
|
||||
height: calc(4rem);
|
||||
top: 0;
|
||||
left: -0;
|
||||
border-left: #000 solid 1px;
|
||||
border-top: #000 1px solid;
|
||||
-moz-transform: skewX(-45deg);
|
||||
-o-transform: skewX(-45deg);
|
||||
-ms-transform: skewX(-45deg);
|
||||
-webkit-transform: skewX(-45deg);
|
||||
transform: skewX(-45deg);
|
||||
transform-origin: left bottom;
|
||||
background-color: transparent;
|
||||
z-index: 9; }
|
||||
.home main section .home-wrapper-big article .metadata > div {
|
||||
width: 30%;
|
||||
padding-top: 2rem; } }
|
||||
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
|
||||
.home main section .home-wrapper-big article .metadata {
|
||||
height: calc(10rem / 2); } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section .home-wrapper-big article .metadata .categories {
|
||||
display: none;
|
||||
display: block;
|
||||
border-right: #000 solid 1px; }
|
||||
.home main section .home-wrapper-2 article {
|
||||
border-left: #000 1px solid; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section .home-wrapper-small {
|
||||
width: calc(100vw - (10rem * 3));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 10rem;
|
||||
margin-top: 4rem; }
|
||||
.home main section .home-wrapper-small article {
|
||||
flex: 0 0 33%;
|
||||
height: 50%; }
|
||||
.home main section .home-wrapper-small article .metadata {
|
||||
display: none; } }
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* single */
|
||||
|
||||
Reference in New Issue
Block a user