diff --git a/_jegyzet.md b/_jegyzet.md index 7cbee55..fc60b25 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -95,7 +95,7 @@ Kereső: ## kezdőlap hover: ne nőjjön meg, csak a szín a vonal felcsuszás animálva - a szélek alá is kerüljön szín + ~a szélek alá is kerüljön szín~ képre is hover, képre is klikk kép pontosabb arány alapből lehet hogy több látszódjon @@ -109,7 +109,7 @@ Kereső: ## single: - képen ne egyen cím + képen ne legyen cím # Post-install teendők: diff --git a/css/base.css b/css/base.css index 7f54272..480e533 100644 --- a/css/base.css +++ b/css/base.css @@ -602,30 +602,32 @@ object { @media (min-width: 769px) { .archive main section .home-wrapper-big, .home main section .home-wrapper-big { - flex: 0 0 auto; } + flex: 0 0 auto; + border-right: #000 1px solid; } .archive main section .home-wrapper-big article, .home main section .home-wrapper-big article { position: relative; width: calc(100vw - (10rem * 3)); + height: calc(100vh - 4rem); margin: 0; padding: 0; margin-left: 10rem; - padding-top: 4rem; - border-right: #000 1px solid; + margin-top: 4rem; + border-top: 1px #000 solid; /* ------------- home article desktop big - thumbnail and title ------------- */ /* -------------------------- home article metadata big------------------------- */ /* ------------------------- home article big hover ------------------------- */ } .archive main section .home-wrapper-big article .thumbnailwrapper, .home main section .home-wrapper-big article .thumbnailwrapper { + width: 40%; height: calc(100% - 4rem); display: flex; flex-direction: row; - justify-content: flex-start; - border-top: 1px #000 solid; } + justify-content: flex-start; } .archive main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail, .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail { object-fit: cover; - width: 50%; + width: 100%; height: 100%; } .archive main section .home-wrapper-big article h2, .home main section .home-wrapper-big article h2 { @@ -643,37 +645,7 @@ object { flex-direction: row; padding: 0; justify-content: flex-start; - align-items: center; } - .archive main section .home-wrapper-big article .metadata::after, - .home main section .home-wrapper-big article .metadata::after { - position: absolute; - content: ""; - display: block; - top: 0; - border: none; - width: calc(100% - 4rem); - border-top: #000 1px solid; - left: calc(4rem); - background-color: transparent; - margin-left: -0; } - .archive main section .home-wrapper-big article .metadata::before, - .home main section .home-wrapper-big article .metadata::before { - display: block; - content: ""; - position: absolute; - width: calc(4rem); - height: calc(4rem); - top: 0; - left: -0; - border-left: #000 solid 1px; - -moz-transform: skewX(-45deg); - -o-transform: skewX(-45deg); - -ms-transform: skewX(-45deg); - -webkit-transform: skewX(-45deg); - transform: skewX(-45deg); - transform-origin: left bottom; - background-color: transparent; - z-index: 9; } } + align-items: center; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home-wrapper-big article .metadata, .home main section .home-wrapper-big article .metadata { @@ -691,7 +663,8 @@ object { .home main section .home-wrapper-big article .metadata .vr { height: 100%; width: 1px; - background-color: #000; } + background-color: #000; + flex: 0 0 auto; } .archive main section .home-wrapper-big article .metadata .postedon, .home main section .home-wrapper-big article .metadata .postedon { padding: 0 5rem; } @@ -699,16 +672,111 @@ object { .archive main section .home-wrapper-big article .metadata .alcim, .home main section .home-wrapper-big article .metadata .bevezeto, .home main section .home-wrapper-big article .metadata .alcim { + color: #000 !important; display: none; } + .archive main section .home-wrapper-big article .metadata .bevezeto.transparent, + .archive main section .home-wrapper-big article .metadata .alcim.transparent, + .home main section .home-wrapper-big article .metadata .bevezeto.transparent, + .home main section .home-wrapper-big article .metadata .alcim.transparent { + color: transparent !important; } + .archive main section .home-wrapper-big article .metadata .alcim, + .home main section .home-wrapper-big article .metadata .alcim { + -moz-transform: rotate(270deg); + -o-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + transform-origin: top bottom; + text-align: left; + flex: 0 0 auto; + height: 5rem; + width: 20rem; + margin: 0 -3rem; } + .archive main section .home-wrapper-big article .metadata .bevezeto, + .home main section .home-wrapper-big article .metadata .bevezeto { + width: 50%; + flex: 0 1 auto; + text-align: left; + padding: 5rem; + font: bold 1rem "Butler"; } } + @media (min-width: 769px) and (min-width: 769px) { + .archive main section .home-wrapper-big article .metadata .bevezeto, + .home main section .home-wrapper-big article .metadata .bevezeto { + font-size: 2rem; } } + @media (min-width: 769px) { + .archive main section .home-wrapper-big article .metadata .filler, + .home main section .home-wrapper-big article .metadata .filler { + flex: 0 0 auto; + width: 40%; } .archive main section .home-wrapper-big article.hovered h2 > a, .home main section .home-wrapper-big article.hovered h2 > a { color: #000; } + .archive main section .home-wrapper-big.home-wrapper-1 article .metadata::after, + .home main section .home-wrapper-big.home-wrapper-1 article .metadata::after { + position: absolute; + content: ""; + display: block; + top: 0; + border: none; + width: calc(100% - 4rem); + border-top: #000 1px solid; + left: calc(4rem); + background-color: transparent; + margin-left: -0; } + .archive main section .home-wrapper-big.home-wrapper-1 article .metadata::before, + .home main section .home-wrapper-big.home-wrapper-1 article .metadata::before { + display: block; + content: ""; + position: absolute; + width: calc(4rem); + height: calc(4rem); + top: 0; + left: -0; + border-left: #000 solid 1px; + -moz-transform: skewX(-45deg); + -o-transform: skewX(-45deg); + -ms-transform: skewX(-45deg); + -webkit-transform: skewX(-45deg); + transform: skewX(-45deg); + transform-origin: left bottom; + background-color: transparent; + z-index: 9; } .archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper, .home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper { - justify-content: flex-end; } + float: right; } .archive main section .home-wrapper-big.home-wrapper-2 article, .home main section .home-wrapper-big.home-wrapper-2 article { border-left: #000 1px solid; } + .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::after, + .home main section .home-wrapper-big.home-wrapper-2 article .metadata::after { + position: absolute; + content: ""; + display: block; + top: 0; + border: none; + width: calc(100% - 4rem); + border-top: #000 1px solid; + left: calc(4rem); + background-color: transparent; + margin-left: -0; } + .archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before, + .home main section .home-wrapper-big.home-wrapper-2 article .metadata::before { + display: block; + content: ""; + position: absolute; + width: calc(4rem); + height: calc(4rem); + top: 0; + left: -0; + border-left: #000 solid 1px; + -moz-transform: skewX(-45deg); + -o-transform: skewX(-45deg); + -ms-transform: skewX(-45deg); + -webkit-transform: skewX(-45deg); + transform: skewX(-45deg); + transform-origin: left bottom; + background-color: transparent; + z-index: 9; } .archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img, .home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img { left: -5rem; diff --git a/js/myloadmore.js b/js/myloadmore.js deleted file mode 100644 index d331b61..0000000 --- a/js/myloadmore.js +++ /dev/null @@ -1,40 +0,0 @@ -jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error - // $('.misha_loadmore').click(function () { - - // var button = $(this), - // data = { - // 'action': 'loadmore', - // 'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function - // 'page': misha_loadmore_params.current_page - // }; - // button.trigger("moreload-start") - // console.log(misha_loadmore_params) - - - // $.ajax({ // you can also use $.post here - // url: misha_loadmore_params.ajaxurl, // AJAX handler - // data: data, - // type: 'POST', - // beforeSend: function (xhr) { - - // button.html('

