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

working on responsivity

Browse Source
This commit is contained in:
infeeeee
2019-08-13 04:34:46 +02:00
parent 0686d99971
commit 6edb7e59ed
10 changed files with 1514 additions and 855 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
sass/_font-mixins.scss
View File

@@ -10,6 +10,9 @@
&:hover {
color: #fff;
}
@media #{$tablet} {
font-size: 1.4rem;
}
@media #{$smalldesktop} {
font-size: 2.5rem;
}
@@ -60,10 +63,12 @@
@mixin home-title-small {
//small titles on desktop on home and archives
@media #{$tablet} {
font-size: 1.3rem;
color: #000;
}
@media #{$smalldesktop} {
font-size: 1.5rem;
//-webkit-text-stroke: #000 1px;
color: #000;
}
@media #{$bigdesktop} {
font-size: 2rem;
@@ -98,9 +103,10 @@
}
}
@mixin home-metadata-big {
@media #{$tablet} {
font-size: 1.2rem;
}
@media #{$smalldesktop} {
font-size: 2rem;
}
@@ -121,6 +127,9 @@
&.current {
color: #000 !important;
}
@media #{$tablet} {
font-size: 1rem;
}
@media #{$smalldesktop} {
font-size: 1.2rem;
}
@@ -129,41 +138,28 @@
}
}
// @mixin bedo-hover-title {
// font: 900 12rem "Westeinde Caption";
// color: transparent;
// -webkit-text-stroke: #fff 1px;
// text-transform: uppercase;
// }
// @mixin bedo-hover-sub {
// font: 900 1.4rem "Westeinde Caption";
// color: #fff;
// }
@mixin single-title {
font: 800 3rem "Butler";
color: #000;
@media #{$tablet} {
font-size: 3.5rem;
}
@media #{$smalldesktop} {
font-size: 5rem;
}
}
// @mixin single-title2 {
// font: bold 3rem "Butler";
// color: #000;
// @media #{$smalldesktop} {
// font-size: 5rem;
// }
// }
@mixin single-metadata {
font: bold 1.4rem "Westeinde Caption";
@media #{$smalldesktop} {
font: 900 2rem "Westeinde Caption";
@media #{$tablet} {
font: 900 1.5rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke: #000 1px;
}
@media #{$smalldesktop} {
font-size: 2rem;
}
}
@mixin single-author {

441
sass/base.scss
View File

@@ -90,18 +90,21 @@ $only-mobile: only screen and
);
$tablet: only screen and
(
min-width: 512px
);
$smalldesktop: only screen and
(
min-width: 769px
);
$smalldesktop: only screen and
(
min-width: 1024px
);
$mobile-landscape: only screen and
(
min-width: 769px
)
and (-webkit-min-device-pixel-ratio: 2.1);
$bigdesktop: only screen and
(
min-width: 1279px
@@ -120,7 +123,9 @@ $verybigdesktop: only screen and
$h-unit-5: 25rem;
$h-unit-4: 20rem;
$h-unit-2: 10rem; // menuwidth on desktop
$h-unit-1-5: 7.5rem;
$h-unit-1: 5rem;
$h-unit-0-5: 2.5rem;
//vertical units:
$v-unit-1: 4rem;
@@ -312,7 +317,7 @@ $v-unit-6: 24rem;
justify-content: space-between;
align-items: center;
z-index: 3000;
@media #{$smalldesktop} {
@media #{$tablet} {
height: 0;
position: relative;
width: 0;
@@ -327,8 +332,8 @@ $v-unit-6: 24rem;
flex-direction: row;
align-items: center;
line-height: 0;
@media #{$smalldesktop} {
width: $h-unit-2;
@media #{$tablet} {
width: $h-unit-1-5;
position: fixed;
top: 0;
height: 100vh;
@@ -347,6 +352,9 @@ $v-unit-6: 24rem;
filter: invert(100);
}
}
@media #{$smalldesktop} {
width: $h-unit-2;
}
div {
z-index: 3500;
}
@@ -359,7 +367,7 @@ $v-unit-6: 24rem;
justify-content: space-between;
flex: 1 1 auto;
padding: 2rem 0 2rem 2rem;
@media #{$smalldesktop} {
@media #{$tablet} {
border-right: #000 1px solid;
}
}
@@ -368,7 +376,7 @@ $v-unit-6: 24rem;
justify-content: flex-end;
flex: 0 1 auto;
padding: 2rem 2rem 2rem 0;
@media #{$smalldesktop} {
@media #{$tablet} {
order: 99;
border-left: #000 1px solid;
right: 0;
@@ -380,7 +388,7 @@ $v-unit-6: 24rem;
bottom: 1rem;
right: 1rem;
z-index: 2;
@media #{$smalldesktop} {
@media #{$tablet} {
display: none;
}
a {
@@ -395,32 +403,40 @@ $v-unit-6: 24rem;
}
}
//icons in menu:
object {
height: 3rem;
@media #{$tablet} {
height: 2.5rem;
}
@media #{$smalldesktop} {
height: 3rem;
}
}
/* -------------------------------------------------------------------------- */
/* header elements */
/* -------------------------------------------------------------------------- */
@media #{$smalldesktop} {
@media #{$tablet} {
.header-1 > div,
.header-2 > div {
flex: 0 0 $h-unit-1 !important;
}
}
// dis logo size:
.logo {
object {
height: $h-unit-1;
@media #{$tablet} {
height: 4rem;
}
@media #{$smalldesktop} {
height: $h-unit-1;
}
}
}
// .events-link {
// display: block;
// @media #{$smalldesktop} {
// display: block;
// }
// }
.menubutton {
$speed: 0.5s;
@@ -429,21 +445,19 @@ $v-unit-6: 24rem;
order: 99;
z-index: 3001;
// @media #{$smalldesktop} {
// }
button {
transform-origin: center;
@include transition($speed $easing);
&.rotated {
@include transform(rotate($degree));
@media #{$smalldesktop} {
@media #{$tablet} {
filter: invert(100);
}
}
}
@media #{$smalldesktop} {
@media #{$tablet} {
order: unset;
}
}
@@ -454,7 +468,7 @@ $v-unit-6: 24rem;
&.hidden {
display: none !important;
}
@media #{$smalldesktop} {
@media #{$tablet} {
margin: 0;
}
}
@@ -496,7 +510,7 @@ $v-unit-6: 24rem;
/* ----------------------------- search desktop ----------------------------- */
@media #{$smalldesktop} {
@media #{$tablet} {
.search-box {
display: block;
flex: 1 1 0 !important;
@@ -506,7 +520,10 @@ $v-unit-6: 24rem;
display: none;
position: fixed;
width: 0;
left: $h-unit-2;
left: $h-unit-1-5;
@media #{$smalldesktop} {
left: $h-unit-2;
}
bottom: 0;
height: $h-unit-2;
form.search {
@@ -540,7 +557,7 @@ $v-unit-6: 24rem;
padding-top: 9rem !important;
background-color: #000;
@media #{$smalldesktop} {
@media #{$tablet} {
padding: 0 !important;
}
.sidebar-wrapper {
@@ -549,7 +566,7 @@ $v-unit-6: 24rem;
overflow: auto;
padding: 0 $v-unit-1;
padding-bottom: $v-unit-1;
@media #{$smalldesktop} {
@media #{$tablet} {
padding: $v-unit-1;
display: flex;
flex-direction: row;
@@ -557,7 +574,7 @@ $v-unit-6: 24rem;
}
.menuseparator {
display: none;
@media #{$smalldesktop} {
@media #{$tablet} {
display: block;
width: 1px;
height: 70%;
@@ -572,7 +589,7 @@ $v-unit-6: 24rem;
margin-inline-start: 0;
margin-inline-end: 0px;
padding-inline-start: 0;
@media #{$smalldesktop} {
@media #{$tablet} {
flex: 1 1 50%;
display: flex;
flex-direction: column;
@@ -584,6 +601,9 @@ $v-unit-6: 24rem;
li {
display: block;
padding-top: 2rem;
@media #{$tablet} {
padding: 1rem 0;
}
@media #{$smalldesktop} {
padding: 2rem 0;
}
@@ -603,14 +623,14 @@ $v-unit-6: 24rem;
position: fixed;
right: calc(#{$h-unit-4} + 4px);
top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
@media #{$smalldesktop} {
@media #{$tablet} {
top: 1rem;
}
@media #{$bigdesktop} {
top: 0.5rem;
}
z-index: 1000;
@media #{$smalldesktop} {
@media #{$tablet} {
display: block;
}
ul {
@@ -624,7 +644,7 @@ $v-unit-6: 24rem;
height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
// line-height: calc(#{$v-unit-1}/ 2);
width: 1rem;
@media #{$smalldesktop} {
@media #{$tablet} {
height: 3rem;
// line-height: 5rem;
}
@@ -681,7 +701,7 @@ $v-unit-6: 24rem;
/* -------------------------------- load more ------------------------------- */
.misha_loadmore {
@media #{$smalldesktop} {
@media #{$tablet} {
min-width: $h-unit-2;
width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
margin-right: $h-unit-2;
@@ -695,7 +715,7 @@ $v-unit-6: 24rem;
a,
p {
@include home-more();
@media #{$smalldesktop} {
@media #{$tablet} {
transform-origin: center;
white-space: nowrap;
width: 100vh;
@@ -718,7 +738,7 @@ $v-unit-6: 24rem;
.archive,
.home,
.search-results {
@media #{$smalldesktop} {
@media #{$tablet} {
overflow-y: hidden;
}
}
@@ -731,12 +751,12 @@ $v-unit-6: 24rem;
.archive,
.home,
.search-results {
@media #{$smalldesktop} {
@media #{$tablet} {
// overflow-y: hidden;
}
.wrapper {
@media #{$smalldesktop} {
@media #{$tablet} {
overflow-y: hidden;
@include fit-content(width);
min-width: 100vw;
@@ -746,7 +766,7 @@ $v-unit-6: 24rem;
.header {
.header-scroll {
@media #{$smalldesktop} {
@media #{$tablet} {
display: block;
position: fixed;
height: 100vh;
@@ -755,13 +775,19 @@ $v-unit-6: 24rem;
top: 0;
}
&.header-scroll-left {
left: $h-unit-2;
left: $h-unit-1-5;
@media #{$smalldesktop} {
left: $h-unit-2;
}
button {
cursor: url("../img/arrow-black-left.png"), w-resize;
}
}
&.header-scroll-right {
right: $h-unit-2;
right: $h-unit-1-5;
@media #{$smalldesktop} {
right: $h-unit-2;
}
button {
cursor: url("../img/arrow-black-right.png"), e-resize;
}
@@ -775,13 +801,13 @@ $v-unit-6: 24rem;
}
main {
@media #{$smalldesktop} {
@media #{$tablet} {
height: 100vh;
@include fit-content(width);
position: relative;
}
section {
@media #{$smalldesktop} {
@media #{$tablet} {
//horizontal scrolling on desktop:
display: flex;
flex-direction: row;
@@ -790,6 +816,11 @@ $v-unit-6: 24rem;
@include fit-content(width);
}
/* ------------------------- archivetitle on mobile ------------------------- */
.archivetitle {
padding: 8rem 2rem 0;
}
/* --------------------------- home article mobile/default -------------------------- */
article {
@@ -857,18 +888,22 @@ $v-unit-6: 24rem;
/* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */
@media #{$smalldesktop} {
@media #{$tablet} {
//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));
width: calc(100vw - (#{$h-unit-1-5} * 3));
height: calc(100vh - #{$v-unit-1});
margin: 0;
padding: 0;
margin-left: $h-unit-2;
margin-left: $h-unit-1-5;
@media #{$smalldesktop} {
width: calc(100vw - (#{$h-unit-2} * 3));
margin-left: $h-unit-2;
}
margin-top: $v-unit-1;
border-top: 1px #000 solid;
@@ -892,7 +927,7 @@ $v-unit-6: 24rem;
h2 {
height: unset;
position: absolute;
top: 4rem;
top: 0;
padding: 4rem;
padding-right: 2rem;
width: calc(100vw - #{$h-unit-5});
@@ -903,7 +938,10 @@ $v-unit-6: 24rem;
bottom: 0;
background: transparent;
width: 100%;
height: #{$h-unit-2};
height: #{$h-unit-1-5};
@media #{$smalldesktop} {
height: #{$h-unit-2};
}
display: flex;
flex-direction: row;
@@ -977,14 +1015,21 @@ $v-unit-6: 24rem;
display: block;
right: 0;
top: 0;
height: ($h-unit-1 + $h-unit-2);
width: ($h-unit-1 + $h-unit-2)/2;
height: ($h-unit-2);
width: ($h-unit-2)/2;
object {
height: ($h-unit-1 + $h-unit-2);
height: ($h-unit-2);
position: absolute;
right: 0;
top: calc(-50% + 0.5px);
}
@media #{$smalldesktop} {
height: ($h-unit-1 + $h-unit-2);
width: ($h-unit-1 + $h-unit-2)/2;
object {
height: ($h-unit-1 + $h-unit-2);
}
}
}
} //metadata end
@@ -1013,7 +1058,7 @@ $v-unit-6: 24rem;
}
&.home_wrapper-2 {
article {
border-left: #000 1px solid;
// border-left: #000 1px solid;
.metadata {
justify-content: flex-end;
@@ -1036,25 +1081,38 @@ $v-unit-6: 24rem;
/* ----------------------- home articles desktop small ----------------------- */
@media #{$smalldesktop} {
@media #{$tablet} {
.home_wrapper-small {
max-width: calc(100vw - (#{$h-unit-2} * 3));
max-height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
height: calc(100vh - #{$v-unit-2});
width: calc((100vh - #{$v-unit-2}) / 2 * 3);
max-width: calc(100vw - (#{$h-unit-1-5} * 3));
max-height: calc((100vw - (#{$h-unit-1-5} * 3)) / 3 * 2);
@media #{$smalldesktop} {
max-width: calc(100vw - (#{$h-unit-2} * 3));
max-height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
}
flex-shrink: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto 0;
&.home_wrapper-s1:not(.home_wrapper-1) {
margin-left: $h-unit-1;
margin-left: $h-unit-1-5 / 2;
@media #{$smalldesktop} {
margin-left: $h-unit-1;
}
}
&.home_wrapper-s1.home_wrapper-small.home_wrapper-1 {
margin-left: $h-unit-2;
margin-left: $h-unit-1-5;
@media #{$smalldesktop} {
margin-left: $h-unit-2;
}
}
&:last-child {
margin-right: $h-unit-2;
margin-right: $h-unit-1-5;
@media #{$smalldesktop} {
margin-right: $h-unit-2;
}
}
article,
@@ -1076,7 +1134,10 @@ $v-unit-6: 24rem;
.metadata {
width: 100%;
min-width: unset;
height: $h-unit-1;
height: $h-unit-0-5;
@media #{$smalldesktop} {
height: $h-unit-1;
}
position: absolute;
bottom: 0;
@@ -1089,9 +1150,14 @@ $v-unit-6: 24rem;
padding: 0;
justify-content: space-between;
align-items: stretch;
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
display: none;
@include triangle-corner-bordered(#{$h-unit-0-5}, 0, transparent, #000, left);
@media #{$smalldesktop} {
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
}
@media #{$verybigdesktop} {
height: $h-unit-2;
@include triangle-corner-bordered(#{$h-unit-2}, 0, transparent, #000, left);
@@ -1113,16 +1179,27 @@ $v-unit-6: 24rem;
justify-content: center;
}
.categories {
margin-left: $h-unit-1;
margin-left: $h-unit-0-5;
@media #{$smalldesktop} {
margin-left: $h-unit-1;
}
@media #{$verybigdesktop} {
margin-left: $h-unit-2;
}
padding-right: $v-unit-1 / 4;
// padding: $v-unit-1 / 3 0;
padding-right: $v-unit-1 / 8;
@media #{$smalldesktop} {
padding-right: $v-unit-1 / 4;
}
flex: 1 0 auto;
}
.postedon {
padding: 0 $v-unit-1 / 4;
padding: 0 $v-unit-1 / 8;
@media #{$smalldesktop} {
padding: 0 $v-unit-1 / 4;
}
flex: 1 0 auto;
}
}
@@ -1141,10 +1218,17 @@ $v-unit-6: 24rem;
padding: 0;
a {
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;
margin-top: $h-unit-0-5 / 2;
margin-right: $v-unit-1 / 4;
margin-bottom: $h-unit-0-5 + $v-unit-1 / 8;
margin-left: $h-unit-0-5;
@media #{$smalldesktop} {
margin-top: $h-unit-0-5;
margin-right: $v-unit-1 / 2;
margin-bottom: $h-unit-1 + $v-unit-1 / 2;
margin-left: $h-unit-1;
}
@media #{$bigdesktop} {
margin-right: $v-unit-1 / 4;
@@ -1224,6 +1308,54 @@ $v-unit-6: 24rem;
}
} //section end
} //main end
/* -------------------------- no results on mobile -------------------------- */
&.no-result {
.wrapper {
height: unset;
header {
background-color: #000;
}
#content {
.archivetitle {
padding: 8rem 2rem 0;
}
article.no-result {
height: unset;
}
}
}
/* -------------------------- no results on desktop ------------------------- */
@media #{$tablet} {
main {
width: 100vw;
section#content {
width: 100%;
.home_wrapper-1 {
position: relative;
width: calc(100% - #{$h-unit-1-5 * 2});
max-width: unset;
.archivetitle {
border-bottom: 1px #000 solid;
border-right: none;
padding: 1rem 2rem !important;
margin-left: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: transparent;
}
}
}
}
}
}
} //home, archive, search end
/* -------------------------------------------------------------------------- */
@@ -1243,12 +1375,12 @@ $v-unit-6: 24rem;
.search-no-results {
main {
@media #{$smalldesktop} {
@media #{$tablet} {
padding: 0 $h-unit-4;
.archivetitle h1,
article h2 {
}
// .archivetitle h1,
// article h2 {
// }
}
}
}
@@ -1337,7 +1469,7 @@ body.category.category-esemeny {
}
/* ---------------------------- Events on desktop --------------------------- */
@media #{$smalldesktop} {
@media #{$tablet} {
main {
padding-top: 0;
section {
@@ -1415,7 +1547,7 @@ body.category.category-esemeny {
.single,
.page {
//no menus on single
@media #{$smalldesktop} {
@media #{$tablet} {
.wrapper {
height: unset;
width: 100%;
@@ -1510,7 +1642,7 @@ body.category.category-esemeny {
/* ---------------------------- single header on desktop --------------------------- */
@media #{$smalldesktop} {
@media #{$tablet} {
min-height: calc(100vh - #{$h-unit-2});
margin-top: 100vh;
margin-left: $h-unit-1;
@@ -1589,14 +1721,14 @@ body.category.category-esemeny {
}
&.content-begin {
margin-top: $padd;
@media #{$smalldesktop} {
@media #{$tablet} {
margin-top: 0 !important;
}
}
&.content-end {
margin-top: $padd * 2;
margin-bottom: 0;
@media #{$smalldesktop} {
@media #{$tablet} {
margin-top: $padd;
margin-bottom: $padd;
}
@@ -1615,7 +1747,7 @@ body.category.category-esemeny {
.single-content {
position: relative;
padding: $padd;
@media #{$smalldesktop} {
@media #{$tablet} {
top: -#{$h-unit-1};
@include singleDesktopLayout();
}
@@ -1673,7 +1805,7 @@ body.category.category-esemeny {
margin: $padd 0;
position: relative !important;
@media #{$smalldesktop} {
@media #{$tablet} {
padding: 0;
}
@@ -1695,13 +1827,22 @@ body.category.category-esemeny {
margin: $padd 0;
li {
margin-right: 0;
@media #{$smalldesktop} {
@media #{$tablet} {
margin-bottom: $v-unit-1;
}
&:nth-child(odd) figcaption::after {
@include trianglecorner(topright, #{$h-unit-1});
&:nth-child(odd) figcaption {
@media #{$tablet} {
padding-right: 0;
}
&::after {
@include trianglecorner(topright, #{$h-unit-1});
}
}
&:nth-child(even) figcaption {
@media #{$tablet} {
padding-left: 0;
}
right: 0;
top: 0;
&::after {
@@ -1720,7 +1861,19 @@ body.category.category-esemeny {
width: calc(100% - #{$h-unit-1});
height: $h-unit-1;
padding: 1rem $padd;
margin: 0;
@media #{$tablet} {
width: calc(100% - #{$h-unit-0-5});
height: $h-unit-0-5;
padding: 0.5rem ($padd / 2);
}
@media #{$smalldesktop} {
width: calc(100% - #{$h-unit-1});
height: $h-unit-1;
padding: 1rem $padd;
}
margin: auto 0;
bottom: unset;
@include captiontext();
line-height: 1;
@@ -1730,10 +1883,18 @@ body.category.category-esemeny {
flex-direction: column;
justify-content: center;
z-index: 1;
@media #{$smalldesktop} {
align-content: stretch;
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media #{$tablet} {
display: none;
&.vis {
display: block;
display: flex;
}
}
}
@@ -1744,8 +1905,9 @@ body.category.category-esemeny {
.alignedWrapper {
position: relative;
@media #{$smalldesktop} {
@media #{$tablet} {
max-width: 50%;
@include fit-content(width);
&.alignleftWrapper {
padding-right: $padd;
@@ -1759,31 +1921,20 @@ body.category.category-esemeny {
.alignleft,
.alignright {
margin: 0;
//no align on mobile
position: relative;
// @media #{$only-mobile} {
float: unset;
// }
@media #{$smalldesktop} {
@media #{$tablet} {
width: auto;
// max-width: 50%;
// @media #{$smalldesktop} {
// &.alignleft {
// padding-right: $padd;
// }
// &.alignright {
// padding-left: $padd;
// }
// }
}
img {
height: auto;
}
}
}
}
.authors {
// @include single-h4();
@include single-author();
color: #000;
-webkit-text-stroke: 0px;
@@ -1806,7 +1957,7 @@ body.category.category-esemeny {
}
#colorbox {
z-index: 12;
@media #{$smalldesktop} {
@media #{$tablet} {
z-index: 3150;
}
&:focus {
@@ -1838,7 +1989,7 @@ body.category.category-esemeny {
bottom: -5rem;
filter: invert(100);
z-index: 14;
@media #{$smalldesktop} {
@media #{$tablet} {
position: fixed;
top: 50%;
z-index: 3200;
@@ -1847,13 +1998,13 @@ body.category.category-esemeny {
&#cboxPrevious {
left: 1rem;
@include transform(scaleX(-1));
@media #{$smalldesktop} {
@media #{$tablet} {
left: $v-unit-1;
}
}
&#cboxNext {
right: 1rem;
@media #{$smalldesktop} {
@media #{$tablet} {
right: $v-unit-1;
}
}
@@ -1864,7 +2015,7 @@ body.category.category-esemeny {
@include transform(rotate(45deg));
top: -3rem;
right: 1rem;
@media #{$smalldesktop} {
@media #{$tablet} {
position: fixed;
right: $v-unit-1;
top: $v-unit-1;
@@ -1892,7 +2043,7 @@ body.category.category-esemeny {
}
}
.toHome {
@media #{$smalldesktop} {
@media #{$tablet} {
position: relative;
padding-top: $padd * 2;
top: -#{$h-unit-1};
@@ -1916,11 +2067,7 @@ body.category.category-esemeny {
display: block;
position: relative;
cursor: pointer;
// .relatedcontent {
// height: 50vw;
// padding: $padd;
//
// }
& > a {
margin: 0;
padding: 0;
@@ -1974,7 +2121,7 @@ body.category.category-esemeny {
}
/* ------------------------ related posts on desktop ------------------------ */
@media #{$smalldesktop} {
@media #{$tablet} {
top: -#{$h-unit-1};
position: relative;
padding-top: $padd * 2;
@@ -1987,11 +2134,20 @@ body.category.category-esemeny {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: calc((100vw - #{$v-unit-4}) / 3);
max-height: calc(1024px / 3);
li {
flex: 0 0 calc(100% / 3);
height: calc((100vw - #{$v-unit-4}) / 3);
max-height: calc(1024px / 3);
width: calc(100% / 3);
padding-bottom: calc(100% / 3);
position: relative;
height: 0;
.relatedWrapper {
position: absolute;
height: 100%;
width: 100%;
}
.related_thumbnailwrapper {
width: 100%;
height: 100%;
@@ -2005,7 +2161,6 @@ body.category.category-esemeny {
.metadata {
width: 100%;
min-width: unset;
height: $h-unit-1;
position: absolute;
bottom: 0;
@@ -2018,7 +2173,18 @@ body.category.category-esemeny {
padding: 0;
justify-content: space-between;
align-items: stretch;
height: $h-unit-1;
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
@media #{$tablet} {
@include triangle-corner-bordered(#{$h-unit-0-5}, 0, transparent, #000, left);
height: $h-unit-0-5;
}
@media #{$smalldesktop} {
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
height: $h-unit-1;
}
display: none;
&.vis {
display: flex;
@@ -2027,11 +2193,23 @@ body.category.category-esemeny {
.categories,
.postedon {
@include home-metadata();
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.categories {
margin-left: $v-unit-1 * 1.5;
padding: $v-unit-1 / 3 0;
flex: 1 1 auto;
margin-left: $v-unit-1 * 1.5;
@media #{$tablet} {
margin-left: $v-unit-1 / 2;
}
@media #{$smalldesktop} {
margin-left: $v-unit-1 * 1.5;
}
}
.postedon {
padding: $v-unit-1 / 3 $v-unit-1 / 4;
@@ -2051,17 +2229,32 @@ body.category.category-esemeny {
background-color: #fff;
height: 100%;
padding-left: $v-unit-1;
@media #{$tablet} {
padding-left: $h-unit-0-5;
}
@media #{$smalldesktop} {
padding-left: $v-unit-1;
}
@media #{$bigdesktop} {
padding: $h-unit-1;
}
a {
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
@include fit-content(height);
position: absolute;
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
@media #{$tablet} {
bottom: $h-unit-0-5 + $v-unit-1 / 4;
width: calc(100% - #{$v-unit-1});
}
@media #{$smalldesktop} {
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
}
@media #{$bigdesktop} {
width: calc(100% - #{$h-unit-2});
}
@@ -2075,7 +2268,7 @@ body.category.category-esemeny {
/* -------------------------------- page only------------------------------- */
body.page {
@media #{$smalldesktop} {
@media #{$tablet} {
article {
margin-top: $h-unit-2;
}
@@ -2109,7 +2302,7 @@ body.page {
color: $color !important;
}
@media #{$smalldesktop} {
@media #{$tablet} {
&.home-big {
h2 a {
color: $color;
@@ -2156,7 +2349,7 @@ body.page {
//tagclip: filters on small articale images
@mixin tagclip($tag) {
@media #{$smalldesktop} {
@media #{$tablet} {
.thumbnailwrapper > img {
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
-webkit-mask-repeat: no-repeat;
@@ -2175,12 +2368,12 @@ body.page {
@mixin tagcolors-single($color, $darkcolor) {
.titlewrapper {
.metadata {
@media #{$smalldesktop} {
@media #{$tablet} {
// color: #fff !important;
-webkit-text-stroke: $color 1px !important;
}
a {
@media #{$smalldesktop} {
@media #{$tablet} {
color: #fff !important;
-webkit-text-stroke: $color 1px !important;
&:hover {