work on start
This commit is contained in:
157
sass/base.scss
157
sass/base.scss
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user