From 5a234f87e108640aa3b97ae35ceb936ebe6f4282 Mon Sep 17 00:00:00 2001
From: infeeeee <gyetpet@mailbox.org.com>
Date: Wed, 7 Aug 2019 22:54:34 +0200
Subject: [PATCH] work on wingle articles

---
 .vscode/globalsnippets.code-snippets |  31 ++--
 _teendők.md                          |   8 -
 css/base.css                         | 210 ++++++++++++++++++++-------
 functions.php                        |  39 +----
 js/scripts.js                        |  10 +-
 loop-inner.php                       |  86 +++++++++++
 loop.php                             |  86 +----------
 sass/_font-mixins.scss               |  14 +-
 sass/base.scss                       | 192 +++++++++++++++---------
 singular.php                         |  68 +++------
 10 files changed, 438 insertions(+), 306 deletions(-)
 create mode 100644 loop-inner.php

diff --git a/.vscode/globalsnippets.code-snippets b/.vscode/globalsnippets.code-snippets
index 091f065..8a85b6e 100644
--- a/.vscode/globalsnippets.code-snippets
+++ b/.vscode/globalsnippets.code-snippets
@@ -15,7 +15,6 @@
 	// 	],
 	// 	"description": "Log output to console"
 	// }
-
 	"smalldesktop": {
 		"scope": "scss,sass",
 		"prefix": "smalldesktop",
@@ -36,9 +35,8 @@
 		],
 		"description": "SCSS: Bigdesktop media query"
 	},
-
 	"div": {
-		"scope":"html,php",
+		"scope": "html,php",
 		"prefix": "div",
 		"body": [
 			"<div class=\"$1\">",
@@ -47,10 +45,8 @@
 		],
 		"description": "HTML: div start and end"
 	},
-
-
 	"php": {
-		"scope":"html,php",
+		"scope": "html,php",
 		"prefix": "php",
 		"body": [
 			"<?php",
@@ -59,15 +55,20 @@
 		],
 		"description": "HTML: div start and end"
 	},
-	"chromephp-log": {
-		"scope":"html,php",
-		"prefix": "log",
+	"console_debug": {
+		"scope": "html,php",
+		"prefix": "console_debug",
 		"body": [
-			"ChromePhp::log($0);"
+			"console_debug($0);"
 		],
-		"description": "Log to js console with Chromephp addin"
-	}
-
-
-
+		"description": "Log to js console"
+	},
+	"console.log": {
+		"scope": "javascript",
+		"prefix": "console.log",
+		"body": [
+			"console.log($0)"
+		],
+		"description": "console.log()"
+	},
 }
\ No newline at end of file
diff --git a/_teendők.md b/_teendők.md
index 5cd0613..a418063 100644
--- a/_teendők.md
+++ b/_teendők.md
@@ -2,20 +2,12 @@
 
 og: tag: pluginnal!
 
-állókép körbefut a szöveg!!!!
-
 bal felső sarokban nem jó a sarok border!!
 
-jobb oldali margó dupla akkora minimum, és nőjön, hogy a szöveg fix széles maradhasson
-margók	összébb húzni a tartalmat: 1024px | elválasztó vonalakat is szűkebbre venni
-
 lightbox: mobilon ott ahol van most
 	Asztalin menjen ki a képernyő szélére
 	galéria	jobb/bal nyilat a képernyő széléhez igazítani | X-et is
 
-Link a kiemelt hátterű szövegben mint a mostani designisson! Lásd annabella cikke, valamelyik kérdés
-szövegben kiemelt résznél link	opacity
-
 
 # Esemény oldal
 
