diff --git a/_jegyzet.md b/_jegyzet.md index 2bb49be..c14f76f 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -33,4 +33,4 @@ Nincs találat oldal, pl keresésnél Keresési találatok oldal - +Esemény oldalon a "Tovább az eseményre gomb" legyen kiütött? \ No newline at end of file diff --git a/_teendők.md b/_teendők.md index a418063..98a29a3 100644 --- a/_teendők.md +++ b/_teendők.md @@ -1,16 +1,11 @@ -# Single +# Single - ✔ og: tag: pluginnal! -bal felső sarokban nem jó a sarok border!! - -lightbox: mobilon ott ahol van most - Asztalin menjen ki a képernyő szélére - galéria jobb/bal nyilat a képernyő széléhez igazítani | X-et is - - # Esemény oldal +megcsinálni! + # Kezdőlap felgördülő szövegkivonat -> felülre igazítva @@ -29,6 +24,7 @@ semmiképpen ne lógjon a cím elé a felgördölő cucc Max karakterszám alcímnél, hogy hova menjen +scroll rossz a kiscímeknél ## mobil nézet diff --git a/category-esemeny.php b/category-esemeny.php index ef22957..05d8c4e 100644 --- a/category-esemeny.php +++ b/category-esemeny.php @@ -26,7 +26,8 @@
\2 \3',$event_datum ); + // echo $event_datum; ?>
@@ -44,6 +45,7 @@

