From 48e247e0f97b770232178a105a835da0cb6935cf Mon Sep 17 00:00:00 2001 From: infeeeee Date: Mon, 24 Jun 2019 02:37:58 +0200 Subject: [PATCH] home, tag archive improvements --- KÉZIKÖNYV.md | 20 +- _jegyzet.md | 10 +- archive.php | 22 +- css/base.css | 510 +++++++++++++++++++++++++++---------- functions.php | 50 ++-- img/clip/be_desktop.png | Bin 0 -> 1604 bytes img/clip/do_desktop.png | Bin 0 -> 1039 bytes img/clip/love_desktop.png | Bin 0 -> 1363 bytes img/clip/think_desktop.png | Bin 0 -> 2398 bytes img/kereso_icon.png | Bin 493 -> 995 bytes img/kereso_icon.svg | 12 +- js/scripts.js | 60 ++++- loop.php | 5 +- sass/_font-mixins.scss | 38 ++- sass/base.scss | 321 ++++++++++++++++------- 15 files changed, 768 insertions(+), 280 deletions(-) create mode 100644 img/clip/be_desktop.png create mode 100644 img/clip/do_desktop.png create mode 100644 img/clip/love_desktop.png create mode 100644 img/clip/think_desktop.png diff --git a/KÉZIKÖNYV.md b/KÉZIKÖNYV.md index 4f75af8..5d253b2 100644 --- a/KÉZIKÖNYV.md +++ b/KÉZIKÖNYV.md @@ -10,7 +10,7 @@ esemény cat-id-t átírni!! settings>reading>Blog pages show at most 6 -## Paraméterek +## Paraméterek, elemek szerkesztése ### Bejegyzések @@ -28,6 +28,24 @@ dis-esemeny-datum dis-esemeny-link +### BE-DO-THINK-LOVE Tagek + +A leírást két helyen is szerkeszteni kell: + +1. Ami a hoverre megjelenik azt itt kell szerkeszteni: + + Megjelenés>Menük>tags (Tag menu)>Választás>Menü elem lenyitása. + + Ha nincs ott a leírás menü, akkor fent: + + Mit lássunk?>Mutassa a bővített menü részleteit-Leírás + +2. Ami a listázott oldalon megjelenik azt itt kell szerkeszteni: + + Bejegyzés>Címkék>Szerkesztés + + + ## Developement verzió telepítése Szükséges: python2, gulp global, max node 11 diff --git a/_jegyzet.md b/_jegyzet.md index dc9e0f7..61ef9e5 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -51,7 +51,7 @@ szerzőnek is paraméter, és kattinható Single: - - Nem kell carousel a felső oldalra + - ~Nem kell carousel a felső oldalra~ - crop thumbnail a fenti képnél - állókép körbefut a szöveg!!!! - galéria: mobilon fix 2, column számot lehessen használni asztalin @@ -60,15 +60,15 @@ Menü: csík küzépen, két részben, két küön menü BEDO kör: forog, - - hover, megáll, fekete megjelenik, nagyszüvegre megy a be-kat-ra + - ~hover, megáll, fekete megjelenik, nagyszüvegre megy a be-kat-ra~ - kattintás a szóra: Kategória lap: első csempe kimarad. Kereső: - - teljes lábléc magasságban, hosszabban fusson ki - - ne legyen hover, - - focus + - ~teljes lábléc magasságban, hosszabban fusson ki~ + - ~ne legyen hover~, + - ~focus~ # Kérdések diff --git a/archive.php b/archive.php index cad9129..d5ba1d5 100644 --- a/archive.php +++ b/archive.php @@ -1,10 +1,8 @@ -
- -

- "> +

