small fixes

KÉZIKÖNYV.md

@@ -10,7 +10,7 @@ esemény cat-id-t átírni!!
 
 settings>reading>Blog pages show at most 6
 
-## Paraméterek
+## Paraméterek, elemek szerkesztése
 
 ### Bejegyzések
 
@@ -28,6 +28,24 @@ dis-esemeny-datum
 
 dis-esemeny-link
 
+### BE-DO-THINK-LOVE Tagek
+
+A leírást két helyen is szerkeszteni kell:
+
+1. Ami a hoverre megjelenik azt itt kell szerkeszteni:
+
+    Megjelenés>Menük>tags (Tag menu)>Választás>Menü elem lenyitása.
+
+    Ha nincs ott a leírás menü, akkor fent: 
+    
+    Mit lássunk?>Mutassa a bővített menü részleteit-Leírás
+
+2. Ami a listázott oldalon megjelenik azt itt kell szerkeszteni:
+
+    Bejegyzés>Címkék>Szerkesztés
+
+
+
 ## Developement verzió telepítése
 
 Szükséges: python2, gulp global, max node 11

_jegyzet.md

@@ -51,7 +51,7 @@ szerzőnek is paraméter, és kattinható
 
 Single:
 
-	- Nem kell carousel a felső oldalra
+	- ~Nem kell carousel a felső oldalra~
 	- crop thumbnail a fenti képnél
 	- állókép körbefut a szöveg!!!!
 	- galéria: mobilon fix 2, column számot lehessen használni asztalin
@@ -60,15 +60,15 @@ Menü: csík küzépen, két részben, két küön menü
 
 
 BEDO kör: forog, 
-	- hover, megáll, fekete megjelenik, nagyszüvegre megy a be-kat-ra
+	- ~hover, megáll, fekete megjelenik, nagyszüvegre megy a be-kat-ra~
 	- kattintás a szóra:
 
 Kategória lap: első csempe kimarad.
 
 Kereső: 
-	- teljes lábléc magasságban, hosszabban fusson ki
+	- ~teljes lábléc magasságban, hosszabban fusson ki~
-	- ne legyen hover,
+	- ~ne legyen hover~,
-	- focus
+	- ~focus~
 	
 # Kérdések
 
@@ -98,3 +98,8 @@ Kereső:
 ## single:
 
 	képen ne legyen cím