+
Tovább az eseményre
diff --git a/css/base.css b/css/base.css index b07407a..6319150 100644 --- a/css/base.css +++ b/css/base.css @@ -125,7 +125,8 @@ object { .wrapper .header .header-2 { display: flex; flex-direction: row; - align-items: center; } + align-items: center; + line-height: 0; } @media (min-width: 769px) { .wrapper .header .header-1, .wrapper .header .header-2 { @@ -1178,7 +1179,7 @@ object { border-top: #000 1px solid; background-color: transparent; left: calc(4rem); - margin-left: -0; } + margin-left: calc((0) * -1); } .archive main section .home_wrapper-big.home_wrapper-1 article .metadata::before, .home main section .home_wrapper-big.home_wrapper-1 article .metadata::before, .search-results main section .home_wrapper-big.home_wrapper-1 article .metadata::before { @@ -1190,7 +1191,7 @@ object { top: 0; background-color: transparent; z-index: 9; - left: -0; + left: calc((0) * -1); border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); @@ -1227,7 +1228,7 @@ object { border-top: #000 1px solid; background-color: transparent; right: calc(4rem); - margin-right: -0; } + margin-right: calc((0) * -1); } .archive main section .home_wrapper-big.home_wrapper-2 article .metadata::before, .home main section .home_wrapper-big.home_wrapper-2 article .metadata::before, .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata::before { @@ -1239,7 +1240,7 @@ object { top: 0; background-color: transparent; z-index: 9; - right: -0; + right: calc((0) * -1); border-right: #000 solid 1px; -moz-transform: skewX(45deg); -o-transform: skewX(45deg); @@ -1356,7 +1357,7 @@ object { border-top: #000 1px solid; background-color: transparent; left: calc(5rem); - margin-left: -0; } + margin-left: calc((0) * -1); } .archive main section .home_wrapper-small article .metadata::before, .archive main section .home_wrapper-small .archivetitle .metadata::before, .archive main section .home_wrapper-small .archivedescription .metadata::before, @@ -1374,7 +1375,7 @@ object { top: 0; background-color: transparent; z-index: 9; - left: -0; + left: calc((0) * -1); border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); @@ -1584,7 +1585,7 @@ object { border-top: #000 1px solid; background-color: transparent; left: calc(5rem); - margin-left: -0; } + margin-left: calc((0) * -1); } .archive main section .home_wrapper-small .archivetitle::before, .home main section .home_wrapper-small .archivetitle::before, .search-results main section .home_wrapper-small .archivetitle::before { @@ -1596,7 +1597,7 @@ object { top: 0; background-color: transparent; z-index: 9; - left: -0; + left: calc((0) * -1); border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); @@ -1710,7 +1711,8 @@ body.category.category-esemeny header { body.category.category-esemeny main { padding-top: 9rem; } body.category.category-esemeny main article { - height: 50vh; } + height: 85vw; + max-height: calc(50vw + 180px); } body.category.category-esemeny main article .thumbnailwrapper { height: 50vw; } body.category.category-esemeny main article .thumbnailwrapper img { @@ -1719,7 +1721,11 @@ body.category.category-esemeny main { body.category.category-esemeny main article .event-metadata { display: flex; flex-direction: column; - padding: 2rem; } + justify-content: space-between; + align-content: stretch; + padding: 2rem; + height: 35vw; + max-height: 180px; } body.category.category-esemeny main article .event-metadata .top-row, body.category.category-esemeny main article .event-metadata .bottom-row { display: flex; @@ -1727,9 +1733,48 @@ body.category.category-esemeny main { justify-content: space-between; height: 50%; flex: 0 0 auto; } - body.category.category-esemeny main article .event-metadata .top-row h2, + body.category.category-esemeny main article .event-metadata .top-row { + align-items: center; } + body.category.category-esemeny main article .event-metadata .top-row .ev-date { + font: 800 1.8rem "Butler"; + color: #000; + color: #00f; } + @media (min-width: 512px) { + body.category.category-esemeny main article .event-metadata .top-row .ev-date { + font-size: 2.2rem; } } + body.category.category-esemeny main article .event-metadata .top-row a { + -moz-transform: rotate(225deg); + -o-transform: rotate(225deg); + -ms-transform: rotate(225deg); + -webkit-transform: rotate(225deg); + transform: rotate(225deg); + font-size: 2.8rem; } + body.category.category-esemeny main article .event-metadata .bottom-row { + align-items: flex-end; } body.category.category-esemeny main article .event-metadata .bottom-row h2 { - height: unset; } + flex: 1 0.9 auto; + height: unset; + padding: 0; + font: 800 1.8rem "Butler"; + color: #000; } + @media (min-width: 512px) { + body.category.category-esemeny main article .event-metadata .bottom-row h2 { + font-size: 2.2rem; } } + body.category.category-esemeny main article .event-metadata .bottom-row .vr { + flex: 0 0 auto; + width: 1px; + height: 100%; + background-color: #000; } + body.category.category-esemeny main article .event-metadata .bottom-row a.text-link { + flex: 1 1 auto; + font: 800 1.8rem "Butler"; + color: #000; + font: 500 1.8rem "Westeinde Caption"; + color: #00f; + text-align: right; } + @media (min-width: 512px) { + body.category.category-esemeny main article .event-metadata .bottom-row a.text-link { + font-size: 2.2rem; } } body.category.category-esemeny main article .event-metadata .hr { flex: 0 0 auto; height: 1px; @@ -1883,11 +1928,11 @@ body.category.category-esemeny main { display: block; top: 0; border: none; - width: calc(100% - 5rem + 5rem); + width: calc(100% - 5rem + (5rem + 1px)); border-top: #000 1px solid; background-color: white; left: calc(5rem); - margin-left: -5rem; } + margin-left: calc((5rem + 1px) * -1); } .single article .titlewrapper .metadata::before, .page article .titlewrapper .metadata::before { display: block; @@ -1898,7 +1943,7 @@ body.category.category-esemeny main { top: 0; background-color: white; z-index: 9; - left: -5rem; + left: calc((5rem + 1px) * -1); border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); @@ -2464,7 +2509,7 @@ body.category.category-esemeny main { border-top: #000 1px solid; background-color: transparent; left: calc(5rem); - margin-left: -0; } + margin-left: calc((0) * -1); } .single #related_posts ul li .metadata::before, .page #related_posts ul li .metadata::before { display: block; @@ -2475,7 +2520,7 @@ body.category.category-esemeny main { top: 0; background-color: transparent; z-index: 9; - left: -0; + left: calc((0) * -1); border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); diff --git a/js/scripts.js b/js/scripts.js index 47d18f0..361380e 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -43,13 +43,13 @@ vh: vh, bottomScrollHeight: bottomScrollHeight } - // console.log(cssWidths) + //console.log(cssWidths) /* --------------------------- css values to vars --------------------------- */ //isMobile const isMobile = (_ => { - if (wow < 769) { + if (wow < 769 || wiw < 769) { //mobile settings $('.social-link, .events-link').addClass('hidden') return true @@ -720,10 +720,10 @@ if (isEsemeny) { //add spaces to date - $(".event-metadata .ev-date").each(function () { - let repl = $(this).html().replace(/\.\b/g, ". ") - $(this).html(repl) - }) + // $(".event-metadata .ev-date").each(function () { + // let repl = $(this).html().replace(/\.\b/g, ". ") + // $(this).html(repl) + // }) } @@ -798,13 +798,22 @@ //hide caption on desktop if (!isMobile) { - $('.wp-block-gallery img, .wp-block-image img').hover(function () { - $(this).parent('a').next("figcaption").addClass("vis") - }, function () { - $('.wp-block-gallery .vis, .wp-block-image .vis') - .removeClass("vis") + // $('.wp-block-gallery img, .wp-block-image img, .vis').hover(function () { + // $(this).parent('a').next("figcaption").addClass("vis") + // }, function () { + // $('.wp-block-gallery .vis, .wp-block-image .vis') + // .removeClass("vis") + // }) + $('.wp-block-gallery .blocks-gallery-item, .wp-block-image').hover(function(){ + $(this).find("figcaption").addClass("vis") + + },function(){ + $('.wp-block-gallery .vis, .wp-block-image .vis').removeClass("vis") }) + + + } @@ -823,7 +832,7 @@ //http://www.jacklmoore.com/colorbox/ const colorboxSettings = { - transition: 'fade', + transition: 'none', rel: 'cb-ballery', maxWidth: '90%', maxHeight: '80%', @@ -833,6 +842,8 @@ previous: '', next: '', close: '', + xhrError: 'A tartalom betöltése nem sikerült. Kérlek próbáld meg később.', + imgError: 'A kép betöltése nem sikerült. Kérlek próbáld meg később.' } diff --git a/sass/_font-mixins.scss b/sass/_font-mixins.scss index a7e8ce6..71170ef 100644 --- a/sass/_font-mixins.scss +++ b/sass/_font-mixins.scss @@ -191,3 +191,23 @@ font: 500 2rem "Westeinde Caption"; line-height: 1.3; } + +@mixin event-title{ + font: 800 1.8rem "Butler"; + color: #000; + @media #{$tablet} { + font-size: 2.2rem; + } +} + +@mixin event-date{ + @include event-title(); + color: #00f; +} + +@mixin event-link{ + @include event-title(); + font: 500 1.8rem "Westeinde Caption"; + color: #00f; +} + diff --git a/sass/base.scss b/sass/base.scss index 8af1189..e224057 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -89,6 +89,10 @@ $only-mobile: only screen and max-width: 768px ); +$tablet: only screen and + ( + min-width: 512px + ); $smalldesktop: only screen and ( min-width: 769px @@ -236,7 +240,7 @@ $v-unit-6: 24rem; @if $offset==0 { width: calc(100% - #{$radius}); } @else { - width: calc(100% - #{$radius} + #{$offset}); + width: calc(100% - #{$radius} + (#{$offset})); } border-top: $bordercolor 1px solid; @@ -244,11 +248,11 @@ $v-unit-6: 24rem; @if $side==left { left: calc(#{$radius}); - margin-left: -#{$offset}; + margin-left: calc((#{$offset}) * -1); } @if $side==right { right: calc(#{$radius}); - margin-right: -#{$offset}; + margin-right: calc((#{$offset}) * -1); } } &::before { @@ -263,14 +267,14 @@ $v-unit-6: 24rem; z-index: 9; @if $side==left { - left: -#{$offset}; + left: calc((#{$offset}) * -1); border-left: $bordercolor solid 1px; @include transform(skewX(-45deg)); transform-origin: left bottom; border-top: $bordercolor solid 1px; } @if $side==right { - right: -#{$offset}; + right: calc((#{$offset}) * -1); border-right: $bordercolor solid 1px; @include transform(skewX(45deg)); transform-origin: right bottom; @@ -316,6 +320,7 @@ $v-unit-6: 24rem; display: flex; flex-direction: row; align-items: center; + line-height: 0; @media #{$smalldesktop} { width: $h-unit-2; position: fixed; @@ -1277,7 +1282,8 @@ body.category.category-esemeny { main { padding-top: 5rem + (2rem * 2); article { - height: 50vh; + height: 85vw; + max-height: calc(50vw + 180px); .thumbnailwrapper { height: 50vw; img { @@ -1289,7 +1295,11 @@ body.category.category-esemeny { .event-metadata { display: flex; flex-direction: column; + justify-content: space-between; + align-content: stretch; padding: 2rem; + height: 35vw; + max-height: 180px; .top-row, .bottom-row { @@ -1298,14 +1308,41 @@ body.category.category-esemeny { justify-content: space-between; height: 50%; flex: 0 0 auto; - // & > * { - // } - // .ev-date { - // } - h2 { - height: unset; + } + + .top-row { + align-items: center; + .ev-date { + @include event-date(); + } + a { + @include transform(rotate(225deg)); + font-size: 2.8rem; } } + + .bottom-row { + align-items: flex-end; + + h2 { + flex: 1 0.9 auto; + height: unset; + padding: 0; + @include event-title; + } + .vr { + flex: 0 0 auto; + width: 1px; + height: 100%; + background-color: #000; + } + a.text-link { + flex: 1 1 auto; + @include event-link; + text-align: right; + } + } + .hr { flex: 0 0 auto; height: 1px; @@ -1471,7 +1508,7 @@ body.category.category-esemeny { padding-left: 0; padding-right: 0; - @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left); + @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left); .metaWrapper { @include singlDesktopLayout(); @@ -1722,7 +1759,7 @@ body.category.category-esemeny { #colorbox { z-index: 12; @media #{$smalldesktop} { - z-index: 3150; + z-index: 3150; } &:focus { border: none;