worked on a lot of things
This commit is contained in:
@@ -61,10 +61,13 @@
|
||||
@mixin home-title-small {
|
||||
//small titles on desktop on home and archives
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
-webkit-text-stroke: #000 1px;
|
||||
color: transparent;
|
||||
}
|
||||
@media #{$bigdesktop} {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin archive-tag-description {
|
||||
|
||||
131
sass/base.scss
131
sass/base.scss
@@ -80,8 +80,9 @@ object {
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* GLOBAL VARIABLES */
|
||||
/* MEDIA QUERIES */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
$only-mobile: only screen and
|
||||
(
|
||||
max-width: 768px
|
||||
@@ -106,6 +107,10 @@ $verybigdesktop: only screen and
|
||||
min-width: 1919px
|
||||
);
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* GLOBAL VARIABLES */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
//Horizontal units:
|
||||
$h-unit-4: 20rem;
|
||||
$h-unit-2: 10rem; // menuwidth on desktop
|
||||
@@ -117,11 +122,18 @@ $v-unit-2: 8rem;
|
||||
$v-unit-4: 16rem;
|
||||
$v-unit-6: 24rem;
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* other mixins */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
@mixin fit-content($wh) {
|
||||
#{$wh}: -moz-max-content;
|
||||
#{$wh}: max-content;
|
||||
#{$wh}: -moz-fit-content;
|
||||
#{$wh}: fit-content;
|
||||
|
||||
}
|
||||
|
||||
@mixin transition($transition) {
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
@@ -365,7 +377,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);;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -522,8 +534,23 @@ $v-unit-6: 24rem;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 0 $v-unit-1;
|
||||
padding-bottom: $v-unit-1;
|
||||
@media #{$smalldesktop} {
|
||||
padding: $v-unit-1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.menuseparator {
|
||||
display: none;
|
||||
@media #{$smalldesktop} {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 70%;
|
||||
background-color: #fff;
|
||||
flex: 0 0 auto;
|
||||
margin: $v-unit-1;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin-block-start: 0;
|
||||
@@ -532,6 +559,7 @@ $v-unit-6: 24rem;
|
||||
margin-inline-end: 0px;
|
||||
padding-inline-start: 0;
|
||||
@media #{$smalldesktop} {
|
||||
flex: 1 1 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
@@ -544,7 +572,6 @@ $v-unit-6: 24rem;
|
||||
display: block;
|
||||
padding-top: 2rem;
|
||||
@media #{$smalldesktop} {
|
||||
width: 50%;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
a {
|
||||
@@ -560,7 +587,7 @@ $v-unit-6: 24rem;
|
||||
display: none;
|
||||
|
||||
position: fixed;
|
||||
right: calc(#{$h-unit-4} + 2px);
|
||||
right: calc(#{$h-unit-4} + 4px);
|
||||
top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
|
||||
@media #{$smalldesktop} {
|
||||
top: 1rem;
|
||||
@@ -695,7 +722,8 @@ $v-unit-6: 24rem;
|
||||
/* -------------------------------- load more ------------------------------- */
|
||||
.misha_loadmore {
|
||||
@media #{$smalldesktop} {
|
||||
width: $h-unit-2;
|
||||
min-width: $h-unit-2;
|
||||
width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
|
||||
margin-right: $h-unit-2;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
@@ -712,6 +740,7 @@ $v-unit-6: 24rem;
|
||||
white-space: nowrap;
|
||||
width: 100vh;
|
||||
@include transform(rotate(-90deg));
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -747,7 +776,7 @@ $v-unit-6: 24rem;
|
||||
.wrapper {
|
||||
@media #{$smalldesktop} {
|
||||
overflow-y: hidden;
|
||||
width: fit-content;
|
||||
@include fit-content(width);
|
||||
}
|
||||
|
||||
/* ----------------------------- header on home ----------------------------- */
|
||||
@@ -785,7 +814,7 @@ $v-unit-6: 24rem;
|
||||
main {
|
||||
@media #{$smalldesktop} {
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
@include fit-content(width);
|
||||
position: relative;
|
||||
}
|
||||
section {
|
||||
@@ -795,7 +824,7 @@ $v-unit-6: 24rem;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
@include fit-content(width);
|
||||
}
|
||||
|
||||
/* --------------------------- home article mobile/default -------------------------- */
|
||||
@@ -838,7 +867,7 @@ $v-unit-6: 24rem;
|
||||
bottom: 50%;
|
||||
height: $h-unit-1;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
@include fit-content(width);
|
||||
justify-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
@@ -925,6 +954,10 @@ $v-unit-6: 24rem;
|
||||
height: calc(#{$h-unit-2} / 2);
|
||||
}
|
||||
|
||||
&.noBottomScrollbar {
|
||||
height: $h-unit-2 + 1.5rem;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -1023,6 +1056,7 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
}
|
||||
.thumbnailwrapper {
|
||||
width: calc(60% + #{$h-unit-1});
|
||||
img {
|
||||
left: -$h-unit-1;
|
||||
position: relative;
|
||||
@@ -1037,14 +1071,19 @@ $v-unit-6: 24rem;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
.home-wrapper-small {
|
||||
width: calc(100vw - (#{$h-unit-2} * 3));
|
||||
height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
|
||||
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);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: auto 0;
|
||||
&.home-wrapper-s1 {
|
||||
&.home-wrapper-s1:not(.home-wrapper-small) {
|
||||
margin-left: $h-unit-1 !important;
|
||||
}
|
||||
&.home-wrapper-s1.home-wrapper-small{
|
||||
margin-left: $h-unit-2 !important;
|
||||
}
|
||||
|
||||
@@ -1066,6 +1105,7 @@ $v-unit-6: 24rem;
|
||||
|
||||
.metadata {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
height: $h-unit-1;
|
||||
|
||||
position: absolute;
|
||||
@@ -1088,10 +1128,15 @@ $v-unit-6: 24rem;
|
||||
.categories,
|
||||
.postedon {
|
||||
@include home-metadata();
|
||||
padding: $v-unit-1 / 2;
|
||||
}
|
||||
.categories {
|
||||
margin-left: $v-unit-1 * 1.5;
|
||||
padding: $v-unit-1 / 3 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.postedon {
|
||||
padding: $v-unit-1 / 3 $v-unit-1 / 4;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1106,9 +1151,21 @@ $v-unit-6: 24rem;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
padding-left: $v-unit-1;
|
||||
@media #{$bigdesktop} {
|
||||
padding: $h-unit-1;
|
||||
}
|
||||
|
||||
a {
|
||||
top: 50%;
|
||||
bottom: $h-unit-1 + $v-unit-1 * 0.5;
|
||||
|
||||
width: calc(100% - #{$v-unit-2});
|
||||
@include fit-content(height);
|
||||
position: absolute;
|
||||
|
||||
@media #{$bigdesktop} {
|
||||
width: calc(100% - #{$h-unit-2});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1177,6 +1234,48 @@ body.category.category-esemeny {
|
||||
}
|
||||
main {
|
||||
padding-top: 5rem + (2rem * 2);
|
||||
article{
|
||||
height: 50vh;
|
||||
.thumbnailwrapper{
|
||||
height: 50vw;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.event-metadata{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
|
||||
.top-row, .bottom-row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 50%;
|
||||
flex: 0 0 auto;
|
||||
&>*{
|
||||
|
||||
}
|
||||
.ev-date{
|
||||
|
||||
}
|
||||
h2{
|
||||
height: unset;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.hr{
|
||||
flex: 0 0 auto;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1473,7 +1572,7 @@ body.category.category-esemeny {
|
||||
.header-2 {
|
||||
background-color: $color !important;
|
||||
}
|
||||
article * {
|
||||
article *:not(.vr) {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user