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 @@
?>
-
-
+
+
+
+
+
+
+
+
+
-
+
+