+
+
+## bedo magasság:
+	margin: $v-unit-1 				=> 4rem
+	top: calc(#{$v-unit-1}/ 2); 	=> 2rem

archive.php

@@ -1,10 +1,8 @@
 <?php get_header();?>
 
-
 		<!-- section -->
 		<section id="content">
 
-
 			<?php 
 				if (is_category()) {
 					$ttl = single_cat_title("", false);
@@ -20,20 +18,28 @@
 				
 				// esc_html_e($ttl, 'text-domain')
 			?>
-			<h1 class="archivetitle <?php echo $cl; ?>"><?php echo $ttl; ?></h1>
 			
-			<?php
+			<div class="archivetitle <?php echo $cl; ?>">
-			if (is_tag()) {
+				<h1><?php echo $ttl; ?></h1>
+				<?php if (is_tag()) : ?>
+					<!-- Show images on tag archives: -->
+					<object data="<?php echo get_template_directory_uri(); ?>/img/clip/<?php echo $ttl; ?>_desktop.svg" type="image/svg+xml">
+						<img src="<?php echo get_template_directory_uri(); ?>/img/clip/<?php echo $ttl; ?>_desktop.png" />
+					</object>
+				<?php endif; ?>
 				
+			</div>
+
+
+			<?php
+			// add description box if it's a tag
+			if (is_tag()) {
 				echo '<div class="archivedescription">';
 				echo tag_description();
 				echo "</div>";	
 			}
 			?>
 
-				
-			
-
 			<?php get_template_part('loop');?>
 
 			<?php get_template_part('loadmore');?>

category-esemeny.php

@@ -4,8 +4,6 @@
 		<!-- section -->
 		<section>
 
-			<h1>Események</h1>
-
 			<?php if (have_posts()): while (have_posts()): the_post();?>
 
 
@@ -14,19 +12,12 @@
 			<!-- post thumbnail -->
 			<?php if (has_post_thumbnail()): // Check if thumbnail exists ?>
 				<a class="thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
-					<?php the_post_thumbnail('home-thumbnail');?>
+					<?php the_post_thumbnail('home-event-thumbnail');?>
 				</a>
 				<?php endif;?>
 			<!-- /post thumbnail -->
 
-			<div class="metadata">
+			<div class="event-metadata">
-				<div class="categories">
-					<?php the_category(' | ');?>
-				</div>
-				<div class="postedon">
-					<?php the_time('Y. m. d.');?>
-				</div>
-
 
 			</div>
 

functions.php

@@ -1,7 +1,6 @@
 <?php
 /*
- *  Author: Todd Motto | @toddmotto
+ *  Original author: Todd Motto | @toddmotto
- *  URL: dis2019.com | @dis2019
  *  Custom functions, support, custom post types and more.
  */
 
@@ -30,6 +29,7 @@ if (function_exists('add_theme_support')) {
     add_image_size('small', 120, '', true); // Small Thumbnail
     add_image_size('home-big-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
     add_image_size('home-small-thumbnail', 256, 256, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
+    add_image_size('home-event-thumbnail', 1024, 512, true); 
 
     // Add Support for Custom Backgrounds - Uncomment below if you're going to use
     /*add_theme_support('custom-background', array(
@@ -87,36 +87,37 @@ function dis2019_nav()
 }
 
 //walker for tag menu: bedo circle hover
-class Menu_With_Description extends Walker_Nav_Menu {
+// class Menu_With_Description extends Walker_Nav_Menu
-    function start_el(&$output, $item, $depth, $args) {
+// {
-        global $wp_query;
+//     public function start_el(&$output, $item, $depth, $args)
-        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
+//     {
-         
+//         global $wp_query;
-        $class_names = $value = '';
+//         $indent = ($depth) ? str_repeat("\t", $depth) : '';
- 
-        $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 ) . '"';
- 
-        $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 );
-    }
-}
 
+//         $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()
@@ -203,6 +204,7 @@ function register_dis_menu()
         'header-menu' => __('Header Menu', 'dis2019'), // Main Navigation
         // 'sidebar-menu' => __('Sidebar Menu', 'dis2019'), // Sidebar Navigation
         'tag-menu' => __('Tag Menu', 'dis2019'), // Extra Navigation if needed (duplicate as many as you need!)
+        'right-menu' => __('Right Menu', 'dis2019'), // Extra Navigation if needed (duplicate as many as you need!)
     ));
 }
 
@@ -488,13 +490,12 @@ function dis_2019_more_posts_on_home(&$query)
 
     if ($query->is_home()) {
         $pposts = 14;
-    }elseif ($query->is_tag()) {
+    } elseif ($query->is_tag()) {
         $pposts = 10;
-    }else {
+    } else {
         $pposts = 11;
     }
 
-
     //set post_per_page if it's homepage
     if (!$query->is_paged) {
         $query->set('posts_per_page', $pposts);

header.php

@@ -114,6 +114,7 @@
 					<nav role="navigation" id="sidebar-wrapper" class="nav sidebar-wrapper">
 
 						<?php dis2019_nav(); ?>
+						<?php wp_nav_menu( array( 'theme_location' => 'right-menu') ); ?>
 
 					</nav>
 				</div>
@@ -128,11 +129,11 @@
 
 			<div id="tag-nav">
 				<nav role="navigation" class="tag-nav">
-				<?php $walker = new Menu_With_Description; ?>
+				<!-- <?php //$walker = new Menu_With_Description; ?> -->
-					<?php wp_nav_menu( array( 'theme_location' => 'tag-menu', 'walker' => $walker ) ); ?>
+					<?php wp_nav_menu( array( 'theme_location' => 'tag-menu') ); ?>
 				</nav>
-				<div class="sub-wrapper">
+				<!-- <div class="sub-wrapper">
-				</div>
+				</div> -->
 			</div>
 
 			<!-- ----------------------- to top arrow on mobile ------------------------ -->

img/kereso_icon.svg

@@ -22,7 +22,7 @@
    inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
    id="metadata13"><rdf:RDF><cc:Work
        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
    id="defs11" /><sodipodi:namedview
    pagecolor="#ffffff"
    bordercolor="#666666"
@@ -37,22 +37,22 @@
    id="namedview9"
    showgrid="false"
    inkscape:zoom="5.2850809"
-   inkscape:cx="22.666"
+   inkscape:cx="1.0958477"
-   inkscape:cy="45.032423"
+   inkscape:cy="19.678033"
    inkscape:window-x="0"
    inkscape:window-y="27"
    inkscape:window-maximized="0"
    inkscape:current-layer="Layer_1" />
 <g
    id="g4"
-   style="fill:#ffffff;fill-opacity:1">
+   style="fill:#000000;fill-opacity:1">
 	<path
    d="M18.548,5.871h-0.5v0.667v3v0.333h0.5c6.882,0,11.5,6.027,11.5,11.5v0.5h0.505h3h0.495v-0.5   C34.048,13.203,26.808,5.871,18.548,5.871z"
    id="path2"
-   style="fill:#ffffff;fill-opacity:1" />
+   style="fill:#000000;fill-opacity:1" />
 </g>
 <path
    d="M37.758,28.773c1.285-2.702,2.065-5.868,2.065-8.839c0-5.322-2.071-10.328-5.832-14.095C30.228,2.074,25.228,0,19.912,0  C14.595,0,9.595,2.074,5.831,5.839C2.071,9.606,0,14.612,0,19.934c0,5.324,2.071,10.33,5.831,14.096  c3.761,3.764,8.762,5.837,14.081,5.837c3.382,0,6.729-0.871,9.678-2.518l0.083-0.046l7.352,7.352l8.308-8.308L37.758,28.773z   M29.913,35.069c-0.577,0.388-1.136,0.717-1.705,1.002l-0.081,0.041l-0.007-0.007c-2.563,1.305-5.325,1.967-8.208,1.967  c-4.842,0-9.39-1.884-12.807-5.305c-3.424-3.436-5.31-7.993-5.31-12.832c0-4.841,1.886-9.395,5.31-12.82  c3.424-3.428,7.973-5.316,12.807-5.316c4.831,0,9.383,1.888,12.818,5.316c3.417,3.419,5.299,7.973,5.299,12.82  c0,2.483-0.63,5.195-1.62,7.49l-0.004-0.004c-0.192,0.391-0.482,0.945-0.875,1.6l7.327,7.327l-5.833,5.833L29.913,35.069z"
    id="path6"
-   style="fill:#ffffff;fill-opacity:1" />
+   style="fill:#000000;fill-opacity:1" />
 </svg>

js/scripts.js

@@ -14,12 +14,26 @@
 
 		const vw = $(window).width()
 		const wow = window.outerWidth
-		// console.log(vw, wow)
+		const wiw = window.innerWidth
+		const bw = $('body').width()
+
+		const wih = window.innerHeight
+		const vh = $(window).height()
+
 
-		const bottomScrollHeight = window.innerHeight - $(window).height()
 		const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
 
 
+		const cssWidths = {
+			vw: vw,
+			wow: wow,
+			wiw: wiw,
+			bw: bw,
+			desktophomemargin: desktophomemargin
+		}
+		console.log(cssWidths)
+
+
 		/* --------------------------- css values to vars --------------------------- */
 		//isMobile
 		const isMobile = (_ => {
@@ -61,15 +75,21 @@
 			}
 		})()
 
+		const bottomScrollHeight = (_ => {
+			if (wih / vh > 1.5) {
+				return 0
+			} else {
+				let bs = wih - vh
+				return bs
+			}
+		})()
+
+
 
 		/* ========================================================================== */
 		/*                                  FUNCTIONS                                 */
 		/* ========================================================================== */
 
-		var focusSearch = function () {
-
-			$(".search-bar input").focus()
-		}
 
 		var rotateMenuButton = function () {
 			if ($(".menubutton button").hasClass("rotated")) {
@@ -95,10 +115,33 @@
 		/*                                   SEARCH                                   */
 		/* ========================================================================== */
 
+		// on mobile add to sidebar:
 		if (isMobile) {
 			$(".search-bar").prependTo("#sidebar-wrapper")
 		}
 
+		//clicking on desktop
+		if (!isMobile) {
+			$(".search-box button").click(function (e) {
+				// e.preventDefault()
+				var bar = $(this).next(".search-bar")
+				if (bar.hasClass("opensearch")) {
+					//if search is opened close:
+					bar.stop().animate({ width: "0" }, 400, function () {
+						bar.hide().removeClass("opensearch")
+					})
+				} else {
+					//if it's closed open:
+					bar.show().stop().animate({ width: wiw - (desktophomemargin * 3) }, 400, function () {
+						bar.addClass("opensearch")
+						$(".search-input").focus()
+					})
+					// console.log("calc(100% - " + (desktophomemargin * 2) + "px)")
+				}
+
+			})
+		}
+
 		/* ========================================================================== */
 		/*                                    MENU                                    */
 		/* ========================================================================== */
@@ -143,25 +186,6 @@
 
 		});
 
-		/* --------------------------------- Search --------------------------------- */
-
-		if (!isMobile) {
-			$(".search-box button").click(function (e) {
-				e.preventDefault()
-				var bar = $(this).next(".search-bar")
-				if (bar.hasClass("opensearch")) {
-					bar.stop().animate({ width: "0" }, 400, function () {
-						bar.hide().removeClass("opensearch")
-					})
-				} else {
-					bar.show().stop().animate({ width: "20rem" }, 400, function () {
-						bar.addClass("opensearch")
-					})
-				}
-
-			})
-		}
-
 
 		/* -------------------------------------------------------------------------- */
 		/*                               HOME & ARCHIVES                              */
@@ -203,8 +227,13 @@
 					//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) {
+					if ($("body").is('.archive, .tag') && articleWrapCounter == 1) {
-						$('.hbox:nth-child(' + j + ')').css({ order: "99" })
+						if (j == 3 || j == 4) {
+							$('.hbox:nth-child(' + j + ')').css({ order: j - 1 })
+						} else if (j == 5 || j == 6) {
+							$('.hbox:nth-child(' + j + ')').css({ order: j })
+						}
+
 					}
 				}
 				//wrap classes
@@ -221,8 +250,9 @@
 				}
 
 				//add bottom scrollbar to div on bottom:
-				$(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
+				if (bottomScrollHeight > 0) {
-
+					$(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
+				}
 			}//isHome || isArchive end
 		}// !isMobile end
 
@@ -247,12 +277,27 @@
 			return i
 		}
 
+		function random2() {
+			const choices = [
+				[1, 3],
+				[1, 5],
+				[1, 6],
+				[2, 4],
+				[2, 6],
+				[3, 4],
+				[3, 5],
+				[4, 6]
+			]
+			let nr = Math.floor(Math.random() * choices.length);
+			return choices[nr]
+		}
+
 		//jquery function, adds random class to 3 random cihldren
 		(function ($) {
 			$.fn.addRandomClasses = function () {
-				let rn = randomNumbers()
+				let rn = random2()
-				for (let i = 0; i < 3; i++) {
+				for (let i = 0; i < 2; i++) {
-					var j = rn[i] + 1
+					var j = rn[i]
 					this.children("article:nth-child(" + j + ")").addClass("random")
 				}
 				return this
@@ -462,7 +507,7 @@
 		/* ------------------------------ hover on home ----------------------------- */
 
 		//hover on big articles
-		$(".home-big h2, .home-big .thumbnailwrapper").hover(function () {
+		$(".home-big h2 a").hover(function () {
 			let cc = $(this)
 			let cArticle = cc.parents("article")
 			let cMetadata = cArticle.children(".metadata")
@@ -576,9 +621,20 @@
 		//move subs to wrapper
 		$(bedoListItems).each(function () {
 			let itemId = $(this).attr("id")
-			$(".sub-wrapper").append('<div id="' + itemId + '"></div>')
+			let tagClass = $(this).attr("class").split(" ")
-			$(this).children("a").clone().appendTo(".sub-wrapper #"+ itemId)
+			let itemClass = findClassByStart(tagClass, 'tag')
-			$(this).children("span").appendTo(".sub-wrapper #"+ itemId)
+
+			// add wrapper div
+			// $(".sub-wrapper").append('<div id="' + itemId + '" class="bedo-sub-wrapper ' + itemClass + '"></div>')
+
+			// add tag title
+			// $(this).children("a").clone().appendTo(".sub-wrapper #" + itemId)
+
+			//add sub text
+			// $(this).children("span").appendTo(".sub-wrapper #" + itemId)
+
+			//add circle
+			// $(".sub-wrapper #" + itemId + " span").append('<div class="circle">')
 		})
 
 		//wrap each letter to spans
@@ -600,9 +656,15 @@
 		$(bedoWords).hover(function () {
 			$(bedoLetters).addClass("pause")
 			$(this).children("span").addClass("current")
+			let currTagClass = $(this).parent().attr("class").split(" ")
+			let tagClass = findClassByStart(currTagClass, "tag")
+			console.log(".bedo-sub-wrapper ." + tagClass)
+			$(".sub-wrapper>.opened").removeClass("opened")
+			$(".sub-wrapper>." + tagClass).addClass("opened")
 		}, function () {
 			$(bedoLetters).removeClass("pause")
 			$(this).children("span").removeClass("current")
+			$(".sub-wrapper>.opened").removeClass("opened")
 		})
 
 

loop.php

@@ -20,8 +20,15 @@
 
 			<div class="metadata">
 				<div class="categories">
-					<?php the_category(' | ');?>
+					<?php //the_category(' | ');?>
 					<?php
+					foreach((get_the_category()) as $category){
+						echo $category->name;
+						}
+					?>
+
+					<?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) {
 							foreach ($terms as $term) {
@@ -29,6 +36,7 @@
 								echo $term->name;
 							}
 						}?>
+						<?php endif;?>
 				</div>
 				<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
 						<div class="alcim">
@@ -43,7 +51,7 @@
 						<?php endif;?>
 				<div class="vr"></div>
 				<div class="postedon">
-					<?php the_time('m. d.');?>
+					'<?php the_time('y.m.d.');?>
 				</div>
 				<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
 						<div class="bevezeto">

sass/_font-mixins.scss

@@ -15,6 +15,18 @@
   }
 }
 
+@mixin searchtext {
+  //search textbox
+  font: 900 4rem "Westeinde Caption";
+  color: #000;
+  -webkit-text-stroke: #fff 1px;
+  
+  @media #{$smalldesktop} {
+    font-size: 4rem;
+    color: #000 !important;    
+  }
+}
+
 @mixin home-title {
   //article titles on home
   font: bold 3rem "Westeinde Caption";
@@ -23,14 +35,20 @@
     font-size: 2.5rem !important;
   }
   @media #{$smalldesktop} {
-    font-size: 5rem;
+    font-size: 6rem;
+  }
+  @media #{$bigdesktop} {
+    font-size: 7.5rem;
+  }
+  @media #{$verybigdesktop} {
+    font-size: 11rem;
   }
 }
 
 @mixin home-more {
   //loadmore text on home and archives
   font: bold 3rem "Westeinde Caption";
-  color: #fff;
+  color: transparent;
   -webkit-text-stroke: #000 1px;
   @media #{$mobile-landscape} {
     font-size: 2rem !important;
@@ -45,11 +63,11 @@
   @media #{$smalldesktop} {
     font-size: 1.2rem;
     -webkit-text-stroke: #000 1px;
-    color: #fff;
+    color: transparent;
   }
 }
 
-@mixin archive-tag-description{
+@mixin archive-tag-description {
   font: bold 1rem "Butler";
   color: #000;
   @media #{$smalldesktop} {
@@ -69,6 +87,7 @@
   @media #{$smalldesktop} {
     font-size: 2rem;
   }
+  
 }
 
 @mixin home-metadata-bevezeto {
@@ -83,14 +102,29 @@
   color: transparent;
   -webkit-text-stroke: #000 1px;
   text-transform: uppercase;
-  &.current{
+  &.current {
-    -webkit-text-stroke: #fff 1px !important;
+    color: #000 !important;
   }
   @media #{$smalldesktop} {
     font-size: 1.2rem;
   }
+  @media #{$bigdesktop} {
+    font-size: 1.4rem;
+  }
 }
 
