From 4c443cd7ecf516e52bfe63d7ed48b2fdca9261d2 Mon Sep 17 00:00:00 2001 From: infeeeee Date: Thu, 11 Jul 2019 13:36:28 +0200 Subject: [PATCH] works on single --- KÉZIKÖNYV.md | 2 +- css/base.css | 555 +++++++++++++++++++++++++++++-------- js/scripts.js | 51 +++- page.php | 43 --- sass/base.scss | 256 ++++++++++++++--- single.php => singular.php | 44 ++- 6 files changed, 731 insertions(+), 220 deletions(-) delete mode 100644 page.php rename single.php => singular.php (75%) diff --git a/KÉZIKÖNYV.md b/KÉZIKÖNYV.md index f8b6e77..d4b8b4b 100644 --- a/KÉZIKÖNYV.md +++ b/KÉZIKÖNYV.md @@ -58,7 +58,7 @@ Elválasztók azaz vízszintes vonalak: A cikk elejére és végére automatikus Lightbox működéséhez be kell kapcsolni a hivatkozást! A hivatkozás célját média fájlra állítani! -Interjúnál kérdésekhez idézet blokkot kell használni: Nagyobb betűméret, címke szín alapján háttér +Interjúnál kérdésekhez idézet blokkot vagy Címsor3 (H3) blokkot kell használni, Ugyanúgy néz ki mindkettő ### Események diff --git a/css/base.css b/css/base.css index 05780c3..4d43243 100644 --- a/css/base.css +++ b/css/base.css @@ -1572,16 +1572,20 @@ body.category.category-esemeny main { /* -------------------------------------------------------------------------- */ /* single */ /* -------------------------------------------------------------------------- */ -.single { +.single, +.page { /* ---------------------------- single on mobile ---------------------------- */ /* -------------------------------- lightbox -------------------------------- */ /* ------------------------------ related posts ----------------------------- */ } @media (min-width: 769px) { - .single .wrapper { + .single .wrapper, + .page .wrapper { height: unset; width: 100%; } .single .wrapper .header .header-1, - .single .wrapper .header .header-2 { + .single .wrapper .header .header-2, + .page .wrapper .header .header-1, + .page .wrapper .header .header-2 { background: transparent; border: none; } .single .wrapper .header .header-1 .social-link, @@ -1589,19 +1593,30 @@ body.category.category-esemeny main { .single .wrapper .header .header-1 .events-link, .single .wrapper .header .header-2 .social-link, .single .wrapper .header .header-2 .search-box, - .single .wrapper .header .header-2 .events-link { + .single .wrapper .header .header-2 .events-link, + .page .wrapper .header .header-1 .social-link, + .page .wrapper .header .header-1 .search-box, + .page .wrapper .header .header-1 .events-link, + .page .wrapper .header .header-2 .social-link, + .page .wrapper .header .header-2 .search-box, + .page .wrapper .header .header-2 .events-link { display: none; } } - .single article { - /* ---------------------------- single on desktop --------------------------- */ + .single article, + .page article { + padding-bottom: 5rem; + /* ---------------------------- single header on desktop --------------------------- */ /* ----------------------------- single content ----------------------------- */ } - .single article .thumbnailwrapper { + .single article .thumbnailwrapper, + .page article .thumbnailwrapper { padding: 0; } - .single article .thumbnailwrapper img.attachment-post-thumbnail { + .single article .thumbnailwrapper img.attachment-post-thumbnail, + .page article .thumbnailwrapper img.attachment-post-thumbnail { height: 75vh; width: 100vw; object-fit: cover; padding: 0; } - .single article .titlewrapper { + .single article .titlewrapper, + .page article .titlewrapper { position: absolute; top: 0; width: 100%; @@ -1611,7 +1626,8 @@ body.category.category-esemeny main { justify-content: flex-end; align-content: flex-start; padding: 0; } - .single article .titlewrapper .metadata { + .single article .titlewrapper .metadata, + .page article .titlewrapper .metadata { width: calc(100vw - 5rem); bottom: unset !important; height: 5rem; @@ -1622,13 +1638,16 @@ body.category.category-esemeny main { justify-content: space-between; font: bold 1rem "Westeinde Caption"; } @media (min-width: 769px) { - .single article .titlewrapper .metadata { + .single article .titlewrapper .metadata, + .page article .titlewrapper .metadata { font: 900 2rem "Westeinde Caption"; color: #fff; -webkit-text-stroke: #000 1px; } } - .single article .titlewrapper .metadata .time-cat { + .single article .titlewrapper .metadata .time-cat, + .page article .titlewrapper .metadata .time-cat { z-index: 10; } - .single article .titlewrapper h1.single-title { + .single article .titlewrapper h1.single-title, + .page article .titlewrapper h1.single-title { margin: 0; font: 800 3rem "Butler"; color: #000; @@ -1636,38 +1655,45 @@ body.category.category-esemeny main { padding: 2rem; background-color: #fff; } @media (min-width: 769px) { - .single article .titlewrapper h1.single-title { + .single article .titlewrapper h1.single-title, + .page article .titlewrapper h1.single-title { font-size: 5rem; } } @media (min-width: 769px) { - .single article { + .single article, + .page article { margin-top: 100vh; margin-left: 5rem; background-color: #fff; border-left: #000 solid 1px; padding-left: 5rem; /* ---------------------- title and metadata on desktop --------------------- */ } - .single article .thumbnailwrapper { + .single article .thumbnailwrapper, + .page article .thumbnailwrapper { position: fixed; top: 0; left: 0; z-index: -1; bottom: 0; width: 100%; } - .single article .thumbnailwrapper img.attachment-post-thumbnail { + .single article .thumbnailwrapper img.attachment-post-thumbnail, + .page article .thumbnailwrapper img.attachment-post-thumbnail { object-fit: cover; padding: 0; width: 100%; height: 100%; } - .single article .titlewrapper { + .single article .titlewrapper, + .page article .titlewrapper { position: relative; justify-content: flex-start; height: unset; } - .single article .titlewrapper .metadata { + .single article .titlewrapper .metadata, + .page article .titlewrapper .metadata { top: -5rem; width: 100%; padding-left: 0; padding-right: 10rem; } - .single article .titlewrapper .metadata::after { + .single article .titlewrapper .metadata::after, + .page article .titlewrapper .metadata::after { position: absolute; content: ""; display: block; @@ -1678,7 +1704,8 @@ body.category.category-esemeny main { background-color: white; left: calc(5rem); margin-left: -5rem; } - .single article .titlewrapper .metadata::before { + .single article .titlewrapper .metadata::before, + .page article .titlewrapper .metadata::before { display: block; content: ""; position: absolute; @@ -1696,62 +1723,97 @@ body.category.category-esemeny main { transform: skewX(-45deg); transform-origin: left bottom; border-top: #000 solid 1px; } - .single article .titlewrapper h1.single-title { + .single article .titlewrapper h1.single-title, + .page article .titlewrapper h1.single-title { background-color: transparent; min-height: unset; top: -5rem; position: relative; padding-right: 10rem; padding-left: 0; } } - .single article .single-content { + .single article hr, + .page article hr { + height: 1px; + background-color: #ff5f5f; + padding: 0; + margin: 0 auto; + border: none; + width: 20%; } + .single article hr.content-wrap, + .page article hr.content-wrap { + width: 40%; } + .single article hr.content-begin, + .page article hr.content-begin { + margin-top: calc(25vh + 2rem); } + @media (min-width: 769px) { + .single article hr.content-begin, + .page article hr.content-begin { + margin-top: 0; } } + .single article hr.content-end, + .page article hr.content-end { + margin-top: 2rem; + margin-bottom: 2rem; } + .single article .single-content, + .page article .single-content { position: relative; padding: 2rem; } @media (min-width: 769px) { - .single article .single-content { + .single article .single-content, + .page article .single-content { top: -5rem; padding-left: 0; padding-right: 10rem; } } - .single article .single-content h4 { + .single article .single-content h3, + .page article .single-content h3 { + font: 800 2rem "Butler"; + color: #000; + margin: 2rem 0; + display: inline-block; + background: #ff5f5f; + -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; + -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; + box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; } + .single article .single-content h4, + .page article .single-content h4 { font-weight: 500; font-size: 2rem; } - .single article .single-content a:hover { + .single article .single-content a:hover, + .page article .single-content a:hover { text-decoration: underline; } - .single article .single-content hr { - height: 1px; - background-color: #ff5f5f; - padding: 0; - margin: 0 auto; - border: none; - width: 20%; } - .single article .single-content hr.content-wrap { - width: 40%; } - .single article .single-content hr.content-begin { - margin-top: calc(25vh + 2rem); } - @media (min-width: 769px) { - .single article .single-content hr.content-begin { - margin-top: 0; } } - .single article .single-content strong { + .single article .single-content strong, + .page article .single-content strong { font-weight: 900; } - .single article .single-content blockquote { + .single article .single-content blockquote, + .page article .single-content blockquote { font: 800 2rem "Butler"; color: #000; margin: 3rem 0; } - .single article .single-content blockquote p { + .single article .single-content blockquote p, + .page article .single-content blockquote p { + background: #ff5f5f; display: inline; - padding: 3px 0; } - .single article .single-content blockquote cite { + padding: 3px 0; + -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; + -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; + box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; } + .single article .single-content blockquote cite, + .page article .single-content blockquote cite { position: relative; font-size: 80%; top: 2rem; } - .single article .single-content .wp-block-image { + .single article .single-content .wp-block-image, + .page article .single-content .wp-block-image { margin: 2rem 0; position: relative !important; } @media (min-width: 769px) { - .single article .single-content .wp-block-image { - padding: 0 5rem; } } - .single article .single-content .wp-block-image figcaption { + .single article .single-content .wp-block-image, + .page article .single-content .wp-block-image { + padding: 2rem 0; } } + .single article .single-content .wp-block-image figcaption, + .page article .single-content .wp-block-image figcaption { bottom: 0 !important; } - .single article .single-content .wp-block-image figcaption::after { + .single article .single-content .wp-block-image figcaption::after, + .page article .single-content .wp-block-image figcaption::after { content: ""; display: block; position: absolute; @@ -1766,15 +1828,19 @@ body.category.category-esemeny main { border-bottom: 5rem solid #fff; position: absolute; z-index: -1; } - .single article .single-content .wp-block-gallery { + .single article .single-content .wp-block-gallery, + .page article .single-content .wp-block-gallery { padding: 0; margin: 2rem 0; } - .single article .single-content .wp-block-gallery li { + .single article .single-content .wp-block-gallery li, + .page article .single-content .wp-block-gallery li { margin-right: 0; } @media (min-width: 769px) { - .single article .single-content .wp-block-gallery li { + .single article .single-content .wp-block-gallery li, + .page article .single-content .wp-block-gallery li { margin-bottom: 4rem; } } - .single article .single-content .wp-block-gallery li:nth-child(odd) figcaption::after { + .single article .single-content .wp-block-gallery li:nth-child(odd) figcaption::after, + .page article .single-content .wp-block-gallery li:nth-child(odd) figcaption::after { content: ""; display: block; position: absolute; @@ -1789,10 +1855,12 @@ body.category.category-esemeny main { border-bottom: 5rem solid #fff; position: absolute; z-index: -1; } - .single article .single-content .wp-block-gallery li:nth-child(even) figcaption { + .single article .single-content .wp-block-gallery li:nth-child(even) figcaption, + .page article .single-content .wp-block-gallery li:nth-child(even) figcaption { right: 0; top: 0; } - .single article .single-content .wp-block-gallery li:nth-child(even) figcaption::after { + .single article .single-content .wp-block-gallery li:nth-child(even) figcaption::after, + .page article .single-content .wp-block-gallery li:nth-child(even) figcaption::after { content: ""; display: block; position: absolute; @@ -1809,7 +1877,10 @@ body.category.category-esemeny main { z-index: -1; } .single article .single-content .wp-block-image figcaption, .single article .single-content .wp-block-gallery .blocks-gallery-image figcaption, - .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption { + .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption, + .page article .single-content .wp-block-image figcaption, + .page article .single-content .wp-block-gallery .blocks-gallery-image figcaption, + .page article .single-content .wp-block-gallery .blocks-gallery-item figcaption { background: #fff; position: absolute; width: calc(100% - 5rem); @@ -1826,13 +1897,48 @@ body.category.category-esemeny main { flex-direction: column; justify-content: center; z-index: 1; } + @media (min-width: 769px) { + .single article .single-content .wp-block-image figcaption, + .single article .single-content .wp-block-gallery .blocks-gallery-image figcaption, + .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption, + .page article .single-content .wp-block-image figcaption, + .page article .single-content .wp-block-gallery .blocks-gallery-image figcaption, + .page article .single-content .wp-block-gallery .blocks-gallery-item figcaption { + display: none; } + .single article .single-content .wp-block-image figcaption.vis, + .single article .single-content .wp-block-gallery .blocks-gallery-image figcaption.vis, + .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption.vis, + .page article .single-content .wp-block-image figcaption.vis, + .page article .single-content .wp-block-gallery .blocks-gallery-image figcaption.vis, + .page article .single-content .wp-block-gallery .blocks-gallery-item figcaption.vis { + display: block; } } .single article .single-content .wp-block-gallery .alignleft, .single article .single-content .wp-block-gallery .alignright, .single article .single-content .wp-block-image .alignleft, - .single article .single-content .wp-block-image .alignright { + .single article .single-content .wp-block-image .alignright, + .page article .single-content .wp-block-gallery .alignleft, + .page article .single-content .wp-block-gallery .alignright, + .page article .single-content .wp-block-image .alignleft, + .page article .single-content .wp-block-image .alignright { float: unset; margin: 0; } - .single #cboxOverlay { + @media (min-width: 769px) { + .single article .single-content .wp-block-gallery .alignleft, + .single article .single-content .wp-block-gallery .alignright, + .single article .single-content .wp-block-image .alignleft, + .single article .single-content .wp-block-image .alignright, + .page article .single-content .wp-block-gallery .alignleft, + .page article .single-content .wp-block-gallery .alignright, + .page article .single-content .wp-block-image .alignleft, + .page article .single-content .wp-block-image .alignright { + width: 100%; } } + .single article .single-content .wp-block-gallery .alignright, + .single article .single-content .wp-block-image .alignright, + .page article .single-content .wp-block-gallery .alignright, + .page article .single-content .wp-block-image .alignright { + text-align: right; } + .single #cboxOverlay, + .page #cboxOverlay { width: 100%; height: 100%; position: fixed; @@ -1840,42 +1946,52 @@ body.category.category-esemeny main { left: 0; background-color: #000; z-index: 10; } - .single #colorbox { + .single #colorbox, + .page #colorbox { z-index: 12; } - .single #colorbox:focus { + .single #colorbox:focus, + .page #colorbox:focus { border: none; outline: none; } - .single #colorbox #cboxContent #cboxTitle { + .single #colorbox #cboxContent #cboxTitle, + .page #colorbox #cboxContent #cboxTitle { padding: 1rem; font: 900 1rem "Westeinde Caption"; color: #000; color: #fff; width: 100%; text-align: center; } - .single #colorbox #cboxContent #cboxCurrent { + .single #colorbox #cboxContent #cboxCurrent, + .page #colorbox #cboxContent #cboxCurrent { display: none !important; } - .single #colorbox #cboxContent button { + .single #colorbox #cboxContent button, + .page #colorbox #cboxContent button { position: absolute; background-repeat: no-repeat; background-position: center; background-size: 100%; } - .single #colorbox #cboxContent button#cboxPrevious, .single #colorbox #cboxContent button#cboxNext { + .single #colorbox #cboxContent button#cboxPrevious, .single #colorbox #cboxContent button#cboxNext, + .page #colorbox #cboxContent button#cboxPrevious, + .page #colorbox #cboxContent button#cboxNext { background-image: url(../img/solid_arrow_right.svg); width: 2rem; height: 4rem; bottom: -5rem; filter: invert(100); z-index: 14; } - .single #colorbox #cboxContent button#cboxPrevious { + .single #colorbox #cboxContent button#cboxPrevious, + .page #colorbox #cboxContent button#cboxPrevious { left: 1rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } - .single #colorbox #cboxContent button#cboxNext { + .single #colorbox #cboxContent button#cboxNext, + .page #colorbox #cboxContent button#cboxNext { right: 1rem; } - .single #colorbox #cboxContent button#cboxClose { + .single #colorbox #cboxContent button#cboxClose, + .page #colorbox #cboxContent button#cboxClose { background-image: url(../img/dis-plus.svg); width: 2rem; height: 2rem; @@ -1886,42 +2002,239 @@ body.category.category-esemeny main { transform: rotate(45deg); top: -3rem; right: 1rem; } - .single #related_posts { + .single .toHome, + .single #related_posts > h3, + .page .toHome, + .page #related_posts > h3 { + padding-bottom: 4rem; + margin: 0 auto; + text-align: center; + font: bold 1rem "Westeinde Caption"; } + @media (min-width: 769px) { + .single .toHome, + .single #related_posts > h3, + .page .toHome, + .page #related_posts > h3 { + font: 900 2rem "Westeinde Caption"; + color: #fff; + -webkit-text-stroke: #000 1px; } } + .single .toHome a, + .single #related_posts > h3 a, + .page .toHome a, + .page #related_posts > h3 a { + font: bold 1rem "Westeinde Caption"; } + @media (min-width: 769px) { + .single .toHome a, + .single #related_posts > h3 a, + .page .toHome a, + .page #related_posts > h3 a { + font: 900 2rem "Westeinde Caption"; + color: #fff; + -webkit-text-stroke: #000 1px; } } + .single .toHome a:hover, + .single #related_posts > h3 a:hover, + .page .toHome a:hover, + .page #related_posts > h3 a:hover { + color: #000; + -webkit-text-stroke-color: transparent; } + @media (min-width: 769px) { + .single .toHome, + .page .toHome { + padding-top: 4rem; } } + .single #related_posts, + .page #related_posts { /* ------------------------ related posts on desktop ------------------------ */ } - .single #related_posts > h3 { + .single #related_posts > h3, + .page #related_posts > h3 { display: none; } - .single #related_posts ul { + .single #related_posts ul, + .page #related_posts ul { padding: 0; } - .single #related_posts ul li { - display: block; } - .single #related_posts ul li .relatedthumb img { + .single #related_posts ul li, + .page #related_posts ul li { + display: block; + position: relative; + cursor: pointer; } + .single #related_posts ul li > a, + .page #related_posts ul li > a { + margin: 0; + padding: 0; + border: none; + display: inline-block; } + .single #related_posts ul li .related_thumbnailwrapper img, + .page #related_posts ul li .related_thumbnailwrapper img { height: 50vw; width: 100vw; object-fit: cover; } - .single #related_posts ul li .relatedcontent { + .single #related_posts ul li h2, + .page #related_posts ul li h2 { + width: 100%; height: 50vw; - padding: 2rem; } - .single #related_posts ul li .relatedcontent h3 { + padding: 2rem; + padding-top: 3rem; + margin: 0; } + .single #related_posts ul li h2 a, + .page #related_posts ul li h2 a { font: 500 2rem "Westeinde Caption"; } + .single #related_posts ul li .metadata, + .page #related_posts ul li .metadata { + bottom: 50%; + height: 5rem; + display: flex; + width: -moz-max-content; + width: max-content; + width: -moz-fit-content; + width: fit-content; + justify-content: space-around; + flex-wrap: nowrap; + align-items: center; + padding: 0; } + .single #related_posts ul li .metadata .vr, + .page #related_posts ul li .metadata .vr { + height: 100%; + width: 1px; + background-color: #000; + flex-grow: 0 !important; + flex-shrink: 0 !important; + flex-basis: auto !important; } @media (min-width: 769px) { - .single #related_posts { + .single #related_posts, + .page #related_posts { padding-right: 10rem; } - .single #related_posts > h3 { + .single #related_posts > h3, + .page #related_posts > h3 { display: block; } - .single #related_posts ul { + .single #related_posts ul, + .page #related_posts ul { display: flex; flex-direction: row; flex-wrap: nowrap; } - .single #related_posts ul li { - flex: 1 1 33%; } - .single #related_posts ul li .relatedthumb img { + .single #related_posts ul li, + .page #related_posts ul li { + flex: 1 1 33%; + flex: 0 0 calc(100% / 3); + height: calc((100vw - 16rem) / 3); + position: relative; } + .single #related_posts ul li .related_thumbnailwrapper, + .page #related_posts ul li .related_thumbnailwrapper { width: 100%; - height: calc((100vw - 16rem) / 3); } - .single #related_posts ul li .relatedcontent { + height: 100%; } + .single #related_posts ul li .related_thumbnailwrapper img, + .page #related_posts ul li .related_thumbnailwrapper img { + width: 100%; + height: 100%; + object-fit: cover; } + .single #related_posts ul li .metadata, + .page #related_posts ul li .metadata { + width: 100%; + min-width: unset; + height: 5rem; position: absolute; - height: unset; bottom: 0; - width: calc((100vw - 16rem) / 3); } } + right: 0; + background: transparent; + display: flex; + flex-direction: row; + padding: 0; + justify-content: space-between; + align-items: stretch; + display: none; } + .single #related_posts ul li .metadata::after, + .page #related_posts ul li .metadata::after { + position: absolute; + content: ""; + display: block; + top: 0; + border: none; + width: calc(100% - 5rem); + border-top: #000 1px solid; + background-color: transparent; + left: calc(5rem); + margin-left: -0; } + .single #related_posts ul li .metadata::before, + .page #related_posts ul li .metadata::before { + display: block; + content: ""; + position: absolute; + width: calc(5rem); + height: calc(5rem); + top: 0; + background-color: transparent; + z-index: 9; + 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; + border-top: #000 solid 1px; } + .single #related_posts ul li .metadata.vis, + .page #related_posts ul li .metadata.vis { + display: flex; } + .single #related_posts ul li .metadata .categories, + .single #related_posts ul li .metadata .postedon, + .page #related_posts ul li .metadata .categories, + .page #related_posts ul li .metadata .postedon { + font: bold 1rem "Westeinde Caption"; + color: #000; } } + @media (min-width: 769px) and (min-width: 769px) { + .single #related_posts ul li .metadata .categories, + .single #related_posts ul li .metadata .postedon, + .page #related_posts ul li .metadata .categories, + .page #related_posts ul li .metadata .postedon { + font-size: 1.2rem; } } + @media (min-width: 769px) { + .single #related_posts ul li .metadata .categories, + .page #related_posts ul li .metadata .categories { + margin-left: 6rem; + padding: 1.33333rem 0; + flex: 1 1 auto; } + .single #related_posts ul li .metadata .postedon, + .page #related_posts ul li .metadata .postedon { + padding: 1.33333rem 1rem; + flex: 1 0 auto; } } + @media (min-width: 769px) and (min-width: 769px) { + .single #related_posts ul li h2, + .single #related_posts ul li h2 a, + .page #related_posts ul li h2, + .page #related_posts ul li h2 a { + font-size: 1.5rem; + color: #000; } } + @media (min-width: 769px) and (min-width: 1279px) { + .single #related_posts ul li h2, + .single #related_posts ul li h2 a, + .page #related_posts ul li h2, + .page #related_posts ul li h2 a { + font-size: 2.2rem; } } + @media (min-width: 769px) { + .single #related_posts ul li h2, + .page #related_posts ul li h2 { + display: none; + position: absolute; + top: 0; + background-color: #fff; + height: 100%; + padding-left: 4rem; } } + @media (min-width: 769px) and (min-width: 1279px) { + .single #related_posts ul li h2, + .page #related_posts ul li h2 { + padding: 5rem; } } + @media (min-width: 769px) { + .single #related_posts ul li h2 a, + .page #related_posts ul li h2 a { + bottom: 7rem; + width: calc(100% - 8rem); + height: -moz-max-content; + height: max-content; + height: -moz-fit-content; + height: fit-content; + position: absolute; } } + @media (min-width: 769px) and (min-width: 1279px) { + .single #related_posts ul li h2 a, + .page #related_posts ul li h2 a { + width: calc(100% - 10rem); } } /* -------------------------------------------------------------------------- */ /* TAG COLORS */ @@ -1935,12 +2248,6 @@ body.category.category-esemeny main { .tag-be .metadata a { color: #fdff00 !important; } -.tag-be blockquote p { - background: #fdff00 !important; - -moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; - -webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; - box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; } - .tag-be hr { background-color: #fdff00 !important; } @@ -1991,12 +2298,6 @@ body.category.category-esemeny main { .tag-do .metadata a { color: #3c00ff !important; } -.tag-do blockquote p { - background: #3c00ff !important; - -moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; - -webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; - box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; } - .tag-do hr { background-color: #3c00ff !important; } @@ -2047,12 +2348,6 @@ body.category.category-esemeny main { .tag-think .metadata a { color: #00ffb8 !important; } -.tag-think blockquote p { - background: #00ffb8 !important; - -moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; - -webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; - box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; } - .tag-think hr { background-color: #00ffb8 !important; } @@ -2103,12 +2398,6 @@ body.category.category-esemeny main { .tag-love .metadata a { color: #ff5f5f !important; } -.tag-love blockquote p { - background: #ff5f5f !important; - -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; - -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; - box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; } - .tag-love hr { background-color: #ff5f5f !important; } @@ -2151,54 +2440,82 @@ body.category.category-esemeny main { mask-size: 100%; } } @media (min-width: 769px) { - .single .tag-be .metadata { + .single .tag-be .titlewrapper .metadata { color: #fff !important; -webkit-text-stroke: #fdff00 1px !important; } } @media (min-width: 769px) { - .single .tag-be .metadata a { + .single .tag-be .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #fdff00 1px !important; } } +.single .tag-be .single-content blockquote p, +.single .tag-be .single-content h3 { + background: #fdff00 !important; + -moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; + -webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; + box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; } + .single .tag-be .single-content a { color: #fdff00; } @media (min-width: 769px) { - .single .tag-do .metadata { + .single .tag-do .titlewrapper .metadata { color: #fff !important; -webkit-text-stroke: #3c00ff 1px !important; } } @media (min-width: 769px) { - .single .tag-do .metadata a { + .single .tag-do .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #3c00ff 1px !important; } } +.single .tag-do .single-content blockquote p, +.single .tag-do .single-content h3 { + background: #3c00ff !important; + -moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; + -webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; + box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; } + .single .tag-do .single-content a { color: #3c00ff; } @media (min-width: 769px) { - .single .tag-think .metadata { + .single .tag-think .titlewrapper .metadata { color: #fff !important; -webkit-text-stroke: #00ffb8 1px !important; } } @media (min-width: 769px) { - .single .tag-think .metadata a { + .single .tag-think .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #00ffb8 1px !important; } } +.single .tag-think .single-content blockquote p, +.single .tag-think .single-content h3 { + background: #00ffb8 !important; + -moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; + -webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; + box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; } + .single .tag-think .single-content a { color: #00ffb8; } @media (min-width: 769px) { - .single .tag-love .metadata { + .single .tag-love .titlewrapper .metadata { color: #fff !important; -webkit-text-stroke: #ff5f5f 1px !important; } } @media (min-width: 769px) { - .single .tag-love .metadata a { + .single .tag-love .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #ff5f5f 1px !important; } } +.single .tag-love .single-content blockquote p, +.single .tag-love .single-content h3 { + background: #ff5f5f !important; + -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; + -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; + box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; } + .single .tag-love .single-content a { color: #ff5f5f; } diff --git a/js/scripts.js b/js/scripts.js index 814f4df..a4346b6 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -733,7 +733,13 @@ //hide caption on desktop if (!isMobile) { - $('.wp-block-gallery, .wp-block-image').children('figcaption').hide() + $('.wp-block-gallery img, .wp-block-image img').hover(function () { + $(this).parent('a').next("figcaption").addClass("vis") + }, function () { + $('.wp-block-gallery .vis, .wp-block-image .vis') + .removeClass("vis") + + }) } @@ -770,7 +776,48 @@ //single images $(".wp-block-image a").colorbox(colorboxSettings) - } + + + /* ---------------------------- hover and click on related ---------------------------- */ + $(document).on({ + mouseenter: function () { + if (!Modernizr.touchevents) { + showTitle(this) + } + }, + mouseleave: function () { + if (!Modernizr.touchevents) { + hideTitle(this) + } + } + }, '#related_posts li'); + + //touch on small articles + $(document).on({ + 'touchend': function (e) { + e.preventDefault() + var art = $(this).parents("li") + var metadata = art.children(".metadata") + if (metadata.hasClass("vis")) { + hideTitle(art) + } else { + hideTitle($(".vis").parents("li")) + showTitle(art) + } + } + }, "#related_posts li a.related_thumbnailwrapper") + + //click on related + $('#related_posts li').click(function () { + let href = $(this).children('a.related_thumbnailwrapper').attr("href") + window.open(href, "_self") + }) + + + }//if single end + + + /* ------------------------------- END OF FILE ------------------------------ */ diff --git a/page.php b/page.php deleted file mode 100644 index 0f01c84..0000000 --- a/page.php +++ /dev/null @@ -1,43 +0,0 @@ - - - - -
- -