diff --git a/css/base.css b/css/base.css
index fd73493..b07407a 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1772,6 +1772,7 @@ body.category.category-esemeny main {
   .page article {
     padding-bottom: 5rem;
     /* ---------------------------- single header on desktop --------------------------- */
+    /* ---------------------------- single content hr --------------------------- */
     /* ----------------------------- single content ----------------------------- */ }
     .single article .thumbnailwrapper,
     .page article .thumbnailwrapper {
@@ -1801,18 +1802,23 @@ body.category.category-esemeny main {
         position: relative;
         align-self: flex-end;
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        font: bold 1rem "Westeinde Caption"; }
+        flex-direction: column;
+        justify-content: center;
+        font: bold 1.4rem "Westeinde Caption"; }
         @media (min-width: 769px) {
           .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,
-        .page article .titlewrapper .metadata .time-cat {
-          z-index: 10; }
+        .single article .titlewrapper .metadata .metaWrapper,
+        .page article .titlewrapper .metadata .metaWrapper {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between; }
+          .single article .titlewrapper .metadata .metaWrapper .time-cat,
+          .page article .titlewrapper .metadata .metaWrapper .time-cat {
+            z-index: 10; }
       .single article .titlewrapper h1.single-title,
       .page article .titlewrapper h1.single-title {
         margin: 0;
@@ -1869,7 +1875,7 @@ body.category.category-esemeny main {
             top: -5rem;
             width: 100%;
             padding-left: 0;
-            padding-right: 10rem; }
+            padding-right: 0; }
             .single article .titlewrapper .metadata::after,
             .page article .titlewrapper .metadata::after {
               position: absolute;
@@ -1901,14 +1907,20 @@ body.category.category-esemeny main {
               transform: skewX(-45deg);
               transform-origin: left bottom;
               border-top: #000 solid 1px; }
+            .single article .titlewrapper .metadata .metaWrapper,
+            .page article .titlewrapper .metadata .metaWrapper {
+              padding-right: 20rem;
+              padding-left: 0;
+              max-width: calc(1024px + 20rem); }
           .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; } }
+            padding-right: 20rem;
+            padding-left: 0;
+            max-width: calc(1024px + 20rem); } }
     .single article hr,
     .page article hr {
       height: 1px;
@@ -1929,21 +1941,28 @@ body.category.category-esemeny main {
             margin-top: 0 !important; } }
       .single article hr.content-end,
       .page article hr.content-end {
-        margin-top: 2rem;
-        margin-bottom: 2rem; }
+        margin-top: 4rem;
+        margin-bottom: 0; }
+        @media (min-width: 769px) {
+          .single article hr.content-end,
+          .page article hr.content-end {
+            margin-top: 2rem;
+            margin-bottom: 2rem; } }
     .single article.has-post-thumbnail hr.content-begin,
     .page article.has-post-thumbnail hr.content-begin {
       margin-top: calc(25vh + 2rem); }
     .single article .single-content,
     .page article .single-content {
       position: relative;
-      padding: 2rem; }
+      padding: 2rem;
+      /* ---------------------------- images on single ---------------------------- */ }
       @media (min-width: 769px) {
         .single article .single-content,
         .page article .single-content {
           top: -5rem;
+          padding-right: 20rem;
           padding-left: 0;
-          padding-right: 10rem; } }
+          max-width: calc(1024px + 20rem); } }
       .single article .single-content h2,
       .page article .single-content h2 {
         font: 800 3rem "Butler"; }
@@ -1998,7 +2017,13 @@ body.category.category-esemeny main {
         @media (min-width: 769px) {
           .single article .single-content .wp-block-image,
           .page article .single-content .wp-block-image {
-            padding: 2rem 0; } }
+            padding: 0; } }
+        .single article .single-content .wp-block-image:not(.wp-block-image-aligned),
+        .page article .single-content .wp-block-image:not(.wp-block-image-aligned) {
+          width: -moz-max-content;
+          width: max-content;
+          width: -moz-fit-content;
+          width: fit-content; }
         .single article .single-content .wp-block-image figcaption,
         .page article .single-content .wp-block-image figcaption {
           bottom: 0 !important; }