+// @mixin bedo-hover-title {
+//   font: 900 12rem "Westeinde Caption";
+//   color: transparent;
+//   -webkit-text-stroke: #fff 1px;
+//   text-transform: uppercase;
+// }
+
+// @mixin bedo-hover-sub {
+//   font: 900 1.4rem "Westeinde Caption";
+//   color: #fff;
+// }
+
 @mixin single-title {
   font: bold 3rem "Butler";
   color: #000;

sass/base.scss

@@ -98,16 +98,25 @@ $mobile-landscape: only screen and
   and (-webkit-min-device-pixel-ratio: 2.1);
 $bigdesktop: only screen and
   (
-    min-width: 1281px
+    min-width: 1279px
+  );
+
+$verybigdesktop: only screen and
+  (
+    min-width: 1919px
   );
 
 //Horizontal units:
+$h-unit-4: 20rem;
 $h-unit-2: 10rem; // menuwidth on desktop
 $h-unit-1: 5rem;
 
 //vertical units:
 $v-unit-1: 4rem;
 $v-unit-2: 8rem;
+$v-unit-4: 16rem;
+$v-unit-6: 24rem;
+
 
 /* -------------------------------------------------------------------------- */
 /*                              other mixins                              */
@@ -134,9 +143,10 @@ $v-unit-2: 8rem;
     &.char#{$i} {
       @include transform(rotate($angle-offset + $angle-per-char * $i));
 
-      -webkit-animation: spin#{$i} 4s linear infinite;
+      $speed: 10s;
-      -moz-animation: spin#{$i} 4s linear infinite;
+      -webkit-animation: spin#{$i} $speed linear infinite;
-      animation: spin#{$i} 4s linear infinite;
+      -moz-animation: spin#{$i} $speed linear infinite;
+      animation: spin#{$i} $speed linear infinite;
 
       @-moz-keyframes spin#{$i} {
         100% {
@@ -202,7 +212,7 @@ $v-unit-2: 8rem;
   z-index: -1;
 }
 
-@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $side) {
+@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $bordercolor, $side) {
   &::after {
     //for border without corner
     position: absolute;
@@ -216,7 +226,7 @@ $v-unit-2: 8rem;
       width: calc(100% - #{$radius} + #{$offset});
     }
 
-    border-top: #000 1px solid;
+    border-top: $bordercolor 1px solid;
     background-color: $bgcolor;
 
     @if $side==left {
@@ -241,13 +251,13 @@ $v-unit-2: 8rem;
 
     @if $side==left {
       left: -#{$offset};
-      border-left: #000 solid 1px;
+      border-left: $bordercolor solid 1px;
       @include transform(skewX(-45deg));
       transform-origin: left bottom;
     }
     @if $side==right {
       right: -#{$offset};
-      border-right: #000 solid 1px;
+      border-right: $bordercolor solid 1px;
       @include transform(skewX(45deg));
       transform-origin: right bottom;
     }
@@ -305,7 +315,10 @@ $v-unit-2: 8rem;
         align-content: space-between;
         z-index: 3100;
         background: #fff;
-        & > div:not(#sidebar) {
+        .logo,
+        .social-link,
+        .menubutton,
+        .events-link {
           filter: invert(100);
         }
       }
@@ -352,7 +365,7 @@ $v-unit-2: 8rem;
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);
+          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;
         }
       }
     }
