From 027ad5511ca630a422490866af1aae24e2ff0d88 Mon Sep 17 00:00:00 2001 From: infeeeee Date: Sun, 9 Jun 2019 19:55:23 +0200 Subject: [PATCH] work on homepage --- _jegyzet.md | 12 ++-- css/base.css | 115 +++++++++++++++++++++++++++---------- functions.php | 32 +++++------ img/arrow-black-left.png | Bin 350 -> 336 bytes img/arrow-black-left.svg | 63 -------------------- img/arrow-black-right.png | Bin 196 -> 337 bytes img/arrow-black-right.svg | 63 -------------------- img/clip/be_desktop.svg | 67 +++++++-------------- img/clip/do_desktop.svg | 67 +++++++-------------- img/clip/love_desktop.svg | 36 ++++++++---- img/clip/think_desktop.svg | 46 ++++++++------- js/myloadmore.js | 62 ++++++++++---------- js/scripts.js | 104 +++++++++++++++++++++++++++++---- loadmore.php | 2 +- loop.php | 2 +- sass/_font-mixins.scss | 12 ++++ sass/base.scss | 94 +++++++++++++++++++----------- 17 files changed, 396 insertions(+), 381 deletions(-) delete mode 100644 img/arrow-black-left.svg delete mode 100644 img/arrow-black-right.svg diff --git a/_jegyzet.md b/_jegyzet.md index 7057fe0..73c7a73 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -72,14 +72,14 @@ Kezdőlap: Nincs gradiens Hover csak a címen Nyíl, csak az első cikken -cursor módosítás tekerésre +~cursor módosítás tekerésre~ Kis ikonok hover: - - maszkok bedo alapján - - némelyik maszkkal alapból, némelyik sima kép, - - hoverre eltűnik a kép, és helyette + ~- maszkok bedo alapján~ + ~- némelyik maszkkal alapból, némelyik sima kép, ~ + ~- hoverre eltűnik a kép, és helyette~ Nagycímek: - - utána margó + ~- utána margó~ - az is megnő, minden mint Excerpt a főoldalon hoverre: külön paraméter, nem excerpt!! @@ -118,6 +118,8 @@ Kereső: Animációk? + Kurzor: Nyíl az nem túl halovány? 32x32 pixel lehet maximum + # Post-install teendők: diff --git a/css/base.css b/css/base.css index 24b8cbb..b9bbc20 100644 --- a/css/base.css +++ b/css/base.css @@ -462,24 +462,43 @@ object { border-bottom: 5rem solid #fff; position: absolute; z-index: -1; } - .wrapper main section .misha_loadmore { + @media (min-width: 769px) { + .wrapper main section .misha_loadmore { + width: 10rem; + margin-right: 10rem; + align-self: stretch; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 100%; } } + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { font: bold 3rem "Westeinde Caption"; - color: #000; } + color: #fff; + -webkit-text-stroke: #000 1px; } @media (-webkit-min-device-pixel-ratio: 2.1) { - .wrapper main section .misha_loadmore { - font-size: 2.5rem !important; } } + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + font-size: 2rem !important; } } @media (min-width: 769px) { - .wrapper main section .misha_loadmore { - font-size: 5rem; } } + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + font-size: 3rem; } } @media (min-width: 769px) { - .wrapper main section .misha_loadmore { - border-left: #000 1px solid; - padding: 4rem 10rem; - align-self: stretch; - display: flex; - flex-direction: column; - justify-content: space-around; - height: 100%; } } + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + transform-origin: center; + white-space: nowrap; + width: 100vh; + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } } + +.touchevents .header-scroll { + display: none !important; } /* -------------------------------------------------------------------------- */ /* HOMEPAGE */ @@ -570,16 +589,15 @@ object { padding-top: 4rem; border-right: #000 1px solid; /* -------------------------------- thumbnail and title ------------------------------- */ - /* -------------------------- home article metadata big------------------------- */ } - .home main section .home-wrapper-big article::before { - content: "
"; - display: block; - height: 1px; - width: 100%; - background: #000; } + /* -------------------------- home article metadata big------------------------- */ + /* ------------------------- home article big hover ------------------------- */ } .home main section .home-wrapper-big article .thumbnailwrapper { - height: calc(100% - 4rem); } - .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-thumbnail { + height: calc(100% - 4rem); + display: flex; + flex-direction: row; + justify-content: flex-start; + border-top: 1px #000 solid; } + .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail { object-fit: cover; width: 50%; height: 100%; } @@ -636,12 +654,19 @@ object { display: none; display: block; border-right: #000 solid 1px; } + .home main section .home-wrapper-big article.hovered { + width: calc(100vw - (10rem * 2)); } + .home main section .home-wrapper-big article.hovered h2 > a { + color: #000; } + .home main section .home-wrapper-1 article a.thumbnailwrapper { + justify-content: flex-end; } .home main section .home-wrapper-2 article { border-left: #000 1px solid; } } @media (min-width: 769px) { .home main section .home-wrapper-small { width: calc(100vw - (10rem * 3)); height: calc((100vw - (10rem * 3)) / 3 * 2); + flex-shrink: 0; display: flex; flex-direction: row; flex-wrap: wrap; @@ -996,14 +1021,21 @@ object { @media (min-width: 769px) { .tag-be.home-big h2 a { - color: #00ffb8 !important; } + color: #00ffb8; } + .tag-be.home-big.hovered { + background-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); } } + -webkit-mask: url(../img/clip/be_desktop.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask: url(../img/clip/be_desktop.svg); + mask-repeat: no-repeat; + mask-size: 100%; } } .tag-do .metadata { color: #ff5f5f !important; } @@ -1024,14 +1056,21 @@ object { @media (min-width: 769px) { .tag-do.home-big h2 a { - color: #ff5f5f !important; } + color: #ff5f5f; } + .tag-do.home-big.hovered { + background-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); } } + -webkit-mask: url(../img/clip/do_desktop.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask: url(../img/clip/do_desktop.svg); + mask-repeat: no-repeat; + mask-size: 100%; } } .tag-think .metadata { color: #fdff00 !important; } @@ -1052,14 +1091,21 @@ object { @media (min-width: 769px) { .tag-think.home-big h2 a { - color: #fdff00 !important; } + color: #fdff00; } + .tag-think.home-big.hovered { + background-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); } } + -webkit-mask: url(../img/clip/think_desktop.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask: url(../img/clip/think_desktop.svg); + mask-repeat: no-repeat; + mask-size: 100%; } } .tag-love .metadata { color: #3c00ff !important; } @@ -1080,14 +1126,21 @@ object { @media (min-width: 769px) { .tag-love.home-big h2 a { - color: #3c00ff !important; } + color: #3c00ff; } + .tag-love.home-big.hovered { + background-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); } } + -webkit-mask: url(../img/clip/love_desktop.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask: url(../img/clip/love_desktop.svg); + mask-repeat: no-repeat; + mask-size: 100%; } } @media (min-width: 769px) { .single .tag-be .metadata { diff --git a/functions.php b/functions.php index 6702d10..9ab29f7 100644 --- a/functions.php +++ b/functions.php @@ -392,30 +392,31 @@ function misha_my_load_more_scripts() global $wp_query; // In most cases it is already included on the page and this line can be removed - wp_enqueue_script('jquery'); + //wp_enqueue_script('jquery'); // register our main script but do not enqueue it yet - wp_register_script('my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js', array('jquery')); + //wp_register_script('my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js', array('jquery')); // now the most interesting part // we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP // you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script() - wp_localize_script('my_loadmore', 'misha_loadmore_params', array( + //wp_localize_script('my_loadmore', 'misha_loadmore_params', array( + wp_localize_script('dis2019scripts', 'misha_loadmore_params', array( + 'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX 'posts' => json_encode($wp_query->query_vars), // everything about your loop is here 'current_page' => get_query_var('paged') ? get_query_var('paged') : 1, 'max_page' => $wp_query->max_num_pages, )); - wp_enqueue_script('my_loadmore'); + // wp_enqueue_script('my_loadmore'); } 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 @@ -436,7 +437,6 @@ function misha_loadmore_ajax_handler() query_posts($args); get_template_part('loop'); - die; // here we exit the script and even no wp_reset_query() required! } @@ -445,19 +445,19 @@ add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax /* -------------------- 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) { +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() ) { + if (!$query->is_home()) { return; } - + //set post_per_page if it's homepage - if (! $query->is_paged ) { - $query->set('posts_per_page',14); - } - else { + if (!$query->is_paged) { + $query->set('posts_per_page', 14); + } else { return; } } @@ -470,7 +470,7 @@ function dis_2019_more_posts_on_home(&$query) { // //Ensure we're modifying the right query object... // if ( $query->is_home() ) { -// //Reduce WordPress's found_posts count by the offset... +// //Reduce WordPress's found_posts count by the offset... // return $found_posts - $offset; // } // return $found_posts; diff --git a/img/arrow-black-left.png b/img/arrow-black-left.png index daa2a23987313ffe9a5d6abd55b74a5980ec9c57..d7676f1a8f8a80e45a9343b2cfa49853751a9641 100644 GIT binary patch delta 284 zcmV+%0ptGO0?+~>iBL{Q4GJ0x0000DNk~Le0000W0000O2nGNE0Gm_)G?5`13jnPE z006B4R8H0~kwz$g%}GQ-R7i=%)lW-8K@^7Z-@RH1N}#Q3)6xXp1O*1x_x}ifiijve z5L=AWDww$(?>zfC?=xrq9Ljm-YC{dkDykK5i zWP&$b)RbtjmR>|vHiE}+DFZy7t8fkne;?A%IYe?6~}J4}5(0ot*GVyll~>;b)w|!>7W^h`M-JSYA - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/img/arrow-black-right.png b/img/arrow-black-right.png index 03ffd8a68ac6328eb9646079efa8835326e2b1ac..290fb1bbd5141b638a3b62e8a0518c32fe606770 100644 GIT binary patch delta 285 zcmV+&0pk9|0nq{>iBL{Q4GJ0x0000DNk~Le0000W0000O2nGNE0Gm_)G?5`13jnPE z006B4R8H0~kwz$g&PhZ;R7i=%)lW-;K@i9B&y$&=q|~)bCwV{&N+)e7Dqh%S1&fZl - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/img/clip/be_desktop.svg b/img/clip/be_desktop.svg index c1e5bff..35c266e 100644 --- a/img/clip/be_desktop.svg +++ b/img/clip/be_desktop.svg @@ -1,50 +1,25 @@ -image/svg+xml - + + + + + image/svg+xml + + + + + + + + + + \ No newline at end of file diff --git a/img/clip/do_desktop.svg b/img/clip/do_desktop.svg index 31ef9c6..c0f5b9e 100644 --- a/img/clip/do_desktop.svg +++ b/img/clip/do_desktop.svg @@ -1,50 +1,25 @@ -image/svg+xml - + + + + + + image/svg+xml + + + + + + + + + \ No newline at end of file diff --git a/img/clip/love_desktop.svg b/img/clip/love_desktop.svg index 47804b4..b107b7c 100644 --- a/img/clip/love_desktop.svg +++ b/img/clip/love_desktop.svg @@ -1,11 +1,25 @@ - - - - - - + + + + + + + + image/svg+xml + + + + + + + + + + + \ No newline at end of file diff --git a/img/clip/think_desktop.svg b/img/clip/think_desktop.svg index a2d7777..7c25e6f 100644 --- a/img/clip/think_desktop.svg +++ b/img/clip/think_desktop.svg @@ -1,21 +1,25 @@ - - - - - - - - + + + + + + + + image/svg+xml + + + + + + + + + + + \ No newline at end of file diff --git a/js/myloadmore.js b/js/myloadmore.js index 8c54381..d331b61 100644 --- a/js/myloadmore.js +++ b/js/myloadmore.js @@ -1,40 +1,40 @@ jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error - $('.misha_loadmore').click(function () { + // $('.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) + // 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) { + // $.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('