@@ -2102,45 +2127,88 @@ body.category.category-esemeny main {
             .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,
-      .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 article .single-content .wp-block-gallery .alignedWrapper,
+      .single article .single-content .wp-block-image .alignedWrapper,
+      .page article .single-content .wp-block-gallery .alignedWrapper,
+      .page article .single-content .wp-block-image .alignedWrapper {
+        position: relative; }
         @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 article .single-content .wp-block-gallery .alignedWrapper,
+          .single article .single-content .wp-block-image .alignedWrapper,
+          .page article .single-content .wp-block-gallery .alignedWrapper,
+          .page article .single-content .wp-block-image .alignedWrapper {
+            max-width: 50%;
+            width: -moz-max-content;
+            width: max-content;
+            width: -moz-fit-content;
+            width: fit-content; }
+            .single article .single-content .wp-block-gallery .alignedWrapper.alignleftWrapper,
+            .single article .single-content .wp-block-image .alignedWrapper.alignleftWrapper,
+            .page article .single-content .wp-block-gallery .alignedWrapper.alignleftWrapper,
+            .page article .single-content .wp-block-image .alignedWrapper.alignleftWrapper {
+              padding-right: 2rem;
+              float: left; }
+            .single article .single-content .wp-block-gallery .alignedWrapper.alignrightWrapper,
+            .single article .single-content .wp-block-image .alignedWrapper.alignrightWrapper,
+            .page article .single-content .wp-block-gallery .alignedWrapper.alignrightWrapper,
+            .page article .single-content .wp-block-image .alignedWrapper.alignrightWrapper {
+              padding-left: 2rem;
+              float: right; } }
+        .single article .single-content .wp-block-gallery .alignedWrapper .alignleft,
+        .single article .single-content .wp-block-gallery .alignedWrapper .alignright,
+        .single article .single-content .wp-block-image .alignedWrapper .alignleft,
+        .single article .single-content .wp-block-image .alignedWrapper .alignright,
+        .page article .single-content .wp-block-gallery .alignedWrapper .alignleft,
+        .page article .single-content .wp-block-gallery .alignedWrapper .alignright,
+        .page article .single-content .wp-block-image .alignedWrapper .alignleft,
+        .page article .single-content .wp-block-image .alignedWrapper .alignright {
+          margin: 0;
+          position: relative;
+          float: unset; }
+          @media (min-width: 769px) {
+            .single article .single-content .wp-block-gallery .alignedWrapper .alignleft,
+            .single article .single-content .wp-block-gallery .alignedWrapper .alignright,
+            .single article .single-content .wp-block-image .alignedWrapper .alignleft,
+            .single article .single-content .wp-block-image .alignedWrapper .alignright,
+            .page article .single-content .wp-block-gallery .alignedWrapper .alignleft,
+            .page article .single-content .wp-block-gallery .alignedWrapper .alignright,
+            .page article .single-content .wp-block-image .alignedWrapper .alignleft,
+            .page article .single-content .wp-block-image .alignedWrapper .alignright {
+              width: auto; } }
       .single article .single-content .authors,
       .page article .single-content .authors {
-        font-weight: 500;
-        font-size: 2.4rem;
-        line-height: 1.6; }
+        font: bold 1.4rem "Westeinde Caption";
+        font-size: 2rem;
+        color: #fff;
+        -webkit-text-stroke: #000 1px;
+        color: #000;
+        -webkit-text-stroke: 0px; }
+        @media (min-width: 769px) {
+          .single article .single-content .authors,
+          .page article .single-content .authors {
+            font: 900 2rem "Westeinde Caption";
+            color: #fff;
+            -webkit-text-stroke: #000 1px; } }
+        @media (min-width: 769px) {
+          .single article .single-content .authors,
+          .page article .single-content .authors {
+            font-size: 3rem; } }
         .single article .single-content .authors a,
         .page article .single-content .authors a {
-          font: bold 1rem "Westeinde Caption"; }
+          font: bold 1.4rem "Westeinde Caption";
+          font-size: 2rem;
+          color: #fff;
+          -webkit-text-stroke: #000 1px; }
           @media (min-width: 769px) {
             .single article .single-content .authors a,
             .page article .single-content .authors a {
               font: 900 2rem "Westeinde Caption";
               color: #fff;
               -webkit-text-stroke: #000 1px; } }
+          @media (min-width: 769px) {
+            .single article .single-content .authors a,
+            .page article .single-content .authors a {
+              font-size: 3rem; } }
   .single #cboxOverlay,
   .page #cboxOverlay {
     width: 100%;
@@ -2153,6 +2221,10 @@ body.category.category-esemeny main {
   .single #colorbox,
   .page #colorbox {
     z-index: 12; }
+    @media (min-width: 769px) {
+      .single #colorbox,
+      .page #colorbox {
+        z-index: 3150; } }
     .single #colorbox:focus,
     .page #colorbox:focus {
       border: none;
@@ -2183,6 +2255,13 @@ body.category.category-esemeny main {
         bottom: -5rem;
         filter: invert(100);
         z-index: 14; }
+        @media (min-width: 769px) {
+          .single #colorbox #cboxContent button#cboxPrevious, .single #colorbox #cboxContent button#cboxNext,
+          .page #colorbox #cboxContent button#cboxPrevious,
+          .page #colorbox #cboxContent button#cboxNext {
+            position: fixed;
+            top: 50%;
+            z-index: 3200; } }
       .single #colorbox #cboxContent button#cboxPrevious,
       .page #colorbox #cboxContent button#cboxPrevious {
         left: 1rem;
@@ -2191,9 +2270,17 @@ body.category.category-esemeny main {
         -ms-transform: scaleX(-1);
         -webkit-transform: scaleX(-1);
         transform: scaleX(-1); }
+        @media (min-width: 769px) {
+          .single #colorbox #cboxContent button#cboxPrevious,
+          .page #colorbox #cboxContent button#cboxPrevious {
+            left: 4rem; } }
       .single #colorbox #cboxContent button#cboxNext,
       .page #colorbox #cboxContent button#cboxNext {
         right: 1rem; }
+        @media (min-width: 769px) {
+          .single #colorbox #cboxContent button#cboxNext,
+          .page #colorbox #cboxContent button#cboxNext {
+            right: 4rem; } }
       .single #colorbox #cboxContent button#cboxClose,
       .page #colorbox #cboxContent button#cboxClose {
         background-image: url(../img/dis-plus.svg);
@@ -2206,6 +2293,12 @@ body.category.category-esemeny main {
         transform: rotate(45deg);
         top: -3rem;
         right: 1rem; }
+        @media (min-width: 769px) {
+          .single #colorbox #cboxContent button#cboxClose,
+          .page #colorbox #cboxContent button#cboxClose {
+            position: fixed;
+            right: 4rem;
+            top: 4rem; } }
   .single .toHome,
   .single #related_posts > h3,
   .page .toHome,