@@ -424,47 +437,71 @@ $v-unit-2: 8rem;
     /*                                   SEARCH                                   */
     /* ========================================================================== */
 
+    /* ------------------------------ search mobile ----------------------------- */
+
     .search-box {
       display: none;
-      @media #{$smalldesktop} {
-        display: block;
-        flex: 1 1 0 !important;
-      }
     }
 
     .search-bar {
-      @media #{$smalldesktop} {
-        display: none;
-        position: absolute;
-        width: 0;
-        left: 7rem;
-        top: 0;
-      }
       form.search {
         display: flex;
         flex-direction: row;
         border-bottom: #fff 1px solid;
-        @media #{$smalldesktop} {
+        background-color: #000;
-        }
+
         input {
-          @include menutext();
+          @include searchtext();
           background-color: #000;
           padding: 0;
           border: none;
-
           caret-color: #fff;
           flex: 1 1 auto;
           width: 1rem;
         }
         button {
           flex: 0 0 auto;
-          @media #{$smalldesktop} {
+          @media #{$only-mobile} {
-            display: none;
+            filter: invert(100);
           }
         }
       }
     } //search-bar end
 
+    /* ----------------------------- search desktop ----------------------------- */
+
+    @media #{$smalldesktop} {
+      .search-box {
+        display: block;
+        flex: 1 1 0 !important;
+      }
+
+      .search-bar {
+        display: none;
+        position: fixed;
+        width: 0;
+        left: $h-unit-2;
+        bottom: 0;
+        height: $h-unit-2;
+        form.search {
+          border-bottom: none;
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: stretch;
+          input {
+            padding: 0 $h-unit-1;
+          }
+          button {
+            display: none;
+          }
+        }
+      }
+    }
+
+    /* -------------------- header scroll: scroll with click -------------------- */
+
     .header-scroll {
       display: none;
     }
