Small thumbnails on home
This commit is contained in:
157
css/base.css
157
css/base.css
@@ -521,7 +521,7 @@ object {
|
||||
position: relative; } }
|
||||
|
||||
.home main section {
|
||||
/* --------------------------- home article mobile -------------------------- */
|
||||
/* --------------------------- home article mobile/default -------------------------- */
|
||||
/* ------------------------ home article desktop big ------------------------ */
|
||||
/* ----------------------- home article desktop small ----------------------- */ }
|
||||
@media (min-width: 769px) {
|
||||
@@ -538,34 +538,17 @@ object {
|
||||
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) {
|
||||
display: inline-block; }
|
||||
.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) {
|
||||
object-fit: cover; }
|
||||
.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) {
|
||||
margin: 0; }
|
||||
.home main section article h2 a {
|
||||
font: bold 3rem "Westeinde Caption";
|
||||
color: #000; } }
|
||||
@@ -586,6 +569,7 @@ object {
|
||||
margin-left: 10rem;
|
||||
padding-top: 4rem;
|
||||
border-right: #000 1px solid;
|
||||
/* -------------------------------- thumbnail and title ------------------------------- */
|
||||
/* -------------------------- home article metadata big------------------------- */ }
|
||||
.home main section .home-wrapper-big article::before {
|
||||
content: "<hr>";
|
||||
@@ -593,6 +577,17 @@ object {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #000; }
|
||||
.home main section .home-wrapper-big article .thumbnailwrapper {
|
||||
height: calc(100% - 4rem); }
|
||||
.home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-thumbnail {
|
||||
object-fit: cover;
|
||||
width: 50%;
|
||||
height: 100%; }
|
||||
.home main section .home-wrapper-big article h2 {
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
padding: 4rem; }
|
||||
.home main section .home-wrapper-big article .metadata {
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
@@ -646,16 +641,82 @@ object {
|
||||
@media (min-width: 769px) {
|
||||
.home main section .home-wrapper-small {
|
||||
width: calc(100vw - (10rem * 3));
|
||||
height: calc((100vw - (10rem * 3)) / 3 * 2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 10rem;
|
||||
margin-top: 4rem; }
|
||||
margin: auto 0; }
|
||||
.home main section .home-wrapper-small:nth-child(3) {
|
||||
margin-left: 10rem; }
|
||||
.home main section .home-wrapper-small article {
|
||||
flex: 0 0 33%;
|
||||
height: 50%; }
|
||||
flex: 0 0 calc(100% / 3);
|
||||
height: 50%;
|
||||
position: relative; }
|
||||
.home main section .home-wrapper-small article .thumbnailwrapper {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.home main section .home-wrapper-small article .thumbnailwrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; }
|
||||
.home main section .home-wrapper-small article .metadata {
|
||||
display: none; } }
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
display: none; }
|
||||
.home main section .home-wrapper-small 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-small 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-small article .metadata.vis {
|
||||
display: flex; } }
|
||||
@media (min-width: 769px) and (min-width: 769px) {
|
||||
.home main section .home-wrapper-small article h2,
|
||||
.home main section .home-wrapper-small article h2 a {
|
||||
font-size: 1.2rem;
|
||||
-webkit-text-stroke: #000 1px;
|
||||
color: #fff; } }
|
||||
@media (min-width: 769px) {
|
||||
.home main section .home-wrapper-small article h2 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
height: 100%; }
|
||||
.home main section .home-wrapper-small article h2 a {
|
||||
top: 50%;
|
||||
position: absolute; } }
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* single */
|
||||
@@ -934,8 +995,15 @@ object {
|
||||
-webkit-text-stroke-color: #00ffb8 !important; }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-be h2 a {
|
||||
color: #00ffb8 !important; } }
|
||||
.tag-be.home-big h2 a {
|
||||
color: #00ffb8 !important; }
|
||||
.tag-be.home-small .metadata,
|
||||
.tag-be.home-small .metadata a {
|
||||
color: #000 !important; } }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-be.random .thumbnailwrapper > img {
|
||||
clip-path: url(../img/clip/be_desktop.svg); } }
|
||||
|
||||
.tag-do .metadata {
|
||||
color: #ff5f5f !important; }
|
||||
@@ -955,8 +1023,15 @@ object {
|
||||
-webkit-text-stroke-color: #ff5f5f !important; }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-do h2 a {
|
||||
color: #ff5f5f !important; } }
|
||||
.tag-do.home-big h2 a {
|
||||
color: #ff5f5f !important; }
|
||||
.tag-do.home-small .metadata,
|
||||
.tag-do.home-small .metadata a {
|
||||
color: #000 !important; } }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-do.random .thumbnailwrapper > img {
|
||||
clip-path: url(../img/clip/do_desktop.svg); } }
|
||||
|
||||
.tag-think .metadata {
|
||||
color: #fdff00 !important; }
|
||||
@@ -976,8 +1051,15 @@ object {
|
||||
-webkit-text-stroke-color: #fdff00 !important; }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-think h2 a {
|
||||
color: #fdff00 !important; } }
|
||||
.tag-think.home-big h2 a {
|
||||
color: #fdff00 !important; }
|
||||
.tag-think.home-small .metadata,
|
||||
.tag-think.home-small .metadata a {
|
||||
color: #000 !important; } }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-think.random .thumbnailwrapper > img {
|
||||
clip-path: url(../img/clip/think_desktop.svg); } }
|
||||
|
||||
.tag-love .metadata {
|
||||
color: #3c00ff !important; }
|
||||
@@ -997,8 +1079,15 @@ object {
|
||||
-webkit-text-stroke-color: #3c00ff !important; }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-love h2 a {
|
||||
color: #3c00ff !important; } }
|
||||
.tag-love.home-big h2 a {
|
||||
color: #3c00ff !important; }
|
||||
.tag-love.home-small .metadata,
|
||||
.tag-love.home-small .metadata a {
|
||||
color: #000 !important; } }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.tag-love.random .thumbnailwrapper > img {
|
||||
clip-path: url(../img/clip/love_desktop.svg); } }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.single .tag-be .metadata {
|
||||
|
||||
Reference in New Issue
Block a user