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

home hover improvements, docs

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-22 22:09:39 +02:00
parent 1cc5df0c40
commit 8b99976607
9 changed files with 136 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
sass/base.scss
View File

@@ -331,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);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
}
}
}
@@ -754,6 +754,7 @@ $v-unit-2: 8rem;
padding: 0;
justify-content: flex-start;
align-items: center;
overflow: visible !important;
@include home-metadata-big();
@@ -761,7 +762,7 @@ $v-unit-2: 8rem;
height: calc(#{$h-unit-2} / 2);
}
&>div{
& > div {
flex: 1 0 auto;
}
@@ -808,6 +809,7 @@ $v-unit-2: 8rem;
.transparent,
.transparent a {
color: transparent !important;
//color: #000 !important;
}
.filler {
@@ -816,6 +818,27 @@ $v-unit-2: 8rem;
height: 1px;
align-self: flex-start;
}
.curvyArrow {
position: absolute;
right: 0;
top: 0;
height: ($h-unit-1 + $h-unit-2);
width: ($h-unit-1 + $h-unit-2)/2;
object {
height: ($h-unit-1 + $h-unit-2);
position: absolute;
right: 0;
top: calc(-50% + 0.5px);
// &:first-child {
// // top: calc(-100% + 2px);
// top: -100%;
// // top: unset;
// @include transform(scale(1, -1));
// // @include transform(rotate(-90deg));
// }
}
}
} //metadata end
/* ------------------------- home article big hover ------------------------- */
@@ -829,20 +852,9 @@ $v-unit-2: 8rem;
article {
.metadata {
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
.filler{
.filler {
position: relative;
&::after{
content: url('../img/curvy_arrow.svg');
position: absolute;
top: -50%;
right: 0;
}
}
}
a.thumbnailwrapper {
float: right;
@@ -852,11 +864,11 @@ $v-unit-2: 8rem;
&.home-wrapper-2 {
article {
border-left: #000 1px solid;
.metadata {
justify-content: flex-end;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
.filler{
.filler {
order: -1;
}
}