@@ -523,10 +560,13 @@ $v-unit-2: 8rem;
       display: none;
 
       position: fixed;
-      right: calc(#{$h-unit-2}* 2);
+      right: calc(#{$h-unit-4} + 2px);
-      top: calc(#{$v-unit-1}/ 2);
+      top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
       @media #{$smalldesktop} {
-        top: calc(#{$v-unit-1}* 0.4);
+        top: 1rem;
+      }
+      @media #{$bigdesktop} {
+        top: 0.5rem;
       }
       z-index: 1000;
       @media #{$smalldesktop} {
@@ -540,13 +580,16 @@ $v-unit-2: 8rem;
           display: inline;
           a {
             span {
-              height: calc(#{$v-unit-1}/ 2);
+              height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
               // line-height: calc(#{$v-unit-1}/ 2);
               width: 1rem;
               @media #{$smalldesktop} {
                 height: 3rem;
                 // line-height: 5rem;
               }
+              @media #{$bigdesktop} {
+                height: 3.5rem;
+              }
               margin: auto;
               display: block;
               text-align: center;
@@ -566,22 +609,60 @@ $v-unit-2: 8rem;
           }
         }
       }
-      .sub-wrapper{
+      // .sub-wrapper {
-        position: fixed;
+      //   .bedo-sub-wrapper {
-        right: $h-unit-2;
+      //     position: fixed;
-        left: $h-unit-2;
+      //     display: none;
-        top: 0;
+      //     right: $h-unit-2;
-        background-color: #000;
+      //     left: $h-unit-2;
-        height: 50vh;
+      //     top: 0;
-        a{
+      //     background-color: #000;
-          
+      //     height: 50vh;
-        }
+      //     z-index: -1;
-        span{
+      //     flex-direction: row;
-
+      //     justify-content: flex-start;
-        }
+      //     align-items: center;
-        
+      //     // &:first-child {
-      }
+      //     //   display: flex;
-
+      //     // }
+      //     &.opened {
+      //       display: flex;
+      //     }
+      //     a {
+      //       @include bedo-hover-title();
+      //       @include transform(rotate(-45deg));
+      //       transform-origin: 50% 50%;
+      //       display: block;
+      //       width: calc(30% + #{$v-unit-6});
+      //       text-align: center;
+      //       height: fit-content;
+      //     }
+      //     span {
+      //       display: block;
+      //       position: absolute;
+      //       bottom: 0;
+      //       right: 0;
+      //       height: $v-unit-6;
+      //       width: 70%;
+      //       padding: $v-unit-1;
+      //       padding-left: $v-unit-6 + $v-unit-2;
+      //       padding-right: $v-unit-4;
+      //       @include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left);
+      //       @include bedo-hover-sub();
+      //       .circle {
+      //         $diameter: 4rem;
+      //         width: $diameter;
+      //         height: $diameter;
+      //         border-radius: 50%;
+      //         background: #fff;
+      //         position: absolute;
+      //         right: 0;
+      //         top: 0;
+      //         margin: $v-unit-1 / 2;
+      //       }
+      //     }
+      //   }
+      // }
     }
   } //header end
 
