1.0.12 restore strange line on firefox mobile

functions.php

@@ -131,7 +131,7 @@ function dis2019_header_scripts()
         wp_register_script('ftellipsis', get_template_directory_uri() . '/js/lib/ftellipsis.min.js', array(), '1.0.0'); //
         wp_enqueue_script('ftellipsis'); // Enqueue it!
 
-        wp_register_script('touchSwipe', get_template_directory_uri() . '/js/lib/jquery.touchSwipe.min.js', array('jquery'), '1.6.18'); //
+        wp_register_script('touchSwipe', get_template_directory_uri() . '/js/lib/jquery.touchSwipe-1.6.18.min.js', array('jquery'), '1.6.19'); //
         wp_enqueue_script('touchSwipe'); // Enqueue it!
 
         wp_register_script('dis2019scripts', get_template_directory_uri() . '/js/scripts.js', array(

gulpfile.js

@@ -28,9 +28,11 @@ gulp.task('liverel', function () {
 // });
 
 gulp.task('watch', function () {
-    livereload.listen()
+
     gulp.watch('./sass/**/*.scss', gulp.series('sass'))
     gulp.watch(['./**', '!./node_modules/**'], gulp.series('liverel'))
+    livereload.listen()
+
 });
 
 gulp.task('minify-svg', function () {

js/scripts.js

@@ -862,33 +862,36 @@
 			if (!isMobile) {
 				// let cc = $(this)
 				let cArticle = cc.parents("article")
+				let cH2 = cc.parent('h2')
 				let cMetadata = cArticle.children(".metadata")
 				let cBevezetoWrapper = cMetadata.children(".bevezetoWrapper")
 				let cBevezeto = cBevezetoWrapper.children(".bevezeto")
+				let cAlcimWrapper = cMetadata.children(".alcimWrapper")
+				let cAlcim = cAlcimWrapper.children('.alcim')
 
 				// calculate default metadata height
-
 				metadataHeights.collapsedHeight = cMetadata[0].getBoundingClientRect().height
 
+				// check calculated metadata opened height
+				if (!cc.attr('data-metadataOpenedHeight')) {
+					// calculate opened metadata height:
+					let h2H = cH2[0].getBoundingClientRect().height
 
-				//calculate opened metadata height
-
-				let h2H = 0
-				$(".home-big h2").each(function () {
-					if ($(this)[0].getBoundingClientRect().height > h2H) {
-						h2H = $(this)[0].getBoundingClientRect().height
-					}
-				})
 
 					let artH = cArticle[0].getBoundingClientRect().height
-				metadataHeights.openedHeight = artH - bottomScrollHeight - h2H
+					// metadataHeights.openedHeight = artH - bottomScrollHeight - h2H
+					let metadataMaxheight = artH - bottomScrollHeight - h2H
+					let metadataOpenedHeight = (metadataMaxheight < metadataHeights.collapsedHeight) ? metadataHeights.collapsedHeight : metadataMaxheight
+					cc.attr('data-metadataOpenedHeight', metadataOpenedHeight)
+					// console.log('h2h', h2H, artH)
+				}
 
-				console.log('h2h', h2H, artH)
+				let metadataOpenedHeight = cc.attr('data-metadataOpenedHeight')
 
 				//add height to bevezetoWrapper
-				$('.bevezetoWrapper').css({ height: metadataHeights.openedHeight })
+				cBevezetoWrapper.css({ height: metadataOpenedHeight })
 
-				$('.alcimWrapper').css({ height: metadataHeights.openedHeight })
+				cAlcimWrapper.css({ height: metadataOpenedHeight })
 
 
 				//add hovered class
@@ -903,31 +906,34 @@
 				cMetadata.children(".categories, .postedon").addClass("transparent")
 
 				//animate border
-				cMetadata.stop().animate({ height: metadataHeights.openedHeight }, 400, _ => {
+				cMetadata.stop().animate({ height: metadataOpenedHeight }, 400, _ => {
 
 					//hide metadata
 					cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
-					cMetadata.children(".bevezetoWrapper").show()
-					cMetadata.children(".alcimWrapper").css({ display: 'flex' })
+					cBevezetoWrapper.show()
+					cAlcimWrapper.css({ display: 'flex' }).addClass("transparent")
 
 					//set height for ellipsis
-					if (!metadataHeights.bevezetoHeight) {
-						metadataHeights.bevezetoHeight = cBevezetoWrapper.height()
+					if (!cc.attr('data-metadataBevezetoHeight')) {
+						let metadataBevezetoHeight = cBevezetoWrapper.height()
 						let bWidth = cBevezetoWrapper.width()
-						// let bWidth = cBevezetoWrapper[0].getBoundingClientRect().width
-						$('.bevezeto').css({
-							height: metadataHeights.bevezetoHeight,
+						cBevezetoWrapper.children('.bevezeto').css({
+							height: metadataBevezetoHeight,
 							width: bWidth + 'px'
 						})
-						$('.alcim').css({
-							height: metadataHeights.bevezetoHeight,
+						cAlcim.css({
+							height: metadataBevezetoHeight,
 						})
-
+						cc.attr('data-metadataBevezetoHeight', metadataBevezetoHeight)
 					}
 
 					//show bev+alcim
-					cMetadata.children(".bevezetoWrapper, .alcimWrapper").removeClass("transparent")
+					cBevezetoWrapper.removeClass("transparent")
 
+					//only show alcim, if enough space
+					if (!(cAlcim.children('.alcimInner').height() > cAlcim.height())) {
+						cAlcimWrapper.removeClass("transparent")
+					}
 
 					//clamp bevezető
 					let ellipsis = new Ellipsis(cBevezeto[0]);
@@ -940,7 +946,7 @@
 		// Uncomment for debugging hover
 		// if (!isMobile && isHome) {
 		// 	setTimeout(() => {
-		// 		bigArticleHoverShow($(".home_wrapper-1 .home-big h2 a"))
+		// 		bigArticleHoverShow($(".home_wrapper-2 .home-big h2 a"))
 		// 	}, 2000);
 		// }
 
@@ -1117,6 +1123,18 @@
 
 			const lightBoxMaxHeight = isMobile ? '65%' : '80%'
 
+			function prevdev(e) {
+				e.preventDefault();
+			}
+
+			const disableScroll = function () {
+				document.addEventListener('touchmove', prevdev, { passive: false })
+			}
+
+			const enableScroll = function () {
+				document.removeEventListener('touchmove', prevdev, { passive: false })
+			}
+
 			//http://www.jacklmoore.com/colorbox/
 			const colorboxSettings = {
 				transition: 'none',
@@ -1130,7 +1148,9 @@
 				next: '',
 				close: '',
 				xhrError: 'A tartalom betöltése nem sikerült. Kérlek próbáld meg később.',
-				imgError: 'A kép betöltése nem sikerült. Kérlek próbáld meg később.'
+				imgError: 'A kép betöltése nem sikerült. Kérlek próbáld meg később.',
+				onOpen: disableScroll,
+				onClosed: enableScroll
 
 			}
 
@@ -1138,17 +1158,10 @@
 			$('#cboxOverlay, #colorbox').swipe({
 				swipeLeft: function () {
 					$.colorbox.next()
-
 				},
 				swipeRight: function () {
 					$.colorbox.prev()
 				},
-				swipeUp: function () {
-					return false
-				},
-				swipeDown: function () {
-					return false
-				},
 			})
 
 			// lightbox for galleries

sass/_print.scss

@@ -3,19 +3,19 @@
 \*------------------------------------*/
 
 ::selection {
-	background:#04A4CC;
-	color:#FFF;
-	text-shadow:none;
+  background: #04a4cc;
+  color: #fff;
+  text-shadow: none;
 }
 ::-webkit-selection {
-	background:#04A4CC;
-	color:#FFF;
-	text-shadow:none;
+  background: #04a4cc;
+  color: #fff;
+  text-shadow: none;
 }
 ::-moz-selection {
-	background:#04A4CC;
-	color:#FFF;
-	text-shadow:none;
+  background: #04a4cc;
+  color: #fff;
+  text-shadow: none;
 }
 
 /*------------------------------------*\
@@ -23,73 +23,71 @@
 \*------------------------------------*/
 
 .alignnone {
-	margin:5px 20px 20px 0;
+  margin: 5px 20px 20px 0;
 }
 .aligncenter,
 div.aligncenter {
-	display:block;
-	margin:5px auto 5px auto;
+  display: block;
+  margin: 5px auto 5px auto;
 }
 .alignright {
-	float:right;
-	margin:5px 0 20px 20px;
+  float: right;
+  margin: 5px 0 20px 20px;
 }
 .alignleft {
-	float:left;
-	margin:5px 20px 20px 0;
+  float: left;
+  margin: 5px 20px 20px 0;
 }
 a img.alignright {
-	float:right;
-	margin:5px 0 20px 20px;
+  float: right;
+  margin: 5px 0 20px 20px;
 }
 a img.alignnone {
-	margin:5px 20px 20px 0;
+  margin: 5px 20px 20px 0;
 }
 a img.alignleft {
-	float:left;
-	margin:5px 20px 20px 0;
+  float: left;
+  margin: 5px 20px 20px 0;
 }
 a img.aligncenter {
-	display:block;
-	margin-left:auto;
-	margin-right:auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 .wp-caption {
-	background:#FFF;
-	border:1px solid #F0F0F0;
-	max-width:96%;
-	padding:5px 3px 10px;
-	text-align:center;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  max-width: 96%;
+  padding: 5px 3px 10px;
+  text-align: center;
 }
 .wp-caption.alignnone {
-	margin:5px 20px 20px 0;
+  margin: 5px 20px 20px 0;
 }
 .wp-caption.alignleft {
-	margin:5px 20px 20px 0;
+  margin: 5px 20px 20px 0;
 }
 .wp-caption.alignright {
-	margin:5px 0 20px 20px;
+  margin: 5px 0 20px 20px;
 }
 .wp-caption img {
-	border:0 none;
-	height:auto;
-	margin:0;
-	max-width:98.5%;
-	padding:0;
-	width:auto;
+  border: 0 none;
+  height: auto;
+  margin: 0;
+  max-width: 98.5%;
+  padding: 0;
+  width: auto;
 }
 .wp-caption .wp-caption-text,
 .gallery-caption {
-	font-size:11px;
-	line-height:17px;
-	margin:0;
-	padding:0 4px 5px;
+  font-size: 11px;
+  line-height: 17px;
+  margin: 0;
+  padding: 0 4px 5px;
 }
 .sticky {
-
 }
 .bypostauthor {
-
 }
 
 /*------------------------------------*\
@@ -97,51 +95,199 @@ a img.aligncenter {
 \*------------------------------------*/
 
 @media print {
+  @page {
+    margin: 2cm;
+  }
+
+  html {
+    overflow-y: unset !important;
+  }
+
   * {
-		background:transparent !important;
-		color:#000 !important;
-		box-shadow:none !important;
-		text-shadow:none !important;
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact !important;
+  }
+
+  *:not(header *) {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
   }
   a,
   a:visited {
-		text-decoration:underline;
+    text-decoration: underline;
   }
   a[href]:after {
-		content:" (" attr(href) ")";
+    content: " (" attr(href) ")";
   }
   abbr[title]:after {
-		content:" (" attr(title) ")";
+    content: " (" attr(title) ")";
   }
   .ir a:after,
   a[href^="javascript:"]:after,
   a[href^="#"]:after {
-		content:"";
+    content: "";
   }
-	pre,blockquote {
-		border:1px solid #999;
-		page-break-inside:avoid;
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
   }
   thead {
-		display:table-header-group;
+    display: table-header-group;
   }
-	tr,img {
-		page-break-inside:avoid;
+  tr,
+  img {
+    page-break-inside: avoid;
   }
   img {
-		max-width:100% !important;
+    max-width: 100% !important;
   }
   @page {
-		margin:0.5cm;
+    margin: 0.5cm;
   }
   p,
   h2,
   h3 {
-		orphans:3;
-		widows:3;
+    orphans: 3;
+    widows: 3;
   }
   h2,
   h3 {
-		page-break-after:avoid;
+    page-break-after: avoid;
+  }
+
+  //structure
+  .wrapper {
+    height: unset !important;
+  }
+
+  //header
+
+  header {
+    position: relative !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    justify-content: flex-start !important;
+    padding: 2rem !important;
+    .header-inner {
+      flex-direction: column !important;
+      justify-content: flex-start;
+      align-items: flex-start !important;
+      padding: 0 2rem !important;
+      .dis-logo {
+        background-image: url(../img/dis-logo-black.png) !important;
+        background-image: url(../img/dis-logo-black.svg) !important;
+        margin-bottom: 1rem;
+      }
+      a {
+        display: flex !important;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        div {
+          margin-right: 2rem;
+        }
+      }
+      .menubutton {
+        display: none;
+      }
+      .social-link {
+        display: block !important;
+        margin: 0.5rem 2rem !important;
+      }
+      .events-link {
+        display: none;
+      }
+    }
+  }
+
+  //masonrypage
+  .masonrypage {
+    article {
+      min-height: unset !important;
+
+      a.thumbnailwrapper {
+        img {
+          height: 50vw !important;
+          width: 100vw !important;
+        }
+        &:after {
+          content: "";
+        }
+      }
+
+      h2 {
+        display: block !important;
+        padding-bottom: 5rem !important;
+      }
+
+      .metadata {
+        top: calc(50vw - 5rem + 1px) !important;
+        position: absolute;
+        // border-top: 1px solid #000;
+        @include fit-content(width);
+        height: $h-unit-1;
+        background-color: #fff;
+
+        @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
+        &::after {
+          display: block !important;
+        }
+      }
+    }
+  }
+
+  //single
+  .singularpage {
+    .titlewrapper {
+      padding-top: 2rem !important;
+      .metadata {
+        a {
+          text-decoration: none;
+          &::after {
+            content: "";
+          }
+        }
+      }
+    }
+
+    .single-content {
+      hr.content-begin {
+        margin-top: 2rem !important;
+      }
+
+      a.cboxElement::after {
+        content: "" !important;
+      }
+
+      figcaption {
+        display: block !important;
+      }
+
+      .alignleft,
+      .alignright,
+      .wp-block-image {
+        page-break-inside: avoid;
+        width: 100% !important;
+        height: auto;
+        img {
+          page-break-inside: avoid;
+          width: 100%;
+          height: auto;
+        }
+	  }
+	  &::after{
+		content: "A fák érdekében feleslegesen ne nyomtasd ki ezt a cikket. A papírszemetet gyűjtsd szelektíven!";
+		top: 3rem;
+		position: relative;
+	  }
+    }
+    .fb-like,
+    .fb-page,
+    .toHome {
+      display: none !important;
+    }
   }
 }

sass/base.scss

@@ -267,7 +267,6 @@ $v-unit-6: 24rem;
     top: 0;
     background-color: $bgcolor;
     z-index: 9;
-
     @if $side==left {
       left: $minusOffset;
       border-left: $bordercolor solid 1px;
@@ -505,6 +504,9 @@ $v-unit-6: 24rem;
         background-image: url(../img/#{$iconname}-black.png);
         background-image: url(../img/#{$iconname}-black.svg);
       }
+      @media print {
+        background-image: url(../img/#{$iconname}-black.png);
+      }
     }
 
     .facebook-icon {
@@ -568,7 +570,7 @@ $v-unit-6: 24rem;
     .events-link {
       margin: 0 2rem 0 0;
       &.hidden {
-        display: none !important;
+        display: none;
       }
       @media #{$tablet} {
         margin: 0;
@@ -1871,6 +1873,11 @@ $padd: 2rem;
       padding: 0;
 
       img.attachment-single-thumbnail {
+        //use home-big-thumbnail on mobile
+        display: none;
+      }
+
+      img.attachment-home-big-thumbnail {
         // post thumbnail on home
         height: 75vh;
         width: 100vw;
@@ -1895,12 +1902,14 @@ $padd: 2rem;
         width: calc(100vw - #{$h-unit-1});
         bottom: unset !important;
         height: $h-unit-1;
+        // height: calc(#{$h-unit-1} - 0.5px);
         position: relative;
         align-self: flex-end;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding-left: 0;
+        border-left: #fff solid 1px;
 
         @include single-metadata();
 
@@ -1919,6 +1928,7 @@ $padd: 2rem;
           .time-cat::after {
             content: " ";
             display: inline-block;
+            white-space: pre;
           }
           .format::before {
             content: "|";
@@ -1972,9 +1982,13 @@ $padd: 2rem;
         bottom: 0;
         width: 100%;
 
+        img.attachment-home-big-thumbnail {
+          display: none;
+        }
+
         img.attachment-single-thumbnail {
           // post thumbnail on home
-
+          display: block;
           object-fit: cover;
           padding: 0;
 
@@ -2706,7 +2720,7 @@ body.page {
   //metadata on mobile
 
   .metadata {
-    @media #{$only-mobile} {
+    @media #{$only-mobile}, print {
       color: $color !important;
       .vr {
         background-color: $color !important;
@@ -2717,7 +2731,7 @@ body.page {
       color: $color !important;
     }
 
-    @media #{$only-mobile} {
+    @media #{$only-mobile}, print {
       &::before,
       &::after {
         border-color: $color !important;
@@ -2725,7 +2739,7 @@ body.page {
     }
   }
   h2 {
-    @media #{$only-mobile} {
+    @media #{$only-mobile}, print {
       border-top-color: $color !important;
     }
   }

singular.php

@@ -13,6 +13,7 @@
 				<?php if (has_post_thumbnail()): // Check if Thumbnail exists ?>
 					<div class="thumbnailwrapper">
 						<?php the_post_thumbnail('single-thumbnail'); ?>
+						<?php the_post_thumbnail('home-big-thumbnail'); ?>
 					</div>
 
 				<?php endif;?>

style.css

@@ -2,7 +2,7 @@
 	Theme Name: dis-2019
 	Theme URI: https://git.gyetpet.dynu.net/infeeeee/dis-2019
 	Description: Designisso téma 2019 | <a target="_blank" href="https://git.gyetpet.dynu.net/infeeeee/dis-2019/src/branch/master/K%c3%89ZIK%c3%96NYV.md">Használati utasítás magyarul</a> | <a target="_blank" href="https://git.gyetpet.dynu.net/infeeeee/dis-2019/issues">Hibák, problémák jelentése</a>
-	Version: 1.0.10
+	Version: 1.0.12
 	Author: Gyetvai Péter
 	Author URI: https://gyetvai-peter.hu
 	Tags: Designisso