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 {

44
img/curvy_arrow.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 122.1 232.379"
height="232.379"
width="122.1"
xml:space="preserve"
id="svg2"
version="1.1"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="m 1715,37 h 45 v 974 h -45 z" /></clipPath><clipPath
id="clipPath32"
clipPathUnits="userSpaceOnUse"><path
id="path30"
d="m 799,37 h 800.78 v 972 H 799 Z" /></clipPath><clipPath
id="clipPath64"
clipPathUnits="userSpaceOnUse"><path
id="path62"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
id="clipPath80"
clipPathUnits="userSpaceOnUse"><path
id="path78"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
id="clipPath198"
clipPathUnits="userSpaceOnUse"><path
id="path196"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
id="clipPath222"
clipPathUnits="userSpaceOnUse"><path
id="path220"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath></defs><path
id="path226"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 1.044,0 c 0,63.609 53.057,115.94 121.056,115.94 -67.999,0 -121.35,52.828 -121.35,116.439" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

13
js/scripts.js
View File

@@ -466,17 +466,22 @@
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//add hovered class
cArticle.addClass("hovered")
//add tag to header for bg
let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag")
$("body, .header-1, .header-2").addClass("hover-" + theTag)
//transparent metadata
cMetadata.children(".categories, .postedon").addClass("transparent")
//animate border
cMetadata.stop().animate({ height: "25rem" }, _ => {
//hide metadata
cMetadata.children(".categories, .postedon").hide()
cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
})
@@ -484,19 +489,23 @@
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//remove hovered class
cArticle.removeClass("hovered")
//remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass)
//transparent metadata
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change
cMetadata.stop().animate({ height: "10rem" }, _ => {
//hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").show()
cMetadata.children(".categories, .postedon").removeClass("transparent").show()
})
})

102
sass/base.scss
View File

@@ -82,6 +82,10 @@ object {
/* -------------------------------------------------------------------------- */
/* GLOBAL VARIABLES */
/* -------------------------------------------------------------------------- */
$only-mobile: only screen and
(
max-width: 768px
);
$smalldesktop: only screen and
(
@@ -177,7 +181,7 @@ $v-unit-2: 8rem;
z-index: -1;
}
@mixin triangle-corner-bordered($radius, $left, $bgcolor) {
@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $side) {
&::after {
//for border without corner
position: absolute;
@@ -185,16 +189,23 @@ $v-unit-2: 8rem;
display: block;
top: 0;
border: none;
@if $left==0 {
@if $offset==0 {
width: calc(100% - #{$radius});
} @else {
width: calc(100% - #{$radius} + #{$left});
width: calc(100% - #{$radius} + #{$offset});
}
border-top: #000 1px solid;
left: calc(#{$radius});
background-color: $bgcolor;
margin-left: -#{$left};
@if $side==left {
left: calc(#{$radius});
margin-left: -#{$offset};
}
@if $side==right {
right: calc(#{$radius});
margin-right: -#{$offset};
}
}
&::before {
//filleted corner
@@ -204,13 +215,21 @@ $v-unit-2: 8rem;
width: calc(#{$radius});
height: calc(#{$radius});
top: 0;
left: -#{$left};
border-left: #000 solid 1px;
// border-top: #000 1px solid;
@include transform(skewX(-45deg));
transform-origin: left bottom;
background-color: $bgcolor;
z-index: 9;
@if $side==left {
left: -#{$offset};
border-left: #000 solid 1px;
@include transform(skewX(-45deg));
transform-origin: left bottom;
}
@if $side==right {
right: -#{$offset};
border-right: #000 solid 1px;
@include transform(skewX(45deg));
transform-origin: right bottom;
}
}
}
@@ -312,7 +331,7 @@ $v-unit-2: 8rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;
}
}
}
@@ -531,7 +550,9 @@ $v-unit-2: 8rem;
@include home-metadata();
z-index: 1;
&::after {
@include trianglecorner(topleft, $h-unit-1);
@media #{$only-mobile} {
@include trianglecorner(topleft, $h-unit-1);
}
}
}
} //article end
@@ -739,6 +760,11 @@ $v-unit-2: 8rem;
@media #{$mobile-landscape} {
height: calc(#{$h-unit-2} / 2);
}
&>div{
flex: 1 0 auto;
}
.categories {
display: block;
padding: 0 $h-unit-1;
@@ -749,10 +775,9 @@ $v-unit-2: 8rem;
width: 1px;
background-color: #000;
flex: 0 0 auto;
}
.postedon{
.postedon {
padding: 0 $h-unit-1;
}
@@ -760,12 +785,9 @@ $v-unit-2: 8rem;
.alcim {
color: #000 !important;
display: none;
&.transparent{
color: transparent !important;
}
}
.alcim{
.alcim {
@include transform(rotate(270deg));
transform-origin: top bottom;
text-align: left;
@@ -775,7 +797,7 @@ $v-unit-2: 8rem;
margin: 0 -3rem;
}
.bevezeto{
.bevezeto {
width: 50%;
flex: 0 1 auto;
text-align: left;
@@ -783,9 +805,16 @@ $v-unit-2: 8rem;
@include home-metadata-bevezeto();
}
.filler{
.transparent,
.transparent a {
color: transparent !important;
}
.filler {
flex: 0 0 auto;
width: 40%;
height: 1px;
align-self: flex-start;
}
} //metadata end
@@ -798,8 +827,22 @@ $v-unit-2: 8rem;
}
&.home-wrapper-1 {
article {
.metadata{
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
.metadata {
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
.filler{
position: relative;
&::after{
content: url('../img/curvy_arrow.svg');
position: absolute;
top: -50%;
right: 0;
}
}
}
a.thumbnailwrapper {
float: right;
@@ -809,8 +852,13 @@ $v-unit-2: 8rem;
&.home-wrapper-2 {
article {
border-left: #000 1px solid;
.metadata{
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
.metadata {
justify-content: flex-end;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
.filler{
order: -1;
}
}
.thumbnailwrapper {
img {
@@ -869,7 +917,7 @@ $v-unit-2: 8rem;
padding: 0;
justify-content: flex-end;
align-items: stretch;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
display: none;
&.vis {
display: flex;
@@ -905,7 +953,7 @@ $v-unit-2: 8rem;
padding: 2rem;
border-right: #000 1px solid;
@include home-title();
@include triangle-corner-bordered($h-unit-1, 0, transparent);
@include triangle-corner-bordered($h-unit-1, 0, transparent, left);
&.tag {
text-transform: uppercase;
}
@@ -1037,7 +1085,7 @@ $v-unit-2: 8rem;
padding-left: 0;
width: calc(100% - #{$h-unit-1}) !important;
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white);
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, left);
}
.time-cat {
z-index: 10;