diff --git a/_jegyzet.md b/_jegyzet.md index a71344c..7057fe0 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -67,8 +67,8 @@ Egyedi esemény oldal van, vagy az csak egy link lista? Kezdőlap: -egér változzon lapozósra ok -két nagy, utána kicsi rácsban, +~egér változzon lapozósra~ +~két nagy, utána kicsi rácsban~ Nincs gradiens Hover csak a címen Nyíl, csak az első cikken @@ -111,9 +111,17 @@ Kategória lap: első csempe kimarad. Kereső: - teljes lábléc magasságban, hosszabban fusson ki - ne legyen hover, - - + +# Kérdések + +## Kezdőlap + + Animációk? + # Post-install teendők: - function.php - esemény cat-id-t átírni!! \ No newline at end of file + esemény cat-id-t átírni!! +- wp beállítások + settings>reading>Blog pages show at most 6 \ No newline at end of file diff --git a/css/base.css b/css/base.css index f068c6a..24b8cbb 100644 --- a/css/base.css +++ b/css/base.css @@ -521,7 +521,7 @@ object { position: relative; } } .home main section { - /* --------------------------- home article mobile -------------------------- */ + /* --------------------------- home article mobile/default -------------------------- */ /* ------------------------ home article desktop big ------------------------ */ /* ----------------------- home article desktop small ----------------------- */ } @media (min-width: 769px) { @@ -538,34 +538,17 @@ object { margin: 0; padding: 0; border: none; - display: inline-block; } } - -@media (min-width: 769px) and (min-width: 769px) { - .home main section article .thumbnailwrapper { - height: calc(100% - 4rem); } } - @media (min-width: 769px) { + display: inline-block; } .home main section article .thumbnailwrapper img.attachment-home-thumbnail { height: 50vh; width: 100vw; - object-fit: cover; } } - @media (min-width: 769px) and (min-width: 769px) { - .home main section article .thumbnailwrapper img.attachment-home-thumbnail { - width: 50%; - height: 100%; } } - @media (min-width: 769px) { + object-fit: cover; } .home main section article h2 { width: 100%; height: 50vh; padding: 2rem; padding-top: 3rem; - margin: 0; } } - @media (min-width: 769px) and (min-width: 769px) { - .home main section article h2 { - height: unset; - position: absolute; - top: 6rem; - padding: 4rem; } } - @media (min-width: 769px) { + margin: 0; } .home main section article h2 a { font: bold 3rem "Westeinde Caption"; color: #000; } } @@ -586,6 +569,7 @@ object { margin-left: 10rem; padding-top: 4rem; border-right: #000 1px solid; + /* -------------------------------- thumbnail and title ------------------------------- */ /* -------------------------- home article metadata big------------------------- */ } .home main section .home-wrapper-big article::before { content: "
"; @@ -593,6 +577,17 @@ object { height: 1px; width: 100%; background: #000; } + .home main section .home-wrapper-big article .thumbnailwrapper { + height: calc(100% - 4rem); } + .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-thumbnail { + object-fit: cover; + width: 50%; + height: 100%; } + .home main section .home-wrapper-big article h2 { + height: unset; + position: absolute; + top: 6rem; + padding: 4rem; } .home main section .home-wrapper-big article .metadata { bottom: 0; background: transparent; @@ -646,16 +641,82 @@ object { @media (min-width: 769px) { .home main section .home-wrapper-small { width: calc(100vw - (10rem * 3)); + height: calc((100vw - (10rem * 3)) / 3 * 2); display: flex; flex-direction: row; flex-wrap: wrap; - margin-left: 10rem; - margin-top: 4rem; } + margin: auto 0; } + .home main section .home-wrapper-small:nth-child(3) { + margin-left: 10rem; } .home main section .home-wrapper-small article { - flex: 0 0 33%; - height: 50%; } + flex: 0 0 calc(100% / 3); + height: 50%; + position: relative; } + .home main section .home-wrapper-small article .thumbnailwrapper { + width: 100%; + height: 100%; } + .home main section .home-wrapper-small article .thumbnailwrapper img { + width: 100%; + height: 100%; + object-fit: cover; } .home main section .home-wrapper-small article .metadata { - display: none; } } + width: 100%; + height: 20%; + position: absolute; + bottom: 0; + right: 0; + background: transparent; + display: flex; + flex-direction: row; + padding: 0; + justify-content: flex-end; + align-items: stretch; + display: none; } + .home main section .home-wrapper-small article .metadata::after { + position: absolute; + top: 0; + border: none; + width: calc(100% - 4rem); + border-top: #000 1px solid; + left: calc(4rem); + background-color: transparent; + margin-left: -0; } + .home main section .home-wrapper-small article .metadata::before { + display: block; + content: ""; + position: absolute; + width: calc(4rem); + height: calc(4rem); + top: 0; + left: -0; + border-left: #000 solid 1px; + border-top: #000 1px solid; + -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; } + .home main section .home-wrapper-small article .metadata.vis { + display: flex; } } + @media (min-width: 769px) and (min-width: 769px) { + .home main section .home-wrapper-small article h2, + .home main section .home-wrapper-small article h2 a { + font-size: 1.2rem; + -webkit-text-stroke: #000 1px; + color: #fff; } } + @media (min-width: 769px) { + .home main section .home-wrapper-small article h2 { + display: none; + position: absolute; + top: 0; + background-color: #fff; + height: 100%; } + .home main section .home-wrapper-small article h2 a { + top: 50%; + position: absolute; } } /* -------------------------------------------------------------------------- */ /* single */ @@ -934,8 +995,15 @@ object { -webkit-text-stroke-color: #00ffb8 !important; } @media (min-width: 769px) { - .tag-be h2 a { - color: #00ffb8 !important; } } + .tag-be.home-big h2 a { + color: #00ffb8 !important; } + .tag-be.home-small .metadata, + .tag-be.home-small .metadata a { + color: #000 !important; } } + +@media (min-width: 769px) { + .tag-be.random .thumbnailwrapper > img { + clip-path: url(../img/clip/be_desktop.svg); } } .tag-do .metadata { color: #ff5f5f !important; } @@ -955,8 +1023,15 @@ object { -webkit-text-stroke-color: #ff5f5f !important; } @media (min-width: 769px) { - .tag-do h2 a { - color: #ff5f5f !important; } } + .tag-do.home-big h2 a { + color: #ff5f5f !important; } + .tag-do.home-small .metadata, + .tag-do.home-small .metadata a { + color: #000 !important; } } + +@media (min-width: 769px) { + .tag-do.random .thumbnailwrapper > img { + clip-path: url(../img/clip/do_desktop.svg); } } .tag-think .metadata { color: #fdff00 !important; } @@ -976,8 +1051,15 @@ object { -webkit-text-stroke-color: #fdff00 !important; } @media (min-width: 769px) { - .tag-think h2 a { - color: #fdff00 !important; } } + .tag-think.home-big h2 a { + color: #fdff00 !important; } + .tag-think.home-small .metadata, + .tag-think.home-small .metadata a { + color: #000 !important; } } + +@media (min-width: 769px) { + .tag-think.random .thumbnailwrapper > img { + clip-path: url(../img/clip/think_desktop.svg); } } .tag-love .metadata { color: #3c00ff !important; } @@ -997,8 +1079,15 @@ object { -webkit-text-stroke-color: #3c00ff !important; } @media (min-width: 769px) { - .tag-love h2 a { - color: #3c00ff !important; } } + .tag-love.home-big h2 a { + color: #3c00ff !important; } + .tag-love.home-small .metadata, + .tag-love.home-small .metadata a { + color: #000 !important; } } + +@media (min-width: 769px) { + .tag-love.random .thumbnailwrapper > img { + clip-path: url(../img/clip/love_desktop.svg); } } @media (min-width: 769px) { .single .tag-be .metadata { diff --git a/functions.php b/functions.php index c875ca6..6702d10 100644 --- a/functions.php +++ b/functions.php @@ -28,7 +28,8 @@ if (function_exists('add_theme_support')) { add_image_size('large', 700, '', true); // Large Thumbnail add_image_size('medium', 250, '', true); // Medium Thumbnail add_image_size('small', 120, '', true); // Small Thumbnail - add_image_size('home-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail'); + add_image_size('home-big-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail'); + add_image_size('home-small-thumbnail', 256, 256, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail'); // Add Support for Custom Backgrounds - Uncomment below if you're going to use /*add_theme_support('custom-background', array( @@ -96,7 +97,7 @@ function dis2019_header_scripts() wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr wp_enqueue_script('conditionizr'); // Enqueue it! - wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr + wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-custom.js', array(), '2.7.1'); // Modernizr wp_enqueue_script('modernizr'); // Enqueue it! wp_register_script('simpler-sidebar', get_template_directory_uri() . '/js/lib/jquery.simpler-sidebar.min.js', array('jquery'), '2.2.5'); // Modernizr @@ -411,39 +412,70 @@ function misha_my_load_more_scripts() add_action('wp_enqueue_scripts', 'misha_my_load_more_scripts'); + function misha_loadmore_ajax_handler() { - + // prepare our arguments for the query $args = json_decode(stripslashes($_POST['query']), true); $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded $args['post_status'] = 'publish'; + $args['posts_per_page'] = 6; + + //First, define your desired offset... + $offset = 14; + + //Next, determine how many posts per page you want (we'll use WordPress's settings) + $ppp = get_option('posts_per_page'); + + //Next, detect and handle pagination... + + //Manually determine page query offset (offset + current page (minus one) x posts per page) + $args['offset'] = $offset + (($_POST['page'] - 1) * $ppp); - // it is always better to use WP_Query but not here query_posts($args); get_template_part('loop'); - // if( have_posts() ) : - - // run the loop - // while( have_posts() ): the_post(); - - // look into your theme code how the posts are inserted, but you can use your own HTML of course - // do you remember? - my example is adapted for Twenty Seventeen theme - // get_template_part( 'template-parts/post/content', get_post_format() ); - // get_template_part('loop'); - // for the test purposes comment the line above and uncomment the below one - // the_title(); - - // endwhile; - - // endif; + die; // here we exit the script and even no wp_reset_query() required! } add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action} add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action} +/* -------------------- different number of posts on home ------------------- */ + +add_action('pre_get_posts', 'dis_2019_more_posts_on_home', 1 ); +function dis_2019_more_posts_on_home(&$query) { + + //Before anything else, make sure this is the right query... + if ( ! $query->is_home() ) { + return; + } + + //set post_per_page if it's homepage + if (! $query->is_paged ) { + $query->set('posts_per_page',14); + } + else { + return; + } +} + +// add_filter('found_posts', 'myprefix_adjust_offset_pagination', 1, 2 ); +// function myprefix_adjust_offset_pagination($found_posts, $query) { + +// //Define our offset again... +// $offset = 2; + +// //Ensure we're modifying the right query object... +// if ( $query->is_home() ) { +// //Reduce WordPress's found_posts count by the offset... +// return $found_posts - $offset; +// } +// return $found_posts; +// } + /*------------------------------------*\ Actions + Filters + ShortCodes \*------------------------------------*/ diff --git a/img/.arrow.png-autosave.kra b/img/.arrow.png-autosave.kra deleted file mode 100644 index 1ed691a..0000000 Binary files a/img/.arrow.png-autosave.kra and /dev/null differ diff --git a/img/clip/be_desktop.svg b/img/clip/be_desktop.svg new file mode 100644 index 0000000..c1e5bff --- /dev/null +++ b/img/clip/be_desktop.svg @@ -0,0 +1,50 @@ + + + +image/svg+xml + + \ No newline at end of file diff --git a/img/clip/do_desktop.svg b/img/clip/do_desktop.svg new file mode 100644 index 0000000..31ef9c6 --- /dev/null +++ b/img/clip/do_desktop.svg @@ -0,0 +1,50 @@ + + + +image/svg+xml + + \ No newline at end of file diff --git a/img/clip/love_desktop.svg b/img/clip/love_desktop.svg new file mode 100644 index 0000000..47804b4 --- /dev/null +++ b/img/clip/love_desktop.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/clip/think_desktop.svg b/img/clip/think_desktop.svg new file mode 100644 index 0000000..a2d7777 --- /dev/null +++ b/img/clip/think_desktop.svg @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/js/lib/modernizr-custom.js b/js/lib/modernizr-custom.js new file mode 100644 index 0000000..a542352 --- /dev/null +++ b/js/lib/modernizr-custom.js @@ -0,0 +1,3 @@ +/*! modernizr 3.6.0 (Custom Build) | MIT * + * https://modernizr.com/download/?-forcetouch-touchevents-setclasses !*/ +!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var u in C)if(C.hasOwnProperty(u)){if(e=[],n=C[u],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;tp;p++)if(m=e[p],h=A.style[m],f(m,"-")&&(m=a(m)),A.style[m]!==t){if(i||r(o,"undefined"))return u(),"pfx"==n?m:!0;try{A.style[m]=o}catch(g){}if(A.style[m]!=h)return u(),"pfx"==n?m:!0}return u(),!1}function y(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+z.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?h(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),p(a,n,t))}var g=[],C=[],_={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var S=n.documentElement,w="svg"===S.nodeName.toLowerCase(),E=_._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];_._prefixes=E;var b=function(){function e(e,n){var o;return e?(n&&"string"!=typeof n||(n=s(n||"div")),e="on"+e,o=e in n,!o&&r&&(n.setAttribute||(n=s("div")),n.setAttribute(e,""),o="function"==typeof n[e],n[e]!==t&&(n[e]=t),n.removeAttribute(e)),o):!1}var r=!("onblur"in n.documentElement);return e}();_.hasEvent=b;var x=_.testStyles=l;Modernizr.addTest("touchevents",function(){var t;if("ontouchstart"in e||e.DocumentTouch&&n instanceof DocumentTouch)t=!0;else{var r=["@media (",E.join("touch-enabled),("),"heartz",")","{#modernizr{top:9px;position:absolute}}"].join("");x(r,function(e){t=9===e.offsetTop})}return t});var T="Moz O ms Webkit",z=_._config.usePrefixes?T.split(" "):[];_._cssomPrefixes=z;var O=function(n){var r,o=E.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=E[s],u=a.toUpperCase()+"_"+r;if(u in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=O;var N=_._config.usePrefixes?T.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:s("modernizr")};Modernizr._q.push(function(){delete P.elem});var A={style:P.elem.style};Modernizr._q.unshift(function(){delete A.style}),_.testAllProps=y;var j=_.prefixed=function(e,n,t){return 0===e.indexOf("@")?O(e):(-1!=e.indexOf("-")&&(e=a(e)),n?y(e,n,t):y(e,"pfx"))};Modernizr.addTest("forcetouch",function(){return b(j("mouseforcewillbegin",e,!1),e)?MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN&&MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN:!1}),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var R=0;RBetöltés...

'); // change the button text, you can also add a preloader image }, - success : function( data ){ - if( data ) { - - button.html( 'Tovább' ).before(data); // insert new posts - misha_loadmore_params.current_page++; - button.trigger("moreload-finish") - - if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) + success: function (data) { + if (data) { + + button.html('Tovább').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 { diff --git a/js/scripts.js b/js/scripts.js index f78b981..3755ec5 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -143,29 +143,74 @@ /* ----------------------------------- css ---------------------------------- */ + var articleWrapCounter = 0 + if (isHome & !isMobile) { $('html').css({ overflowY: "hidden" }) //wrapping for big-small difference - $('article:first-child').wrap('
') - $('article:nth-child(2)').wrap('
') + $('article:first-child').wrap('
').addClass("home-big") + $('article:nth-child(2)').wrap('
').addClass("home-big") var wrapArticles = $("article").length - 2 - var n = 0 + var articleWrapCounter = 0 for (let i = 0; i < wrapArticles; i++) { var j = i + 3 if (i % 6 == 0) { - n++ + articleWrapCounter++ } - $('article:nth-child(' + j + ')').addClass("home-thumbnail-small-" + n) + $('article:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter) } - for (let i = 0; i < n; i++) { + for (let i = 0; i < articleWrapCounter; i++) { var j = i + 3 - var k = i+1 + var k = i + 1 $(".home-thumbnail-small-" + k).wrapAll('
') } } + //returns three random numebers 0-5 + function randomNumbers() { + // All numbers are equal + var numberOne = 3; + var numberTwo = 3; + var numberThree = 3; + + // run this loop until numberOne is different than numberThree + do { + numberOne = Math.floor(Math.random() * 5); + } while (numberOne === numberThree); + + // run this loop until numberTwo is different than numberThree and numberOne + do { + numberTwo = Math.floor(Math.random() * 5); + } while (numberTwo === numberThree || numberTwo === numberOne); + + var i = [numberOne, numberTwo, numberThree] + return i + } + + //jquery function, adds random class to 3 random cihldren + (function ($) { + $.fn.addRandomClasses = function () { + let rn = randomNumbers() + for (let i = 0; i < 3; i++) { + var j = rn[i] + 1 + this.children("article:nth-child(" + j + ")").addClass("random") + } + return this + }; + })(jQuery); + + + $(".home-wrapper-small").each(function () { + // var rn = randomNumbers() + // for (let i = 0; i < rn.length; i++) { + // var j = rn[i] +1 + // $(this).children("article:nth-child(" + j + ")").addClass("random") + // } + // addRandomClass($(this)) + $(this).addRandomClasses() + }) /* ----------------------------- Snap on mobile ----------------------------- */ @@ -199,7 +244,7 @@ // var offset = ($(nextelem).offset().left) - desktophomemargin var offset = ($(nextelem).position().left) - console.log("scrolling to: " + nextelem.attr("id") + " - offset: " + offset) + console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset) $('html, body').stop().animate({ scrollLeft: offset }, 800); return nextelem; } @@ -231,8 +276,8 @@ var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width var currscroll = $('html').scrollLeft() var scrollnr = Math.floor(currscroll / articleWidth) + 1 - currElem = $( selector + ':nth-child(' + scrollnr + ')') - // console.log(currElem.attr("id")) + currElem = $(selector + ':nth-child(' + scrollnr + ')') + console.log("start location: " + currElem.attr("class")) } var scrolltimer = false; @@ -270,13 +315,63 @@ $('.misha_loadmore').on("moreload-start", function () { currElem = $(this).prev() + console.log("currelem: " + currElem.attr("class")) }) $('.misha_loadmore').on("moreload-finish", function () { + + //wrap new elements on load + articleWrapCounter++ + var wrapnum = articleWrapCounter + 2 + $("#content>article") + .addClass("home-small home-thumbnail-small-" + articleWrapCounter) + .wrapAll('
') + $(".home-wrapper-" + wrapnum).addRandomClasses() + + //Scroll to new element currElem = homeScroll(currElem, "next") }) + /* ------------------------------ hover on home ----------------------------- */ + + function showTitle(th) { + $(th).children("h2").show() + $(th).children(".metadata").addClass("vis") + } + + function hideTitle(th) { + $(th).children("h2").hide() + $(th).children(".metadata").removeClass("vis") + } + + $(document).on({ + mouseenter: function () { + if (!Modernizr.touchevents) { + showTitle(this) + } + }, + mouseleave: function () { + if (!Modernizr.touchevents) { + hideTitle(this) + } + } + }, '.home-small'); + + $(document).on({ + 'touchend': function (e) { + e.preventDefault() + var art = $(this).parents("article") + var metadata = art.children(".metadata") + if (metadata.hasClass("vis")) { + hideTitle(art) + } else { + hideTitle($(".vis").parents("article")) + showTitle(art) + } + } + }, ".home-small a.thumbnailwrapper") + /* -------------------------------------------------------------------------- */ /* CIRCULAR TEXT */ diff --git a/loop.php b/loop.php index 357d893..c97cb5d 100644 --- a/loop.php +++ b/loop.php @@ -1,4 +1,7 @@ - +
> @@ -6,7 +9,11 @@ - + diff --git a/sass/_font-mixins.scss b/sass/_font-mixins.scss index 9516bb0..fa92d5d 100644 --- a/sass/_font-mixins.scss +++ b/sass/_font-mixins.scss @@ -25,6 +25,15 @@ } } +@mixin home-title-small { + @media #{$smalldesktop} { + font-size: 1.2rem; + -webkit-text-stroke: #000 1px; + color: #fff; + + } +} + @mixin home-metadata { font: bold 1rem "Westeinde Caption"; color: #000; diff --git a/sass/base.scss b/sass/base.scss index dc9b965..4b6e104 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -310,7 +310,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);; } } } @@ -620,7 +620,7 @@ $desktop-bottom-margin-double: 4rem; width: fit-content; } - /* --------------------------- home article mobile -------------------------- */ + /* --------------------------- home article mobile/default -------------------------- */ article { height: 100vh; @@ -633,19 +633,11 @@ $desktop-bottom-margin-double: 4rem; } .thumbnailwrapper { - @media #{$smalldesktop} { - // height: 100%; - height: calc(100% - #{$desktop-top-margin}); - } img.attachment-home-thumbnail { // post thumbnail on home height: 50vh; width: 100vw; object-fit: cover; - @media #{$smalldesktop} { - width: 50%; - height: 100%; - } } } @@ -658,12 +650,6 @@ $desktop-bottom-margin-double: 4rem; // display: flex; // flex-direction: row; // align-items: center; - @media #{$smalldesktop} { - height: unset; - position: absolute; - top: 6rem; - padding: 4rem; - } a { @include home-title(); @@ -695,6 +681,24 @@ $desktop-bottom-margin-double: 4rem; width: 100%; background: #000; } + + /* -------------------------------- thumbnail and title ------------------------------- */ + .thumbnailwrapper { + height: calc(100% - #{$desktop-top-margin}); + img.attachment-home-thumbnail { + object-fit: cover; + width: 50%; + height: 100%; + } + } + + h2 { + height: unset; + position: absolute; + top: 6rem; + padding: 4rem; + } + /* -------------------------- home article metadata big------------------------- */ .metadata { bottom: 0; @@ -725,7 +729,7 @@ $desktop-bottom-margin-double: 4rem; } .postedon { } - } + } //metadata end } } .home-wrapper-1 { @@ -744,17 +748,67 @@ $desktop-bottom-margin-double: 4rem; @media #{$smalldesktop} { .home-wrapper-small { width: calc(100vw - (#{$desktop-home-margin} * 3)); + height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2); display: flex; flex-direction: row; flex-wrap: wrap; - margin-left: $desktop-home-margin; - margin-top: $desktop-top-margin; + margin: auto 0; + &:nth-child(3) { + margin-left: $desktop-home-margin; + } article { - flex: 0 0 33%; + flex: 0 0 calc(100% / 3); height: 50%; - .metadata{ + position: relative; + .thumbnailwrapper { + width: 100%; + height: 100%; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .metadata { + + width: 100%; + height: 20%; + + position: absolute; + bottom: 0; + right: 0; + + background: transparent; + + display: flex; + flex-direction: row; + padding: 0; + justify-content: flex-end; + align-items: stretch; + @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent); display: none; + &.vis{ + display: flex; + } + } + + h2, + h2 a { + @include home-title-small(); + } + + h2 { + display: none; + position: absolute; + top: 0; + background-color: #fff; + height: 100%; + a { + top: 50%; + position: absolute; + } } } } @@ -1013,8 +1067,24 @@ $desktop-bottom-margin-double: 4rem; } @media #{$smalldesktop} { - h2 a { - color: $color !important; + &.home-big { + h2 a { + color: $color !important; + } + } + &.home-small { + .metadata, + .metadata a { + color: #000 !important; + } + } + } +} + +@mixin tagclip($tag){ + @media #{$smalldesktop} { + .thumbnailwrapper>img{ + clip-path: url(../img/clip/#{$tag}_desktop.svg) } } } @@ -1036,18 +1106,30 @@ $desktop-bottom-margin-double: 4rem; .tag-be { @include tagcolors(#00ffb8); + &.random{ + @include tagclip(be) + } } .tag-do { @include tagcolors(#ff5f5f); + &.random{ + @include tagclip(do) + } } .tag-think { @include tagcolors(#fdff00); + &.random{ + @include tagclip(think) + } } .tag-love { @include tagcolors(#3c00ff); + &.random{ + @include tagclip(love) + } } .single {