+ + + + + + + + + + '; echo tag_description(); echo ""; } ?> - - - diff --git a/css/base.css b/css/base.css index e51dc48..b9b1c5a 100644 --- a/css/base.css +++ b/css/base.css @@ -104,6 +104,9 @@ object { /* ========================================================================== */ /* SEARCH */ /* ========================================================================== */ + /* ------------------------------ search mobile ----------------------------- */ + /* ----------------------------- search desktop ----------------------------- */ + /* -------------------- header scroll: scroll with click -------------------- */ /* ========================================================================== */ /* MENUS */ /* ========================================================================== */ @@ -134,8 +137,14 @@ object { align-content: space-between; z-index: 3100; background: #fff; } - .wrapper .header .header-1 > div:not(#sidebar), - .wrapper .header .header-2 > div:not(#sidebar) { + .wrapper .header .header-1 .logo, + .wrapper .header .header-1 .social-link, + .wrapper .header .header-1 .menubutton, + .wrapper .header .header-1 .events-link, + .wrapper .header .header-2 .logo, + .wrapper .header .header-2 .social-link, + .wrapper .header .header-2 .menubutton, + .wrapper .header .header-2 .events-link { filter: invert(100); } } .wrapper .header .header-1 div, .wrapper .header .header-2 div { @@ -220,21 +229,11 @@ object { margin: 0; } } .wrapper .header .search-box { display: none; } - @media (min-width: 769px) { - .wrapper .header .search-box { - display: block; - flex: 1 1 0 !important; } } - @media (min-width: 769px) { - .wrapper .header .search-bar { - display: none; - position: absolute; - width: 0; - left: 7rem; - top: 0; } } .wrapper .header .search-bar form.search { display: flex; flex-direction: row; - border-bottom: #fff 1px solid; } + border-bottom: #fff 1px solid; + background-color: #000; } .wrapper .header .search-bar form.search input { font: 900 4rem "Westeinde Caption"; color: #000; @@ -245,14 +244,36 @@ object { caret-color: #fff; flex: 1 1 auto; width: 1rem; } - .wrapper .header .search-bar form.search input:hover { - color: #fff; } @media (min-width: 769px) { .wrapper .header .search-bar form.search input { - font-size: 2.5rem; } } + font-size: 4rem; + color: #000 !important; + -webkit-text-stroke: unset !important; } } .wrapper .header .search-bar form.search button { flex: 0 0 auto; } - @media (min-width: 769px) { + @media (max-width: 768px) { + .wrapper .header .search-bar form.search button { + filter: invert(100); } } + @media (min-width: 769px) { + .wrapper .header .search-box { + display: block; + flex: 1 1 0 !important; } + .wrapper .header .search-bar { + display: none; + position: fixed; + width: 0; + left: 10rem; + bottom: 0; + height: 10rem; } + .wrapper .header .search-bar form.search { + border-bottom: none; + height: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; } + .wrapper .header .search-bar form.search input { + padding: 0 5rem; } .wrapper .header .search-bar form.search button { display: none; } } .wrapper .header .header-scroll { @@ -319,8 +340,10 @@ object { color: transparent; -webkit-text-stroke: #000 1px; text-transform: uppercase; } - .wrapper .header #tag-nav ul.current { + .wrapper .header #tag-nav ul.pause { -webkit-text-stroke: #fff 1px !important; } + .wrapper .header #tag-nav ul.current { + -webkit-text-stroke: #000 1px !important; } @media (min-width: 769px) { .wrapper .header #tag-nav ul { font-size: 1.2rem; } } @@ -341,8 +364,10 @@ object { @media (min-width: 769px) { .wrapper .header #tag-nav ul li a span { height: 3rem; } } - .wrapper .header #tag-nav ul li a span.current { + .wrapper .header #tag-nav ul li a span.pause { -webkit-text-stroke: #fff 1px !important; } + .wrapper .header #tag-nav ul li a span.current { + -webkit-text-stroke: #000 1px !important; } @media (min-width: 769px) { .wrapper .header #tag-nav ul li a span { font-size: 1.2rem; } } @@ -352,9 +377,9 @@ object { -ms-transform: rotate(21.17647deg); -webkit-transform: rotate(21.17647deg); transform: rotate(21.17647deg); - -webkit-animation: spin1 4s linear infinite; - -moz-animation: spin1 4s linear infinite; - animation: spin1 4s linear infinite; } + -webkit-animation: spin1 10s linear infinite; + -moz-animation: spin1 10s linear infinite; + animation: spin1 10s linear infinite; } @-moz-keyframes spin1 { 100% { @@ -374,9 +399,9 @@ object { -ms-transform: rotate(42.35294deg); -webkit-transform: rotate(42.35294deg); transform: rotate(42.35294deg); - -webkit-animation: spin2 4s linear infinite; - -moz-animation: spin2 4s linear infinite; - animation: spin2 4s linear infinite; } + -webkit-animation: spin2 10s linear infinite; + -moz-animation: spin2 10s linear infinite; + animation: spin2 10s linear infinite; } @-moz-keyframes spin2 { 100% { @@ -396,9 +421,9 @@ object { -ms-transform: rotate(63.52941deg); -webkit-transform: rotate(63.52941deg); transform: rotate(63.52941deg); - -webkit-animation: spin3 4s linear infinite; - -moz-animation: spin3 4s linear infinite; - animation: spin3 4s linear infinite; } + -webkit-animation: spin3 10s linear infinite; + -moz-animation: spin3 10s linear infinite; + animation: spin3 10s linear infinite; } @-moz-keyframes spin3 { 100% { @@ -418,9 +443,9 @@ object { -ms-transform: rotate(84.70588deg); -webkit-transform: rotate(84.70588deg); transform: rotate(84.70588deg); - -webkit-animation: spin4 4s linear infinite; - -moz-animation: spin4 4s linear infinite; - animation: spin4 4s linear infinite; } + -webkit-animation: spin4 10s linear infinite; + -moz-animation: spin4 10s linear infinite; + animation: spin4 10s linear infinite; } @-moz-keyframes spin4 { 100% { @@ -440,9 +465,9 @@ object { -ms-transform: rotate(105.88235deg); -webkit-transform: rotate(105.88235deg); transform: rotate(105.88235deg); - -webkit-animation: spin5 4s linear infinite; - -moz-animation: spin5 4s linear infinite; - animation: spin5 4s linear infinite; } + -webkit-animation: spin5 10s linear infinite; + -moz-animation: spin5 10s linear infinite; + animation: spin5 10s linear infinite; } @-moz-keyframes spin5 { 100% { @@ -462,9 +487,9 @@ object { -ms-transform: rotate(127.05882deg); -webkit-transform: rotate(127.05882deg); transform: rotate(127.05882deg); - -webkit-animation: spin6 4s linear infinite; - -moz-animation: spin6 4s linear infinite; - animation: spin6 4s linear infinite; } + -webkit-animation: spin6 10s linear infinite; + -moz-animation: spin6 10s linear infinite; + animation: spin6 10s linear infinite; } @-moz-keyframes spin6 { 100% { @@ -484,9 +509,9 @@ object { -ms-transform: rotate(148.23529deg); -webkit-transform: rotate(148.23529deg); transform: rotate(148.23529deg); - -webkit-animation: spin7 4s linear infinite; - -moz-animation: spin7 4s linear infinite; - animation: spin7 4s linear infinite; } + -webkit-animation: spin7 10s linear infinite; + -moz-animation: spin7 10s linear infinite; + animation: spin7 10s linear infinite; } @-moz-keyframes spin7 { 100% { @@ -506,9 +531,9 @@ object { -ms-transform: rotate(169.41176deg); -webkit-transform: rotate(169.41176deg); transform: rotate(169.41176deg); - -webkit-animation: spin8 4s linear infinite; - -moz-animation: spin8 4s linear infinite; - animation: spin8 4s linear infinite; } + -webkit-animation: spin8 10s linear infinite; + -moz-animation: spin8 10s linear infinite; + animation: spin8 10s linear infinite; } @-moz-keyframes spin8 { 100% { @@ -528,9 +553,9 @@ object { -ms-transform: rotate(190.58824deg); -webkit-transform: rotate(190.58824deg); transform: rotate(190.58824deg); - -webkit-animation: spin9 4s linear infinite; - -moz-animation: spin9 4s linear infinite; - animation: spin9 4s linear infinite; } + -webkit-animation: spin9 10s linear infinite; + -moz-animation: spin9 10s linear infinite; + animation: spin9 10s linear infinite; } @-moz-keyframes spin9 { 100% { @@ -550,9 +575,9 @@ object { -ms-transform: rotate(211.76471deg); -webkit-transform: rotate(211.76471deg); transform: rotate(211.76471deg); - -webkit-animation: spin10 4s linear infinite; - -moz-animation: spin10 4s linear infinite; - animation: spin10 4s linear infinite; } + -webkit-animation: spin10 10s linear infinite; + -moz-animation: spin10 10s linear infinite; + animation: spin10 10s linear infinite; } @-moz-keyframes spin10 { 100% { @@ -572,9 +597,9 @@ object { -ms-transform: rotate(232.94118deg); -webkit-transform: rotate(232.94118deg); transform: rotate(232.94118deg); - -webkit-animation: spin11 4s linear infinite; - -moz-animation: spin11 4s linear infinite; - animation: spin11 4s linear infinite; } + -webkit-animation: spin11 10s linear infinite; + -moz-animation: spin11 10s linear infinite; + animation: spin11 10s linear infinite; } @-moz-keyframes spin11 { 100% { @@ -594,9 +619,9 @@ object { -ms-transform: rotate(254.11765deg); -webkit-transform: rotate(254.11765deg); transform: rotate(254.11765deg); - -webkit-animation: spin12 4s linear infinite; - -moz-animation: spin12 4s linear infinite; - animation: spin12 4s linear infinite; } + -webkit-animation: spin12 10s linear infinite; + -moz-animation: spin12 10s linear infinite; + animation: spin12 10s linear infinite; } @-moz-keyframes spin12 { 100% { @@ -616,9 +641,9 @@ object { -ms-transform: rotate(275.29412deg); -webkit-transform: rotate(275.29412deg); transform: rotate(275.29412deg); - -webkit-animation: spin13 4s linear infinite; - -moz-animation: spin13 4s linear infinite; - animation: spin13 4s linear infinite; } + -webkit-animation: spin13 10s linear infinite; + -moz-animation: spin13 10s linear infinite; + animation: spin13 10s linear infinite; } @-moz-keyframes spin13 { 100% { @@ -638,9 +663,9 @@ object { -ms-transform: rotate(296.47059deg); -webkit-transform: rotate(296.47059deg); transform: rotate(296.47059deg); - -webkit-animation: spin14 4s linear infinite; - -moz-animation: spin14 4s linear infinite; - animation: spin14 4s linear infinite; } + -webkit-animation: spin14 10s linear infinite; + -moz-animation: spin14 10s linear infinite; + animation: spin14 10s linear infinite; } @-moz-keyframes spin14 { 100% { @@ -660,9 +685,9 @@ object { -ms-transform: rotate(317.64706deg); -webkit-transform: rotate(317.64706deg); transform: rotate(317.64706deg); - -webkit-animation: spin15 4s linear infinite; - -moz-animation: spin15 4s linear infinite; - animation: spin15 4s linear infinite; } + -webkit-animation: spin15 10s linear infinite; + -moz-animation: spin15 10s linear infinite; + animation: spin15 10s linear infinite; } @-moz-keyframes spin15 { 100% { @@ -682,9 +707,9 @@ object { -ms-transform: rotate(338.82353deg); -webkit-transform: rotate(338.82353deg); transform: rotate(338.82353deg); - -webkit-animation: spin16 4s linear infinite; - -moz-animation: spin16 4s linear infinite; - animation: spin16 4s linear infinite; } + -webkit-animation: spin16 10s linear infinite; + -moz-animation: spin16 10s linear infinite; + animation: spin16 10s linear infinite; } @-moz-keyframes spin16 { 100% { @@ -704,9 +729,9 @@ object { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); - -webkit-animation: spin17 4s linear infinite; - -moz-animation: spin17 4s linear infinite; - animation: spin17 4s linear infinite; } + -webkit-animation: spin17 10s linear infinite; + -moz-animation: spin17 10s linear infinite; + animation: spin17 10s linear infinite; } @-moz-keyframes spin17 { 100% { @@ -722,13 +747,84 @@ object { transform: rotate(720deg); } } .wrapper .header #tag-nav ul li a span.pause { animation-play-state: paused; } - .wrapper .header #tag-nav .sub-wrapper { + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper { position: fixed; + display: none; right: 10rem; left: 10rem; top: 0; background-color: #000; - height: 50vh; } + height: 50vh; + z-index: -1; + flex-direction: row; + justify-content: flex-start; + align-items: center; } + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper.opened { + display: flex; } + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper a { + font: 900 12rem "Westeinde Caption"; + color: transparent; + -webkit-text-stroke: #fff 1px; + text-transform: uppercase; + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + transform-origin: 50% 50%; + display: block; + width: calc(30% + 24rem); + text-align: center; + height: fit-content; } + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span { + display: block; + position: absolute; + bottom: 0; + right: 0; + height: 24rem; + width: 70%; + padding: 4rem; + padding-left: 32rem; + padding-right: 16rem; + font: 900 1.4rem "Westeinde Caption"; + color: #fff; } + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span::after { + position: absolute; + content: ""; + display: block; + top: 0; + border: none; + width: calc(100% - 24rem); + border-top: #fff 1px solid; + background-color: transparent; + left: calc(24rem); + margin-left: -0; } + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span::before { + display: block; + content: ""; + position: absolute; + width: calc(24rem); + height: calc(24rem); + top: 0; + background-color: transparent; + z-index: 9; + left: -0; + border-left: #fff 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; } + .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span .circle { + width: 4rem; + height: 4rem; + border-radius: 50%; + background: #fff; + position: absolute; + right: 0; + top: 0; + margin: 2rem; } .wrapper main { z-index: 1; } .wrapper main section { @@ -739,9 +835,8 @@ object { position: absolute; background-color: #fff; padding: 2rem; - bottom: 49%; right: 0; - width: 50vw; + min-width: 50vw; text-align: center; font: bold 1rem "Westeinde Caption"; color: #000; @@ -778,7 +873,7 @@ object { .wrapper main section .misha_loadmore a, .wrapper main section .misha_loadmore p { font: bold 3rem "Westeinde Caption"; - color: #fff; + color: transparent; -webkit-text-stroke: #000 1px; } @media (-webkit-min-device-pixel-ratio: 2.1) { .wrapper main section .misha_loadmore a, @@ -856,6 +951,7 @@ object { .home main section { /* --------------------------- home article mobile/default -------------------------- */ /* ------------------------ home article desktop big ------------------------ */ + /* ------------------------------------ - ----------------------------------- */ /* ----------------------- articles desktop small ----------------------- */ } @media (min-width: 769px) { .archive main section, @@ -868,37 +964,61 @@ object { .archive main section article, .home main section article { height: 100vh; } - @media (min-width: 769px) { - .archive main section article > a, - .home main section article > a { - margin: 0; - padding: 0; - border: none; - display: inline-block; } - .archive main section article .thumbnailwrapper img.attachment-home-thumbnail, - .home main section article .thumbnailwrapper img.attachment-home-thumbnail { - height: 50vh; - width: 100vw; - object-fit: cover; } - .archive main section article h2, - .home main section article h2 { - width: 100%; - height: 50vh; - padding: 2rem; - padding-top: 3rem; - margin: 0; } - .archive main section article h2 a, - .home main section article h2 a { - font: bold 3rem "Westeinde Caption"; - color: #000; } } - @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) { + .archive main section article > a, + .home main section article > a { + margin: 0; + padding: 0; + border: none; + display: inline-block; } + .archive main section article .thumbnailwrapper img, + .home main section article .thumbnailwrapper img { + height: 50vh; + width: 100vw; + object-fit: cover; } + .archive main section article h2, + .home main section article h2 { + width: 100%; + height: 50vh; + padding: 2rem; + padding-top: 3rem; + margin: 0; } .archive main section article h2 a, .home main section article h2 a { - font-size: 2.5rem !important; } } - @media (min-width: 769px) and (min-width: 769px) { - .archive main section article h2 a, - .home main section article h2 a { - font-size: 5rem; } } + font: bold 3rem "Westeinde Caption"; + color: #000; } + @media (-webkit-min-device-pixel-ratio: 2.1) { + .archive main section article h2 a, + .home main section article h2 a { + font-size: 2.5rem !important; } } + @media (min-width: 769px) { + .archive main section article h2 a, + .home main section article h2 a { + font-size: 5rem; } } + .archive main section article .metadata, + .home main section article .metadata { + bottom: 50%; + height: 5rem; + display: flex; + width: fit-content; + justify-content: space-around; + flex-wrap: nowrap; + align-items: center; + padding: 0; } + .archive main section article .metadata .vr, + .home main section article .metadata .vr { + height: 100%; + width: 1px; + background-color: #000; + flex-grow: 0 !important; + flex-shrink: 0 !important; + flex-basis: auto !important; } + .archive main section article .metadata .bevezeto, + .archive main section article .metadata .alcim, + .archive main section article .metadata .curvyArrow, + .home main section article .metadata .bevezeto, + .home main section article .metadata .alcim, + .home main section article .metadata .curvyArrow { + display: none; } @media (min-width: 769px) { .archive main section .home-wrapper-big, .home main section .home-wrapper-big { @@ -963,12 +1083,6 @@ object { .home main section .home-wrapper-big article .metadata .categories { display: block; padding: 0 5rem; } - .archive main section .home-wrapper-big article .metadata .vr, - .home main section .home-wrapper-big article .metadata .vr { - height: 100%; - width: 1px; - 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; } @@ -1155,7 +1269,7 @@ object { .home main section .home-wrapper-small .archivetitle .metadata, .home main section .home-wrapper-small .archivedescription .metadata { width: 100%; - height: 20%; + height: 5rem; position: absolute; bottom: 0; right: 0; @@ -1163,7 +1277,7 @@ object { display: flex; flex-direction: row; padding: 0; - justify-content: flex-end; + justify-content: space-between; align-items: stretch; display: none; } .archive main section .home-wrapper-small article .metadata::after, @@ -1177,10 +1291,10 @@ object { display: block; top: 0; border: none; - width: calc(100% - 4rem); + width: calc(100% - 5rem); border-top: #000 1px solid; background-color: transparent; - left: calc(4rem); + left: calc(5rem); margin-left: -0; } .archive main section .home-wrapper-small article .metadata::before, .archive main section .home-wrapper-small .archivetitle .metadata::before, @@ -1191,8 +1305,8 @@ object { display: block; content: ""; position: absolute; - width: calc(4rem); - height: calc(4rem); + width: calc(5rem); + height: calc(5rem); top: 0; background-color: transparent; z-index: 9; @@ -1210,7 +1324,44 @@ object { .home main section .home-wrapper-small article .metadata.vis, .home main section .home-wrapper-small .archivetitle .metadata.vis, .home main section .home-wrapper-small .archivedescription .metadata.vis { - display: flex; } } + display: flex; } + .archive main section .home-wrapper-small article .metadata .categories, + .archive main section .home-wrapper-small article .metadata .postedon, + .archive main section .home-wrapper-small .archivetitle .metadata .categories, + .archive main section .home-wrapper-small .archivetitle .metadata .postedon, + .archive main section .home-wrapper-small .archivedescription .metadata .categories, + .archive main section .home-wrapper-small .archivedescription .metadata .postedon, + .home main section .home-wrapper-small article .metadata .categories, + .home main section .home-wrapper-small article .metadata .postedon, + .home main section .home-wrapper-small .archivetitle .metadata .categories, + .home main section .home-wrapper-small .archivetitle .metadata .postedon, + .home main section .home-wrapper-small .archivedescription .metadata .categories, + .home main section .home-wrapper-small .archivedescription .metadata .postedon { + font: bold 1rem "Westeinde Caption"; + color: #000; + padding: 2rem; } } + @media (min-width: 769px) and (min-width: 769px) { + .archive main section .home-wrapper-small article .metadata .categories, + .archive main section .home-wrapper-small article .metadata .postedon, + .archive main section .home-wrapper-small .archivetitle .metadata .categories, + .archive main section .home-wrapper-small .archivetitle .metadata .postedon, + .archive main section .home-wrapper-small .archivedescription .metadata .categories, + .archive main section .home-wrapper-small .archivedescription .metadata .postedon, + .home main section .home-wrapper-small article .metadata .categories, + .home main section .home-wrapper-small article .metadata .postedon, + .home main section .home-wrapper-small .archivetitle .metadata .categories, + .home main section .home-wrapper-small .archivetitle .metadata .postedon, + .home main section .home-wrapper-small .archivedescription .metadata .categories, + .home main section .home-wrapper-small .archivedescription .metadata .postedon { + font-size: 1.2rem; } } + @media (min-width: 769px) { + .archive main section .home-wrapper-small article .metadata .categories, + .archive main section .home-wrapper-small .archivetitle .metadata .categories, + .archive main section .home-wrapper-small .archivedescription .metadata .categories, + .home main section .home-wrapper-small article .metadata .categories, + .home main section .home-wrapper-small .archivetitle .metadata .categories, + .home main section .home-wrapper-small .archivedescription .metadata .categories { + margin-left: 6rem; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home-wrapper-small article h2, .archive main section .home-wrapper-small article h2 a, @@ -1226,7 +1377,7 @@ object { .home main section .home-wrapper-small .archivedescription h2 a { font-size: 1.2rem; -webkit-text-stroke: #000 1px; - color: #fff; } } + color: transparent; } } @media (min-width: 769px) { .archive main section .home-wrapper-small article h2, .archive main section .home-wrapper-small .archivetitle h2, @@ -1258,18 +1409,7 @@ object { justify-content: flex-end; align-items: flex-start; padding: 2rem; - border-right: #000 1px solid; - font: bold 3rem "Westeinde Caption"; - color: #000; } } - @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) { - .archive main section .home-wrapper-small .archivetitle, - .home main section .home-wrapper-small .archivetitle { - font-size: 2.5rem !important; } } - @media (min-width: 769px) and (min-width: 769px) { - .archive main section .home-wrapper-small .archivetitle, - .home main section .home-wrapper-small .archivetitle { - font-size: 5rem; } } - @media (min-width: 769px) { + border-right: #000 1px solid; } .archive main section .home-wrapper-small .archivetitle::after, .home main section .home-wrapper-small .archivetitle::after { position: absolute; @@ -1300,12 +1440,36 @@ object { -webkit-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: left bottom; } + .archive main section .home-wrapper-small .archivetitle h1, + .home main section .home-wrapper-small .archivetitle h1 { + font: bold 3rem "Westeinde Caption"; + color: #000; + margin: 0; } } + @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) { + .archive main section .home-wrapper-small .archivetitle h1, + .home main section .home-wrapper-small .archivetitle h1 { + font-size: 2.5rem !important; } } + @media (min-width: 769px) and (min-width: 769px) { + .archive main section .home-wrapper-small .archivetitle h1, + .home main section .home-wrapper-small .archivetitle h1 { + font-size: 5rem; } } + @media (min-width: 769px) { .archive main section .home-wrapper-small .archivetitle.tag, .home main section .home-wrapper-small .archivetitle.tag { - text-transform: uppercase; } + order: 1; } + .archive main section .home-wrapper-small .archivetitle.tag h1, + .home main section .home-wrapper-small .archivetitle.tag h1 { + text-transform: uppercase; } + .archive main section .home-wrapper-small .archivetitle > object, + .home main section .home-wrapper-small .archivetitle > object { + position: absolute; + top: 2rem; + right: 2rem; + width: 5rem; + height: 5rem; } .archive main section .home-wrapper-small .archivedescription, .home main section .home-wrapper-small .archivedescription { - order: 1; + order: 4; border-top: #000 1px solid; border-right: #000 1px solid; border-bottom: #000 1px solid; @@ -1590,6 +1754,9 @@ object { /* -------------------------------------------------------------------------- */ .tag-be .metadata { color: #00ffb8 !important; } + @media (max-width: 768px) { + .tag-be .metadata .vr { + background-color: #00ffb8 !important; } } .tag-be .metadata a { color: #00ffb8 !important; } @@ -1614,6 +1781,23 @@ object { .tag-be.home-small .metadata a { color: #000 !important; } } +.tag-be.bedo-sub-wrapper > a { + -webkit-text-stroke: #00ffb8 1px !important; } + +.tag-be.bedo-sub-wrapper span { + color: #00ffb8 !important; } + +.tag-be.bedo-sub-wrapper .circle { + background-color: #00ffb8 !important; } + +.tag-be.archive.tag { + background-color: #00ffb8 !important; } + .tag-be.archive.tag .header-1, + .tag-be.archive.tag .header-2 { + background-color: #00ffb8 !important; } + .tag-be.archive.tag article * { + background-color: #00ffb8 !important; } + @media (min-width: 769px) { .tag-be.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/be_desktop.svg); @@ -1625,6 +1809,9 @@ object { .tag-do .metadata { color: #ff5f5f !important; } + @media (max-width: 768px) { + .tag-do .metadata .vr { + background-color: #ff5f5f !important; } } .tag-do .metadata a { color: #ff5f5f !important; } @@ -1649,6 +1836,23 @@ object { .tag-do.home-small .metadata a { color: #000 !important; } } +.tag-do.bedo-sub-wrapper > a { + -webkit-text-stroke: #ff5f5f 1px !important; } + +.tag-do.bedo-sub-wrapper span { + color: #ff5f5f !important; } + +.tag-do.bedo-sub-wrapper .circle { + background-color: #ff5f5f !important; } + +.tag-do.archive.tag { + background-color: #ff5f5f !important; } + .tag-do.archive.tag .header-1, + .tag-do.archive.tag .header-2 { + background-color: #ff5f5f !important; } + .tag-do.archive.tag article * { + background-color: #ff5f5f !important; } + @media (min-width: 769px) { .tag-do.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/do_desktop.svg); @@ -1660,6 +1864,9 @@ object { .tag-think .metadata { color: #fdff00 !important; } + @media (max-width: 768px) { + .tag-think .metadata .vr { + background-color: #fdff00 !important; } } .tag-think .metadata a { color: #fdff00 !important; } @@ -1684,6 +1891,23 @@ object { .tag-think.home-small .metadata a { color: #000 !important; } } +.tag-think.bedo-sub-wrapper > a { + -webkit-text-stroke: #fdff00 1px !important; } + +.tag-think.bedo-sub-wrapper span { + color: #fdff00 !important; } + +.tag-think.bedo-sub-wrapper .circle { + background-color: #fdff00 !important; } + +.tag-think.archive.tag { + background-color: #fdff00 !important; } + .tag-think.archive.tag .header-1, + .tag-think.archive.tag .header-2 { + background-color: #fdff00 !important; } + .tag-think.archive.tag article * { + background-color: #fdff00 !important; } + @media (min-width: 769px) { .tag-think.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/think_desktop.svg); @@ -1695,6 +1919,9 @@ object { .tag-love .metadata { color: #3c00ff !important; } + @media (max-width: 768px) { + .tag-love .metadata .vr { + background-color: #3c00ff !important; } } .tag-love .metadata a { color: #3c00ff !important; } @@ -1719,6 +1946,23 @@ object { .tag-love.home-small .metadata a { color: #000 !important; } } +.tag-love.bedo-sub-wrapper > a { + -webkit-text-stroke: #3c00ff 1px !important; } + +.tag-love.bedo-sub-wrapper span { + color: #3c00ff !important; } + +.tag-love.bedo-sub-wrapper .circle { + background-color: #3c00ff !important; } + +.tag-love.archive.tag { + background-color: #3c00ff !important; } + .tag-love.archive.tag .header-1, + .tag-love.archive.tag .header-2 { + background-color: #3c00ff !important; } + .tag-love.archive.tag article * { + background-color: #3c00ff !important; } + @media (min-width: 769px) { .tag-love.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/love_desktop.svg); diff --git a/functions.php b/functions.php index fd22a32..433c60d 100644 --- a/functions.php +++ b/functions.php @@ -87,37 +87,38 @@ function dis2019_nav() } //walker for tag menu: bedo circle hover -class Menu_With_Description extends Walker_Nav_Menu { - function start_el(&$output, $item, $depth, $args) { +class Menu_With_Description extends Walker_Nav_Menu +{ + public function start_el(&$output, $item, $depth, $args) + { global $wp_query; - $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; - + $indent = ($depth) ? str_repeat("\t", $depth) : ''; + $class_names = $value = ''; - - $classes = empty( $item->classes ) ? array() : (array) $item->classes; - - $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); - $class_names = ' class="' . esc_attr( $class_names ) . '"'; - - $output .= $indent . '