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

home big hover improvements

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-19 23:20:05 +02:00
parent cfe1433555
commit 1cc5df0c40
4 changed files with 222 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
css/base.css
View File

@@ -450,21 +450,22 @@ object {
@media (min-width: 769px) {
.wrapper main section article .metadata {
font-size: 1.2rem; } }
.wrapper main section article .metadata::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0;
height: 0;
left: -5rem;
top: -5rem;
border-top: 5rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-bottom: 5rem solid #fff;
position: absolute;
z-index: -1; }
@media (max-width: 768px) {
.wrapper main section article .metadata::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0;
height: 0;
left: -5rem;
top: -5rem;
border-top: 5rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-bottom: 5rem solid #fff;
position: absolute;
z-index: -1; } }
@media (min-width: 769px) {
.wrapper main section .misha_loadmore {
width: 10rem;
@@ -655,6 +656,9 @@ object {
.home main section .home-wrapper-big article .metadata {
height: calc(10rem / 2); } }
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata > div,
.home main section .home-wrapper-big article .metadata > div {
flex: 1 0 auto; }
.archive main section .home-wrapper-big article .metadata .categories,
.home main section .home-wrapper-big article .metadata .categories {
display: block;
@@ -674,11 +678,6 @@ object {
.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);
@@ -704,10 +703,17 @@ object {
.home main section .home-wrapper-big article .metadata .bevezeto {
font-size: 2rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata .transparent,
.archive main section .home-wrapper-big article .metadata .transparent a,
.home main section .home-wrapper-big article .metadata .transparent,
.home main section .home-wrapper-big article .metadata .transparent a {
color: transparent !important; }
.archive main section .home-wrapper-big article .metadata .filler,
.home main section .home-wrapper-big article .metadata .filler {
flex: 0 0 auto;
width: 40%; }
width: 40%;
height: 1px;
align-self: flex-start; }
.archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a {
color: #000; }
@@ -720,8 +726,8 @@ object {
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
left: calc(4rem);
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 {
@@ -731,6 +737,8 @@ object {
width: calc(4rem);
height: calc(4rem);
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
@@ -738,45 +746,58 @@ object {
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; }
transform-origin: left bottom; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler {
position: relative; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after {
content: url("../img/curvy_arrow.svg");
position: absolute;
top: -50%;
right: 0; }
.archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
.home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
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 .metadata,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata {
justify-content: flex-end; }
.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;
background-color: transparent;
right: calc(4rem);
margin-right: -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;
background-color: transparent;
z-index: 9;
right: -0;
border-right: #000 solid 1px;
-moz-transform: skewX(45deg);
-o-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
transform-origin: right bottom; }
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata .filler,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata .filler {
order: -1; }
.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;
@@ -851,8 +872,8 @@ object {
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
left: calc(4rem);
margin-left: -0; }
.archive main section .home-wrapper-small article .metadata::before,
.archive main section .home-wrapper-small .archivetitle .metadata::before,
@@ -866,6 +887,8 @@ object {
width: calc(4rem);
height: calc(4rem);
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
@@ -873,9 +896,7 @@ object {
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; }
transform-origin: left bottom; }
.archive main section .home-wrapper-small article .metadata.vis,
.archive main section .home-wrapper-small .archivetitle .metadata.vis,
.archive main section .home-wrapper-small .archivedescription .metadata.vis,
@@ -951,8 +972,8 @@ object {
border: none;
width: calc(100% - 5rem);
border-top: #000 1px solid;
left: calc(5rem);
background-color: transparent;
left: calc(5rem);
margin-left: -0; }
.archive main section .home-wrapper-small .archivetitle::before,
.home main section .home-wrapper-small .archivetitle::before {
@@ -962,6 +983,8 @@ object {
width: calc(5rem);
height: calc(5rem);
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
@@ -969,9 +992,7 @@ object {
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; }
transform-origin: left bottom; }
.archive main section .home-wrapper-small .archivetitle.tag,
.home main section .home-wrapper-small .archivetitle.tag {
text-transform: uppercase; }
@@ -1098,8 +1119,8 @@ object {
border: none;
width: calc(100% - 5rem + 5rem);
border-top: #000 1px solid;
left: calc(5rem);
background-color: white;
left: calc(5rem);
margin-left: -5rem; }
.single article .titlewrapper .metadata::before {
display: block;
@@ -1108,6 +1129,8 @@ object {
width: calc(5rem);
height: calc(5rem);
top: 0;
background-color: white;
z-index: 9;
left: -5rem;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
@@ -1115,9 +1138,7 @@ object {
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: white;
z-index: 9; } }
transform-origin: left bottom; } }
.single article .titlewrapper .metadata .time-cat {
z-index: 10; }
.single article .titlewrapper h1 {