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

110
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
@@ -695,7 +716,7 @@ $v-unit-2: 8rem;
padding: 0;
margin-left: $h-unit-2;
margin-top: $v-unit-1;
border-top: 1px #000 solid;
/* ------------- home article desktop big - thumbnail and title ------------- */
@@ -706,7 +727,7 @@ $v-unit-2: 8rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
img.attachment-home-big-thumbnail {
object-fit: cover;
width: 100%;
@@ -733,12 +754,17 @@ $v-unit-2: 8rem;
padding: 0;
justify-content: flex-start;
align-items: center;
@include home-metadata-big();
@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;