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

work on sthome and archive pages, template cleanup

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-10 23:34:56 +02:00
parent 027ad5511c
commit 1f4a97ca1a
22 changed files with 537 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
sass/_font-mixins.scss
View File

@@ -3,6 +3,7 @@
/* ========================================================================== */
@mixin menutext {
//text in menu
font: 900 4rem "Westeinde Caption";
color: #000;
-webkit-text-stroke: #fff 1px;
@@ -15,6 +16,7 @@
}
@mixin home-title {
//article titles on home
font: bold 3rem "Westeinde Caption";
color: #000;
@media #{$mobile-landscape} {
@@ -26,6 +28,7 @@
}
@mixin home-more {
//loadmore text on home and archives
font: bold 3rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke: #000 1px;
@@ -38,17 +41,34 @@
}
@mixin home-title-small {
//small titles on desktop on home and archives
@media #{$smalldesktop} {
font-size: 1.2rem;
-webkit-text-stroke: #000 1px;
color: #fff;
}
}
@mixin archive-tag-description{
font: bold 1rem "Butler";
color: #000;
@media #{$smalldesktop} {
font-size: 1.2rem;
}
}
@mixin home-metadata {
font: bold 1rem "Westeinde Caption";
color: #000;
@media #{$smalldesktop} {
font-size: 1.2rem;
}
}
@mixin home-metadata-big {
@media #{$smalldesktop} {
font-size: 2rem;
}
}
@mixin bedocircle {
@@ -83,8 +103,8 @@
}
}
//képaláírás
@mixin captiontext {
//képaláírás
font: 900 1rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke-width: 1px;

188
sass/base.scss
View File

@@ -97,11 +97,12 @@ $bigdesktop: only screen and
min-width: 1281px
);
$desktop-home-margin: 10rem; // menuwidth on desktop
$desktop-home-margin-half: 5rem;
$desktop-top-margin: 4rem;
$desktop-bottom-margin: 2rem;
$desktop-bottom-margin-double: 4rem;
//Horizontal units:
$h-unit-2: 10rem; // menuwidth on desktop
$h-unit-1: 5rem;
//vertical units:
$v-unit-1: 4rem;
/* -------------------------------------------------------------------------- */
/* other mixins */
@@ -179,6 +180,8 @@ $desktop-bottom-margin-double: 4rem;
&::after {
//for border without corner
position: absolute;
content: "";
display: block;
top: 0;
border: none;
@if $left==0 {
@@ -202,7 +205,7 @@ $desktop-bottom-margin-double: 4rem;
top: 0;
left: -#{$left};
border-left: #000 solid 1px;
border-top: #000 1px solid;
// border-top: #000 1px solid;
@include transform(skewX(-45deg));
transform-origin: left bottom;
background-color: $bgcolor;
@@ -229,8 +232,6 @@ $desktop-bottom-margin-double: 4rem;
position: fixed;
top: 0;
width: 100vw;
// padding: 2rem;
// background-color: #000;
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -251,7 +252,7 @@ $desktop-bottom-margin-double: 4rem;
flex-direction: row;
align-items: center;
@media #{$smalldesktop} {
width: $desktop-home-margin;
width: $h-unit-2;
position: fixed;
top: 0;
height: 100vh;
@@ -310,7 +311,7 @@ $desktop-bottom-margin-double: 4rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;
}
}
}
@@ -326,13 +327,13 @@ $desktop-bottom-margin-double: 4rem;
@media #{$smalldesktop} {
.header-1 > div,
.header-2 > div {
flex: 0 0 5rem !important;
flex: 0 0 $h-unit-1 !important;
}
}
.logo {
object {
height: 5rem;
height: $h-unit-1;
}
}
.events-link {
@@ -442,9 +443,9 @@ $desktop-bottom-margin-double: 4rem;
position: relative;
height: 100%;
overflow: auto;
padding: 0 4rem;
padding: 0 $v-unit-1;
@media #{$smalldesktop} {
padding: 4rem;
padding: $v-unit-1;
}
ul {
margin-block-start: 0;
@@ -481,8 +482,8 @@ $desktop-bottom-margin-double: 4rem;
display: none;
position: fixed;
right: calc(#{$desktop-home-margin}* 2);
top: calc(#{$desktop-top-margin}/ 2);
right: calc(#{$h-unit-2}* 2);
top: calc(#{$v-unit-1}/ 2);
z-index: 1000;
@media #{$smalldesktop} {
display: block;
@@ -495,7 +496,7 @@ $desktop-bottom-margin-double: 4rem;
display: inline;
a {
span {
height: calc(#{$desktop-top-margin}/ 2);
height: calc(#{$v-unit-1}/ 2);
position: absolute;
// width: 20px;
left: 0;
@@ -529,7 +530,7 @@ $desktop-bottom-margin-double: 4rem;
@include home-metadata();
z-index: 1;
&::after {
@include trianglecorner(topleft, 5rem);
@include trianglecorner(topleft, $h-unit-1);
}
}
} //article end
@@ -537,8 +538,8 @@ $desktop-bottom-margin-double: 4rem;
/* -------------------------------- load more ------------------------------- */
.misha_loadmore {
@media #{$smalldesktop} {
width: $desktop-home-margin;
margin-right: $desktop-home-margin;
width: $h-unit-2;
margin-right: $h-unit-2;
align-self: stretch;
display: flex;
flex-direction: row;
@@ -567,9 +568,10 @@ $desktop-bottom-margin-double: 4rem;
}
/* -------------------------------------------------------------------------- */
/* HOMEPAGE */
/* ARCHIVE AND HOMEPAGE */
/* -------------------------------------------------------------------------- */
.archive,
.home {
@media #{$smalldesktop} {
overflow-y: hidden;
@@ -589,25 +591,25 @@ $desktop-bottom-margin-double: 4rem;
display: block;
position: fixed;
height: 100vh;
width: $desktop-home-margin;
width: $h-unit-2;
flex: 1 0 auto !important;
top: 0;
}
&.header-scroll-left {
left: $desktop-home-margin;
left: $h-unit-2;
button {
cursor: url("../img/arrow-black-left.png"), w-resize;
}
}
&.header-scroll-right {
right: $desktop-home-margin;
right: $h-unit-2;
button {
cursor: url("../img/arrow-black-right.png"), e-resize;
}
}
button {
height: 100vh;
width: $desktop-home-margin;
width: $h-unit-2;
}
}
}
@@ -676,16 +678,16 @@ $desktop-bottom-margin-double: 4rem;
article {
position: relative;
width: calc(100vw - (#{$desktop-home-margin} * 3));
width: calc(100vw - (#{$h-unit-2} * 3));
margin: 0;
padding: 0;
margin-left: $desktop-home-margin;
padding-top: $desktop-top-margin;
margin-left: $h-unit-2;
padding-top: $v-unit-1;
border-right: #000 1px solid;
/* -------------------------------- thumbnail and title ------------------------------- */
.thumbnailwrapper {
height: calc(100% - #{$desktop-top-margin});
height: calc(100% - #{$v-unit-1});
display: flex;
flex-direction: row;
justify-content: flex-start;
@@ -709,70 +711,76 @@ $desktop-bottom-margin-double: 4rem;
bottom: 0;
background: transparent;
width: 100%;
height: #{$desktop-home-margin};
height: #{$h-unit-2};
display: flex;
flex-direction: row;
padding: 0;
justify-content: flex-start;
align-items: stretch;
@include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
align-items: center;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
@include home-metadata-big();
& > div {
width: 30%;
padding-top: #{$desktop-bottom-margin};
}
@media #{$mobile-landscape} {
height: calc(#{$desktop-home-margin} / 2);
height: calc(#{$h-unit-2} / 2);
}
.categories {
display: none;
// display: none;
display: block;
border-right: #000 solid 1px;
// border-right: #000 solid 1px;
}
.bevezeto,
.alcim {
display: none;
}
} //metadata end
/* ------------------------- home article big hover ------------------------- */
&.hovered {
width: calc(100vw - (#{$desktop-home-margin} * 2));
h2>a{
width: calc(100vw - (#{$h-unit-2} * 2));
h2 > a {
color: #000;
}
}
}
}
.home-wrapper-1 {
article {
a.thumbnailwrapper {
justify-content: flex-end;
&.home-wrapper-1 {
article {
a.thumbnailwrapper {
justify-content: flex-end;
}
}
}
}
.home-wrapper-2 {
article {
border-left: #000 1px solid;
&.home-wrapper-2 {
article {
border-left: #000 1px solid;
}
}
}
} //smalldesktop end
/* ----------------------- home article desktop small ----------------------- */
/* ----------------------- articles desktop small ----------------------- */
@media #{$smalldesktop} {
.home-wrapper-small {
width: calc(100vw - (#{$desktop-home-margin} * 3));
height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2);
width: calc(100vw - (#{$h-unit-2} * 3));
height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
flex-shrink: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto 0;
&:nth-child(3) {
margin-left: $desktop-home-margin;
&.home-wrapper-s1 {
margin-left: $h-unit-2 !important;
}
article {
article,
.archivetitle,
.archivedescription {
flex: 0 0 calc(100% / 3);
height: 50%;
position: relative;
@@ -801,7 +809,7 @@ $desktop-bottom-margin-double: 4rem;
padding: 0;
justify-content: flex-end;
align-items: stretch;
@include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
display: none;
&.vis {
display: flex;
@@ -825,6 +833,42 @@ $desktop-bottom-margin-double: 4rem;
}
}
}
.archivetitle {
margin: 0;
width: 100%;
position: relative;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 2rem;
border-right: #000 1px solid;
@include home-title();
@include triangle-corner-bordered($h-unit-1, 0, transparent);
&.tag{
text-transform: uppercase;
}
}
.archivedescription {
order: 1;
border-top: #000 1px solid;
border-right: #000 1px solid;
border-bottom: #000 1px solid;
margin: 0;
width: 100%;
position: relative;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 2rem;
p{
margin: 0;
@include archive-tag-description();
}
}
}
}
} //section end
@@ -860,7 +904,7 @@ $desktop-bottom-margin-double: 4rem;
@media #{$smalldesktop} {
margin-top: 100vh;
margin-left: calc(#{$desktop-home-margin-half});
margin-left: calc(#{$h-unit-1});
background-color: #fff;
border-left: #000 solid 1px;
//border-top: #000 solid 1px;
@@ -870,7 +914,7 @@ $desktop-bottom-margin-double: 4rem;
padding: $padd;
margin: 0;
@media #{$smalldesktop} {
padding: $padd $desktop-home-margin-half;
padding: $padd $h-unit-1;
}
}
@@ -880,7 +924,7 @@ $desktop-bottom-margin-double: 4rem;
position: fixed;
top: 0;
right: 0;
left: calc(-#{$desktop-home-margin-half});
left: calc(-#{$h-unit-1});
z-index: -1;
bottom: 0;
}
@@ -917,9 +961,9 @@ $desktop-bottom-margin-double: 4rem;
}
.metadata {
width: calc(100vw - 5rem) !important;
width: calc(100vw - #{$h-unit-1}) !important;
bottom: unset !important;
height: 5rem;
height: $h-unit-1;
position: relative;
align-self: flex-end;
display: flex;
@@ -927,13 +971,13 @@ $desktop-bottom-margin-double: 4rem;
justify-content: space-between;
@include single-metadata();
@media #{$smalldesktop} {
top: -5rem;
top: -#{$h-unit-1};
background-color: #fff;
margin-left: $desktop-home-margin-half;
margin-left: $h-unit-1;
padding-left: 0;
width: calc(100% - #{$desktop-home-margin-half}) !important;
@include triangle-corner-bordered(#{$desktop-home-margin-half}, 5rem, white);
width: calc(100% - #{$h-unit-1}) !important;
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white);
}
.time-cat {
z-index: 10;
@@ -951,7 +995,7 @@ $desktop-bottom-margin-double: 4rem;
bottom: 0;
left: 0;
right: 0;
padding: $desktop-home-margin;
padding: $h-unit-2;
background-color: transparent;
z-index: -1;
}
@@ -1002,7 +1046,7 @@ $desktop-bottom-margin-double: 4rem;
.wp-block-image {
padding: $padd 0;
@media #{$smalldesktop} {
padding: $padd $desktop-home-margin-half;
padding: $padd $h-unit-1;
}
figure {
position: relative;
@@ -1010,7 +1054,7 @@ $desktop-bottom-margin-double: 4rem;
bottom: 0 !important;
&::after {
@include trianglecorner(topright, 5rem);
@include trianglecorner(topright, #{$h-unit-1});
}
}
}
@@ -1021,8 +1065,8 @@ $desktop-bottom-margin-double: 4rem;
.wp-block-gallery .blocks-gallery-item figcaption {
background: #fff;
position: absolute;
width: calc(100% - 5rem);
height: 5rem;
width: calc(100% - #{$h-unit-1});
height: $h-unit-1;
padding: 1rem $padd;
margin: 0;
bottom: unset;
@@ -1041,13 +1085,13 @@ $desktop-bottom-margin-double: 4rem;
li {
margin-right: 0;
&:nth-child(odd) figcaption::after {
@include trianglecorner(topright, 5rem);
@include trianglecorner(topright, #{$h-unit-1});
}
&:nth-child(even) figcaption {
right: 0;
top: 0;
&::after {
@include trianglecorner(bottomleft, 5rem);
@include trianglecorner(bottomleft, #{$h-unit-1});
}
}
}
@@ -1086,7 +1130,7 @@ $desktop-bottom-margin-double: 4rem;
color: $color;
}
}
&.home-big.hovered{
&.home-big.hovered {
background-color: $color !important;
}
&.home-small {