started working on single, translations, docs
This commit is contained in:
@@ -129,21 +129,21 @@
|
||||
// }
|
||||
|
||||
@mixin single-title {
|
||||
font: bold 3rem "Butler";
|
||||
color: #000;
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin single-title2 {
|
||||
font: bold 3rem "Butler";
|
||||
font: 800 3rem "Butler";
|
||||
color: #000;
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixin single-title2 {
|
||||
// font: bold 3rem "Butler";
|
||||
// color: #000;
|
||||
// @media #{$smalldesktop} {
|
||||
// font-size: 5rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin single-metadata {
|
||||
font: bold 1rem "Westeinde Caption";
|
||||
@media #{$smalldesktop} {
|
||||
|
||||
326
sass/base.scss
326
sass/base.scss
@@ -131,7 +131,6 @@ $v-unit-6: 24rem;
|
||||
#{$wh}: max-content;
|
||||
#{$wh}: -moz-fit-content;
|
||||
#{$wh}: fit-content;
|
||||
|
||||
}
|
||||
|
||||
@mixin transition($transition) {
|
||||
@@ -266,6 +265,7 @@ $v-unit-6: 24rem;
|
||||
border-left: $bordercolor solid 1px;
|
||||
@include transform(skewX(-45deg));
|
||||
transform-origin: left bottom;
|
||||
border-top: $bordercolor solid 1px;
|
||||
}
|
||||
@if $side==right {
|
||||
right: -#{$offset};
|
||||
@@ -377,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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1083,7 +1083,7 @@ $v-unit-6: 24rem;
|
||||
&.home-wrapper-s1:not(.home-wrapper-small) {
|
||||
margin-left: $h-unit-1 !important;
|
||||
}
|
||||
&.home-wrapper-s1.home-wrapper-small{
|
||||
&.home-wrapper-s1.home-wrapper-small {
|
||||
margin-left: $h-unit-2 !important;
|
||||
}
|
||||
|
||||
@@ -1234,46 +1234,42 @@ body.category.category-esemeny {
|
||||
}
|
||||
main {
|
||||
padding-top: 5rem + (2rem * 2);
|
||||
article{
|
||||
article {
|
||||
height: 50vh;
|
||||
.thumbnailwrapper{
|
||||
.thumbnailwrapper {
|
||||
height: 50vw;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.event-metadata{
|
||||
.event-metadata {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
|
||||
.top-row, .bottom-row{
|
||||
.top-row,
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 50%;
|
||||
flex: 0 0 auto;
|
||||
&>*{
|
||||
|
||||
// & > * {
|
||||
// }
|
||||
.ev-date {
|
||||
}
|
||||
.ev-date{
|
||||
|
||||
}
|
||||
h2{
|
||||
h2 {
|
||||
height: unset;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.hr{
|
||||
.hr {
|
||||
flex: 0 0 auto;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1288,6 +1284,7 @@ body.category.category-esemeny {
|
||||
@media #{$smalldesktop} {
|
||||
.wrapper {
|
||||
height: unset;
|
||||
width: 100%;
|
||||
.header {
|
||||
.header-1,
|
||||
.header-2 {
|
||||
@@ -1303,69 +1300,41 @@ body.category.category-esemeny {
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------- single on mobile ---------------------------- */
|
||||
article {
|
||||
$padd: 2rem;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
margin-top: 100vh;
|
||||
margin-left: calc(#{$h-unit-1});
|
||||
background-color: #fff;
|
||||
border-left: #000 solid 1px;
|
||||
//border-top: #000 solid 1px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding: $padd;
|
||||
margin: 0;
|
||||
@media #{$smalldesktop} {
|
||||
padding: $padd $h-unit-1;
|
||||
}
|
||||
}
|
||||
// & > *,
|
||||
// h1.single-title {
|
||||
// padding: $padd;
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
.thumbnailwrapper {
|
||||
padding: 0;
|
||||
@media #{$smalldesktop} {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: calc(-#{$h-unit-1});
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
img.attachment-post-thumbnail {
|
||||
// post thumbnail on home
|
||||
height: 75vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
padding: 0;
|
||||
@media #{$smalldesktop} {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------- single sub sections -------------------------- */
|
||||
|
||||
.titlewrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-content: flex-start;
|
||||
padding: 0;
|
||||
@media #{$smalldesktop} {
|
||||
position: relative;
|
||||
height: unset;
|
||||
display: block;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
width: calc(100vw - #{$h-unit-1}) !important;
|
||||
width: calc(100vw - #{$h-unit-1});
|
||||
bottom: unset !important;
|
||||
height: $h-unit-1;
|
||||
position: relative;
|
||||
@@ -1374,128 +1343,183 @@ body.category.category-esemeny {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@include single-metadata();
|
||||
@media #{$smalldesktop} {
|
||||
top: -#{$h-unit-1};
|
||||
background-color: #fff;
|
||||
margin-left: $h-unit-1;
|
||||
padding-left: 0;
|
||||
|
||||
width: calc(100% - #{$h-unit-1}) !important;
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
|
||||
}
|
||||
.time-cat {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
h1.single-title {
|
||||
margin: 0;
|
||||
@include single-title();
|
||||
min-height: 25vh;
|
||||
padding: $padd;
|
||||
background-color: #fff;
|
||||
@media #{$smalldesktop} {
|
||||
position: fixed;
|
||||
// height: 100vh;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: $h-unit-2;
|
||||
background-color: transparent;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title2 {
|
||||
display: none;
|
||||
@media #{$smalldesktop} {
|
||||
display: block;
|
||||
@include single-title2();
|
||||
|
||||
/* ---------------------------- single on desktop --------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
margin-top: 100vh;
|
||||
margin-left: $h-unit-1;
|
||||
background-color: #fff;
|
||||
border-left: #000 solid 1px;
|
||||
padding-left: $h-unit-1;
|
||||
|
||||
// & > * {
|
||||
// padding: $padd $h-unit-1;
|
||||
// }
|
||||
|
||||
.thumbnailwrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// left: calc(-#{$h-unit-1});
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
img.attachment-post-thumbnail {
|
||||
// post thumbnail on home
|
||||
|
||||
object-fit: cover;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------- title and metadata on desktop --------------------- */
|
||||
|
||||
.titlewrapper {
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
height: unset;
|
||||
// display: block;
|
||||
|
||||
.metadata {
|
||||
top: -#{$h-unit-1};
|
||||
// width: calc(100% - #{$h-unit-1});
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
|
||||
|
||||
.time-cat {
|
||||
}
|
||||
}
|
||||
h1.single-title {
|
||||
background-color: transparent;
|
||||
min-height: unset;
|
||||
top: -#{$h-unit-1};
|
||||
position: relative;
|
||||
// //position: fixed;
|
||||
// // height: 100vh;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// // padding: $h-unit-2;
|
||||
|
||||
// z-index: -1;
|
||||
// //ez lehet nem kell, összedolgozni:
|
||||
// display: block;
|
||||
// // @include single-title2();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- single content ----------------------------- */
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: #ff5f5f;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
width: 20%;
|
||||
&.content-wrap {
|
||||
width: 40%;
|
||||
}
|
||||
&.content-begin {
|
||||
margin-top: calc(25vh + #{$padd});
|
||||
@media #{$smalldesktop} {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@include single-quote();
|
||||
p {
|
||||
background: #ff5f5f;
|
||||
display: inline;
|
||||
padding: 2px 0;
|
||||
@include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
padding: $padd 0;
|
||||
.single-content {
|
||||
position: relative;
|
||||
padding: $padd;
|
||||
@media #{$smalldesktop} {
|
||||
padding: $padd $h-unit-1;
|
||||
top: -#{$h-unit-1};
|
||||
}
|
||||
figure {
|
||||
position: relative;
|
||||
figcaption {
|
||||
bottom: 0 !important;
|
||||
|
||||
&::after {
|
||||
@include trianglecorner(topright, #{$h-unit-1});
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: #ff5f5f;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
width: 20%;
|
||||
&.content-wrap {
|
||||
width: 40%;
|
||||
}
|
||||
&.content-begin {
|
||||
margin-top: calc(25vh + #{$padd});
|
||||
@media #{$smalldesktop} {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-image figcaption,
|
||||
.wp-block-gallery .blocks-gallery-image figcaption,
|
||||
.wp-block-gallery .blocks-gallery-item figcaption {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: calc(100% - #{$h-unit-1});
|
||||
height: $h-unit-1;
|
||||
padding: 1rem $padd;
|
||||
margin: 0;
|
||||
bottom: unset;
|
||||
@include captiontext();
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
overflow: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.wp-block-gallery {
|
||||
padding: $padd 0;
|
||||
li {
|
||||
margin-right: 0;
|
||||
&:nth-child(odd) figcaption::after {
|
||||
@include trianglecorner(topright, #{$h-unit-1});
|
||||
blockquote {
|
||||
@include single-quote();
|
||||
p {
|
||||
background: #ff5f5f;
|
||||
display: inline;
|
||||
padding: 2px 0;
|
||||
@include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
|
||||
}
|
||||
&:nth-child(even) figcaption {
|
||||
right: 0;
|
||||
top: 0;
|
||||
&::after {
|
||||
@include trianglecorner(bottomleft, #{$h-unit-1});
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
padding: $padd 0;
|
||||
@media #{$smalldesktop} {
|
||||
padding: $padd $h-unit-1;
|
||||
}
|
||||
figure {
|
||||
position: relative;
|
||||
figcaption {
|
||||
bottom: 0 !important;
|
||||
|
||||
&::after {
|
||||
@include trianglecorner(topright, #{$h-unit-1});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-image figcaption,
|
||||
.wp-block-gallery .blocks-gallery-image figcaption,
|
||||
.wp-block-gallery .blocks-gallery-item figcaption {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
width: calc(100% - #{$h-unit-1});
|
||||
height: $h-unit-1;
|
||||
padding: 1rem $padd;
|
||||
margin: 0;
|
||||
bottom: unset;
|
||||
@include captiontext();
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
overflow: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wp-block-gallery {
|
||||
padding: $padd 0;
|
||||
li {
|
||||
margin-right: 0;
|
||||
&:nth-child(odd) figcaption::after {
|
||||
@include trianglecorner(topright, #{$h-unit-1});
|
||||
}
|
||||
&:nth-child(even) figcaption {
|
||||
right: 0;
|
||||
top: 0;
|
||||
&::after {
|
||||
@include trianglecorner(bottomleft, #{$h-unit-1});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user