infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

works on single

Browse Source
This commit is contained in:
Péter Gyetvai
2019-07-11 13:36:28 +02:00
parent 99e2082e42
commit 4c443cd7ec
6 changed files with 731 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
KÉZIKÖNYV.md
View File

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

555
css/base.css
View File

@@ -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; }

51
js/scripts.js
View File

@@ -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 ------------------------------ */

43
page.php
View File

@@ -1,43 +0,0 @@
<?php get_header(); ?>
<!-- section -->
<section>
<h1><?php the_title(); ?></h1>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'dis2019' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
<?php get_footer(); ?>

256
sass/base.scss
View File

@@ -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;
}

42
single.php → singular.php
View File

@@ -97,18 +97,33 @@
?>
<li>
<div class="relatedthumb">
<a href="<? the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()): // Check if thumbnail exists ?>
<a class="related_thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
<?php the_post_thumbnail('home-square-thumbnail'); ?>
</a>
</div>
<div class="relatedcontent">
<h3>
<a href="<? the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>">
<?php the_title(); ?>
</a>
</h3>
</div>
<?php endif;?>
<!-- /post thumbnail -->
<div class="metadata">
<div class="categories">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</div>
<div class="vr"></div>
<div class="postedon">
'<?php the_time('y.m.d.');?>
</div>
<div class="filler"></div>
</div> <!-- metadata end -->
<!-- post title -->
<h2>
<a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a>
</h2>
<!-- /post title -->
</li>
<?php
}
@@ -118,7 +133,12 @@
$post = $orig_post;
wp_reset_query(); ?>
<?php _e('Back to home:', 'dis2019');?>
<div class="toHome">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
← <?php _e('Back to home:', 'dis2019');?>
</a>
</div>
<hr class="related-wrap single-end">
</article>