infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

home big hovers

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-18 16:41:45 +02:00
parent 5fe471dfe6
commit cfe1433555
7 changed files with 192 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
css/base.css
View File

@@ -602,30 +602,32 @@ object {
@media (min-width: 769px) {
.archive main section .home-wrapper-big,
.home main section .home-wrapper-big {
flex: 0 0 auto; }
flex: 0 0 auto;
border-right: #000 1px solid; }
.archive main section .home-wrapper-big article,
.home main section .home-wrapper-big article {
position: relative;
width: calc(100vw - (10rem * 3));
height: calc(100vh - 4rem);
margin: 0;
padding: 0;
margin-left: 10rem;
padding-top: 4rem;
border-right: #000 1px solid;
margin-top: 4rem;
border-top: 1px #000 solid;
/* ------------- home article desktop big - thumbnail and title ------------- */
/* -------------------------- home article metadata big------------------------- */
/* ------------------------- home article big hover ------------------------- */ }
.archive main section .home-wrapper-big article .thumbnailwrapper,
.home main section .home-wrapper-big article .thumbnailwrapper {
width: 40%;
height: calc(100% - 4rem);
display: flex;
flex-direction: row;
justify-content: flex-start;
border-top: 1px #000 solid; }
justify-content: flex-start; }
.archive main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail,
.home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail {
object-fit: cover;
width: 50%;
width: 100%;
height: 100%; }
.archive main section .home-wrapper-big article h2,
.home main section .home-wrapper-big article h2 {
@@ -643,37 +645,7 @@ object {
flex-direction: row;
padding: 0;
justify-content: flex-start;
align-items: center; }
.archive main section .home-wrapper-big article .metadata::after,
.home main section .home-wrapper-big article .metadata::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.archive main section .home-wrapper-big article .metadata::before,
.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;
-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; } }
align-items: center; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata,
.home main section .home-wrapper-big article .metadata {
@@ -691,7 +663,8 @@ object {
.home main section .home-wrapper-big article .metadata .vr {
height: 100%;
width: 1px;
background-color: #000; }
background-color: #000;
flex: 0 0 auto; }
.archive main section .home-wrapper-big article .metadata .postedon,
.home main section .home-wrapper-big article .metadata .postedon {
padding: 0 5rem; }
@@ -699,16 +672,111 @@ object {
.archive main section .home-wrapper-big article .metadata .alcim,
.home main section .home-wrapper-big article .metadata .bevezeto,
.home main section .home-wrapper-big article .metadata .alcim {
color: #000 !important;
display: none; }
.archive main section .home-wrapper-big article .metadata .bevezeto.transparent,
.archive main section .home-wrapper-big article .metadata .alcim.transparent,
.home main section .home-wrapper-big article .metadata .bevezeto.transparent,
.home main section .home-wrapper-big article .metadata .alcim.transparent {
color: transparent !important; }
.archive main section .home-wrapper-big article .metadata .alcim,
.home main section .home-wrapper-big article .metadata .alcim {
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: top bottom;
text-align: left;
flex: 0 0 auto;
height: 5rem;
width: 20rem;
margin: 0 -3rem; }
.archive main section .home-wrapper-big article .metadata .bevezeto,
.home main section .home-wrapper-big article .metadata .bevezeto {
width: 50%;
flex: 0 1 auto;
text-align: left;
padding: 5rem;
font: bold 1rem "Butler"; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata .bevezeto,
.home main section .home-wrapper-big article .metadata .bevezeto {
font-size: 2rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata .filler,
.home main section .home-wrapper-big article .metadata .filler {
flex: 0 0 auto;
width: 40%; }
.archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a {
color: #000; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata::after,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata::before,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata::before {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
top: 0;
left: -0;
border-left: #000 solid 1px;
-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; }
.archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
.home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
justify-content: flex-end; }
float: right; }
.archive main section .home-wrapper-big.home-wrapper-2 article,
.home main section .home-wrapper-big.home-wrapper-2 article {
border-left: #000 1px solid; }
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata::after,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata::before {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
top: 0;
left: -0;
border-left: #000 solid 1px;
-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; }
.archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
.home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
left: -5rem;