@@ -597,9 +678,9 @@ $v-unit-2: 8rem;
           position: absolute;
           background-color: #fff;
           padding: 2rem;
-          bottom: 49%;
+          // bottom: 49%;
           right: 0;
-          width: 50vw;
+          min-width: 50vw;
           text-align: center;
           @include home-metadata();
           z-index: 1;
@@ -721,41 +802,67 @@ $v-unit-2: 8rem;
 
       article {
         height: 100vh;
-        @media #{$smalldesktop} {
-          & > a {
-            margin: 0;
-            padding: 0;
-            border: none;
-            display: inline-block;
-          }
 
-          .thumbnailwrapper {
+        & > a {
-            img.attachment-home-thumbnail {
+          margin: 0;
-              // post thumbnail on home
+          padding: 0;
-              height: 50vh;
+          border: none;
-              width: 100vw;
+          display: inline-block;
-              object-fit: cover;
+        }
-            }
-          }
 
-          h2 {
+        .thumbnailwrapper {
-            width: 100%;
+          img {
+            // post thumbnail on home
             height: 50vh;
-            padding: 2rem;
+            width: 100vw;
-            padding-top: 3rem;
+            object-fit: cover;
-            margin: 0;
-            // display: flex;
-            // flex-direction: row;
-            // align-items: center;
-
-            a {
-              @include home-title();
-            }
           }
-        } //article end
+        }
-      }
+
+        h2 {
+          width: 100%;
+          height: 50vh;
+          padding: 2rem;
+          padding-top: 3rem;
+          margin: 0;
+          // display: flex;
+          // flex-direction: row;
+          // align-items: center;
+
+          a {
+            @include home-title();
+          }
+        }
+
+        .metadata {
+          bottom: 50%;
+          height: $h-unit-1;
+          display: flex;
+          width: fit-content;
+          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;
+          }
+
+          .bevezeto,
+          .alcim,
+          .curvyArrow {
+            display: none;
+          }
+        }
+      } //article end
 
       /* ------------------------ home article desktop big ------------------------ */
