home updates

css/base.css

@@ -503,14 +503,14 @@ object {
 .touchevents .header-scroll {
   display: none !important; }
 
+@media (min-width: 769px) {
+  .touchevents .archive,
+  .touchevents .home {
+    overflow-y: hidden; } }
+
 /* -------------------------------------------------------------------------- */
 /*                            ARCHIVE AND HOMEPAGE                            */
 /* -------------------------------------------------------------------------- */
-@media (min-width: 769px) {
-  .archive,
-  .home {
-    overflow-y: hidden; } }
-
 .archive .wrapper,
 .home .wrapper {
   /* ----------------------------- header on home ----------------------------- */ }
@@ -612,7 +612,7 @@ object {
         margin-left: 10rem;
         padding-top: 4rem;
         border-right: #000 1px solid;
-        /* -------------------------------- thumbnail and title ------------------------------- */
+        /* ------------- home article desktop big - thumbnail and title ------------- */
         /* -------------------------- home article metadata big------------------------- */
         /* ------------------------- home article big hover ------------------------- */ }
         .archive main section .home-wrapper-big article .thumbnailwrapper,
@@ -678,10 +678,6 @@ object {
         .archive main section .home-wrapper-big article .metadata,
         .home main section .home-wrapper-big article .metadata {
           font-size: 2rem; } }
-  @media (min-width: 769px) {
-          .archive main section .home-wrapper-big article .metadata > div,
-          .home main section .home-wrapper-big article .metadata > div {
-            width: 30%; } }
       @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
         .archive main section .home-wrapper-big article .metadata,
         .home main section .home-wrapper-big article .metadata {
@@ -689,24 +685,34 @@ object {
   @media (min-width: 769px) {
           .archive main section .home-wrapper-big article .metadata .categories,
           .home main section .home-wrapper-big article .metadata .categories {
-            display: block; }
+            display: block;
+            padding: 0 5rem; }
+          .archive main section .home-wrapper-big article .metadata .vr,
+          .home main section .home-wrapper-big article .metadata .vr {
+            height: 100%;
+            width: 1px;
+            background-color: #000; }
+          .archive main section .home-wrapper-big article .metadata .postedon,
+          .home main section .home-wrapper-big article .metadata .postedon {
+            padding: 0 5rem; }
           .archive main section .home-wrapper-big article .metadata .bevezeto,
           .archive main section .home-wrapper-big article .metadata .alcim,
           .home main section .home-wrapper-big article .metadata .bevezeto,
           .home main section .home-wrapper-big article .metadata .alcim {
             display: none; }
-        .archive main section .home-wrapper-big article.hovered,
+        .archive main section .home-wrapper-big article.hovered h2 > a,
-        .home main section .home-wrapper-big article.hovered {
+        .home main section .home-wrapper-big article.hovered h2 > a {
-          width: calc(100vw - (10rem * 2)); }
+          color: #000; }
-          .archive main section .home-wrapper-big article.hovered h2 > a,
-          .home main section .home-wrapper-big article.hovered h2 > a {
-            color: #000; }
       .archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
       .home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
         justify-content: flex-end; }
       .archive main section .home-wrapper-big.home-wrapper-2 article,
       .home main section .home-wrapper-big.home-wrapper-2 article {
-        border-left: #000 1px solid; } }
+        border-left: #000 1px solid; }
+        .archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
+        .home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
+          left: -5rem;
+          position: relative; } }
   @media (min-width: 769px) {
     .archive main section .home-wrapper-small,
     .home main section .home-wrapper-small {
@@ -1366,6 +1372,26 @@ object {
     color: #fff !important;
     -webkit-text-stroke: #3c00ff 1px !important; } }
 
+body.hover-tag-be,
+.header-1.hover-tag-be,
+.header-2.hover-tag-be {
+  background-color: #00ffb8 !important; }
+
+body.hover-tag-do,
+.header-1.hover-tag-do,
+.header-2.hover-tag-do {
+  background-color: #ff5f5f !important; }
+
+body.hover-tag-think,
+.header-1.hover-tag-think,
+.header-2.hover-tag-think {
+  background-color: #fdff00 !important; }
+
+body.hover-tag-love,
+.header-1.hover-tag-love,
+.header-2.hover-tag-love {
+  background-color: #3c00ff !important; }
+
 /* -------------------------------------------------------------------------- */
 /*                                   imports                                  */
 /* -------------------------------------------------------------------------- */

js/scripts.js

@@ -10,38 +10,56 @@
 		/*                                  VARIABLES                                 */
 		/* ========================================================================== */
 
+		/* -------------------------------- geometry -------------------------------- */
+
 		const vw = $(window).width()
 		const wow = window.outerWidth
-		console.log(vw, wow)
+		// console.log(vw, wow)
-		var isMobile
+
-		var isHome = false
+		const bottomScrollHeight = window.innerHeight - $(window).height()
-		var isArchive = false
+		const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
-		var isEsemeny = false
 
 
+		/* --------------------------- css values to vars --------------------------- */
+		//isMobile
+		const isMobile = (_ => {
+			if (wow < 769) {
+				//mobile settings
+				$('.social-link').addClass('hidden')
+				return true
 
-		if (wow < 769) {
+			} else {
-			isMobile = true
+				return false
-			//mobile settings
+			}
-			$('.social-link').addClass('hidden')
+		})()
 
-		} else {
+		//isHome
-			isMobile = false
+		const isHome = (_ => {
-		}
+			if ($('body').hasClass("home")) {
+				return true
+			} else {
+				return false
+			}
+		})()
 
-		if ($('body').hasClass("home")) {
-			isHome = true
-		}
 
-		if ($('body').hasClass("archive") & !$('body').hasClass("category-esemeny")) {
+		//isArchive
-			isArchive = true
+		const isArchive = (_ => {
-		}
+			if ($('body').hasClass("archive") & !$('body').hasClass("category-esemeny")) {
+				return true
+			} else {
+				return false
+			}
+		})()
 
-		if ($('body').hasClass("category-esemeny")) {
+		//isEsemeny
-			isEsemeny = true
+		const isEsemeny = (_ => {
-		}
+			if ($('body').hasClass("category-esemeny")) {
-
+				return true
-		var desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
+			} else {
+				return false
+			}
+		})()
 
 
 		/* ========================================================================== */
@@ -155,8 +173,11 @@
 
 		if (!isMobile) {
 			if (isHome || isArchive) {
+
+				//no overflowY
 				$('html').css({ overflowY: "hidden" })		
 
+				//calculate wrappable elements
 				$('#content>*:not(.misha_loadmore)').addClass("hbox")
 				var wrapArticles = $(".hbox").length
 
@@ -165,10 +186,8 @@
 					$('.hbox:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
 					$('.hbox:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
 					wrapArticles = $(".hbox").length - 2
-
 				}
 
-
 				//add classes to articles and elements
 				var articleWrapCounter = 0
 				for (let i = 0; i < wrapArticles; i++) {
@@ -178,15 +197,14 @@
 						j = i + 3
 					}
 
-
 					if (i % 6 == 0) {
 						articleWrapCounter++
 					}
-					console.log($('.hbox:nth-child(' + j + ')').attr("id"), i, j)
+					//console.log($('.hbox:nth-child(' + j + ')').attr("id"), i, j)
 					$('.hbox:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
 					//change order if there is a description
 					if ($(".archivedescription") && articleWrapCounter == 1 && j > 2 && j < 5) {
-						$('.hbox:nth-child(' + j + ')').css({order:"99"})
+						$('.hbox:nth-child(' + j + ')').css({ order: "99" })
 					}
 				}
 				//wrap classes
@@ -201,8 +219,12 @@
 						$(".home-wrapper-" + j).addClass("home-wrapper-s1")
 					}
 				}
-			}
+
-		}
+				//add bottom scrollbar to div on bottom:
+				$(".home-wrapper-big .metadata").css({bottom: bottomScrollHeight})
+
+			}//isHome || isArchive end
+		}// !isMobile end
 
 		//returns three random numebers 0-5
 		function randomNumbers() {
@@ -253,7 +275,6 @@
 			}
 		}
 
-
 		/* --------------------------------- To top --------------------------------- */
 
 		$(".totop>a").click(function (e) {
@@ -443,22 +464,40 @@
 		//hover on big articles
 		$(".home-big h2").hover(function () {
 			let cc = $(this)
-			//make width more
+			let cArticle = cc.parents("article")
-			cc.parents("article").addClass("hovered")
+			//add hovered class
-			//change bg
+			cArticle.addClass("hovered")
-			// $(this).parents('article').animate({})
+			//add tag to header for bg
-			//animate metadata
+			let artClasses = cArticle.attr("class").split(" ")
+			let theTag = findClassByStart(artClasses, "tag")
+			$("body, .header-1, .header-2").addClass("hover-" + theTag)
+			//show excerpt and alcim
+			cArticle.children(".metadata").children(".alcim").show()
+			cArticle.children(".metadata").children(".bevezeto").show()
 
-			//show excerpt
 		}, function () {
 			let cc = $(this)
-			//width back to normal
+			//remove hovered class
 			cc.parents("article").removeClass("hovered")
-
+			//remove tag from header and body
-
+			let headerClasses = $(".header-1").attr("class").split(" ")
+			var hoverClass = findClassByStart(headerClasses, "hover")
+			$("body, .header-1, .header-2").removeClass(hoverClass)
 		})
 
 
+		function findClassByStart(classlist, startString, sep = "-") {
+			//finds a name of a class, from the first elemnt 
+			var fullstring
+			for (let i = 0; i < classlist.length; i++) {
+				let curr = classlist[i].split(sep)
+				if (curr[0] == startString) {
+					fullstring = classlist[i]
+				}
+			}
+			return fullstring
+		}
+
 		//hover on small articles
 		function showTitle(th) {
 			$(th).children("h2").show()

loop.php

@@ -21,22 +21,20 @@
 			<div class="metadata">
 				<div class="categories">
 					<?php the_category(' | ');?>
-
+					<?php
-						<?php
+						$terms = get_the_terms($post->ID, 'Format');
-							$terms = get_the_terms($post->ID, 'Format');
+						if ($terms) {
-							if ($terms) {
+							foreach ($terms as $term) {
-								foreach ($terms as $term) {
+								echo '| ';
-									echo '| ';
+								echo $term->name;
-									echo $term->name;
+							}
-								}
+						}?>
-							}?>
-
 				</div>
 				<div class="vr">
 				
 				</div>
 				<div class="postedon">
-					<?php the_time('Y. m. d.');?>
+					<?php the_time('m. d.');?>
 				</div>
 				<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
 						<div class="alcim">

sass/base.scss

@@ -311,7 +311,7 @@ $v-unit-1: 4rem;
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;
+          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;
         }
       }
     }
@@ -563,8 +563,18 @@ $v-unit-1: 4rem;
 } //wrapper end
 
 //no header scroll on touch devices(because it's invisible)
-.touchevents .header-scroll {
+.touchevents {
-  display: none !important;
+  .header-scroll {
+    display: none !important;
+  }
+
+  // no overflow on touch devices, where no horizontal scrollbar visible
+  .archive,
+  .home {
+    @media #{$smalldesktop} {
+      overflow-y: hidden;
+    }
+  }
 }
 
 /* -------------------------------------------------------------------------- */
@@ -574,7 +584,7 @@ $v-unit-1: 4rem;
 .archive,
 .home {
   @media #{$smalldesktop} {
-    overflow-y: hidden;
+    // overflow-y: hidden;
   }
 
   .wrapper {
@@ -685,7 +695,8 @@ $v-unit-1: 4rem;
             padding-top: $v-unit-1;
             border-right: #000 1px solid;
 
-            /* -------------------------------- thumbnail and title ------------------------------- */
+            /* ------------- home article desktop big - thumbnail and title ------------- */
+
             .thumbnailwrapper {
               height: calc(100% - #{$v-unit-1});
               display: flex;
@@ -720,18 +731,23 @@ $v-unit-1: 4rem;
               align-items: center;
               @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
               @include home-metadata-big();
-              & > div {
-                width: 30%;
-              }
               
               @media #{$mobile-landscape} {
                 height: calc(#{$h-unit-2} / 2);
               }
               .categories {
-                // display: none;
-
                 display: block;
-                // border-right: #000 solid 1px;
+                padding: 0 $h-unit-1;
+              }
+
+              .vr {
+                height: 100%;
+                width: 1px;
+                background-color: #000;
+              }
+
+              .postedon{
+                padding: 0 $h-unit-1;
               }
 
               .bevezeto,
@@ -742,7 +758,6 @@ $v-unit-1: 4rem;
 
             /* ------------------------- home article big hover ------------------------- */
             &.hovered {
-              width: calc(100vw - (#{$h-unit-2} * 2));
               h2 > a {
                 color: #000;
               }
@@ -758,6 +773,12 @@ $v-unit-1: 4rem;
           &.home-wrapper-2 {
             article {
               border-left: #000 1px solid;
+              .thumbnailwrapper {
+                img {
+                  left: -$h-unit-1;
+                  position: relative;
+                }
+              }
             }
           }
         }
@@ -846,7 +867,7 @@ $v-unit-1: 4rem;
             border-right: #000 1px solid;
             @include home-title();
             @include triangle-corner-bordered($h-unit-1, 0, transparent);
-            &.tag{
+            &.tag {
               text-transform: uppercase;
             }
           }
@@ -864,7 +885,7 @@ $v-unit-1: 4rem;
             justify-content: flex-end;
             align-items: flex-start;
             padding: 2rem;
-            p{
+            p {
               margin: 0;
               @include archive-tag-description();
             }
@@ -1142,6 +1163,8 @@ $v-unit-1: 4rem;
   }
 }
 
+//tagclip: filters on small articale images
+
 @mixin tagclip($tag) {
   @media #{$smalldesktop} {
     .thumbnailwrapper > img {
@@ -1157,6 +1180,8 @@ $v-unit-1: 4rem;
   }
 }
 
+//colors on single articles
+
 @mixin tagcolors-single($color) {
   .metadata {
     @media #{$smalldesktop} {
@@ -1172,6 +1197,8 @@ $v-unit-1: 4rem;
   }
 }
 
+//colors on articles
+
 .tag-be {
   @include tagcolors(#00ffb8);
   &.random {
@@ -1200,6 +1227,7 @@ $v-unit-1: 4rem;
   }
 }
 
+//single article
 .single {
   .tag-be {
     @include tagcolors-single(#00ffb8);
@@ -1218,6 +1246,28 @@ $v-unit-1: 4rem;
   }
 }
 
+//menu colored on big article hover
+
+body,
+.header-1,
+.header-2 {
+  &.hover-tag-be {
+    background-color: #00ffb8 !important;
+  }
+
+  &.hover-tag-do {
+    background-color: #ff5f5f !important;
+  }
+
+  &.hover-tag-think {
+    background-color: #fdff00 !important;
+  }
+
+  &.hover-tag-love {
+    background-color: #3c00ff !important;
+  }
+}
+
 /* -------------------------------------------------------------------------- */
 /*                                   imports                                  */
 /* -------------------------------------------------------------------------- */