small fixes
This commit is contained in:
201
sass/base.scss
201
sass/base.scss
@@ -98,10 +98,16 @@ $mobile-landscape: only screen and
|
||||
and (-webkit-min-device-pixel-ratio: 2.1);
|
||||
$bigdesktop: only screen and
|
||||
(
|
||||
min-width: 1281px
|
||||
min-width: 1279px
|
||||
);
|
||||
|
||||
$verybigdesktop: only screen and
|
||||
(
|
||||
min-width: 1919px
|
||||
);
|
||||
|
||||
//Horizontal units:
|
||||
$h-unit-4: 20rem;
|
||||
$h-unit-2: 10rem; // menuwidth on desktop
|
||||
$h-unit-1: 5rem;
|
||||
|
||||
@@ -111,6 +117,7 @@ $v-unit-2: 8rem;
|
||||
$v-unit-4: 16rem;
|
||||
$v-unit-6: 24rem;
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* other mixins */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@@ -358,7 +365,7 @@ $v-unit-6: 24rem;
|
||||
// color: #000;
|
||||
// fill: currentColor;
|
||||
filter: invert(100%); //black
|
||||
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;
|
||||
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -455,7 +462,7 @@ $v-unit-6: 24rem;
|
||||
button {
|
||||
flex: 0 0 auto;
|
||||
@media #{$only-mobile} {
|
||||
filter: invert(100)
|
||||
filter: invert(100);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -553,10 +560,13 @@ $v-unit-6: 24rem;
|
||||
display: none;
|
||||
|
||||
position: fixed;
|
||||
right: calc(#{$h-unit-2}* 2);
|
||||
top: calc(#{$v-unit-1}/ 2);
|
||||
right: calc(#{$h-unit-4} + 2px);
|
||||
top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
|
||||
@media #{$smalldesktop} {
|
||||
top: calc(#{$v-unit-1}* 0.4);
|
||||
top: 1rem;
|
||||
}
|
||||
@media #{$bigdesktop} {
|
||||
top: 0.5rem;
|
||||
}
|
||||
z-index: 1000;
|
||||
@media #{$smalldesktop} {
|
||||
@@ -570,13 +580,16 @@ $v-unit-6: 24rem;
|
||||
display: inline;
|
||||
a {
|
||||
span {
|
||||
height: calc(#{$v-unit-1}/ 2);
|
||||
height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
|
||||
// line-height: calc(#{$v-unit-1}/ 2);
|
||||
width: 1rem;
|
||||
@media #{$smalldesktop} {
|
||||
height: 3rem;
|
||||
// line-height: 5rem;
|
||||
}
|
||||
@media #{$bigdesktop} {
|
||||
height: 3.5rem;
|
||||
}
|
||||
margin: auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
@@ -596,60 +609,60 @@ $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .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
|
||||
|
||||
@@ -822,7 +835,6 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
|
||||
bottom: 50%;
|
||||
height: $h-unit-1;
|
||||
display: flex;
|
||||
@@ -832,7 +844,6 @@ $v-unit-6: 24rem;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
|
||||
.vr {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
@@ -842,7 +853,7 @@ $v-unit-6: 24rem;
|
||||
flex-basis: auto !important;
|
||||
}
|
||||
|
||||
.bevezeto,
|
||||
.bevezeto,
|
||||
.alcim,
|
||||
.curvyArrow {
|
||||
display: none;
|
||||
@@ -872,7 +883,7 @@ $v-unit-6: 24rem;
|
||||
/* ------------- home article desktop big - thumbnail and title ------------- */
|
||||
|
||||
.thumbnailwrapper {
|
||||
width: 40%;
|
||||
width: 60%;
|
||||
height: calc(100% - #{$v-unit-1});
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -890,6 +901,8 @@ $v-unit-6: 24rem;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
padding: 4rem;
|
||||
// padding-right: 0;
|
||||
width: calc(100vw - #{$h-unit-4});
|
||||
}
|
||||
|
||||
/* -------------------------- home article metadata big------------------------- */
|
||||
@@ -913,18 +926,16 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: block;
|
||||
padding: 0 $h-unit-1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.postedon {
|
||||
padding: 0 $h-unit-1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bevezeto,
|
||||
@@ -959,13 +970,14 @@ $v-unit-6: 24rem;
|
||||
|
||||
.filler {
|
||||
flex: 0 0 auto;
|
||||
width: 40%;
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.curvyArrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: ($h-unit-1 + $h-unit-2);
|
||||
@@ -1073,8 +1085,6 @@ $v-unit-6: 24rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.categories,
|
||||
.postedon {
|
||||
@include home-metadata();
|
||||
@@ -1157,6 +1167,19 @@ $v-unit-6: 24rem;
|
||||
} //main end
|
||||
} //home end
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Events */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
body.category.category-esemeny {
|
||||
header {
|
||||
background-color: #000;
|
||||
}
|
||||
main {
|
||||
padding-top: 5rem + (2rem * 2);
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* single */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@@ -1388,9 +1411,9 @@ $v-unit-6: 24rem;
|
||||
@mixin tagcolors($color) {
|
||||
//metadata on mobile
|
||||
.metadata {
|
||||
color: $color !important;
|
||||
@media #{$only-mobile} {
|
||||
.vr{
|
||||
color: $color !important;
|
||||
.vr {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
@@ -1489,32 +1512,36 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
$color-be: #fdff00;
|
||||
$color-do: #3c00ff;
|
||||
$color-think: #00ffb8;
|
||||
$color-love: #ff5f5f;
|
||||
|
||||
//colors on articles
|
||||
|
||||
.tag-be {
|
||||
@include tagcolors(#00ffb8);
|
||||
@include tagcolors($color-be);
|
||||
&.random {
|
||||
@include tagclip(be);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-do {
|
||||
@include tagcolors(#ff5f5f);
|
||||
@include tagcolors($color-do);
|
||||
&.random {
|
||||
@include tagclip(do);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-think {
|
||||
@include tagcolors(#fdff00);
|
||||
@include tagcolors($color-think);
|
||||
&.random {
|
||||
@include tagclip(think);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-love {
|
||||
@include tagcolors(#3c00ff);
|
||||
@include tagcolors($color-love);
|
||||
&.random {
|
||||
@include tagclip(love);
|
||||
}
|
||||
@@ -1523,19 +1550,19 @@ $v-unit-6: 24rem;
|
||||
//single article
|
||||
.single {
|
||||
.tag-be {
|
||||
@include tagcolors-single(#00ffb8);
|
||||
@include tagcolors-single($color-be);
|
||||
}
|
||||
|
||||
.tag-do {
|
||||
@include tagcolors-single(#ff5f5f);
|
||||
@include tagcolors-single($color-do);
|
||||
}
|
||||
|
||||
.tag-think {
|
||||
@include tagcolors-single(#fdff00);
|
||||
@include tagcolors-single($color-think);
|
||||
}
|
||||
|
||||
.tag-love {
|
||||
@include tagcolors-single(#3c00ff);
|
||||
@include tagcolors-single($color-love);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1545,19 +1572,19 @@ body,
|
||||
.header-1,
|
||||
.header-2 {
|
||||
&.hover-tag-be {
|
||||
background-color: #00ffb8 !important;
|
||||
background-color: $color-be !important;
|
||||
}
|
||||
|
||||
&.hover-tag-do {
|
||||
background-color: #ff5f5f !important;
|
||||
background-color: $color-do !important;
|
||||
}
|
||||
|
||||
&.hover-tag-think {
|
||||
background-color: #fdff00 !important;
|
||||
background-color: $color-think !important;
|
||||
}
|
||||
|
||||
&.hover-tag-love {
|
||||
background-color: #3c00ff !important;
|
||||
background-color: $color-love !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user