Betöltés...

'); // change the button text, you can also add a preloader image - // }, - // success: function (data) { - // if (data) { - - // button.html('Mutass többet').before(data); // insert new posts - // misha_loadmore_params.current_page++; - // button.trigger("moreload-finish") - - // if (misha_loadmore_params.current_page -1 == misha_loadmore_params.max_page) - // button.remove(); // if last page, remove the button - - // // you can also fire the "post-load" event here if you use a plugin that requires it - // // $( document.body ).trigger( 'post-load' ); - // } else { - // button.remove(); // if no data, remove the button as well - // } - // } - // }); - // }); -}); \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index 1183e62..a7cd30e 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -175,7 +175,7 @@ if (isHome || isArchive) { //no overflowY - $('html').css({ overflowY: "hidden" }) + $('html').css({ overflowY: "hidden" }) //calculate wrappable elements $('#content>*:not(.misha_loadmore)').addClass("hbox") @@ -221,7 +221,7 @@ } //add bottom scrollbar to div on bottom: - $(".home-wrapper-big .metadata").css({bottom: bottomScrollHeight}) + $(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight }) }//isHome || isArchive end }// !isMobile end @@ -462,27 +462,43 @@ /* ------------------------------ hover on home ----------------------------- */ //hover on big articles - $(".home-big h2").hover(function () { + $(".home-big h2, .home-big .thumbnailwrapper").hover(function () { let cc = $(this) let cArticle = cc.parents("article") + let cMetadata = cArticle.children(".metadata") //add hovered class cArticle.addClass("hovered") //add tag to header for bg let artClasses = cArticle.attr("class").split(" ") let theTag = findClassByStart(artClasses, "tag") $("body, .header-1, .header-2").addClass("hover-" + theTag) - //show excerpt and alcim - cArticle.children(".metadata").children(".alcim").show() - cArticle.children(".metadata").children(".bevezeto").show() + + //animate border + cMetadata.stop().animate({ height: "25rem" }, _ => { + //hide metadata + cMetadata.children(".categories, .postedon").hide() + cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent") + }) }, function () { let cc = $(this) + let cArticle = cc.parents("article") + let cMetadata = cArticle.children(".metadata") //remove hovered class - cc.parents("article").removeClass("hovered") + cArticle.removeClass("hovered") //remove tag from header and body let headerClasses = $(".header-1").attr("class").split(" ") var hoverClass = findClassByStart(headerClasses, "hover") $("body, .header-1, .header-2").removeClass(hoverClass) + //transparent metadata + cMetadata.children(".alcim, .bevezeto").addClass("transparent") + //animate height change + cMetadata.stop().animate({ height: "10rem" }, _ => { + //hide and show metadata + cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent") + cMetadata.children(".categories, .postedon").show() + }) + }) diff --git a/loop.php b/loop.php index 8120e83..fb218ee 100644 --- a/loop.php +++ b/loop.php @@ -30,12 +30,6 @@ } }?> -
- -
-
- -
+ +
+
+ +
+
+
diff --git a/sass/_font-mixins.scss b/sass/_font-mixins.scss index bba324b..1b60981 100644 --- a/sass/_font-mixins.scss +++ b/sass/_font-mixins.scss @@ -71,6 +71,13 @@ } } +@mixin home-metadata-bevezeto { + font: bold 1rem "Butler"; + @media #{$smalldesktop} { + font-size: 2rem; + } +} + @mixin bedocircle { font: 900 1rem "Westeinde Caption"; color: transparent; diff --git a/sass/base.scss b/sass/base.scss index 68f44bf..71644a7 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -103,6 +103,7 @@ $h-unit-1: 5rem; //vertical units: $v-unit-1: 4rem; +$v-unit-2: 8rem; /* -------------------------------------------------------------------------- */ /* other mixins */ @@ -685,27 +686,30 @@ $v-unit-1: 4rem; //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)); + height: calc(100vh - #{$v-unit-1}); margin: 0; padding: 0; margin-left: $h-unit-2; - padding-top: $v-unit-1; - border-right: #000 1px solid; + margin-top: $v-unit-1; + + border-top: 1px #000 solid; /* ------------- home article desktop big - thumbnail and title ------------- */ .thumbnailwrapper { + width: 40%; height: calc(100% - #{$v-unit-1}); display: flex; flex-direction: row; justify-content: flex-start; - border-top: 1px #000 solid; + img.attachment-home-big-thumbnail { object-fit: cover; - width: 50%; + width: 100%; height: 100%; } } @@ -729,7 +733,7 @@ $v-unit-1: 4rem; padding: 0; justify-content: flex-start; align-items: center; - @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent); + @include home-metadata-big(); @media #{$mobile-landscape} { @@ -744,6 +748,8 @@ $v-unit-1: 4rem; height: 100%; width: 1px; background-color: #000; + flex: 0 0 auto; + } .postedon{ @@ -752,7 +758,34 @@ $v-unit-1: 4rem; .bevezeto, .alcim { + color: #000 !important; display: none; + &.transparent{ + color: transparent !important; + } + } + + .alcim{ + @include transform(rotate(270deg)); + transform-origin: top bottom; + text-align: left; + flex: 0 0 auto; + height: $h-unit-1; + width: 20rem; + margin: 0 -3rem; + } + + .bevezeto{ + width: 50%; + flex: 0 1 auto; + text-align: left; + padding: $h-unit-1; + @include home-metadata-bevezeto(); + } + + .filler{ + flex: 0 0 auto; + width: 40%; } } //metadata end @@ -765,14 +798,20 @@ $v-unit-1: 4rem; } &.home-wrapper-1 { article { + .metadata{ + @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent); + } a.thumbnailwrapper { - justify-content: flex-end; + float: right; } } } &.home-wrapper-2 { article { border-left: #000 1px solid; + .metadata{ + @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent); + } .thumbnailwrapper { img { left: -$h-unit-1;