home hover improvements, docs

KÉZIKÖNYV.md

@@ -0,0 +1,42 @@
+# Felhasználói kézikönyv
+
+## Telepítés utáni teendők:
+
+### function.php
+
+    esemény cat-id-t átírni!!
+
+### wp beállítások
+
+	settings>reading>Blog pages show at most 6
+
+## Paraméterek
+
+### Bejegyzések
+
+#### dis-alcim
+
+Csak az első két nagy cikknél jelenik meg
+
+#### dis-bevezeto
+
+Csak az első két nagy cikknél jelenik meg
+
+### Események
+
+#### dis-esemeny-datum
+
+#### dis-esemeny-link
+
+## Developement verzió telepítése
+
+Szükséges: python2, gulp global, max node 11
+Mountnál exec paramétert nem kifelejteni!!!
+
+```
+nvm install 11
+nvm use 11
+sudo apt install python
+npm install gulp-cli -g
+nvm install dev
+```

README.md

@@ -6,4 +6,4 @@ Live website: (designisso.com)[http://designisso.com/]
 
 Built from HTML5 Blank theme: https://github.com/html5blank/html5blank
 
-
+Usage and install instructions in hungarian here: [KÉZIKÖNYV.md](KÉZIKÖNYV.md)

_jegyzet.md

@@ -1,14 +1,3 @@
-# Telepítés új gépre:
-Szükséges: python2, gulp global, max node 11
-Mountnál exec paramétert nem kifelejteni!!!
-
-```
-nvm install 11
-nvm use 11
-sudo apt install python
-npm install gulp-cli -g
-nvm install dev
-```
 
 # Kérdések
 
@@ -40,7 +29,7 @@ Kezdőlap:
 ~két nagy, utána kicsi rácsban~
 ~Nincs gradiens~
 ~Hover csak a címen~
-Nyíl, csak az első cikken
+~Nyíl, csak az első cikken~
 ~cursor módosítás tekerésre~
 Kis ikonok hover: 
 	~- maszkok bedo alapján~
@@ -49,13 +38,12 @@ Kis ikonok hover:
 
 Nagycímek:
 	~- utána margó~
-	- az is megnő, minden mint 
 
-Excerpt a főoldalon hoverre: külön paraméter, nem excerpt!!
+~Excerpt a főoldalon hoverre: külön paraméter, nem excerpt!!~
 
 og: tag: pluginnal!
 
-Dátumot átírni
+~Dátumot átírni~
 
 Szőveg kilóg a margóra!
 
@@ -93,10 +81,10 @@ Kereső:
 # jegyzet 2019.06.12
 
 ## kezdőlap
-	hover: ne nőjjön meg, csak a szín
+	~hover: ne nőjjön meg, csak a szín~
-		a vonal felcsuszás animálva
+		~a vonal felcsuszás animálva~
 		~a szélek alá is kerüljön szín~
-	képre is hover, képre is klikk
+	~képre is hover, képre is klikk~
 	kép pontosabb arány
 	alapből lehet hogy több látszódjon
 	maszkok: mindig csak 2-t sorsol, és nem egymás mellettieket, nem egymás alattiakat
@@ -110,11 +98,3 @@ Kereső:
 ## single:
 
 	képen ne legyen cím
-
-
-# Post-install teendők:
-
-- function.php
-    esemény cat-id-t átírni!!
-- wp beállítások
-	settings>reading>Blog pages show at most 6

css/base.css

@@ -646,7 +646,8 @@ object {
           flex-direction: row;
           padding: 0;
           justify-content: flex-start;
-          align-items: center; } }
+          align-items: center;
+          overflow: visible !important; } }
       @media (min-width: 769px) and (min-width: 769px) {
         .archive main section .home-wrapper-big article .metadata,
         .home main section .home-wrapper-big article .metadata {
@@ -714,6 +715,19 @@ object {
             width: 40%;
             height: 1px;
             align-self: flex-start; }
+          .archive main section .home-wrapper-big article .metadata .curvyArrow,
+          .home main section .home-wrapper-big article .metadata .curvyArrow {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 15rem;
+            width: 7.5rem; }
+            .archive main section .home-wrapper-big article .metadata .curvyArrow object,
+            .home main section .home-wrapper-big article .metadata .curvyArrow object {
+              height: 15rem;
+              position: absolute;
+              right: 0;
+              top: calc(-50% + 0.5px); }
         .archive main section .home-wrapper-big article.hovered h2 > a,
         .home main section .home-wrapper-big article.hovered h2 > a {
           color: #000; }
@@ -750,12 +764,6 @@ object {
       .archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler,
       .home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler {
         position: relative; }
-        .archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after,
-        .home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after {
-          content: url("../img/curvy_arrow.svg");
-          position: absolute;
-          top: -50%;
-          right: 0; }
       .archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
       .home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
         float: right; }

img/curvy_arrow.svg

@@ -5,40 +5,41 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   viewBox="0 0 122.1 232.379"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   height="232.379"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 122.1 232"
+   height="232"
    width="122.1"
    xml:space="preserve"
    id="svg2"
-   version="1.1"><metadata
+   version="1.1"
+   sodipodi:docname="curvy_arrow.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1656"
+     inkscape:window-height="959"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="2.0311646"
+     inkscape:cx="20.24125"
+     inkscape:cy="178.83688"
+     inkscape:window-x="1062"
+     inkscape:window-y="261"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" /><metadata
      id="metadata8"><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="defs6"><clipPath
+     id="defs6" /><path
-       id="clipPath18"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path16"
-         d="m 1715,37 h 45 v 974 h -45 z" /></clipPath><clipPath
-       id="clipPath32"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path30"
-         d="m 799,37 h 800.78 v 972 H 799 Z" /></clipPath><clipPath
-       id="clipPath64"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path62"
-         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
-       id="clipPath80"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path78"
-         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
-       id="clipPath198"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path196"
-         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
-       id="clipPath222"
-       clipPathUnits="userSpaceOnUse"><path
-         id="path220"
-         d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath></defs><path
      id="path226"
      style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
-     d="m 1.044,0 c 0,63.609 53.057,115.94 121.056,115.94 -67.999,0 -121.35,52.828 -121.35,116.439" /></svg>
+     d="M 0.75,0 C 0.75,63.609 54.101,116 122.1,116 54.101,116 0.75,168.389 0.75,232"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccc" /></svg>

js/scripts.js

@@ -479,12 +479,13 @@
 			cMetadata.children(".categories, .postedon").addClass("transparent")
 			
 			//animate border
-			cMetadata.stop().animate({ height: "25rem" }, _ => {
+			cMetadata.stop().animate({ height: "25rem" },400, _ => {
 				//hide metadata
 				cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
 				cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
 			})
 			
+
 		}, function () {
 			let cc = $(this)
 			let cArticle = cc.parents("article")
@@ -502,7 +503,7 @@
 			cMetadata.children(".alcim, .bevezeto").addClass("transparent")
 			
 			//animate height change
-			cMetadata.stop().animate({ height: "10rem" }, _ => {
+			cMetadata.stop().animate({ height: "10rem" },400, _ => {
 				//hide and show metadata
 				cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
 				cMetadata.children(".categories, .postedon").removeClass("transparent").show()

loop.php

@@ -58,6 +58,16 @@
 						
 						<?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 -->
 
 

sass/base.scss

@@ -331,7 +331,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);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         }
       }
     }
@@ -754,6 +754,7 @@ $v-unit-2: 8rem;
               padding: 0;
               justify-content: flex-start;
               align-items: center;
+              overflow: visible !important;
 
               @include home-metadata-big();
 
@@ -761,7 +762,7 @@ $v-unit-2: 8rem;
                 height: calc(#{$h-unit-2} / 2);
               }
 
-              &>div{
+              & > div {
                 flex: 1 0 auto;
               }
 
@@ -808,6 +809,7 @@ $v-unit-2: 8rem;
               .transparent,
               .transparent a {
                 color: transparent !important;
+                //color: #000 !important;
               }
 
               .filler {
@@ -816,6 +818,27 @@ $v-unit-2: 8rem;
                 height: 1px;
                 align-self: flex-start;
               }
+
+              .curvyArrow {
+                position: absolute;
+                right: 0;
+                top: 0;
+                height: ($h-unit-1 + $h-unit-2);
+                width: ($h-unit-1 + $h-unit-2)/2;
+                object {
+                  height: ($h-unit-1 + $h-unit-2);
+                  position: absolute;
+                  right: 0;
+                  top:  calc(-50% + 0.5px);
+                  // &:first-child {
+                  //   // top: calc(-100% + 2px);
+                  //   top: -100%;
+                  //   // top: unset;
+                  //   @include transform(scale(1, -1));
+                  //   // @include transform(rotate(-90deg));
+                  // }
+                }
+              }
             } //metadata end
 
             /* ------------------------- home article big hover ------------------------- */
@@ -829,20 +852,9 @@ $v-unit-2: 8rem;
             article {
               .metadata {
                 @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
-                .filler{
+                .filler {
                   position: relative;
-                  
-                  &::after{
-                    content: url('../img/curvy_arrow.svg');
-                    position: absolute;
-                    top: -50%;
-                    right: 0;
-                    
-                    
-                    
-                  }
                 }
-                
               }
               a.thumbnailwrapper {
                 float: right;
@@ -856,7 +868,7 @@ $v-unit-2: 8rem;
               .metadata {
                 justify-content: flex-end;
                 @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
-                .filler{
+                .filler {
                   order: -1;
                 }
               }