+      /* ------------------------------------ - ----------------------------------- */
 
       @media #{$smalldesktop} {
         //big: first 2 articles
@@ -776,7 +883,7 @@ $v-unit-2: 8rem;
             /* ------------- home article desktop big - thumbnail and title ------------- */
 
             .thumbnailwrapper {
-              width: 40%;
+              width: 60%;
               height: calc(100% - #{$v-unit-1});
               display: flex;
               flex-direction: row;
@@ -794,6 +901,8 @@ $v-unit-2: 8rem;
               position: absolute;
               top: 6rem;
               padding: 4rem;
+              // padding-right: 0;
+              width: calc(100vw - #{$h-unit-4});
             }
 
             /* -------------------------- home article metadata big------------------------- */
@@ -817,23 +926,16 @@ $v-unit-2: 8rem;
               }
 
               & > div {
-                flex: 1 0 auto;
+                flex: 1 1 auto;
               }
 
               .categories {
                 display: block;
-                padding: 0 $h-unit-1;
+                padding: 0;
-              }
-
-              .vr {
-                height: 100%;
-                width: 1px;
-                background-color: #000;
-                flex: 0 0 auto;
               }
 
               .postedon {
-                padding: 0 $h-unit-1;
+                padding: 0;
               }
 
               .bevezeto,
@@ -868,13 +970,14 @@ $v-unit-2: 8rem;
 
               .filler {
                 flex: 0 0 auto;
-                width: 40%;
+                width: 60%;
                 height: 1px;
                 align-self: flex-start;
               }
 
               .curvyArrow {
                 position: absolute;
+                display: block;
                 right: 0;
                 top: 0;
                 height: ($h-unit-1 + $h-unit-2);
@@ -898,7 +1001,7 @@ $v-unit-2: 8rem;
           &.home-wrapper-1 {
             article {
               .metadata {
-                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
+                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, left);
                 .filler {
                   position: relative;
                 }
@@ -914,7 +1017,7 @@ $v-unit-2: 8rem;
 
               .metadata {
                 justify-content: flex-end;
-                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
+                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, right);
                 .filler {
                   order: -1;
                 }
@@ -963,7 +1066,7 @@ $v-unit-2: 8rem;
 
             .metadata {
               width: 100%;
-              height: 20%;
+              height: $h-unit-1;
 
               position: absolute;
               bottom: 0;
@@ -974,13 +1077,22 @@ $v-unit-2: 8rem;
               display: flex;
               flex-direction: row;
               padding: 0;
-              justify-content: flex-end;
+              justify-content: space-between;
               align-items: stretch;
-              @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
+              @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
               display: none;
               &.vis {
                 display: flex;
               }
+
+              .categories,
+              .postedon {
+                @include home-metadata();
+                padding: $v-unit-1 / 2;
+              }
+              .categories {
+                margin-left: $v-unit-1 * 1.5;
+              }
             }
 
             h2,
@@ -1011,14 +1123,27 @@ $v-unit-2: 8rem;
             align-items: flex-start;
             padding: 2rem;
             border-right: #000 1px solid;
-            @include home-title();
+            @include triangle-corner-bordered($h-unit-1, 0, transparent, #000, left);
-            @include triangle-corner-bordered($h-unit-1, 0, transparent, left);
+            h1 {
+              @include home-title();
+              margin: 0;
+            }
             &.tag {
-              text-transform: uppercase;
+              order: 1;
+              h1 {
+                text-transform: uppercase;
+              }
+            }
+            & > object {
+              position: absolute;
+              top: 2rem;
+              right: 2rem;
+              width: $h-unit-1;
+              height: $h-unit-1;
             }
           }
           .archivedescription {
-            order: 1;
+            order: 4;
             border-top: #000 1px solid;
             border-right: #000 1px solid;
             border-bottom: #000 1px solid;
@@ -1042,6 +1167,19 @@ $v-unit-2: 8rem;
   } //main end
 } //home end
 
+/* -------------------------------------------------------------------------- */
+/*                                   Events                                   */
+/* -------------------------------------------------------------------------- */
+
+body.category.category-esemeny {
+  header {
+    background-color: #000;
+  }
+  main {
+    padding-top: 5rem + (2rem * 2);
+  }
+}
+
 /* -------------------------------------------------------------------------- */
 /*                                   single                                   */
 /* -------------------------------------------------------------------------- */
@@ -1144,7 +1282,7 @@ $v-unit-2: 8rem;
           padding-left: 0;
 
           width: calc(100% - #{$h-unit-1}) !important;
-          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, left);
+          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
         }
         .time-cat {
           z-index: 10;
@@ -1271,8 +1409,14 @@ $v-unit-2: 8rem;
 /* -------------------------------------------------------------------------- */
 
 @mixin tagcolors($color) {
+  //metadata on mobile
   .metadata {
-    color: $color !important;
+    @media #{$only-mobile} {
+      color: $color !important;
+      .vr {
+        background-color: $color !important;
+      }
+    }
 
     a {
       color: $color !important;
@@ -1307,6 +1451,32 @@ $v-unit-2: 8rem;
       }
     }
   }
+
+  //hover on bedo circle
+  &.bedo-sub-wrapper {
+    & > a {
+      -webkit-text-stroke: $color 1px !important;
+    }
+    span {
+      color: $color !important;
+    }
+    .circle {
+      background-color: $color !important;
+    }
+  }
+
+  // tag archive pages
+
+  &.archive.tag {
+    background-color: $color !important;
+    .header-1,
+    .header-2 {
+      background-color: $color !important;
+    }
+    article * {
+      background-color: $color !important;
+    }
+  }
 }
 
 //tagclip: filters on small articale images
@@ -1342,32 +1512,36 @@ $v-unit-2: 8rem;
     }
   }
 }
