From 98e0282821578303551e15a3d283c33e2ee04510 Mon Sep 17 00:00:00 2001 From: infeeeee Date: Mon, 1 Jul 2019 03:31:24 +0200 Subject: [PATCH] small fixes --- _jegyzet.md | 5 + category-esemeny.php | 13 +- css/base.css | 336 ++++++++++++++++++----------------------- functions.php | 53 +++---- header.php | 9 +- js/scripts.js | 92 ++++++----- loop.php | 9 +- sass/_font-mixins.scss | 42 +++--- sass/base.scss | 201 +++++++++++++----------- 9 files changed, 388 insertions(+), 372 deletions(-) diff --git a/_jegyzet.md b/_jegyzet.md index 61ef9e5..d804550 100644 --- a/_jegyzet.md +++ b/_jegyzet.md @@ -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 \ No newline at end of file diff --git a/category-esemeny.php b/category-esemeny.php index 44a709a..5a28d78 100644 --- a/category-esemeny.php +++ b/category-esemeny.php @@ -4,8 +4,6 @@
-

Események

- @@ -14,19 +12,12 @@ - + -
-
- -
-
- -
- +
diff --git a/css/base.css b/css/base.css index b9b1c5a..b15042a 100644 --- a/css/base.css +++ b/css/base.css @@ -247,8 +247,7 @@ object { @media (min-width: 769px) { .wrapper .header .search-bar form.search input { font-size: 4rem; - color: #000 !important; - -webkit-text-stroke: unset !important; } } + color: #000 !important; } } .wrapper .header .search-bar form.search button { flex: 0 0 auto; } @media (max-width: 768px) { @@ -324,12 +323,15 @@ object { .wrapper .header #tag-nav { display: none; position: fixed; - right: calc(10rem* 2); + right: calc(20rem + 2px); top: calc(4rem/ 2); z-index: 1000; } @media (min-width: 769px) { .wrapper .header #tag-nav { - top: calc(4rem* 0.4); } } + top: 1rem; } } + @media (min-width: 1279px) { + .wrapper .header #tag-nav { + top: 0.5rem; } } @media (min-width: 769px) { .wrapper .header #tag-nav { display: block; } } @@ -340,13 +342,14 @@ object { color: transparent; -webkit-text-stroke: #000 1px; text-transform: uppercase; } - .wrapper .header #tag-nav ul.pause { - -webkit-text-stroke: #fff 1px !important; } .wrapper .header #tag-nav ul.current { - -webkit-text-stroke: #000 1px !important; } + color: #000 !important; } @media (min-width: 769px) { .wrapper .header #tag-nav ul { font-size: 1.2rem; } } + @media (min-width: 1279px) { + .wrapper .header #tag-nav ul { + font-size: 1.4rem; } } .wrapper .header #tag-nav ul li { display: inline; } .wrapper .header #tag-nav ul li a span { @@ -364,13 +367,17 @@ object { @media (min-width: 769px) { .wrapper .header #tag-nav ul li a span { height: 3rem; } } - .wrapper .header #tag-nav ul li a span.pause { - -webkit-text-stroke: #fff 1px !important; } + @media (min-width: 1279px) { + .wrapper .header #tag-nav ul li a span { + height: 3.5rem; } } .wrapper .header #tag-nav ul li a span.current { - -webkit-text-stroke: #000 1px !important; } + color: #000 !important; } @media (min-width: 769px) { .wrapper .header #tag-nav ul li a span { font-size: 1.2rem; } } + @media (min-width: 1279px) { + .wrapper .header #tag-nav ul li a span { + font-size: 1.4rem; } } .wrapper .header #tag-nav ul li a span.char1 { -moz-transform: rotate(21.17647deg); -o-transform: rotate(21.17647deg); @@ -747,84 +754,6 @@ object { transform: rotate(720deg); } } .wrapper .header #tag-nav ul li a span.pause { animation-play-state: paused; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper { - position: fixed; - display: none; - right: 10rem; - left: 10rem; - top: 0; - background-color: #000; - height: 50vh; - z-index: -1; - flex-direction: row; - justify-content: flex-start; - align-items: center; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper.opened { - display: flex; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper a { - font: 900 12rem "Westeinde Caption"; - color: transparent; - -webkit-text-stroke: #fff 1px; - text-transform: uppercase; - -moz-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - transform-origin: 50% 50%; - display: block; - width: calc(30% + 24rem); - text-align: center; - height: fit-content; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span { - display: block; - position: absolute; - bottom: 0; - right: 0; - height: 24rem; - width: 70%; - padding: 4rem; - padding-left: 32rem; - padding-right: 16rem; - font: 900 1.4rem "Westeinde Caption"; - color: #fff; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span::after { - position: absolute; - content: ""; - display: block; - top: 0; - border: none; - width: calc(100% - 24rem); - border-top: #fff 1px solid; - background-color: transparent; - left: calc(24rem); - margin-left: -0; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span::before { - display: block; - content: ""; - position: absolute; - width: calc(24rem); - height: calc(24rem); - top: 0; - background-color: transparent; - z-index: 9; - left: -0; - border-left: #fff 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; } - .wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span .circle { - width: 4rem; - height: 4rem; - border-radius: 50%; - background: #fff; - position: absolute; - right: 0; - top: 0; - margin: 2rem; } .wrapper main { z-index: 1; } .wrapper main section { @@ -993,7 +922,15 @@ object { @media (min-width: 769px) { .archive main section article h2 a, .home main section article h2 a { - font-size: 5rem; } } + font-size: 6rem; } } + @media (min-width: 1279px) { + .archive main section article h2 a, + .home main section article h2 a { + font-size: 7.5rem; } } + @media (min-width: 1919px) { + .archive main section article h2 a, + .home main section article h2 a { + font-size: 11rem; } } .archive main section article .metadata, .home main section article .metadata { bottom: 50%; @@ -1039,7 +976,7 @@ object { /* ------------------------- home article big hover ------------------------- */ } .archive main section .home-wrapper-big article .thumbnailwrapper, .home main section .home-wrapper-big article .thumbnailwrapper { - width: 40%; + width: 60%; height: calc(100% - 4rem); display: flex; flex-direction: row; @@ -1054,7 +991,8 @@ object { height: unset; position: absolute; top: 6rem; - padding: 4rem; } + padding: 4rem; + width: calc(100vw - 20rem); } .archive main section .home-wrapper-big article .metadata, .home main section .home-wrapper-big article .metadata { bottom: 0; @@ -1078,14 +1016,14 @@ object { @media (min-width: 769px) { .archive main section .home-wrapper-big article .metadata > div, .home main section .home-wrapper-big article .metadata > div { - flex: 1 0 auto; } + flex: 1 1 auto; } .archive main section .home-wrapper-big article .metadata .categories, .home main section .home-wrapper-big article .metadata .categories { display: block; - padding: 0 5rem; } + padding: 0; } .archive main section .home-wrapper-big article .metadata .postedon, .home main section .home-wrapper-big article .metadata .postedon { - padding: 0 5rem; } + padding: 0; } .archive main section .home-wrapper-big article .metadata .bevezeto, .archive main section .home-wrapper-big article .metadata .alcim, .home main section .home-wrapper-big article .metadata .bevezeto, @@ -1125,12 +1063,13 @@ object { .archive main section .home-wrapper-big article .metadata .filler, .home main section .home-wrapper-big article .metadata .filler { flex: 0 0 auto; - width: 40%; + width: 60%; 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; + display: block; right: 0; top: 0; height: 15rem; @@ -1452,7 +1391,15 @@ object { @media (min-width: 769px) and (min-width: 769px) { .archive main section .home-wrapper-small .archivetitle h1, .home main section .home-wrapper-small .archivetitle h1 { - font-size: 5rem; } } + font-size: 6rem; } } + @media (min-width: 769px) and (min-width: 1279px) { + .archive main section .home-wrapper-small .archivetitle h1, + .home main section .home-wrapper-small .archivetitle h1 { + font-size: 7.5rem; } } + @media (min-width: 769px) and (min-width: 1919px) { + .archive main section .home-wrapper-small .archivetitle h1, + .home main section .home-wrapper-small .archivetitle h1 { + font-size: 11rem; } } @media (min-width: 769px) { .archive main section .home-wrapper-small .archivetitle.tag, .home main section .home-wrapper-small .archivetitle.tag { @@ -1492,6 +1439,15 @@ object { .home main section .home-wrapper-small .archivedescription p { font-size: 1.2rem; } } +/* -------------------------------------------------------------------------- */ +/* Events */ +/* -------------------------------------------------------------------------- */ +body.category.category-esemeny header { + background-color: #000; } + +body.category.category-esemeny main { + padding-top: 9rem; } + /* -------------------------------------------------------------------------- */ /* single */ /* -------------------------------------------------------------------------- */ @@ -1752,51 +1708,52 @@ object { /* -------------------------------------------------------------------------- */ /* TAG COLORS */ /* -------------------------------------------------------------------------- */ -.tag-be .metadata { - color: #00ffb8 !important; } - @media (max-width: 768px) { +@media (max-width: 768px) { + .tag-be .metadata { + color: #fdff00 !important; } .tag-be .metadata .vr { - background-color: #00ffb8 !important; } } - .tag-be .metadata a { - color: #00ffb8 !important; } + background-color: #fdff00 !important; } } + +.tag-be .metadata a { + color: #fdff00 !important; } .tag-be blockquote p { - background: #00ffb8 !important; - -moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; - -webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; - box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; } + background: #fdff00 !important; + -moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; + -webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; + box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; } .tag-be hr { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } .tag-be figcaption { - -webkit-text-stroke-color: #00ffb8 !important; } + -webkit-text-stroke-color: #fdff00 !important; } @media (min-width: 769px) { .tag-be.home-big h2 a { - color: #00ffb8; } + color: #fdff00; } .tag-be.home-big.hovered { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } .tag-be.home-small .metadata, .tag-be.home-small .metadata a { color: #000 !important; } } .tag-be.bedo-sub-wrapper > a { - -webkit-text-stroke: #00ffb8 1px !important; } + -webkit-text-stroke: #fdff00 1px !important; } .tag-be.bedo-sub-wrapper span { - color: #00ffb8 !important; } + color: #fdff00 !important; } .tag-be.bedo-sub-wrapper .circle { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } .tag-be.archive.tag { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } .tag-be.archive.tag .header-1, .tag-be.archive.tag .header-2 { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } .tag-be.archive.tag article * { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } @media (min-width: 769px) { .tag-be.random .thumbnailwrapper > img { @@ -1807,51 +1764,52 @@ object { mask-repeat: no-repeat; mask-size: 100%; } } -.tag-do .metadata { - color: #ff5f5f !important; } - @media (max-width: 768px) { +@media (max-width: 768px) { + .tag-do .metadata { + color: #3c00ff !important; } .tag-do .metadata .vr { - background-color: #ff5f5f !important; } } - .tag-do .metadata a { - color: #ff5f5f !important; } + background-color: #3c00ff !important; } } + +.tag-do .metadata a { + color: #3c00ff !important; } .tag-do blockquote p { - background: #ff5f5f !important; - -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; - -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; - box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; } + background: #3c00ff !important; + -moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; + -webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; + box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; } .tag-do hr { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } .tag-do figcaption { - -webkit-text-stroke-color: #ff5f5f !important; } + -webkit-text-stroke-color: #3c00ff !important; } @media (min-width: 769px) { .tag-do.home-big h2 a { - color: #ff5f5f; } + color: #3c00ff; } .tag-do.home-big.hovered { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } .tag-do.home-small .metadata, .tag-do.home-small .metadata a { color: #000 !important; } } .tag-do.bedo-sub-wrapper > a { - -webkit-text-stroke: #ff5f5f 1px !important; } + -webkit-text-stroke: #3c00ff 1px !important; } .tag-do.bedo-sub-wrapper span { - color: #ff5f5f !important; } + color: #3c00ff !important; } .tag-do.bedo-sub-wrapper .circle { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } .tag-do.archive.tag { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } .tag-do.archive.tag .header-1, .tag-do.archive.tag .header-2 { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } .tag-do.archive.tag article * { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } @media (min-width: 769px) { .tag-do.random .thumbnailwrapper > img { @@ -1862,51 +1820,52 @@ object { mask-repeat: no-repeat; mask-size: 100%; } } -.tag-think .metadata { - color: #fdff00 !important; } - @media (max-width: 768px) { +@media (max-width: 768px) { + .tag-think .metadata { + color: #00ffb8 !important; } .tag-think .metadata .vr { - background-color: #fdff00 !important; } } - .tag-think .metadata a { - color: #fdff00 !important; } + background-color: #00ffb8 !important; } } + +.tag-think .metadata a { + color: #00ffb8 !important; } .tag-think blockquote p { - background: #fdff00 !important; - -moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; - -webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; - box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; } + background: #00ffb8 !important; + -moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; + -webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; + box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; } .tag-think hr { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } .tag-think figcaption { - -webkit-text-stroke-color: #fdff00 !important; } + -webkit-text-stroke-color: #00ffb8 !important; } @media (min-width: 769px) { .tag-think.home-big h2 a { - color: #fdff00; } + color: #00ffb8; } .tag-think.home-big.hovered { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } .tag-think.home-small .metadata, .tag-think.home-small .metadata a { color: #000 !important; } } .tag-think.bedo-sub-wrapper > a { - -webkit-text-stroke: #fdff00 1px !important; } + -webkit-text-stroke: #00ffb8 1px !important; } .tag-think.bedo-sub-wrapper span { - color: #fdff00 !important; } + color: #00ffb8 !important; } .tag-think.bedo-sub-wrapper .circle { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } .tag-think.archive.tag { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } .tag-think.archive.tag .header-1, .tag-think.archive.tag .header-2 { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } .tag-think.archive.tag article * { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } @media (min-width: 769px) { .tag-think.random .thumbnailwrapper > img { @@ -1917,51 +1876,52 @@ object { mask-repeat: no-repeat; mask-size: 100%; } } -.tag-love .metadata { - color: #3c00ff !important; } - @media (max-width: 768px) { +@media (max-width: 768px) { + .tag-love .metadata { + color: #ff5f5f !important; } .tag-love .metadata .vr { - background-color: #3c00ff !important; } } - .tag-love .metadata a { - color: #3c00ff !important; } + background-color: #ff5f5f !important; } } + +.tag-love .metadata a { + color: #ff5f5f !important; } .tag-love blockquote p { - background: #3c00ff !important; - -moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; - -webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; - box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; } + background: #ff5f5f !important; + -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; + -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; + box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; } .tag-love hr { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } .tag-love figcaption { - -webkit-text-stroke-color: #3c00ff !important; } + -webkit-text-stroke-color: #ff5f5f !important; } @media (min-width: 769px) { .tag-love.home-big h2 a { - color: #3c00ff; } + color: #ff5f5f; } .tag-love.home-big.hovered { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } .tag-love.home-small .metadata, .tag-love.home-small .metadata a { color: #000 !important; } } .tag-love.bedo-sub-wrapper > a { - -webkit-text-stroke: #3c00ff 1px !important; } + -webkit-text-stroke: #ff5f5f 1px !important; } .tag-love.bedo-sub-wrapper span { - color: #3c00ff !important; } + color: #ff5f5f !important; } .tag-love.bedo-sub-wrapper .circle { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } .tag-love.archive.tag { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } .tag-love.archive.tag .header-1, .tag-love.archive.tag .header-2 { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } .tag-love.archive.tag article * { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } @media (min-width: 769px) { .tag-love.random .thumbnailwrapper > img { @@ -1975,62 +1935,62 @@ object { @media (min-width: 769px) { .single .tag-be .metadata { color: #fff !important; - -webkit-text-stroke: #00ffb8 1px !important; } } + -webkit-text-stroke: #fdff00 1px !important; } } @media (min-width: 769px) { .single .tag-be .metadata a { color: #fff !important; - -webkit-text-stroke: #00ffb8 1px !important; } } + -webkit-text-stroke: #fdff00 1px !important; } } @media (min-width: 769px) { .single .tag-do .metadata { color: #fff !important; - -webkit-text-stroke: #ff5f5f 1px !important; } } + -webkit-text-stroke: #3c00ff 1px !important; } } @media (min-width: 769px) { .single .tag-do .metadata a { color: #fff !important; - -webkit-text-stroke: #ff5f5f 1px !important; } } + -webkit-text-stroke: #3c00ff 1px !important; } } @media (min-width: 769px) { .single .tag-think .metadata { color: #fff !important; - -webkit-text-stroke: #fdff00 1px !important; } } + -webkit-text-stroke: #00ffb8 1px !important; } } @media (min-width: 769px) { .single .tag-think .metadata a { color: #fff !important; - -webkit-text-stroke: #fdff00 1px !important; } } + -webkit-text-stroke: #00ffb8 1px !important; } } @media (min-width: 769px) { .single .tag-love .metadata { color: #fff !important; - -webkit-text-stroke: #3c00ff 1px !important; } } + -webkit-text-stroke: #ff5f5f 1px !important; } } @media (min-width: 769px) { .single .tag-love .metadata a { color: #fff !important; - -webkit-text-stroke: #3c00ff 1px !important; } } + -webkit-text-stroke: #ff5f5f 1px !important; } } body.hover-tag-be, .header-1.hover-tag-be, .header-2.hover-tag-be { - background-color: #00ffb8 !important; } + background-color: #fdff00 !important; } body.hover-tag-do, .header-1.hover-tag-do, .header-2.hover-tag-do { - background-color: #ff5f5f !important; } + background-color: #3c00ff !important; } body.hover-tag-think, .header-1.hover-tag-think, .header-2.hover-tag-think { - background-color: #fdff00 !important; } + background-color: #00ffb8 !important; } body.hover-tag-love, .header-1.hover-tag-love, .header-2.hover-tag-love { - background-color: #3c00ff !important; } + background-color: #ff5f5f !important; } /* -------------------------------------------------------------------------- */ /* imports */ diff --git a/functions.php b/functions.php index 433c60d..e56899c 100644 --- a/functions.php +++ b/functions.php @@ -1,7 +1,6 @@ classes) ? array() : (array) $item->classes; +// $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 . '"'; +// $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 . '
@@ -128,11 +129,11 @@
-
-
+
diff --git a/js/scripts.js b/js/scripts.js index e5453c5..da6e319 100644 --- a/js/scripts.js +++ b/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,28 +186,6 @@ }); - /* --------------------------------- Search --------------------------------- */ - - 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: "50vw" }, 400, function () { - bar.addClass("opensearch") - $(".search-input").focus() - }) - } - - }) - } - /* -------------------------------------------------------------------------- */ /* HOME & ARCHIVES */ @@ -229,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 @@ -485,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") @@ -603,16 +625,16 @@ let itemClass = findClassByStart(tagClass, 'tag') // add wrapper div - $(".sub-wrapper").append('
') + // $(".sub-wrapper").append('
') // add tag title - $(this).children("a").clone().appendTo(".sub-wrapper #" + itemId) + // $(this).children("a").clone().appendTo(".sub-wrapper #" + itemId) //add sub text - $(this).children("span").appendTo(".sub-wrapper #" + itemId) + // $(this).children("span").appendTo(".sub-wrapper #" + itemId) //add circle - $(".sub-wrapper #" + itemId + " span").append('
') + // $(".sub-wrapper #" + itemId + " span").append('
') }) //wrap each letter to spans diff --git a/loop.php b/loop.php index 8127eca..1d30928 100644 --- a/loop.php +++ b/loop.php @@ -20,7 +20,12 @@
- + + name; + } + ?>
- + '
diff --git a/sass/_font-mixins.scss b/sass/_font-mixins.scss index 4ec0d40..886f268 100644 --- a/sass/_font-mixins.scss +++ b/sass/_font-mixins.scss @@ -21,12 +21,9 @@ color: #000; -webkit-text-stroke: #fff 1px; - @media #{$smalldesktop} { font-size: 4rem; - color: #000 !important; - -webkit-text-stroke: unset !important; - + color: #000 !important; } } @@ -38,7 +35,13 @@ font-size: 2.5rem !important; } @media #{$smalldesktop} { - font-size: 5rem; + font-size: 6rem; + } + @media #{$bigdesktop} { + font-size: 7.5rem; + } + @media #{$verybigdesktop} { + font-size: 11rem; } } @@ -84,6 +87,7 @@ @media #{$smalldesktop} { font-size: 2rem; } + } @mixin home-metadata-bevezeto { @@ -98,28 +102,28 @@ color: transparent; -webkit-text-stroke: #000 1px; text-transform: uppercase; - &.pause { - -webkit-text-stroke: #fff 1px !important; - } &.current { - -webkit-text-stroke: #000 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-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 bedo-hover-sub { +// font: 900 1.4rem "Westeinde Caption"; +// color: #fff; +// } @mixin single-title { font: bold 3rem "Butler"; diff --git a/sass/base.scss b/sass/base.scss index 15ea29c..61defef 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -98,10 +98,16 @@ $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; @@ -111,6 +117,7 @@ $v-unit-2: 8rem; $v-unit-4: 16rem; $v-unit-6: 24rem; + /* -------------------------------------------------------------------------- */ /* other mixins */ /* -------------------------------------------------------------------------- */ @@ -358,7 +365,7 @@ $v-unit-6: 24rem; // color: #000; // fill: currentColor; filter: invert(100%); //black - @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;; + @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;; } } } @@ -455,7 +462,7 @@ $v-unit-6: 24rem; button { flex: 0 0 auto; @media #{$only-mobile} { - filter: invert(100) + filter: invert(100); } } } @@ -553,10 +560,13 @@ $v-unit-6: 24rem; display: none; position: fixed; - right: calc(#{$h-unit-2}* 2); - top: calc(#{$v-unit-1}/ 2); + right: calc(#{$h-unit-4} + 2px); + 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} { @@ -570,13 +580,16 @@ $v-unit-6: 24rem; 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; @@ -596,60 +609,60 @@ $v-unit-6: 24rem; } } } - .sub-wrapper { - .bedo-sub-wrapper { - position: fixed; - display: none; - right: $h-unit-2; - left: $h-unit-2; - top: 0; - background-color: #000; - height: 50vh; - z-index: -1; - 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; - } - } - } - } + // .sub-wrapper { + // .bedo-sub-wrapper { + // position: fixed; + // display: none; + // right: $h-unit-2; + // left: $h-unit-2; + // top: 0; + // background-color: #000; + // height: 50vh; + // z-index: -1; + // 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 @@ -822,7 +835,6 @@ $v-unit-6: 24rem; } .metadata { - bottom: 50%; height: $h-unit-1; display: flex; @@ -832,7 +844,6 @@ $v-unit-6: 24rem; align-items: center; padding: 0; - .vr { height: 100%; width: 1px; @@ -842,7 +853,7 @@ $v-unit-6: 24rem; flex-basis: auto !important; } - .bevezeto, + .bevezeto, .alcim, .curvyArrow { display: none; @@ -872,7 +883,7 @@ $v-unit-6: 24rem; /* ------------- home article desktop big - thumbnail and title ------------- */ .thumbnailwrapper { - width: 40%; + width: 60%; height: calc(100% - #{$v-unit-1}); display: flex; flex-direction: row; @@ -890,6 +901,8 @@ $v-unit-6: 24rem; position: absolute; top: 6rem; padding: 4rem; + // padding-right: 0; + width: calc(100vw - #{$h-unit-4}); } /* -------------------------- home article metadata big------------------------- */ @@ -913,18 +926,16 @@ $v-unit-6: 24rem; } & > div { - flex: 1 0 auto; + flex: 1 1 auto; } .categories { display: block; - padding: 0 $h-unit-1; + padding: 0; } - - .postedon { - padding: 0 $h-unit-1; + padding: 0; } .bevezeto, @@ -959,13 +970,14 @@ $v-unit-6: 24rem; .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); @@ -1073,8 +1085,6 @@ $v-unit-6: 24rem; display: flex; } - - .categories, .postedon { @include home-metadata(); @@ -1157,6 +1167,19 @@ $v-unit-6: 24rem; } //main end } //home end +/* -------------------------------------------------------------------------- */ +/* Events */ +/* -------------------------------------------------------------------------- */ + +body.category.category-esemeny { + header { + background-color: #000; + } + main { + padding-top: 5rem + (2rem * 2); + } +} + /* -------------------------------------------------------------------------- */ /* single */ /* -------------------------------------------------------------------------- */ @@ -1388,9 +1411,9 @@ $v-unit-6: 24rem; @mixin tagcolors($color) { //metadata on mobile .metadata { - color: $color !important; @media #{$only-mobile} { - .vr{ + color: $color !important; + .vr { background-color: $color !important; } } @@ -1489,32 +1512,36 @@ $v-unit-6: 24rem; } } } +$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); } @@ -1523,19 +1550,19 @@ $v-unit-6: 24rem; //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); } } @@ -1545,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; } }