@@ -2213,7 +2306,7 @@ body.category.category-esemeny main {
     padding-bottom: 4rem;
     margin: 0 auto;
     text-align: center;
-    font: bold 1rem "Westeinde Caption"; }
+    font: bold 1.4rem "Westeinde Caption"; }
     @media (min-width: 769px) {
       .single .toHome,
       .single #related_posts > h3,
@@ -2226,7 +2319,7 @@ body.category.category-esemeny main {
     .single #related_posts > h3 a,
     .page .toHome a,
     .page #related_posts > h3 a {
-      font: bold 1rem "Westeinde Caption"; }
+      font: bold 1.4rem "Westeinde Caption"; }
       @media (min-width: 769px) {
         .single .toHome a,
         .single #related_posts > h3 a,
@@ -2247,7 +2340,10 @@ body.category.category-esemeny main {
       position: relative;
       padding-top: 4rem;
       top: -5rem;
-      padding-right: 10rem; }
+      margin: 0;
+      padding-right: 20rem;
+      padding-left: 0;
+      max-width: calc(1024px + 20rem); }
       .single .toHome a,
       .page .toHome a {
         margin-bottom: 4rem;
@@ -2286,7 +2382,9 @@ body.category.category-esemeny main {
           margin: 0; }
           .single #related_posts ul li h2 a,
           .page #related_posts ul li h2 a {
-            font: 500 2rem "Westeinde Caption"; }
+            display: block;
+            font: 500 2rem "Westeinde Caption";
+            line-height: 1.3; }
         .single #related_posts ul li .metadata,
         .page #related_posts ul li .metadata {
           bottom: 50%;
@@ -2311,10 +2409,12 @@ body.category.category-esemeny main {
     @media (min-width: 769px) {
       .single #related_posts,
       .page #related_posts {
-        padding-right: 10rem;
         top: -5rem;
         position: relative;
-        padding-top: 2rem; }
+        padding-top: 4rem;
+        padding-right: 20rem;
+        padding-left: 0;
+        max-width: calc(1024px + 20rem); }
         .single #related_posts > h3,
         .page #related_posts > h3 {
           display: block; }
@@ -2325,9 +2425,9 @@ body.category.category-esemeny main {
           flex-wrap: nowrap; }
           .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);
+            max-height: calc(1024px / 3);
             position: relative; }
             .single #related_posts ul li .related_thumbnailwrapper,
             .page #related_posts ul li .related_thumbnailwrapper {
