diff --git a/KÉZIKÖNYV.md b/KÉZIKÖNYV.md index 7e0cad3..4b72536 100644 --- a/KÉZIKÖNYV.md +++ b/KÉZIKÖNYV.md @@ -48,7 +48,7 @@ Cikkíró: #### Blokkok és egyéb megjegyzések -Bevezető: Az első bekezdés-t állítsd Címsor-H4-re, hogy megfelelő legyen a kiemelés +Bevezető: Az első bekezdés-t állítsd félkövérre (Ctrl+B), hogy megfelelő legyen a kiemelés Elválasztók azaz vízszintes vonalak: A cikk elejére és végére automatikusan kerül egy-egy, az összes többit kézzel kell belerakni, a méretezésük automatikus. @@ -76,6 +76,9 @@ A leírást itt kell szerkeszteni: - Bejegyzés > Címkék > Szerkesztés +### Rólunk + +A cikkenek az legyen a slug-ja, hogy `rolunk` ## Beállítások @@ -98,6 +101,13 @@ Megjelenés > Testreszabás > Designisso 2019 Itt kell beállítani hogy hány cikk jelenjen meg a kezdőlapon illetve az archívumokban +Alapértelmezett értékek: + +- Kezdőlapon megjelenő posztok száma: 20 +- Címke archívumban megjelenő posztok száma: 10 +- Archívumban és keresési találatokban megjelenő posztok száma: 11 +- Hasonló cikkek száma: 3 + ## Developement verzió telepítése Szükséges: python2, gulp global, max node 11 diff --git a/_jegyzet.md b/_jegyzet.md index 09a7a83..30cd901 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -14,12 +14,6 @@ nagy képek, metadata ipad: nem férnek be a rublikába ha hosszúak, mi legy, e margin: $v-unit-1 => 4rem top: calc(#{$v-unit-1}/ 2); => 2rem - -## További kérdések - -Kiscímek - .vr: néha nagyobb, élsimítás dolgok -> ezt nem tudom előidézni, szerintem megoldottam, de ha megint látszik, akkor küldjetek printscreent! - $bigmobile: 360px + $only-mobile: 0- 768px diff --git a/_teendők.md b/_teendők.md index 2c0f9c9..efae1bd 100644 --- a/_teendők.md +++ b/_teendők.md @@ -8,6 +8,8 @@ Facebook like gomb Betöltéskor rejteni a dolgokat méretezés előtt, vagy betöltést optimalizálni +onresize js! + `@media print{}` # Megjegyzések @@ -16,15 +18,10 @@ Betöltéskor rejteni a dolgokat méretezés előtt, vagy betöltést optimaliz ~szövegek: alap kijelölő szín a sárga legyen -> invertáltakat meg kell javítani! ## DESKTOP -~ Be, Do… > caroussel nézetben alul pixelnyi csíkhiba -> nem látom, de az a tippem, hogy ez élsimítási hiba, nem tudok ezzel mit kezdeni, ezt a böngésző/oprendszer szabályozza -~ cikkoldal: keskenyebb szövegbox > jobb margin marad, balt beljebb húzni -> nincs fix jobb margin, az folyton változik, legyen nagyobb a bal? De akkor nem fog a logóhoz és a vonalhoz zárni, hanem lebegni fog a szöveg a semmiben -~ Rólunk > képháttér nincs -> ez a sárga cuccok, amik csak mobilon vannak? és ott más szöveg van mint a desktop mintában a rólunk cikkben? fix a háttér vagy scrolloz a szöveggel, változtatható legyen? nyútsam a képet más képaránynál vagy ismétlődjön, vagy fehér alul fölül ha magasabb a telefon? ## MOBIL -~ mobil: színes felső vonal hiányzik a nyitócikk képének alsó élénél (lásd: Adri terve) -> Csak az első cikknél/első két cikknél van vagy mindegyiknél? ### Iphone only??? ~ nem mindig működik a home DIS gomb -> Mikor nem működik, nem találok ilyet, elvileg mindenhol mennie kell, vsz ugyanaz a hiba okozta mint az eltűnő dolgokat, szerintem ezt is megoldottam, de ellenőrizd -~ menü: fenti ikonok jelenjenek meg rögtön (esemény, insta most csak lefelé görgetésnél jön elő) -> szerintem megoldottam, de ellenőrizd ~ menü: nagyobb fekete flekk kell a dis logó alá, mert az „S” betű lelóg kicsit -> Ezt nem látom sehol, küldj printscreent \ No newline at end of file diff --git a/css/base.css b/css/base.css index 2d6253e..2ee54ec 100644 --- a/css/base.css +++ b/css/base.css @@ -253,41 +253,17 @@ html *::selection { justify-content: space-between !important; align-content: space-between; z-index: 3100; - background: #fff; } - .wrapper .header .header-1 .logo, - .wrapper .header .header-1 .social-link, - .wrapper .header .header-1 .menubutton, - .wrapper .header .header-1 .events-link, - .wrapper .header .header-2 .logo, - .wrapper .header .header-2 .social-link, - .wrapper .header .header-2 .menubutton, - .wrapper .header .header-2 .events-link { - filter: invert(100); } - .wrapper .header .header-1 .logo::selection, - .wrapper .header .header-1 .logo::selection *, - .wrapper .header .header-1 .social-link::selection, - .wrapper .header .header-1 .social-link::selection *, - .wrapper .header .header-1 .menubutton::selection, - .wrapper .header .header-1 .menubutton::selection *, - .wrapper .header .header-1 .events-link::selection, - .wrapper .header .header-1 .events-link::selection *, - .wrapper .header .header-2 .logo::selection, - .wrapper .header .header-2 .logo::selection *, - .wrapper .header .header-2 .social-link::selection, - .wrapper .header .header-2 .social-link::selection *, - .wrapper .header .header-2 .menubutton::selection, - .wrapper .header .header-2 .menubutton::selection *, - .wrapper .header .header-2 .events-link::selection, - .wrapper .header .header-2 .events-link::selection * { - filter: invert(0); } } + background: #fff; } } @media (min-width: 1024px) { .wrapper .header .header-1, .wrapper .header .header-2 { width: 10rem; } } .wrapper .header .header-1 div, .wrapper .header .header-2 div { - z-index: 3500; - -webkit-transform: translate3d(0, 0, 0); } + z-index: 3500; } + .wrapper .header .header-1 div object, + .wrapper .header .header-2 div object { + -webkit-transform: translate3d(0, 0, 0); } .wrapper .header .header-1 a, .wrapper .header .header-2 a { display: inline-block; } @@ -315,6 +291,27 @@ html *::selection { @media (min-width: 1024px) { .wrapper .header object { height: 3rem; } } + .wrapper .header .logo .white, + .wrapper .header .social-link .white, + .wrapper .header .menubutton .white, + .wrapper .header .events-link .white { + display: block; } + .wrapper .header .logo .black, + .wrapper .header .social-link .black, + .wrapper .header .menubutton .black, + .wrapper .header .events-link .black { + display: none; } + @media (min-width: 769px) { + .wrapper .header .logo .white, + .wrapper .header .social-link .white, + .wrapper .header .menubutton .white, + .wrapper .header .events-link .white { + display: none; } + .wrapper .header .logo .black, + .wrapper .header .social-link .black, + .wrapper .header .menubutton .black, + .wrapper .header .events-link .black { + display: block; } } @media (min-width: 769px) { .wrapper .header .header-1 > div, .wrapper .header .header-2 > div { @@ -342,9 +339,11 @@ html *::selection { -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); } - @media (min-width: 769px) { - .wrapper .header .menubutton button.rotated { - filter: invert(100); } } + @media (min-width: 769px) { + .wrapper .header .menubutton button.inverted .white { + display: block; } + .wrapper .header .menubutton button.inverted .black { + display: none; } } @media (min-width: 769px) { .wrapper .header .menubutton { order: unset; } } @@ -381,13 +380,18 @@ html *::selection { color: #000 !important; } } .wrapper .header .search-bar form.search button { flex: 0 0 auto; } - @media (max-width: 768px) { - .wrapper .header .search-bar form.search button { - filter: invert(100); } } + .wrapper .header .search-bar form.search button .white { + display: block; } + .wrapper .header .search-bar form.search button .black { + display: none; } @media (min-width: 769px) { .wrapper .header .search-box { display: block; flex: 1 1 0 !important; } + .wrapper .header .search-box > button .white { + display: none; } + .wrapper .header .search-box > button .black { + display: block; } .wrapper .header .search-bar { display: none; position: fixed; @@ -1061,7 +1065,7 @@ html *::selection { .search-results .wrapper .header .header-scroll.header-scroll-left button, .search-no-results .wrapper .header .header-scroll.header-scroll-left button, .error404 .wrapper .header .header-scroll.header-scroll-left button { - cursor: url("../img/arrow-black-left.png"), w-resize; } + cursor: url("../img/cursor-arrow-black-left.png"), w-resize; } .archive .wrapper .header .header-scroll.header-scroll-right, .home .wrapper .header .header-scroll.header-scroll-right, .search-results .wrapper .header .header-scroll.header-scroll-right, @@ -1080,7 +1084,7 @@ html *::selection { .search-results .wrapper .header .header-scroll.header-scroll-right button, .search-no-results .wrapper .header .header-scroll.header-scroll-right button, .error404 .wrapper .header .header-scroll.header-scroll-right button { - cursor: url("../img/arrow-black-right.png"), e-resize; } + cursor: url("../img/cursor-arrow-black-right.png"), e-resize; } .archive .wrapper .header .header-scroll button, .home .wrapper .header .header-scroll button, .search-results .wrapper .header .header-scroll button, @@ -1332,6 +1336,16 @@ html *::selection { .error404 main section article.post_nr_1 .thumbnailwrapper img, .error404 main section article.post_nr_2 .thumbnailwrapper img { height: 50vh; } + .archive main section article.post_nr_1 .metadata, .archive main section article.post_nr_2 .metadata, + .home main section article.post_nr_1 .metadata, + .home main section article.post_nr_2 .metadata, + .search-results main section article.post_nr_1 .metadata, + .search-results main section article.post_nr_2 .metadata, + .search-no-results main section article.post_nr_1 .metadata, + .search-no-results main section article.post_nr_2 .metadata, + .error404 main section article.post_nr_1 .metadata, + .error404 main section article.post_nr_2 .metadata { + top: calc(50vh - 5rem); } .archive main section article.post_nr_1 h2, .archive main section article.post_nr_2 h2, .home main section article.post_nr_1 h2, .home main section article.post_nr_2 h2, @@ -1420,16 +1434,71 @@ html *::selection { .error404 main section article.post_nr_1 h2 a, .error404 main section article.post_nr_2 h2 a { line-height: 1.5; } } - .archive main section article.post_nr_1 .metadata, .archive main section article.post_nr_2 .metadata, - .home main section article.post_nr_1 .metadata, - .home main section article.post_nr_2 .metadata, - .search-results main section article.post_nr_1 .metadata, - .search-results main section article.post_nr_2 .metadata, - .search-no-results main section article.post_nr_1 .metadata, - .search-no-results main section article.post_nr_2 .metadata, - .error404 main section article.post_nr_1 .metadata, - .error404 main section article.post_nr_2 .metadata { - bottom: 50%; } + .archive main section article.post_nr_1 .metadata, + .home main section article.post_nr_1 .metadata, + .search-results main section article.post_nr_1 .metadata, + .search-no-results main section article.post_nr_1 .metadata, + .error404 main section article.post_nr_1 .metadata { + z-index: 15; } + .archive main section article.post_nr_1 .metadata::after, + .home main section article.post_nr_1 .metadata::after, + .search-results main section article.post_nr_1 .metadata::after, + .search-no-results main section article.post_nr_1 .metadata::after, + .error404 main section article.post_nr_1 .metadata::after { + display: none; } + .archive main section article.post_nr_1 .metadata::after, + .home main section article.post_nr_1 .metadata::after, + .search-results main section article.post_nr_1 .metadata::after, + .search-no-results main section article.post_nr_1 .metadata::after, + .error404 main section article.post_nr_1 .metadata::after { + position: absolute; + content: ""; + display: block; + top: 0; + border: none; + width: calc(100% - 5rem + (5rem + 1px)); + border-top: #000 1px solid; + background-color: white; + left: calc(5rem); + margin-left: calc((5rem + 1px) * -1); } + .archive main section article.post_nr_1 .metadata::before, + .home main section article.post_nr_1 .metadata::before, + .search-results main section article.post_nr_1 .metadata::before, + .search-no-results main section article.post_nr_1 .metadata::before, + .error404 main section article.post_nr_1 .metadata::before { + display: block; + content: ""; + position: absolute; + width: calc(5rem); + height: calc(5rem); + top: 0; + background-color: white; + z-index: 9; + left: calc((5rem + 1px) * -1); + border-left: #000 solid 1px; + -moz-transform: skewX(-45deg); + -o-transform: skewX(-45deg); + -ms-transform: skewX(-45deg); + -webkit-transform: skewX(-45deg); + transform: skewX(-45deg); + transform-origin: left bottom; + border-top: #000 solid 1px; } + .archive main section article.post_nr_1 .metadata > *, + .home main section article.post_nr_1 .metadata > *, + .search-results main section article.post_nr_1 .metadata > *, + .search-no-results main section article.post_nr_1 .metadata > *, + .error404 main section article.post_nr_1 .metadata > * { + z-index: 15; } + .archive main section article.post_nr_1 h2, + .home main section article.post_nr_1 h2, + .search-results main section article.post_nr_1 h2, + .search-no-results main section article.post_nr_1 h2, + .error404 main section article.post_nr_1 h2 { + height: calc(50vh + 1px); + top: -1px; + position: relative; + border-top: #000 1px solid; + z-index: 8; } @media (min-width: 769px) { .archive main section .home_wrapper-big, .home main section .home_wrapper-big, @@ -1531,7 +1600,7 @@ html *::selection { .search-results main section .home_wrapper-big article .metadata, .search-no-results main section .home_wrapper-big article .metadata, .error404 main section .home_wrapper-big article .metadata { - height: calc(10rem / 2); } } + height: 9rem; } } @media (min-width: 769px) and (min-width: 1024px) { .archive main section .home_wrapper-big article .metadata, .home main section .home_wrapper-big article .metadata, @@ -5469,6 +5538,21 @@ body.category.category-esemeny { /* -------------------------------- page only------------------------------- */ @media (max-width: 768px) { + body.page.rolunk .wrapper .header { + background-color: #000; } + body.page.rolunk .thumbnailwrapper { + display: none; } + body.page.rolunk .titlewrapper { + padding-top: 10rem; + position: relative; + height: unset; + min-height: unset; } + body.page.rolunk .titlewrapper .metadata { + display: none; } + body.page.rolunk .titlewrapper h1.single-title { + min-height: unset; } + body.page.rolunk .single-content { + padding-top: 2rem; } body.page .single-content { padding-top: 8rem; } } @@ -5488,6 +5572,12 @@ body.category.category-esemeny { .tag-be .metadata a { color: #fdff00 !important; } +.tag-be.post_nr_1:not(.home-big) .metadata::before, .tag-be.post_nr_1:not(.home-big) .metadata::after { + border-color: #fdff00 !important; } + +.tag-be.post_nr_1:not(.home-big) h2 { + border-top-color: #fdff00 !important; } + .tag-be > .bevezetoWrapper::before { background-color: #fdff00 !important; } @@ -5545,6 +5635,12 @@ body.category.category-esemeny { .tag-do .metadata a { color: #3c00ff !important; } +.tag-do.post_nr_1:not(.home-big) .metadata::before, .tag-do.post_nr_1:not(.home-big) .metadata::after { + border-color: #3c00ff !important; } + +.tag-do.post_nr_1:not(.home-big) h2 { + border-top-color: #3c00ff !important; } + .tag-do > .bevezetoWrapper::before { background-color: #3c00ff !important; } @@ -5602,6 +5698,12 @@ body.category.category-esemeny { .tag-think .metadata a { color: #00ffb8 !important; } +.tag-think.post_nr_1:not(.home-big) .metadata::before, .tag-think.post_nr_1:not(.home-big) .metadata::after { + border-color: #00ffb8 !important; } + +.tag-think.post_nr_1:not(.home-big) h2 { + border-top-color: #00ffb8 !important; } + .tag-think > .bevezetoWrapper::before { background-color: #00ffb8 !important; } @@ -5659,6 +5761,12 @@ body.category.category-esemeny { .tag-love .metadata a { color: #ff5f5f !important; } +.tag-love.post_nr_1:not(.home-big) .metadata::before, .tag-love.post_nr_1:not(.home-big) .metadata::after { + border-color: #ff5f5f !important; } + +.tag-love.post_nr_1:not(.home-big) h2 { + border-top-color: #ff5f5f !important; } + .tag-love > .bevezetoWrapper::before { background-color: #ff5f5f !important; } diff --git a/functions.php b/functions.php index c6403fe..40a66e2 100644 --- a/functions.php +++ b/functions.php @@ -530,7 +530,7 @@ function dis_2019_more_posts_on_home(&$query) - console_debug($query); + //console_debug($query); // console_debug($query->query_vars[related_loop]); diff --git a/header.php b/header.php index b4d5a5c..4f727f9 100644 --- a/header.php +++ b/header.php @@ -48,27 +48,39 @@
- - + + + +
@@ -92,9 +104,13 @@
@@ -102,17 +118,25 @@
- - + + + +
diff --git a/img/arrow.png b/img/_del_arrow.png similarity index 100% rename from img/arrow.png rename to img/_del_arrow.png diff --git a/img/arrow.svg b/img/_del_arrow.svg similarity index 100% rename from img/arrow.svg rename to img/_del_arrow.svg diff --git a/img/arrow-black-left.png b/img/cursor-arrow-black-left.png similarity index 100% rename from img/arrow-black-left.png rename to img/cursor-arrow-black-left.png diff --git a/img/arrow-black-right.png b/img/cursor-arrow-black-right.png similarity index 100% rename from img/arrow-black-right.png rename to img/cursor-arrow-black-right.png diff --git a/img/dis-logo-black.png b/img/dis-logo-black.png new file mode 100644 index 0000000..73a3d30 Binary files /dev/null and b/img/dis-logo-black.png differ diff --git a/img/dis-logo-black.svg b/img/dis-logo-black.svg new file mode 100644 index 0000000..09b5e82 --- /dev/null +++ b/img/dis-logo-black.svg @@ -0,0 +1,73 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/img/dis-logo.png b/img/dis-logo-white.png similarity index 100% rename from img/dis-logo.png rename to img/dis-logo-white.png diff --git a/img/dis-logo.svg b/img/dis-logo-white.svg similarity index 100% rename from img/dis-logo.svg rename to img/dis-logo-white.svg diff --git a/img/dis-plus-black.png b/img/dis-plus-black.png new file mode 100644 index 0000000..7afcd98 Binary files /dev/null and b/img/dis-plus-black.png differ diff --git a/img/dis-plus-black.svg b/img/dis-plus-black.svg new file mode 100644 index 0000000..4fdad87 --- /dev/null +++ b/img/dis-plus-black.svg @@ -0,0 +1,53 @@ + + + +image/svg+xml + + \ No newline at end of file diff --git a/img/dis-plus.png b/img/dis-plus-white.png similarity index 100% rename from img/dis-plus.png rename to img/dis-plus-white.png diff --git a/img/dis-plus.svg b/img/dis-plus-white.svg similarity index 100% rename from img/dis-plus.svg rename to img/dis-plus-white.svg diff --git a/img/facebook_icon-black.png b/img/facebook_icon-black.png new file mode 100644 index 0000000..ca22794 Binary files /dev/null and b/img/facebook_icon-black.png differ diff --git a/img/facebook_icon-black.svg b/img/facebook_icon-black.svg new file mode 100644 index 0000000..cf78753 --- /dev/null +++ b/img/facebook_icon-black.svg @@ -0,0 +1,58 @@ + + + +image/svg+xml + + + + + \ No newline at end of file diff --git a/img/facebook_icon.png b/img/facebook_icon-white.png similarity index 100% rename from img/facebook_icon.png rename to img/facebook_icon-white.png diff --git a/img/facebook_icon.svg b/img/facebook_icon-white.svg similarity index 100% rename from img/facebook_icon.svg rename to img/facebook_icon-white.svg diff --git a/img/instagram_icon-black.png b/img/instagram_icon-black.png new file mode 100644 index 0000000..380587a Binary files /dev/null and b/img/instagram_icon-black.png differ diff --git a/img/instagram_icon-black.svg b/img/instagram_icon-black.svg new file mode 100644 index 0000000..dee0713 --- /dev/null +++ b/img/instagram_icon-black.svg @@ -0,0 +1,58 @@ + + + +image/svg+xml + + + + + \ No newline at end of file diff --git a/img/instagram_icon.png b/img/instagram_icon-white.png similarity index 100% rename from img/instagram_icon.png rename to img/instagram_icon-white.png diff --git a/img/instagram_icon.svg b/img/instagram_icon-white.svg similarity index 100% rename from img/instagram_icon.svg rename to img/instagram_icon-white.svg diff --git a/img/kereso_icon.png b/img/kereso_icon-black.png similarity index 100% rename from img/kereso_icon.png rename to img/kereso_icon-black.png diff --git a/img/kereso_icon.svg b/img/kereso_icon-black.svg similarity index 100% rename from img/kereso_icon.svg rename to img/kereso_icon-black.svg diff --git a/img/kereso_icon-white.png b/img/kereso_icon-white.png new file mode 100644 index 0000000..20b1541 Binary files /dev/null and b/img/kereso_icon-white.png differ diff --git a/img/kereso_icon-white.svg b/img/kereso_icon-white.svg new file mode 100644 index 0000000..e338b62 --- /dev/null +++ b/img/kereso_icon-white.svg @@ -0,0 +1,58 @@ + + + +image/svg+xml + + + + + \ No newline at end of file diff --git a/img/naptar_icon-black.png b/img/naptar_icon-black.png new file mode 100644 index 0000000..229ebb0 Binary files /dev/null and b/img/naptar_icon-black.png differ diff --git a/img/naptar_icon-black.svg b/img/naptar_icon-black.svg new file mode 100644 index 0000000..60b35bb --- /dev/null +++ b/img/naptar_icon-black.svg @@ -0,0 +1,81 @@ + + + +image/svg+xml + + + + + + + + + + \ No newline at end of file diff --git a/img/naptar_icon.png b/img/naptar_icon-white.png similarity index 100% rename from img/naptar_icon.png rename to img/naptar_icon-white.png diff --git a/img/naptar_icon.svg b/img/naptar_icon-white.svg similarity index 100% rename from img/naptar_icon.svg rename to img/naptar_icon-white.svg diff --git a/js/scripts.js b/js/scripts.js index 50616c8..68059f1 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -13,8 +13,8 @@ /* -------------------------------- geometry -------------------------------- */ // const vw = $(window).width() - const wow = window.outerWidth - const wiw = window.innerWidth + // const wow = window.outerWidth + // const wiw = window.innerWidth // const bw = $('body').width() // const woh = window.outerHeight @@ -24,8 +24,6 @@ // const dch = document.documentElement.clientHeight - const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width - const bottomScrollHeight = 0 // height of scrollbar at bottom // const bottomScrollHeight = (_ => { @@ -55,19 +53,38 @@ /* --------------------------- css values to vars --------------------------- */ - //isMobile - const isMobile = (_ => { - if (wow < 769 || wiw < 769) { - //mobile settings - $('.social-link, .events-link').addClass('hidden') - return true + + function calcWidths() { + let wow = window.outerWidth + let wiw = window.innerWidth + let mw = $(".header-1")[0].getBoundingClientRect().width + return { wow: wow, wiw: wiw, desktophomemargin: mw } + } + + /** + * Returns true or false for mobile and tablet query + * @param {string} device 'tablet' or 'mobile' + */ + function checkDevice(device) { + let ww = calcWidths() + + // let wow = window.outerWidth + // let wiw = window.innerWidth + + if ((ww.wow < 769 || ww.wiw < 769) && device == 'mobile') { + //mobile settings + return true + } else if (768 < ww.wow && ww.wow < 1024 && 768 < ww.wiw && ww.wiw < 1024 && device == 'tablet') { + return true } else { return false } - })() + } + + var isMobile = checkDevice('mobile') + var isTablet = checkDevice('tablet') - const isTablet = (!isMobile && (wow < 1024 && wiw < 1024)) ? true : false /** * Checks if body has a class @@ -122,7 +139,7 @@ if ($(".menubutton button").hasClass("rotated")) { $(".menubutton button").removeClass("rotated"); } else { - $(".menubutton button").addClass("rotated"); + $(".menubutton button").addClass("rotated").addClass("inverted"); } } @@ -134,18 +151,31 @@ } } - function convertRemToPixels(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); + /* --------------------- generic page load for onresize --------------------- */ + + function loadPage() { + if (isMobile) { + // hide social buttons + $('.social-link, .events-link').addClass('hidden') + // move search to menu + $(".search-box>.search-bar").prependTo("#sidebar-wrapper") + } else { + $('.social-link, .events-link').removeClass('hidden') + // move search to back + $("#sidebar-wrapper>.search-bar").appendTo(".search-box") + } } + loadPage() + /* ========================================================================== */ /* SEARCH */ /* ========================================================================== */ // on mobile add to sidebar: - if (isMobile) { - $(".search-bar").prependTo("#sidebar-wrapper") - } + // if (isMobile) { + // $(".search-box>.search-bar").prependTo("#sidebar-wrapper") + // } //clicking on desktop if (!isMobile) { @@ -158,8 +188,9 @@ bar.hide().removeClass("opensearch") }) } else { + let ww = calcWidths() //if it's closed open: - bar.show().stop().animate({ width: wiw - (desktophomemargin * 2) }, 400, function () { + bar.show().stop().animate({ width: ww.wiw - (ww.desktophomemargin * 2) }, 400, function () { bar.addClass("opensearch") $(".search-input").focus() }) @@ -173,14 +204,26 @@ /* MENU */ /* ========================================================================== */ - var menuWidth = wow - if (isTablet) { - menuWidth = 350 - } - if (!isMobile && !isTablet) { - menuWidth = 500 + function mwCalc() { + let ww = calcWidths() + if (isMobile) { + return ww.wow + } else if (isTablet) { + return 350 + } else { + return 500 + } } + var menuWidth = mwCalc() + // var menuWidth = 100 + + // if (isTablet) { + // menuWidth = 350 + // } + // if (!isMobile && !isTablet) { + // menuWidth = 500 + // } $("#sidebar").simplerSidebar({ @@ -210,6 +253,7 @@ callbacks: { animation: { both: showHideSocial, + close: function () { $(".menubutton button").removeClass("inverted") }, freezePage: false } } @@ -301,11 +345,7 @@ //fit title $("body:not(.no-result) .archivetitle h1").fitText(0.7) - - - - - + }//isMasonryPage end }// !isMobile end @@ -416,20 +456,22 @@ var offset = ($(nextelem).position().left) + let ww = calcWidths() + //if loadmore is the next, do not scroll, but load: if (nextelem.attr("class") == "misha_loadmore") { loadmore() return target } else if (isEsemeny) { - offset = offset - (desktophomemargin) + offset = offset - (ww.desktophomemargin) } else { //from the third wrap modify the offset var wNum = parseInt($(nextelem).attr("class").split(" ")[1].split("-")[1]) console.log(wNum) if (wNum == 3) { - offset = offset - (desktophomemargin / 2) + offset = offset - (ww.desktophomemargin / 2) } else if (wNum > 3 || !isHome) { - offset = offset - desktophomemargin + offset = offset - ww.desktophomemargin } } console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset) @@ -1092,6 +1134,32 @@ + /* -------------------------------------------------------------------------- */ + /* window resize event */ + /* -------------------------------------------------------------------------- */ + + $(window).resize(function () { + let ww = calcWidths() + + //check if mobile + isMobile = checkDevice('mobile') + isTablet = checkDevice('tablet') + + // calc other vars + menuWidth = mwCalc() + + //run load script + loadPage() + + + //resize search + if ($('.search-bar').hasClass("opensearch")) { + $('.search-bar').css({ width: ww.wiw - (ww.desktophomemargin * 2) }) + } + + }); + + /* ------------------------------- END OF FILE ------------------------------ */ diff --git a/sass/base.scss b/sass/base.scss index ad0387e..98fc875 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -418,29 +418,21 @@ $v-unit-6: 24rem; height: 100vh; flex-direction: column; flex: 0 0 auto !important; - //filter: invert(100); padding: 2rem !important; justify-content: space-between !important; align-content: space-between; z-index: 3100; background: #fff; - .logo, - .social-link, - .menubutton, - .events-link { - filter: invert(100); - &::selection, - &::selection * { - filter: invert(0); - } - } } @media #{$smalldesktop} { width: $h-unit-2; } div { z-index: 3500; - -webkit-transform: translate3d(0, 0, 0); + + object { + -webkit-transform: translate3d(0, 0, 0); + } } a { display: inline-block; @@ -502,6 +494,34 @@ $v-unit-6: 24rem; /* header elements */ /* -------------------------------------------------------------------------- */ + // color of header elements, icons + .logo, + .social-link, + .menubutton, + .events-link { + .white { + display: block; + } + .black { + display: none; + } + // filter: invert(100); + } + @media #{$tablet} { + .logo, + .social-link, + .menubutton, + .events-link { + .white { + display: none; + } + .black { + display: block; + } + // filter: invert(100); + } + } + @media #{$tablet} { .header-1 > div, .header-2 > div { @@ -533,10 +553,18 @@ $v-unit-6: 24rem; button { transform-origin: center; @include transition($speed $easing); + &.rotated { @include transform(rotate($degree)); + } + &.inverted { @media #{$tablet} { - filter: invert(100); + .white { + display: block; + } + .black { + display: none; + } } } } @@ -585,8 +613,12 @@ $v-unit-6: 24rem; } button { flex: 0 0 auto; - @media #{$only-mobile} { - filter: invert(100); + + .white { + display: block; + } + .black { + display: none; } } } @@ -598,6 +630,14 @@ $v-unit-6: 24rem; .search-box { display: block; flex: 1 1 0 !important; + & > button { + .white { + display: none; + } + .black { + display: block; + } + } } .search-bar { @@ -870,7 +910,7 @@ $v-unit-6: 24rem; left: $h-unit-2; } button { - cursor: url("../img/arrow-black-left.png"), w-resize; + cursor: url("../img/cursor-arrow-black-left.png"), w-resize; } } &.header-scroll-right { @@ -879,7 +919,7 @@ $v-unit-6: 24rem; right: $h-unit-2; } button { - cursor: url("../img/arrow-black-right.png"), e-resize; + cursor: url("../img/cursor-arrow-black-right.png"), e-resize; } } button { @@ -1021,6 +1061,9 @@ $v-unit-6: 24rem; height: 50vh; } } + .metadata { + top: calc(50vh - 5rem); + } h2 { height: 50vh; @@ -1032,8 +1075,27 @@ $v-unit-6: 24rem; } } } + } + + //border on first elements + &.post_nr_1 { .metadata { - bottom: 50%; + &::after { + display: none; + } + + @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left); + z-index: 15; + & > * { + z-index: 15; + } + } + h2 { + height: calc(50vh + 1px); + top: -1px; + position: relative; + border-top: #000 1px solid; + z-index: 8; } } } //article end @@ -1106,7 +1168,8 @@ $v-unit-6: 24rem; height: #{$h-unit-1-5}; @media #{$mobile-landscape} { - height: calc(#{$h-unit-2} / 2); + // height: calc(#{$h-unit-2} / 2); + height: $h-unit-1 + $v-unit-1; } @media #{$smalldesktop} { // height: #{$h-unit-2}; @@ -1939,11 +2002,11 @@ $padd: 2rem; .metaWrapper { @include singleDesktopLayout(); justify-content: flex-start; - .time-cat::after{ + .time-cat::after { content: " "; display: inline-block; } - .format::before{ + .format::before { content: "|"; display: inline-block; } @@ -2542,6 +2605,33 @@ $padd: 2rem; /* -------------------------------- page only------------------------------- */ body.page { @media #{$only-mobile} { + //hide header image on mobile on 'rolunk' + &.rolunk { + .wrapper .header { + background-color: #000; + } + + .thumbnailwrapper { + display: none; + } + .titlewrapper { + padding-top: $h-unit-2; + + position: relative; + height: unset; + min-height: unset; + .metadata { + display: none; + } + h1.single-title { + min-height: unset; + } + } + .single-content { + padding-top: 2rem; + } + } + .single-content { padding-top: 8rem; } @@ -2572,6 +2662,18 @@ body.page { color: $color !important; } } + //mobile desktop firat post + &.post_nr_1:not(.home-big) { + .metadata { + &::before, + &::after { + border-color: $color !important; + } + } + h2 { + border-top-color: $color !important; + } + } & > .bevezetoWrapper::before { background-color: $color !important; diff --git a/searchform.php b/searchform.php index 53366f5..2b4a46d 100644 --- a/searchform.php +++ b/searchform.php @@ -2,8 +2,13 @@