+$color-be: #fdff00;
+$color-do: #3c00ff;
+$color-think: #00ffb8;
+$color-love: #ff5f5f;
 
 //colors on articles
 
 .tag-be {
-  @include tagcolors(#00ffb8);
+  @include tagcolors($color-be);
   &.random {
     @include tagclip(be);
   }
 }
 
 .tag-do {
-  @include tagcolors(#ff5f5f);
+  @include tagcolors($color-do);
   &.random {
     @include tagclip(do);
   }
 }
 
 .tag-think {
-  @include tagcolors(#fdff00);
+  @include tagcolors($color-think);
   &.random {
     @include tagclip(think);
   }
 }
 
 .tag-love {
-  @include tagcolors(#3c00ff);
+  @include tagcolors($color-love);
   &.random {
     @include tagclip(love);
   }
@@ -1376,19 +1550,19 @@ $v-unit-2: 8rem;
 //single article
 .single {
   .tag-be {
-    @include tagcolors-single(#00ffb8);
+    @include tagcolors-single($color-be);
   }
 
   .tag-do {
-    @include tagcolors-single(#ff5f5f);
+    @include tagcolors-single($color-do);
   }
 
   .tag-think {
-    @include tagcolors-single(#fdff00);
+    @include tagcolors-single($color-think);
   }
 
   .tag-love {
-    @include tagcolors-single(#3c00ff);
+    @include tagcolors-single($color-love);
   }
 }
 
@@ -1398,19 +1572,19 @@ body,
 .header-1,
 .header-2 {
   &.hover-tag-be {
-    background-color: #00ffb8 !important;
+    background-color: $color-be !important;
   }
 
   &.hover-tag-do {
-    background-color: #ff5f5f !important;
+    background-color: $color-do !important;
   }
 
   &.hover-tag-think {
-    background-color: #fdff00 !important;
+    background-color: $color-think !important;
   }
 
   &.hover-tag-love {
-    background-color: #3c00ff !important;
+    background-color: $color-love !important;
   }
 }