@@ -2691,6 +2791,9 @@ body.category.category-esemeny main {
   -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 blockquote p a,
+  .single .tag-be .single-content h3 a {
+    color: #7e7f00; }
 
 .single .tag-be .single-content a {
   color: #fdff00; }
@@ -2718,6 +2821,9 @@ body.category.category-esemeny main {
   -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 blockquote p a,
+  .single .tag-do .single-content h3 a {
+    color: #1e007f; }
 
 .single .tag-do .single-content a {
   color: #3c00ff; }
@@ -2745,6 +2851,9 @@ body.category.category-esemeny main {
   -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 blockquote p a,
+  .single .tag-think .single-content h3 a {
+    color: #007f5c; }
 
 .single .tag-think .single-content a {
   color: #00ffb8; }
@@ -2772,6 +2881,9 @@ body.category.category-esemeny main {
   -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 blockquote p a,
+  .single .tag-love .single-content h3 a {
+    color: #7f2f2f; }
 
 .single .tag-love .single-content a {
   color: #ff5f5f; }
diff --git a/functions.php b/functions.php
index 384ed81..0c9b8f3 100644
--- a/functions.php
+++ b/functions.php
@@ -98,39 +98,6 @@ function dis2019_nav()
     );
 }
 
-//walker for tag menu: bedo circle hover
-// class Menu_With_Description extends Walker_Nav_Menu
-// {
-//     public function start_el(&$output, $item, $depth, $args)
-//     {
-//         global $wp_query;
-//         $indent = ($depth) ? str_repeat("\t", $depth) : '';
-
-//         $class_names = $value = '';
-
-//         $classes = empty($item->classes) ? array() : (array) $item->classes;
-
-//         $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
-//         $class_names = ' class="' . esc_attr($class_names) . ' tag-' . $item->title . '"';
-
-//         $output .= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . $class_names . '>';
-
-//         $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
-//         $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
-//         $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
-//         $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
-
-//         $item_output = $args->before;
-//         $item_output .= '<a' . $attributes . '>';
-//         $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
-//         $item_output .= '</a>';
-//         $item_output .= '<span class="sub menu-item-sub-' . $item->ID . '">' . $item->description . '</span>';
-//         $item_output .= $args->after;
-
-//         $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
-//     }
-// }
-
 // Load dis-2019 scripts (header.php)
 function dis2019_header_scripts()
 {
@@ -351,6 +318,12 @@ function remove_thumbnail_dimensions($html)
     return $html;
 }
 
+//Wrap aligned images to a div
+function wrap_aligned_images($content){
+    return preg_replace('/<div class="wp-block-image"><figure class="(align[a-z]*)([ "])(.*)<\/figure>\s*/iU', '<div class="wp-block-image wp-block-image-aligned"><div class="alignedWrapper \1Wrapper"><figure  class="\1\2\3 </figure></div>', $content);
+}
+add_filter('the_content', 'wrap_aligned_images');
+
 // Custom Gravatar in Settings > Discussion
 function dis2019gravatar($avatar_defaults)
 {
diff --git a/js/scripts.js b/js/scripts.js
index 3e57ae8..47d18f0 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -97,7 +97,7 @@
 		const isSingle = bodyHasClass('single')
 
 		var isMasonryPage = isArchive || isHome || isSearch
-		
+
 
 
 
@@ -880,8 +880,12 @@
 
 			/* ----------------------------- scroll to title ---------------------------- */
 
-			const titleWrapperHeight = $('article>.titlewrapper')[0].getBoundingClientRect().height
-			$('html, body').stop().animate({ scrollTop: titleWrapperHeight }, 400);
+			if (!isMobile) {
+				const titleWrapperHeight = $('article>.titlewrapper')[0].getBoundingClientRect().height
+				if ($('html, body').scrollTop() == 0) {
+					$('html, body').stop().animate({ scrollTop: titleWrapperHeight }, 400);
+				}
+			}
 
 
 		}//if single end
diff --git a/loop-inner.php b/loop-inner.php
new file mode 100644
index 0000000..3ff248d
--- /dev/null
+++ b/loop-inner.php
@@ -0,0 +1,86 @@
+<!-- post thumbnail -->
+<?php if (has_post_thumbnail()): // Check if thumbnail exists
+    console_debug('relatedloop: ' . $relatedloop);
+    console_debug('qc: ' . $qc);
+    if ($relatedloop === true): ?>
+		        <a class="related_thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
+		            <?php the_post_thumbnail('home-square-thumbnail');?>
+		        </a>
+		    <?php else: ?>
+        <a class="thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
+            <?php if (is_home() and $qc < 3): ; //first two posts are big
+    the_post_thumbnail('home-big-thumbnail');
+else:
+    the_post_thumbnail('home-square-thumbnail');
+endif;?>
+        </a>
+    <?php endif;?>
+<?php endif;?>
+<!-- /post thumbnail -->
+
+
+<div class="metadata">
+	<div class="categories">
+        <?php
+$echos = [];
+foreach ((get_the_category()) as $category) {
+    $echos[] = $category->name;
+}
+print implode(' | ', $echos);
+?>
+
+        <?php if (is_home() and $qc < 3): ; //first two posts format only ?>
+		            <?php //get the post format
+    $terms = get_the_terms($post->ID, 'Format');
+    if ($terms && !is_wp_error($terms)) {
+        foreach ($terms as $term) {
+            echo '| ';
+            echo $term->name;
+        }
+    }?>
+		        <?php endif;?>
+    </div><!-- categories end-->
+    <?php if (is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
+				<div class="alcim">
+		            <?php
+    $dis_alcim_value = get_post_meta(get_the_ID(), 'dis-alcim', true);
+    // Check if the custom field has a value.
+    if (!empty($dis_alcim_value)) {
+        echo $dis_alcim_value;
+    }
+    ?>
+		        </div>
+		    <?php endif;?>
+    <div class="vr"></div>
+    <div class="postedon">
+        '<?php the_time('y.m.d.');?>
+    </div>
+    <?php if (is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
+		            <div class="bevezeto">
+		                <?php
+    $dis_bevezeto_value = get_post_meta(get_the_ID(), 'dis-bevezeto', true);
+    // Check if the custom field has a value.
+    if (!empty($dis_bevezeto_value)) {
+        echo $dis_bevezeto_value;
+    }
+    ?>
+		            </div>
+
+		            <?php endif;?>
+            <div class="filler"></div>
+            <?php if (is_home() and $qc == 1): ; //first post on home ?>
+		            <div class="curvyArrow">
+		                <object data="<?php echo get_template_directory_uri(); ?>/img/curvy_arrow.svg"
+		                    type="image/svg+xml">
+		                    <img src="<?php echo get_template_directory_uri(); ?>/img/curvy_arrow.png" />
+		                </object>
+		            </div>
+			<?php endif;?>
+</div> <!-- metadata end -->
+
+
+<!-- post title -->
+<h2>
+    <a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a>
+</h2>
+<!-- /post title -->
\ No newline at end of file
diff --git a/loop.php b/loop.php
index 307fec3..658b9ae 100644
--- a/loop.php
+++ b/loop.php
@@ -2,92 +2,8 @@
 	static $qc = 0;
 	$qc++;
 ?>
-
-
 		<article id="post-<?php the_ID();?>" <?php post_class();?>>
-
-			<!-- post thumbnail -->
-			<?php if (has_post_thumbnail()): // Check if thumbnail exists ?>
-				<a class="thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
-					<?php if(is_home() and $qc < 3): ; //first two posts are big
-							the_post_thumbnail('home-big-thumbnail');
-						else:
-							the_post_thumbnail('home-square-thumbnail');
-						endif;?>
-				</a>
-				<?php endif;?>
-			<!-- /post thumbnail -->
-
-			<div class="metadata">
-				<div class="categories">
-					<?php
-					$echos = [];
-					foreach((get_the_category()) as $category){
-						$echos[]= $category->name;
-						}
-						print implode(' | ', $echos);
-					?>
-
-					<?php if(is_home() and $qc < 3): ; //first two posts format only ?>
-					<?php //get the post format
-						$terms = get_the_terms($post->ID, 'Format');
-						if ($terms && ! is_wp_error( $terms )) {
-							foreach ($terms as $term) {
-								echo '| ';
-								echo $term->name;
-							}
-						}?>
-						<?php endif;?>
-				</div>
-				<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
-						<div class="alcim">
-							<?php
-								$dis_alcim_value = get_post_meta( get_the_ID(), 'dis-alcim', true );
-								// Check if the custom field has a value.
-								if ( ! empty( $dis_alcim_value ) ) {
-    								echo $dis_alcim_value;
-								}
-							?>
-						</div>
-						<?php endif;?>
-				<div class="vr"></div>
-				<div class="postedon">
-					'<?php the_time('y.m.d.');?>
-				</div>
-				<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
-						<div class="bevezeto">
-						<?php
-								$dis_bevezeto_value = get_post_meta( get_the_ID(), 'dis-bevezeto', true );
-								// Check if the custom field has a value.
-								if ( ! empty( $dis_bevezeto_value ) ) {
-    								echo $dis_bevezeto_value;
-								}
-							?>
-						</div>
-						
-						<?php endif;?>
-						<div class="filler"></div>
-						<?php if(is_home() and $qc == 1): ; //first post on home ?>
-						<div class="curvyArrow">
-							<object data="<?php echo get_template_directory_uri(); ?>/img/curvy_arrow.svg"
-								type="image/svg+xml">
-								<img src="<?php echo get_template_directory_uri(); ?>/img/curvy_arrow.png" />
-							</object>
-						</div>
-						
-						
-						<?php endif;?>
-			</div> <!-- metadata end -->
-
-
-			<!-- post title -->
-			<h2>
-				<a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a>
-			</h2>
-			<!-- /post title -->
-
-
-
+			<?php include( locate_template( 'loop-inner.php', false, false ) ); ?>
 		</article>
 
 
diff --git a/sass/_font-mixins.scss b/sass/_font-mixins.scss
index 711a3d8..a7e8ce6 100644
--- a/sass/_font-mixins.scss
+++ b/sass/_font-mixins.scss
@@ -147,12 +147,21 @@
 // }
 
 @mixin single-metadata {
-  font: bold 1rem "Westeinde Caption";
+  font: bold 1.4rem "Westeinde Caption";
   @media #{$smalldesktop} {
     font: 900 2rem "Westeinde Caption";
     color: #fff;
     -webkit-text-stroke: #000 1px;
-    
+  }
+}
+
+@mixin single-author {
+  @include single-metadata();
+  font-size: 2rem;
+  color: #fff;
+  -webkit-text-stroke: #000 1px;
+  @media #{$smalldesktop} {
+    font-size: 3rem;
   }
 }
 
@@ -180,4 +189,5 @@
 
 @mixin related-title {
   font: 500 2rem "Westeinde Caption";
+  line-height: 1.3;
 }
diff --git a/sass/base.scss b/sass/base.scss
index 5ffdc74..8af1189 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -1259,8 +1259,8 @@ $v-unit-6: 24rem;
     @media #{$smalldesktop} {
       padding: 0 $h-unit-4;
 
-      .archivetitle h1, article h2 {
-        
+      .archivetitle h1,
+      article h2 {
       }
     }
   }
@@ -1321,6 +1321,12 @@ body.category.category-esemeny {
 /*                                   single                                   */
 /* -------------------------------------------------------------------------- */
 
+@mixin singlDesktopLayout() {
+  padding-right: $h-unit-4;
+  padding-left: 0;
+  max-width: calc(1024px + #{$h-unit-4});
+}
+
 .single,
 .page {
   //no menus on single
@@ -1379,12 +1385,19 @@ body.category.category-esemeny {
         position: relative;
         align-self: flex-end;
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+        flex-direction: column;
+        justify-content: center;
+
         @include single-metadata();
 
-        .time-cat {
-          z-index: 10;
+        .metaWrapper {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+          .time-cat {
+            z-index: 10;
+          }
         }
       }
       h1.single-title {
@@ -1451,17 +1464,19 @@ body.category.category-esemeny {
         justify-content: flex-start;
         height: unset;
         padding-top: 0;
-        //   display: block;
 
         .metadata {
           top: -#{$h-unit-1};
-          // width: calc(100% - #{$h-unit-1});
           width: 100%;
           padding-left: 0;
-          padding-right: $h-unit-2;
+          padding-right: 0;
 
           @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
 
+          .metaWrapper {
+            @include singlDesktopLayout();
+          }
+
           // .time-cat {
           // }
         }
@@ -1470,24 +1485,12 @@ body.category.category-esemeny {
           min-height: unset;
           top: -#{$h-unit-1};
           position: relative;
-          padding-right: $h-unit-2;
-          padding-left: 0;
-          //       //position: fixed;
-          //       // height: 100vh;
-          //       bottom: 0;
-          //       left: 0;
-          //       right: 0;
-          //       // padding: $h-unit-2;
-
-          //       z-index: -1;
-          //       //ez lehet nem kell, összedolgozni:
-          //       display: block;
-          //       // @include single-title2();
+          @include singlDesktopLayout();
         }
       }
     }
 
-    /* ----------------------------- single content ----------------------------- */
+    /* ---------------------------- single content hr --------------------------- */
 
     hr {
       height: 1px;
@@ -1506,8 +1509,12 @@ body.category.category-esemeny {
         }
       }
       &.content-end {
-        margin-top: $padd;
-        margin-bottom: $padd;
+        margin-top: $padd * 2;
+        margin-bottom: 0;
+        @media #{$smalldesktop} {
+          margin-top: $padd;
+          margin-bottom: $padd;
+        }
       }
     }
 
@@ -1518,13 +1525,14 @@ body.category.category-esemeny {
       }
     }
 
+    /* ----------------------------- single content ----------------------------- */
+
     .single-content {
       position: relative;
       padding: $padd;
       @media #{$smalldesktop} {
         top: -#{$h-unit-1};
-        padding-left: 0;
-        padding-right: $h-unit-2;
+        @include singlDesktopLayout();
       }
 
       h2 {
@@ -1574,16 +1582,22 @@ body.category.category-esemeny {
         text-align: unset;
       }
 
+      /* ---------------------------- images on single ---------------------------- */
+
       .wp-block-image {
-        // padding: $padd 0;
         margin: $padd 0;
-        @media #{$smalldesktop} {
-          padding: $padd 0;
-        }
         position: relative !important;
+
+        @media #{$smalldesktop} {
+          padding: 0;
+        }
+
+        &:not(.wp-block-image-aligned) {
+          @include fit-content(width);
+        }
+
         figcaption {
           bottom: 0 !important;
-          // width: calc(100% - #{$h-unit-1});
 
           &::after {
             @include trianglecorner(topright, #{$h-unit-1});
@@ -1642,24 +1656,54 @@ body.category.category-esemeny {
       //aligned:
       .wp-block-gallery,
       .wp-block-image {
-        .alignleft,
-        .alignright {
-          //no align on mobile
-          float: unset;
-          margin: 0;
+        .alignedWrapper {
+          position: relative;
+
           @media #{$smalldesktop} {
-            width: 100%;
+            max-width: 50%;
+            @include fit-content(width);
+            &.alignleftWrapper {
+              padding-right: $padd;
+              float: left;
+            }
+            &.alignrightWrapper {
+              padding-left: $padd;
+              float: right;
+            }
+          }
+          .alignleft,
+          .alignright {
+            margin: 0;
+            //no align on mobile
+            position: relative;
+            // @media #{$only-mobile} {
+            float: unset;
+            // }
+
+            @media #{$smalldesktop} {
+              width: auto;
+              // max-width: 50%;
+
+              // @media #{$smalldesktop} {
+              //   &.alignleft {
+              //     padding-right: $padd;
+              //   }
+              //   &.alignright {
+              //     padding-left: $padd;
+              //   }
+              // }
+            }
           }
-        }
-        .alignright {
-          text-align: right;
         }
       }
 
       .authors {
-        @include single-h4();
+        // @include single-h4();
+        @include single-author();
+        color: #000;
+        -webkit-text-stroke: 0px;
         a {
-          @include single-metadata();
+          @include single-author();
         }
       }
     } //.single-content end
@@ -1677,6 +1721,9 @@ body.category.category-esemeny {
   }
   #colorbox {
     z-index: 12;
+    @media #{$smalldesktop} {
+    z-index: 3150;
+    }
     &:focus {
       border: none;
       outline: none;
@@ -1706,13 +1753,24 @@ body.category.category-esemeny {
           bottom: -5rem;
           filter: invert(100);
           z-index: 14;
+          @media #{$smalldesktop} {
+            position: fixed;
+            top: 50%;
+            z-index: 3200;
+          }
         }
         &#cboxPrevious {
           left: 1rem;
           @include transform(scaleX(-1));
+          @media #{$smalldesktop} {
+            left: $v-unit-1;
+          }
         }
         &#cboxNext {
           right: 1rem;
+          @media #{$smalldesktop} {
+            right: $v-unit-1;
+          }
         }
         &#cboxClose {
           background-image: url(../img/dis-plus.svg);
@@ -1721,6 +1779,11 @@ body.category.category-esemeny {
           @include transform(rotate(45deg));
           top: -3rem;
           right: 1rem;
+          @media #{$smalldesktop} {
+            position: fixed;
+            right: $v-unit-1;
+            top: $v-unit-1;
+          }
         }
       }
     }
@@ -1748,7 +1811,9 @@ body.category.category-esemeny {
       position: relative;
       padding-top: $padd * 2;
       top: -#{$h-unit-1};
-      padding-right: $h-unit-2;
+      margin: 0;
+      @include singlDesktopLayout();
+
       a {
         margin-bottom: $padd * 2;
         display: block;
@@ -1795,6 +1860,7 @@ body.category.category-esemeny {
           margin: 0;
 
           a {
+            display: block;
             @include related-title();
           }
         }
@@ -1823,10 +1889,10 @@ body.category.category-esemeny {
 
     /* ------------------------ related posts on desktop ------------------------ */
     @media #{$smalldesktop} {
-      padding-right: $h-unit-2;
       top: -#{$h-unit-1};
       position: relative;
-      padding-top: $padd;
+      padding-top: $padd * 2;
+      @include singlDesktopLayout();
 
       & > h3 {
         display: block;
@@ -1836,23 +1902,9 @@ body.category.category-esemeny {
         flex-direction: row;
         flex-wrap: nowrap;
         li {
-          flex: 1 1 33%;
-          // .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);
+          max-height: calc(1024px / 3);
           position: relative;
           .related_thumbnailwrapper {
             width: 100%;
@@ -2034,7 +2086,7 @@ body.page {
 
 //colors on single articles
 
-@mixin tagcolors-single($color) {
+@mixin tagcolors-single($color, $darkcolor) {
   .titlewrapper {
     .metadata {
       @media #{$smalldesktop} {
@@ -2057,6 +2109,9 @@ body.page {
     h3 {
       background: $color !important;
       @include box-shadow(10px 0 $color, -5px 0 $color !important);
+      a {
+        color: $darkcolor;
+      }
     }
     a {
       color: $color;
@@ -2077,6 +2132,11 @@ $color-do: #3c00ff;
 $color-think: #00ffb8;
 $color-love: #ff5f5f;
 
+$color-be-dark: #7e7f00;
+$color-do-dark: #1e007f;
+$color-think-dark: #007f5c;
+$color-love-dark: #7f2f2f;
+
 //colors on articles
 
 .tag-be {
@@ -2126,19 +2186,19 @@ $color-love: #ff5f5f;
 //single article
 .single {
   .tag-be {
-    @include tagcolors-single($color-be);
+    @include tagcolors-single($color-be, $color-be-dark);
   }
 
   .tag-do {
-    @include tagcolors-single($color-do);
+    @include tagcolors-single($color-do, $color-do-dark);
   }
 
   .tag-think {
-    @include tagcolors-single($color-think);
+    @include tagcolors-single($color-think, $color-think-dark);
   }
 
   .tag-love {
-    @include tagcolors-single($color-love);
+    @include tagcolors-single($color-love, $color-love-dark);
   }
 }
 
diff --git a/singular.php b/singular.php
index 744a94e..4f040db 100644
--- a/singular.php
+++ b/singular.php
@@ -22,24 +22,27 @@
 					
 					<div class="metadata">
 						<?php if (!is_page()): ?>
-							<div class="time-cat">
-								<?php the_time('Y. m. d.');?> |
-								<?php the_category(' | ');?>
+							<div class="metaWrapper">
+								<div class="time-cat">
+									<?php the_time('Y. m. d.');?> |
+									<?php the_category(' | ');?>
+								</div>
+								<div class="format">
+								<?php 
+									$terms = get_the_terms( $post->ID, 'Format' );
+									if ($terms && ! is_wp_error( $terms )) {
+										foreach($terms as $term) {
+											?>
+											<a href="<?php echo esc_url(get_term_link( $term));?>">
+											<?php
+											echo $term->name;
+											echo '</a>';
+										} 
+									} ?>
+								</div>
 							</div>
-							<div class="format">
-							<?php 
-								$terms = get_the_terms( $post->ID, 'Format' );
-								if ($terms && ! is_wp_error( $terms )) {
-									foreach($terms as $term) {
-										?>
-										<a href="<?php echo esc_url(get_term_link( $term));?>">
-										<?php
-										echo $term->name;
-										echo '</a>';
-									} 
-								} ?>
-							</div>
-							<?php endif; ?>
+							
+						<?php endif; ?>
 					</div>					
 					<h1 class="single-title">
 						<?php the_title();?>
@@ -91,43 +94,18 @@
 							);
 
 						$my_query = new wp_query( $args );
-						console_debug($my_query);
+						//console_debug($my_query);
 						if( $my_query->have_posts() ) {
 							?>
 							<div id="related_posts"><h3><?php _e('More posts:', 'dis2019');?></h3><ul>
 							<?php
 							while( $my_query->have_posts() ) {
 								$my_query->the_post();
+								static $relatedloop = true;
 								?>
 						
 								<li>
-									<?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>
-									<?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 -->
+									<?php include( locate_template( 'loop-inner.php', false, false ) ); ?>
 								</li>
 								<?php
 							}