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

home big hovers

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-18 16:41:45 +02:00
parent 5fe471dfe6
commit cfe1433555
7 changed files with 192 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
sass/base.scss
View File

@@ -103,6 +103,7 @@ $h-unit-1: 5rem;
//vertical units:
$v-unit-1: 4rem;
$v-unit-2: 8rem;
/* -------------------------------------------------------------------------- */
/* other mixins */
@@ -685,27 +686,30 @@ $v-unit-1: 4rem;
//big: first 2 articles
.home-wrapper-big {
flex: 0 0 auto;
border-right: #000 1px solid;
article {
position: relative;
width: calc(100vw - (#{$h-unit-2} * 3));
height: calc(100vh - #{$v-unit-1});
margin: 0;
padding: 0;
margin-left: $h-unit-2;
padding-top: $v-unit-1;
border-right: #000 1px solid;
margin-top: $v-unit-1;
border-top: 1px #000 solid;
/* ------------- home article desktop big - thumbnail and title ------------- */
.thumbnailwrapper {
width: 40%;
height: calc(100% - #{$v-unit-1});
display: flex;
flex-direction: row;
justify-content: flex-start;
border-top: 1px #000 solid;
img.attachment-home-big-thumbnail {
object-fit: cover;
width: 50%;
width: 100%;
height: 100%;
}
}
@@ -729,7 +733,7 @@ $v-unit-1: 4rem;
padding: 0;
justify-content: flex-start;
align-items: center;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
@include home-metadata-big();
@media #{$mobile-landscape} {
@@ -744,6 +748,8 @@ $v-unit-1: 4rem;
height: 100%;
width: 1px;
background-color: #000;
flex: 0 0 auto;
}
.postedon{
@@ -752,7 +758,34 @@ $v-unit-1: 4rem;
.bevezeto,
.alcim {
color: #000 !important;
display: none;
&.transparent{
color: transparent !important;
}
}
.alcim{
@include transform(rotate(270deg));
transform-origin: top bottom;
text-align: left;
flex: 0 0 auto;
height: $h-unit-1;
width: 20rem;
margin: 0 -3rem;
}
.bevezeto{
width: 50%;
flex: 0 1 auto;
text-align: left;
padding: $h-unit-1;
@include home-metadata-bevezeto();
}
.filler{
flex: 0 0 auto;
width: 40%;
}
} //metadata end
@@ -765,14 +798,20 @@ $v-unit-1: 4rem;
}
&.home-wrapper-1 {
article {
.metadata{
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
}
a.thumbnailwrapper {
justify-content: flex-end;
float: right;
}
}
}
&.home-wrapper-2 {
article {
border-left: #000 1px solid;
.metadata{
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
}
.thumbnailwrapper {
img {
left: -$h-unit-1;