working on responsivity
This commit is contained in:
infeeeee
441
sass/base.scss
441
sass/base.scss
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user