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

89
css/base.css
View File

@@ -450,6 +450,7 @@ object {
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper main section article .metadata { .wrapper main section article .metadata {
font-size: 1.2rem; } } font-size: 1.2rem; } }
@media (max-width: 768px) {
.wrapper main section article .metadata::after { .wrapper main section article .metadata::after {
content: ""; content: "";
display: block; display: block;
@@ -464,7 +465,7 @@ object {
border-right: 5rem solid transparent; border-right: 5rem solid transparent;
border-bottom: 5rem solid #fff; border-bottom: 5rem solid #fff;
position: absolute; position: absolute;
z-index: -1; } z-index: -1; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper main section .misha_loadmore { .wrapper main section .misha_loadmore {
width: 10rem; width: 10rem;
@@ -655,6 +656,9 @@ object {
.home main section .home-wrapper-big article .metadata { .home main section .home-wrapper-big article .metadata {
height: calc(10rem / 2); } } height: calc(10rem / 2); } }
@media (min-width: 769px) { @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, .archive main section .home-wrapper-big article .metadata .categories,
.home main section .home-wrapper-big article .metadata .categories { .home main section .home-wrapper-big article .metadata .categories {
display: block; display: block;
@@ -674,11 +678,6 @@ object {
.home main section .home-wrapper-big article .metadata .alcim { .home main section .home-wrapper-big article .metadata .alcim {
color: #000 !important; color: #000 !important;
display: none; } 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, .archive main section .home-wrapper-big article .metadata .alcim,
.home main section .home-wrapper-big article .metadata .alcim { .home main section .home-wrapper-big article .metadata .alcim {
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
@@ -704,10 +703,17 @@ object {
.home main section .home-wrapper-big article .metadata .bevezeto { .home main section .home-wrapper-big article .metadata .bevezeto {
font-size: 2rem; } } font-size: 2rem; } }
@media (min-width: 769px) { @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, .archive main section .home-wrapper-big article .metadata .filler,
.home main section .home-wrapper-big article .metadata .filler { .home main section .home-wrapper-big article .metadata .filler {
flex: 0 0 auto; flex: 0 0 auto;
width: 40%; } width: 40%;
height: 1px;
align-self: flex-start; }
.archive main section .home-wrapper-big article.hovered h2 > a, .archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a { .home main section .home-wrapper-big article.hovered h2 > a {
color: #000; } color: #000; }
@@ -720,8 +726,8 @@ object {
border: none; border: none;
width: calc(100% - 4rem); width: calc(100% - 4rem);
border-top: #000 1px solid; border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent; background-color: transparent;
left: calc(4rem);
margin-left: -0; } margin-left: -0; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata::before, .archive main section .home-wrapper-big.home-wrapper-1 article .metadata::before,
.home 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); width: calc(4rem);
height: calc(4rem); height: calc(4rem);
top: 0; top: 0;
background-color: transparent;
z-index: 9;
left: -0; left: -0;
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
@@ -738,15 +746,25 @@ object {
-ms-transform: skewX(-45deg); -ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg); -webkit-transform: skewX(-45deg);
transform: skewX(-45deg); transform: skewX(-45deg);
transform-origin: left bottom; transform-origin: left bottom; }
background-color: transparent; .archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler,
z-index: 9; } .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, .archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
.home 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; } float: right; }
.archive main section .home-wrapper-big.home-wrapper-2 article, .archive main section .home-wrapper-big.home-wrapper-2 article,
.home main section .home-wrapper-big.home-wrapper-2 article { .home main section .home-wrapper-big.home-wrapper-2 article {
border-left: #000 1px solid; } border-left: #000 1px solid; }
.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, .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::after,
.home 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; position: absolute;
@@ -756,9 +774,9 @@ object {
border: none; border: none;
width: calc(100% - 4rem); width: calc(100% - 4rem);
border-top: #000 1px solid; border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent; background-color: transparent;
margin-left: -0; } right: calc(4rem);
margin-right: -0; }
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before, .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before,
.home 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; display: block;
@@ -767,16 +785,19 @@ object {
width: calc(4rem); width: calc(4rem);
height: calc(4rem); height: calc(4rem);
top: 0; 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; background-color: transparent;
z-index: 9; } 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, .archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
.home 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; left: -5rem;
@@ -851,8 +872,8 @@ object {
border: none; border: none;
width: calc(100% - 4rem); width: calc(100% - 4rem);
border-top: #000 1px solid; border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent; background-color: transparent;
left: calc(4rem);
margin-left: -0; } margin-left: -0; }
.archive main section .home-wrapper-small article .metadata::before, .archive main section .home-wrapper-small article .metadata::before,
.archive main section .home-wrapper-small .archivetitle .metadata::before, .archive main section .home-wrapper-small .archivetitle .metadata::before,
@@ -866,6 +887,8 @@ object {
width: calc(4rem); width: calc(4rem);
height: calc(4rem); height: calc(4rem);
top: 0; top: 0;
background-color: transparent;
z-index: 9;
left: -0; left: -0;
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
@@ -873,9 +896,7 @@ object {
-ms-transform: skewX(-45deg); -ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg); -webkit-transform: skewX(-45deg);
transform: skewX(-45deg); transform: skewX(-45deg);
transform-origin: left bottom; transform-origin: left bottom; }
background-color: transparent;
z-index: 9; }
.archive main section .home-wrapper-small article .metadata.vis, .archive main section .home-wrapper-small article .metadata.vis,
.archive main section .home-wrapper-small .archivetitle .metadata.vis, .archive main section .home-wrapper-small .archivetitle .metadata.vis,
.archive main section .home-wrapper-small .archivedescription .metadata.vis, .archive main section .home-wrapper-small .archivedescription .metadata.vis,
@@ -951,8 +972,8 @@ object {
border: none; border: none;
width: calc(100% - 5rem); width: calc(100% - 5rem);
border-top: #000 1px solid; border-top: #000 1px solid;
left: calc(5rem);
background-color: transparent; background-color: transparent;
left: calc(5rem);
margin-left: -0; } margin-left: -0; }
.archive main section .home-wrapper-small .archivetitle::before, .archive main section .home-wrapper-small .archivetitle::before,
.home main section .home-wrapper-small .archivetitle::before { .home main section .home-wrapper-small .archivetitle::before {
@@ -962,6 +983,8 @@ object {
width: calc(5rem); width: calc(5rem);
height: calc(5rem); height: calc(5rem);
top: 0; top: 0;
background-color: transparent;
z-index: 9;
left: -0; left: -0;
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
@@ -969,9 +992,7 @@ object {
-ms-transform: skewX(-45deg); -ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg); -webkit-transform: skewX(-45deg);
transform: skewX(-45deg); transform: skewX(-45deg);
transform-origin: left bottom; transform-origin: left bottom; }
background-color: transparent;
z-index: 9; }
.archive main section .home-wrapper-small .archivetitle.tag, .archive main section .home-wrapper-small .archivetitle.tag,
.home main section .home-wrapper-small .archivetitle.tag { .home main section .home-wrapper-small .archivetitle.tag {
text-transform: uppercase; } text-transform: uppercase; }
@@ -1098,8 +1119,8 @@ object {
border: none; border: none;
width: calc(100% - 5rem + 5rem); width: calc(100% - 5rem + 5rem);
border-top: #000 1px solid; border-top: #000 1px solid;
left: calc(5rem);
background-color: white; background-color: white;
left: calc(5rem);
margin-left: -5rem; } margin-left: -5rem; }
.single article .titlewrapper .metadata::before { .single article .titlewrapper .metadata::before {
display: block; display: block;
@@ -1108,6 +1129,8 @@ object {
width: calc(5rem); width: calc(5rem);
height: calc(5rem); height: calc(5rem);
top: 0; top: 0;
background-color: white;
z-index: 9;
left: -5rem; left: -5rem;
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
@@ -1115,9 +1138,7 @@ object {
-ms-transform: skewX(-45deg); -ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg); -webkit-transform: skewX(-45deg);
transform: skewX(-45deg); transform: skewX(-45deg);
transform-origin: left bottom; transform-origin: left bottom; } }
background-color: white;
z-index: 9; } }
.single article .titlewrapper .metadata .time-cat { .single article .titlewrapper .metadata .time-cat {
z-index: 10; } z-index: 10; }
.single article .titlewrapper h1 { .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 cc = $(this)
let cArticle = cc.parents("article") let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata") let cMetadata = cArticle.children(".metadata")
//add hovered class //add hovered class
cArticle.addClass("hovered") cArticle.addClass("hovered")
//add tag to header for bg //add tag to header for bg
let artClasses = cArticle.attr("class").split(" ") let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag") let theTag = findClassByStart(artClasses, "tag")
$("body, .header-1, .header-2").addClass("hover-" + theTag) $("body, .header-1, .header-2").addClass("hover-" + theTag)
//transparent metadata
cMetadata.children(".categories, .postedon").addClass("transparent")
//animate border //animate border
cMetadata.stop().animate({ height: "25rem" }, _ => { cMetadata.stop().animate({ height: "25rem" }, _ => {
//hide metadata //hide metadata
cMetadata.children(".categories, .postedon").hide() cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent") cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
}) })
@@ -484,19 +489,23 @@
let cc = $(this) let cc = $(this)
let cArticle = cc.parents("article") let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata") let cMetadata = cArticle.children(".metadata")
//remove hovered class //remove hovered class
cArticle.removeClass("hovered") cArticle.removeClass("hovered")
//remove tag from header and body //remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ") let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover") var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass) $("body, .header-1, .header-2").removeClass(hoverClass)
//transparent metadata //transparent metadata
cMetadata.children(".alcim, .bevezeto").addClass("transparent") cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change //animate height change
cMetadata.stop().animate({ height: "10rem" }, _ => { cMetadata.stop().animate({ height: "10rem" }, _ => {
//hide and show metadata //hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent") cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").show() cMetadata.children(".categories, .postedon").removeClass("transparent").show()
}) })
}) })

88
sass/base.scss
View File

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