- - - - -
> - - - -
- - - -
- - - - - - - -
- -

- -
- - - - -
- - - - - - diff --git a/sass/base.scss b/sass/base.scss index 3699b4a..f6df5c0 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -1286,7 +1286,8 @@ body.category.category-esemeny { /* single */ /* -------------------------------------------------------------------------- */ -.single { +.single, +.page { //no menus on single @media #{$smalldesktop} { .wrapper { @@ -1315,6 +1316,7 @@ body.category.category-esemeny { // padding: $padd; // margin: 0; // } + padding-bottom: $h-unit-1; .thumbnailwrapper { padding: 0; @@ -1363,7 +1365,7 @@ body.category.category-esemeny { } } - /* ---------------------------- single on desktop --------------------------- */ + /* ---------------------------- single header on desktop --------------------------- */ @media #{$smalldesktop} { margin-top: 100vh; @@ -1440,6 +1442,28 @@ body.category.category-esemeny { /* ----------------------------- single content ----------------------------- */ + hr { + height: 1px; + background-color: #ff5f5f; + padding: 0; + margin: 0 auto; + border: none; + width: 20%; + &.content-wrap { + width: 40%; + } + &.content-begin { + margin-top: calc(25vh + #{$padd}); + @media #{$smalldesktop} { + margin-top: 0; + } + } + &.content-end { + margin-top: $padd; + margin-bottom: $padd; + } + } + .single-content { position: relative; padding: $padd; @@ -1449,6 +1473,14 @@ body.category.category-esemeny { padding-right: $h-unit-2; } + h3 { + @include single-quote(); + margin: 2rem 0; + display: inline-block; + background: #ff5f5f; + @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f); + } + h4 { @include single-h4(); } @@ -1457,24 +1489,6 @@ body.category.category-esemeny { text-decoration: underline; } - hr { - height: 1px; - background-color: #ff5f5f; - padding: 0; - margin: 0 auto; - border: none; - width: 20%; - &.content-wrap { - width: 40%; - } - &.content-begin { - margin-top: calc(25vh + #{$padd}); - @media #{$smalldesktop} { - margin-top: 0; - } - } - } - strong { font-weight: 900; } @@ -1483,10 +1497,10 @@ body.category.category-esemeny { @include single-quote(); margin: 3rem 0; p { - // background: #ff5f5f; + background: #ff5f5f; display: inline; padding: 3px 0; - // @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f); + @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f); } cite { position: relative; @@ -1499,7 +1513,7 @@ body.category.category-esemeny { // padding: $padd 0; margin: $padd 0; @media #{$smalldesktop} { - padding: 0 $h-unit-1; + padding: $padd 0; } position: relative !important; figcaption { @@ -1552,6 +1566,12 @@ body.category.category-esemeny { flex-direction: column; justify-content: center; z-index: 1; + @media #{$smalldesktop} { + display: none; + &.vis { + display: block; + } + } } //aligned: @@ -1562,6 +1582,13 @@ body.category.category-esemeny { //no align on mobile float: unset; margin: 0; + @media #{$smalldesktop} { + + width: 100%; + } + } + .alignright{ + text-align: right; } } } @@ -1629,6 +1656,28 @@ body.category.category-esemeny { } //#colorbox end /* ------------------------------ related posts ----------------------------- */ + + .toHome, + #related_posts > h3 { + padding-bottom: $padd * 2; + margin: 0 auto; + // display: inline-block; + text-align: center; + @include single-metadata(); + a { + @include single-metadata(); + &:hover { + color: #000; + -webkit-text-stroke-color: transparent; + } + } + } + .toHome { + @media #{$smalldesktop} { + padding-top: $padd * 2; + } + } + #related_posts { & > h3 { display: none; @@ -1637,21 +1686,60 @@ body.category.category-esemeny { padding: 0; li { display: block; + position: relative; + cursor: pointer; + // .relatedcontent { + // height: 50vw; + // padding: $padd; + // + // } + & > a { + margin: 0; + padding: 0; + border: none; + display: inline-block; + } - .relatedthumb { + .related_thumbnailwrapper { img { + // post thumbnail on home height: 50vw; width: 100vw; object-fit: cover; } } - .relatedcontent { + + h2 { + width: 100%; height: 50vw; - padding: $padd; - h3 { + padding: 2rem; + padding-top: 3rem; + margin: 0; + + a { @include related-title(); } } + + .metadata { + bottom: 50%; + height: $h-unit-1; + display: flex; + @include fit-content(width); + justify-content: space-around; + flex-wrap: nowrap; + align-items: center; + padding: 0; + + .vr { + height: 100%; + width: 1px; + background-color: #000; + flex-grow: 0 !important; + flex-shrink: 0 !important; + flex-basis: auto !important; + } + } } } @@ -1659,7 +1747,6 @@ body.category.category-esemeny { @media #{$smalldesktop} { padding-right: $h-unit-2; - & > h3 { display: block; } @@ -1669,17 +1756,97 @@ body.category.category-esemeny { flex-wrap: nowrap; li { flex: 1 1 33%; - .relatedthumb { + // .relatedthumb { + // img { + // width: 100%; + // height: calc((100vw - #{$v-unit-4}) / 3); + // } + // } + // .relatedcontent { + // position: absolute; + // height: unset; + // bottom: 0; + // width: calc((100vw - #{$v-unit-4}) / 3); + // } + + flex: 0 0 calc(100% / 3); + // height: 50%; + height: calc((100vw - #{$v-unit-4}) / 3); + position: relative; + .related_thumbnailwrapper { + width: 100%; + height: 100%; img { width: 100%; - height: calc((100vw - #{$v-unit-4}) / 3); + height: 100%; + object-fit: cover; } } - .relatedcontent { + + .metadata { + width: 100%; + min-width: unset; + height: $h-unit-1; + position: absolute; - height: unset; bottom: 0; - width: calc((100vw - #{$v-unit-4}) / 3); + right: 0; + + background: transparent; + + display: flex; + flex-direction: row; + padding: 0; + justify-content: space-between; + align-items: stretch; + @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left); + display: none; + &.vis { + display: flex; + } + + .categories, + .postedon { + @include home-metadata(); + } + .categories { + margin-left: $v-unit-1 * 1.5; + padding: $v-unit-1 / 3 0; + flex: 1 1 auto; + } + .postedon { + padding: $v-unit-1 / 3 $v-unit-1 / 4; + flex: 1 0 auto; + } + } + + h2, + h2 a { + @include home-title-small(); + } + + h2 { + display: none; + position: absolute; + top: 0; + background-color: #fff; + height: 100%; + padding-left: $v-unit-1; + @media #{$bigdesktop} { + padding: $h-unit-1; + } + + a { + bottom: $h-unit-1 + $v-unit-1 * 0.5; + + width: calc(100% - #{$v-unit-2}); + @include fit-content(height); + position: absolute; + + @media #{$bigdesktop} { + width: calc(100% - #{$h-unit-2}); + } + } } } } @@ -1706,10 +1873,6 @@ body.category.category-esemeny { } } - blockquote p { - background: $color !important; - @include box-shadow(10px 0 $color, -5px 0 $color !important); - } hr { background-color: $color !important; } @@ -1782,19 +1945,26 @@ body.category.category-esemeny { //colors on single articles @mixin tagcolors-single($color) { - .metadata { - @media #{$smalldesktop} { - color: #fff !important; - -webkit-text-stroke: $color 1px !important; - } - a { + .titlewrapper { + .metadata { @media #{$smalldesktop} { color: #fff !important; -webkit-text-stroke: $color 1px !important; } + a { + @media #{$smalldesktop} { + color: #fff !important; + -webkit-text-stroke: $color 1px !important; + } + } } } .single-content { + blockquote p, + h3 { + background: $color !important; + @include box-shadow(10px 0 $color, -5px 0 $color !important); + } a { color: $color; } diff --git a/single.php b/singular.php similarity index 75% rename from single.php rename to singular.php index 05d2c1f..51a8fe3 100644 --- a/single.php +++ b/singular.php @@ -97,18 +97,33 @@ ?>
  • -
    - - + + + -
    -
    -

    - - - -

    -
    + + + +
    +
    + name; + } + ?> +
    + +
    +
    + ' +
    +
    +
    + +

    + +

    +
    • - +
    + + ← + +
    +