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

work on start

Browse Source
This commit is contained in:
infeeeee
2019-08-10 03:45:43 +02:00
parent eb6fdf9388
commit 0686d99971
6 changed files with 336 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
sass/_font-mixins.scss
View File

@@ -66,7 +66,24 @@
color: #000;
}
@media #{$bigdesktop} {
font-size: 2.2rem;
font-size: 2rem;
}
@media #{$verybigdesktop} {
font-size: 3rem;
}
}
@mixin home-metadata {
font: bold 1rem "Westeinde Caption";
color: #000;
@media #{$smalldesktop} {
font-size: 1.2rem;
}
@media #{$bigdesktop} {
font-size: 1.3rem;
}
@media #{$verybigdesktop} {
font-size: 2.5rem;
}
}
@@ -81,13 +98,7 @@
}
}
@mixin home-metadata {
font: bold 1rem "Westeinde Caption";
color: #000;
@media #{$smalldesktop} {
font-size: 1.2rem;
}
}
@mixin home-metadata-big {
@media #{$smalldesktop} {
@@ -201,7 +212,6 @@
@media #{$smalldesktop} {
font-size: 3rem;
}
@media #{$bigdesktop} {
font-size: 3.2rem;
}

157
sass/base.scss
View File

@@ -230,6 +230,11 @@ $v-unit-6: 24rem;
}
@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $bordercolor, $side) {
$minusOffset: calc((#{$offset}) * -1);
@if $offset==0 {
$minusOffset: 0;
}
&::after {
//for border without corner
position: absolute;
@@ -237,6 +242,7 @@ $v-unit-6: 24rem;
display: block;
top: 0;
border: none;
@if $offset==0 {
width: calc(100% - #{$radius});
} @else {
@@ -248,11 +254,11 @@ $v-unit-6: 24rem;
@if $side==left {
left: calc(#{$radius});
margin-left: calc((#{$offset}) * -1);
margin-left: $minusOffset;
}
@if $side==right {
right: calc(#{$radius});
margin-right: calc((#{$offset}) * -1);
margin-right: $minusOffset;
}
}
&::before {
@@ -267,14 +273,14 @@ $v-unit-6: 24rem;
z-index: 9;
@if $side==left {
left: calc((#{$offset}) * -1);
left: $minusOffset;
border-left: $bordercolor solid 1px;
@include transform(skewX(-45deg));
transform-origin: left bottom;
border-top: $bordercolor solid 1px;
}
@if $side==right {
right: calc((#{$offset}) * -1);
right: $minusOffset;
border-right: $bordercolor solid 1px;
@include transform(skewX(45deg));
transform-origin: right bottom;
@@ -644,60 +650,6 @@ $v-unit-6: 24rem;
}
}
}
// .sub-wrapper {
// .bedo-sub-wrapper {
// position: fixed;
// display: none;
// right: $h-unit-2;
// left: $h-unit-2;
// top: 0;
// background-color: #000;
// height: 50vh;
// z-index: -1;
// flex-direction: row;
// justify-content: flex-start;
// align-items: center;
// // &:first-child {
// // display: flex;
// // }
// &.opened {
// display: flex;
// }
// a {
// @include bedo-hover-title();
// @include transform(rotate(-45deg));
// transform-origin: 50% 50%;
// display: block;
// width: calc(30% + #{$v-unit-6});
// text-align: center;
// height: fit-content;
// }
// span {
// display: block;
// position: absolute;
// bottom: 0;
// right: 0;
// height: $v-unit-6;
// width: 70%;
// padding: $v-unit-1;
// padding-left: $v-unit-6 + $v-unit-2;
// padding-right: $v-unit-4;
// @include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left);
// @include bedo-hover-sub();
// .circle {
// $diameter: 4rem;
// width: $diameter;
// height: $diameter;
// border-radius: 50%;
// background: #fff;
// position: absolute;
// right: 0;
// top: 0;
// margin: $v-unit-1 / 2;
// }
// }
// }
// }
}
} //header end
@@ -891,6 +843,7 @@ $v-unit-6: 24rem;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
box-shadow: 0 0 1px transparent;
}
.bevezeto,
@@ -1035,17 +988,20 @@ $v-unit-6: 24rem;
}
} //metadata end
/* ------------------------- home article big hover ------------------------- */
/* --------------------- home article desktop big hover --------------------- */
&.hovered {
h2 > a {
color: #000;
}
}
}
/* ------------------------ home article desktop 1 + 2 ----------------------- */
&.home_wrapper-1 {
article {
.metadata {
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, left);
@include triangle-corner-bordered(#{$v-unit-1}, 1px, transparent, #000, left);
.filler {
position: relative;
}
@@ -1061,7 +1017,7 @@ $v-unit-6: 24rem;
.metadata {
justify-content: flex-end;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, right);
@include triangle-corner-bordered(#{$v-unit-1}, 1px, transparent, #000, right);
.filler {
order: -1;
}
@@ -1097,6 +1053,9 @@ $v-unit-6: 24rem;
&.home_wrapper-s1.home_wrapper-small.home_wrapper-1 {
margin-left: $h-unit-2;
}
&:last-child {
margin-right: $h-unit-2;
}
article,
.archivetitle,
@@ -1132,6 +1091,12 @@ $v-unit-6: 24rem;
align-items: stretch;
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
display: none;
@media #{$verybigdesktop} {
height: $h-unit-2;
@include triangle-corner-bordered(#{$h-unit-2}, 0, transparent, #000, left);
}
&.vis {
display: flex;
}
@@ -1139,14 +1104,25 @@ $v-unit-6: 24rem;
.categories,
.postedon {
@include home-metadata();
display: flex;
flex-direction: row;
align-content: center;
margin-top: auto;
margin-bottom: auto;
flex-wrap: nowrap;
justify-content: center;
}
.categories {
margin-left: $v-unit-1 * 1.5;
padding: $v-unit-1 / 3 0;
flex: 1 1 auto;
margin-left: $h-unit-1;
@media #{$verybigdesktop} {
margin-left: $h-unit-2;
}
padding-right: $v-unit-1 / 4;
// padding: $v-unit-1 / 3 0;
flex: 1 0 auto;
}
.postedon {
padding: $v-unit-1 / 3 $v-unit-1 / 4;
padding: 0 $v-unit-1 / 4;
flex: 1 0 auto;
}
}
@@ -1162,21 +1138,27 @@ $v-unit-6: 24rem;
top: 0;
background-color: #fff;
height: 100%;
padding-left: $v-unit-1;
@media #{$bigdesktop} {
padding: $h-unit-1;
}
padding: 0;
a {
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
@include fit-content(height);
position: absolute;
margin-top: $h-unit-1 / 2;
margin-right: $v-unit-1 / 2;
margin-bottom: $h-unit-1 + $v-unit-1 / 2;
margin-left: $h-unit-1;
@media #{$bigdesktop} {
width: calc(100% - #{$h-unit-2});
margin-right: $v-unit-1 / 4;
margin-bottom: $h-unit-1 + $v-unit-1 / 4;
}
@media #{$verybigdesktop} {
margin-left: $h-unit-2;
margin-bottom: $h-unit-2 + $v-unit-1 / 2;
}
bottom: 0;
@include fit-content(height);
position: absolute;
}
}
}
@@ -1335,6 +1317,7 @@ body.category.category-esemeny {
width: 1px;
height: 100%;
background-color: #000;
box-shadow: 0 0 1px transparent;
}
a.text-link {
flex: 1 1 auto;
@@ -1358,7 +1341,7 @@ body.category.category-esemeny {
main {
padding-top: 0;
section {
height: 100%;
height: 100%;
// padding-top:
padding-left: $h-unit-2;
@@ -1369,7 +1352,7 @@ body.category.category-esemeny {
height: calc(50vw - #{$h-unit-2});
max-width: calc(100vh - #{$h-unit-1});
max-height: calc(100vh - #{$h-unit-1});
min-width: 80vh;
min-height: 80vh;
// margin: auto;
@@ -1377,7 +1360,7 @@ body.category.category-esemeny {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
.thumbnailwrapper {
height: unset;
@@ -1387,7 +1370,7 @@ body.category.category-esemeny {
height: unset;
max-height: $h-unit-5;
@media #{$verybigdesktop} {
max-height: $h-unit-5 + $h-unit-2
max-height: $h-unit-5 + $h-unit-2;
}
flex: 1 1 auto;
padding: 0;
@@ -1395,23 +1378,22 @@ body.category.category-esemeny {
// .ev-date{
// padding-left: 2rem;
// }
// padding-right: 2rem;
// }
.bottom-row{
h2{
.bottom-row {
h2 {
// padding-left: 2rem;
padding-bottom: 2rem;
}
.vr{
}
.vr {
margin: 0 2rem;
}
.text-link{
.text-link {
// padding-right: 2rem;
padding-bottom: 2rem;
}
}
}
}
@@ -1985,6 +1967,7 @@ body.category.category-esemeny {
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
box-shadow: 0 0 1px transparent;
}
}
}