Betö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") + // 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 + // 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 - } - } - }); - }); + // // 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 3755ec5..bc3720f 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -203,12 +203,6 @@ $(".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() }) @@ -242,14 +236,25 @@ nextelem = target } - // var offset = ($(nextelem).offset().left) - desktophomemargin var offset = ($(nextelem).position().left) + //if loadmore is the next, do not scroll, but load + + if ($(nextelem).attr("class") == "misha_loadmore") { + loadmore() + return target + } else { + //from the third wrap modify the offset + var wNum = parseInt($(nextelem).attr("class").split(" ")[1].split("-")[2]) + if (wNum > 3) { + offset = offset - desktophomemargin + } + } console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset) - $('html, body').stop().animate({ scrollLeft: offset }, 800); + $('html, body, .wrapper').stop().animate({ scrollLeft: offset }, 800); return nextelem; } - //extractDelta(e): extract the scroll length from an event + //extractDelta(e): extract the scroll direction and length from an event function extractDelta(e) { if (e.wheelDelta) { return e.wheelDelta; @@ -268,11 +273,12 @@ } } - var currElem = $('article:first-child') + const selector = 'main>#content>div' + + var currElem = $(selector + ':first-child') //checking the current scroll location for refresh: if (isHome & !isMobile) { - var selector = 'main>#content>div' var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width var currscroll = $('html').scrollLeft() var scrollnr = Math.floor(currscroll / articleWidth) + 1 @@ -333,8 +339,83 @@ currElem = homeScroll(currElem, "next") }) + /* ----------------------------- loadmore click ----------------------------- */ + $('.misha_loadmore').click(function (e) { + e.preventDefault() + loadmore($(this)) + }); + + var noMoreAjax = false + + function loadmore(element){ + if (noMoreAjax) { + console.log("no more ajax") + return false + } + // var button = $(this), + var button = element || $('.misha_loadmore'), + 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") + + $.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) { + if (data.length < 100) { + button.children().remove(); // if last page, remove the button + noMoreAjax = true + return false + } + + button.html('Mutass többet').before(data); // insert new posts + misha_loadmore_params.current_page++; + button.trigger("moreload-finish") + console.log(data.length) + + // you can also fire the "post-load" event here if you use a plugin that requires it + // $( document.body ).trigger( 'post-load' ); + + } else { + button.children().remove(); // if no data, remove the button as well + noMoreAjax = true + console.log("no data") + } + } + }); + } + /* ------------------------------ hover on home ----------------------------- */ + //hover on big articles + $(".home-big h2>a").hover(function () { + let cc = $(this) + //make width more + cc.parents("article").addClass("hovered") + //change bg + // $(this).parents('article').animate({}) + //animate metadata + + //show excerpt + }, function () { + let cc = $(this) + //width back to normal + cc.parents("article").removeClass("hovered") + + + }) + + + //hover on small articles function showTitle(th) { $(th).children("h2").show() $(th).children(".metadata").addClass("vis") @@ -358,6 +439,7 @@ } }, '.home-small'); + //touch on small articles $(document).on({ 'touchend': function (e) { e.preventDefault() diff --git a/loadmore.php b/loadmore.php index b33afd6..0f4d3de 100644 --- a/loadmore.php +++ b/loadmore.php @@ -3,5 +3,5 @@ // don't display the button if there are not enough posts if ( $wp_query->max_num_pages > 1 ) - echo '
Tovább
'; // you can use as well + echo '
Mutass többet
'; // you can use as well ?> \ No newline at end of file diff --git a/loop.php b/loop.php index c97cb5d..5935940 100644 --- a/loop.php +++ b/loop.php @@ -9,7 +9,7 @@ - "; - display: block; - height: 1px; - width: 100%; - background: #000; - } /* -------------------------------- thumbnail and title ------------------------------- */ .thumbnailwrapper { height: calc(100% - #{$desktop-top-margin}); - img.attachment-home-thumbnail { + display: flex; + flex-direction: row; + justify-content: flex-start; + border-top: 1px #000 solid; + img.attachment-home-big-thumbnail { object-fit: cover; width: 50%; height: 100%; @@ -727,13 +732,22 @@ $desktop-bottom-margin-double: 4rem; display: block; border-right: #000 solid 1px; } - .postedon { - } } //metadata end + + /* ------------------------- home article big hover ------------------------- */ + &.hovered { + width: calc(100vw - (#{$desktop-home-margin} * 2)); + h2>a{ + color: #000; + } + } } } .home-wrapper-1 { article { + a.thumbnailwrapper { + justify-content: flex-end; + } } } .home-wrapper-2 { @@ -749,6 +763,7 @@ $desktop-bottom-margin-double: 4rem; .home-wrapper-small { width: calc(100vw - (#{$desktop-home-margin} * 3)); height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2); + flex-shrink: 0; display: flex; flex-direction: row; flex-wrap: wrap; @@ -772,14 +787,13 @@ $desktop-bottom-margin-double: 4rem; } .metadata { - width: 100%; height: 20%; position: absolute; bottom: 0; right: 0; - + background: transparent; display: flex; @@ -789,7 +803,7 @@ $desktop-bottom-margin-double: 4rem; align-items: stretch; @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent); display: none; - &.vis{ + &.vis { display: flex; } } @@ -1069,9 +1083,12 @@ $desktop-bottom-margin-double: 4rem; @media #{$smalldesktop} { &.home-big { h2 a { - color: $color !important; + color: $color; } } + &.home-big.hovered{ + background-color: $color !important; + } &.home-small { .metadata, .metadata a { @@ -1081,10 +1098,17 @@ $desktop-bottom-margin-double: 4rem; } } -@mixin tagclip($tag){ +@mixin tagclip($tag) { @media #{$smalldesktop} { - .thumbnailwrapper>img{ - clip-path: url(../img/clip/#{$tag}_desktop.svg) + .thumbnailwrapper > img { + -webkit-mask: url(../img/clip/#{$tag}_desktop.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; + // -webkit-clip-path: url(../img/clip/#{$tag}_desktop.svg); + // clip-path: url(../img/clip/#{$tag}_desktop.svg#clipper); + mask: url(../img/clip/#{$tag}_desktop.svg); + mask-repeat: no-repeat; + mask-size: 100%; } } } @@ -1106,29 +1130,29 @@ $desktop-bottom-margin-double: 4rem; .tag-be { @include tagcolors(#00ffb8); - &.random{ - @include tagclip(be) + &.random { + @include tagclip(be); } } .tag-do { @include tagcolors(#ff5f5f); - &.random{ - @include tagclip(do) + &.random { + @include tagclip(do); } } .tag-think { @include tagcolors(#fdff00); - &.random{ - @include tagclip(think) + &.random { + @include tagclip(think); } } .tag-love { @include tagcolors(#3c00ff); - &.random{ - @include tagclip(love) + &.random { + @include tagclip(love); } }