From 8b999766072c5662413429551417d031cd11d3b0 Mon Sep 17 00:00:00 2001 From: infeeeee Date: Sat, 22 Jun 2019 22:09:39 +0200 Subject: [PATCH] home hover improvements, docs --- KÉZIKÖNYV.md | 42 ++++++++++++++++++++++++++++++ README.md | 2 +- _jegyzet.md | 32 +++++------------------ css/base.css | 22 +++++++++++----- img/curvy_arrow.png | Bin 0 -> 2096 bytes img/curvy_arrow.svg | 61 ++++++++++++++++++++++---------------------- js/scripts.js | 5 ++-- loop.php | 10 ++++++++ sass/base.scss | 44 ++++++++++++++++++++------------ 9 files changed, 136 insertions(+), 82 deletions(-) create mode 100644 KÉZIKÖNYV.md create mode 100644 img/curvy_arrow.png diff --git a/KÉZIKÖNYV.md b/KÉZIKÖNYV.md new file mode 100644 index 0000000..43015f5 --- /dev/null +++ b/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 +``` diff --git a/README.md b/README.md index 76da186..80890fd 100644 --- a/README.md +++ b/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) \ No newline at end of file diff --git a/_jegyzet.md b/_jegyzet.md index fc60b25..dc9e0f7 100644 --- a/_jegyzet.md +++ b/_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 - a vonal felcsuszás animálva + ~hover: ne nőjjön meg, csak a szín~ + ~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 \ No newline at end of file diff --git a/css/base.css b/css/base.css index 179e59c..268e386 100644 --- a/css/base.css +++ b/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; } diff --git a/img/curvy_arrow.png b/img/curvy_arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..9617754c93524cfe1414cb73a2ced549eb15fcbf GIT binary patch literal 2096 zcmX9<3pmql8{e4CX%1WFFpHcjr<~@noQ4hYE;K^PFd~Im?-pWf)Pz(bl#F%QOA7hC zs>wvjTghJXrqJG)P>V7Nsqeq<`(M}dzn}ZQpXdJF&+}Z@?^hH;@`tM$sDeNscwm5E z7+|Tuc&H2o{=NQ<7{EZXd;-bJz?Z8`o9O-W15N{Guyv`x=Ec=@xt0SE+Z4)nv58CRqe$2k?@hEKjM2EmsE~&CjC)By-bWCQ_Lkaih`2DXUqt$1&$MV504|j><5^o z-u8gEsxr0(Fwk60TB%0-1#l|!vj`vTK(R?XNByo67!1u-lW{cS@AU|i# zidz%eAa|u;j&i&deP+gVgPj$Le#Xk;`O?Vyy4ye~@jnq^Pk6^{H1mAU`M8r=K2x#8d9S< z45lwL9qd9p-7-!U!`!oW6TvpFgYwfag>IyOm^HSj6|IdXityHS=f-#QD4?dni}5=} zz=HD7#51}WNK!$QaJ zrV$Qnyto!CG9q)!{O&cP{8bK$w$!}piMn+S)eMc5H{{P%nW~pVA{TX94$`#B4~gBJ ziWd-99`E|yw=Q=9c(r>QLqDefo;9xAsd4P{)R-}j9DY)xK{e{0HWfeK5ku4V(Eh@;it5h&SbgM>)a&K@ z`KMGFfxg@Ux(Pejdcjg`E%q0yP|9ArMs&C=s=oQa(3aLMC+b9$8YEyEFOIu7pRHKN zt6gm7qn_UkHj6h|)HW!M;iPwweBij0cNn?L8k@`aDM4ma+^E=*GBAGqrtQMinYaL_c8Uo-hYlvoU*jeC*1i@HD6@uFeigFo=~Et zPQ+cWvyjOIXFktmV;G7Ujr%e8@IR|-Mfy(?LZ(U}xO&BjO3*@s+sg-hTgp<$Pv5k2 zNA|F9|8d0UvHrS3FY|VCa+d-&*m3dr+(GObt))Zuakq5iaoRa)(~cI+5SYxj6br?U zjOO79C!6`&VCPQ!&j%)UdLCQghsTU1=cCmY;j6=;d129^Ub20wF9Gygb!mEv&!x!{ z%Z-On3~zmNi+WdE%|PtFkH6-;#L(3oUskUuIn`+`wp*dJ9d&^|ZxagswSZIXSD?~=zS=dWMZw$)2EkdsMHW)|`cd{? zOsf?mL;4TvIH9VFNBNV`8}F~LoM{3Ndf!AI@!5EUuP?&!O)@MNx6h-~gtb{56I`ss zk=%q;v{8>P46o0=B}p!dH!%1snn@I!w|l#kf7AVXOCcM)!V4Xa=`2$&ug_~xYBpbW z;&{W8Ll<&r`ph5#dlPeR+A(#ZL3PB40bXznezZw;^uy5~66#noK;T9>P~NE{Ck6^GnVpwUq0Vte#a;;eGJ97!fo8t4_AohMpNu9d2>2fuJ?XC z{q52YzZ|g55QSo1^J(?(OB8mlR7Mdu)NcK ztID5Tk{}0&Zx}rc^3d)YYSrHB53{e<6r8$K5%4I5FUSH|0_rg|Qx(*}u6q9XP9xQj zl{A$XZq5ayXWS6eH=Ri-;Gu-$k{fLkrD@?fZa0 zL@`P94v36^>^Tnz!j1a33D(-hBIRcYJII8xogKi@BM0E0sbt>z(ZaiWQkSP@?QX+} zA=m_Rr!|1#HfyY>*0yYwYO)yV2N1jgIn+U}H>NeU>y^{qM`EKASl4GqlGWOdu?2=Y zeI4XNTW`1RzzR&X?VK*=8qcb`jmUjCwIsAAP8#=$R2Q6MpQpX`e+!L5==WV4H-^u? zNeS}CzL9z1fL$K*JF|f+>}s1A9aswQiBiV~VD7t(ncjj>`P2PNWq#CIy?image/svg+xml \ No newline at end of file + 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" /> \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index 6971740..f369d7f 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -479,11 +479,12 @@ 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) @@ -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() diff --git a/loop.php b/loop.php index fb218ee..a58fb86 100644 --- a/loop.php +++ b/loop.php @@ -58,6 +58,16 @@
+ +
+ + + +
+ + + diff --git a/sass/base.scss b/sass/base.scss index 1240ac9..30a13a4 100644 --- a/sass/base.scss +++ b/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; @@ -852,11 +864,11 @@ $v-unit-2: 8rem; &.home-wrapper-2 { article { border-left: #000 1px solid; - + .metadata { justify-content: flex-end; @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right); - .filler{ + .filler { order: -1; } }