infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

Compare commits

base: infeeeee:5d03dea44dd47a5691139c72d89a210bfb73f943
Branches Tags
infeeeee:master
infeeeee:1.0.16 infeeeee:1.0.15 infeeeee:1.0.14 infeeeee:1.0.13 infeeeee:1.0.12 infeeeee:1.0.11 infeeeee:1.0.10 infeeeee:1.0.9 infeeeee:1.0.8 infeeeee:1.0.7 infeeeee:1.0.6 infeeeee:1.0.5 infeeeee:1.0.4 infeeeee:1.0.3 infeeeee:1.0.2 infeeeee:1.0.1 infeeeee:1.0.0 infeeeee:0.0.2 infeeeee:0.0.1
...
compare: infeeeee:752ff9c0aa3fdcfcc382a26f84a3d4dbe8696c7d
Branches Tags
infeeeee:master
infeeeee:1.0.16 infeeeee:1.0.15 infeeeee:1.0.14 infeeeee:1.0.13 infeeeee:1.0.12 infeeeee:1.0.11 infeeeee:1.0.10 infeeeee:1.0.9 infeeeee:1.0.8 infeeeee:1.0.7 infeeeee:1.0.6 infeeeee:1.0.5 infeeeee:1.0.4 infeeeee:1.0.3 infeeeee:1.0.2 infeeeee:1.0.1 infeeeee:1.0.0 infeeeee:0.0.2 infeeeee:0.0.1

2 Commits
5d03dea44d ... 752ff9c0aa

Author SHA1 Message Date
infeeeee
752ff9c0aa black icons on scroll on mobile 2019-09-06 21:37:20 +02:00
infeeeee
1595691bc3 fix icon clicks on iphone 2019-09-06 20:00:09 +02:00
6 changed files with 415 additions and 311 deletions
Expand all files Collapse all files

16
_teendők.md
View File

@@ -14,20 +14,6 @@ onresize js!
# Megjegyzések # Megjegyzések
## DESKTOP ~ Adrinak írni, hogy küldjön tökéletesen négyzet logót - szerintem nem kell, megoldottam azt az 1px problémát
~szövegek: alap kijelölő szín a sárga legyen -> invertáltakat meg kell javítani!
## DESKTOP
## MOBIL
### 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ü: nagyobb fekete flekk kell a dis logó alá, mert az „S” betű lelóg kicsit -> Ezt nem látom sehol, küldj printscreent
- iphone gombok kattintássa, meg minden kattintása !!!!!
- Adrinak írni, hogy küldjön tökéletesen négyzet logót
- MEgnézni, hogy gördülésre fekete logó legyen! - MEgnézni, hogy gördülésre fekete logó legyen!

306
css/base.css
View File

@@ -66,9 +66,6 @@ button {
button:focus { button:focus {
outline: none; } outline: none; }
object {
pointer-events: none; }
/* ---------------------------- default selection --------------------------- */ /* ---------------------------- default selection --------------------------- */
html *::selection { html *::selection {
color: #000; color: #000;
@@ -253,7 +250,6 @@ html *::selection {
padding: 2rem !important; padding: 2rem !important;
justify-content: space-between !important; justify-content: space-between !important;
align-content: space-between; align-content: space-between;
z-index: 3100;
background: #fff; } } background: #fff; } }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.wrapper .header .header-1, .wrapper .header .header-1,
@@ -262,9 +258,6 @@ html *::selection {
.wrapper .header .header-1 div, .wrapper .header .header-1 div,
.wrapper .header .header-2 div { .wrapper .header .header-2 div {
z-index: 3500; } 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-1 a,
.wrapper .header .header-2 a { .wrapper .header .header-2 a {
display: inline-block; } display: inline-block; }
@@ -284,64 +277,86 @@ html *::selection {
order: 99; order: 99;
border-left: #000 1px solid; border-left: #000 1px solid;
right: 0; } } right: 0; } }
.wrapper .header object { .wrapper .header .dis-logo {
height: 3rem; } background-image: url(../img/dis-logo-white.png);
background-image: url(../img/dis-logo-white.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 5rem;
height: 5rem; }
.wrapper .header .dis-logo.black {
background-image: url(../img/dis-logo-black.png);
background-image: url(../img/dis-logo-black.svg); }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header object { .wrapper .header .dis-logo {
height: 2.5rem; } } background-image: url(../img/dis-logo-black.png);
background-image: url(../img/dis-logo-black.svg);
height: 4rem;
width: 4rem; } }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.wrapper .header object { .wrapper .header .dis-logo {
height: 3rem; } } height: 5rem;
.wrapper .header .logo a, width: 5rem; } }
.wrapper .header .logo button, .wrapper .header .icon {
.wrapper .header .logo *, height: 3rem;
.wrapper .header .social-link a, width: 3rem;
.wrapper .header .social-link button, background-size: contain;
.wrapper .header .social-link *, background-position: center center;
.wrapper .header .menubutton a, background-repeat: no-repeat;
.wrapper .header .menubutton button, -webkit-transform: translate3d(0, 0, 0); }
.wrapper .header .menubutton *, @media (min-width: 769px) {
.wrapper .header .events-link a, .wrapper .header .icon {
.wrapper .header .events-link button, height: 2.5rem;
.wrapper .header .events-link * { width: 2.5rem; } }
z-index: 3501; @media (min-width: 1024px) {
cursor: pointer; } .wrapper .header .icon {
.wrapper .header .logo .white, height: 3rem;
.wrapper .header .social-link .white, width: 3rem; } }
.wrapper .header .menubutton .white, .wrapper .header .facebook-icon {
.wrapper .header .events-link .white { background-image: url(../img/facebook_icon-white.png);
display: block; } background-image: url(../img/facebook_icon-white.svg); }
.wrapper .header .logo .black, @media (min-width: 769px) {
.wrapper .header .social-link .black, .wrapper .header .facebook-icon {
.wrapper .header .menubutton .black, background-image: url(../img/facebook_icon-black.png);
.wrapper .header .events-link .black { background-image: url(../img/facebook_icon-black.svg); } }
display: none; } .wrapper .header .instagram-icon {
@media (min-width: 769px) { background-image: url(../img/instagram_icon-white.png);
.wrapper .header .logo .white, background-image: url(../img/instagram_icon-white.svg); }
.wrapper .header .social-link .white, @media (min-width: 769px) {
.wrapper .header .menubutton .white, .wrapper .header .instagram-icon {
.wrapper .header .events-link .white { background-image: url(../img/instagram_icon-black.png);
display: none; } background-image: url(../img/instagram_icon-black.svg); } }
.wrapper .header .logo .black, .wrapper .header .esemeny-icon {
.wrapper .header .social-link .black, background-image: url(../img/naptar_icon-white.png);
.wrapper .header .menubutton .black, background-image: url(../img/naptar_icon-white.svg); }
.wrapper .header .events-link .black { @media (min-width: 769px) {
display: block; } } .wrapper .header .esemeny-icon {
background-image: url(../img/naptar_icon-black.png);
background-image: url(../img/naptar_icon-black.svg); } }
.wrapper .header .menubutton-icon {
background-image: url(../img/dis-plus-white.png);
background-image: url(../img/dis-plus-white.svg); }
@media (min-width: 769px) {
.wrapper .header .menubutton-icon {
background-image: url(../img/dis-plus-black.png);
background-image: url(../img/dis-plus-black.svg); } }
.wrapper .header .menubutton-icon.black {
background-image: url(../img/dis-plus-black.png);
background-image: url(../img/dis-plus-black.svg); }
.wrapper .header .kereso-icon {
background-image: url(../img/kereso_icon-white.png);
background-image: url(../img/kereso_icon-white.svg); }
@media (min-width: 769px) {
.wrapper .header .kereso-icon {
background-image: url(../img/kereso_icon-black.png);
background-image: url(../img/kereso_icon-black.svg); } }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header .header-1 > div, .wrapper .header .header-1 > div,
.wrapper .header .header-2 > div { .wrapper .header .header-2 > div {
flex: 0 0 5rem !important; } } flex: 0 0 5rem !important; } }
.wrapper .header .logo object {
height: 5rem; }
@media (min-width: 769px) {
.wrapper .header .logo object {
height: 4rem; } }
@media (min-width: 1024px) {
.wrapper .header .logo object {
height: 5rem; } }
.wrapper .header .menubutton { .wrapper .header .menubutton {
order: 99; order: 99; }
z-index: 3002; }
.wrapper .header .menubutton button { .wrapper .header .menubutton button {
transform-origin: center; transform-origin: center;
-webkit-transition: 0.5s linear; -webkit-transition: 0.5s linear;
@@ -355,10 +370,9 @@ html *::selection {
-webkit-transform: rotate(225deg); -webkit-transform: rotate(225deg);
transform: rotate(225deg); } transform: rotate(225deg); }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header .menubutton button.inverted .white { .wrapper .header .menubutton button.inverted .menubutton-icon {
display: block; } background-image: url(../img/dis-plus-white.png);
.wrapper .header .menubutton button.inverted .black { background-image: url(../img/dis-plus-white.svg); } }
display: none; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header .menubutton { .wrapper .header .menubutton {
order: unset; } } order: unset; } }
@@ -395,18 +409,10 @@ html *::selection {
color: #000 !important; } } color: #000 !important; } }
.wrapper .header .search-bar form.search button { .wrapper .header .search-bar form.search button {
flex: 0 0 auto; } flex: 0 0 auto; }
.wrapper .header .search-bar form.search button .white {
display: block; }
.wrapper .header .search-bar form.search button .black {
display: none; }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header .search-box { .wrapper .header .search-box {
display: block; display: block;
flex: 1 1 0 !important; } 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 { .wrapper .header .search-bar {
display: none; display: none;
position: fixed; position: fixed;
@@ -448,7 +454,8 @@ html *::selection {
padding: 4rem; padding: 4rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; } } align-items: center;
height: 100vh; } }
.wrapper .header #sidebar .sidebar-wrapper .menuseparator { .wrapper .header #sidebar .sidebar-wrapper .menuseparator {
display: block; display: block;
width: 100%; width: 100%;
@@ -933,86 +940,84 @@ html *::selection {
transform: rotate(720deg); } } transform: rotate(720deg); } }
.wrapper .header #tag-nav ul li a span.pause { .wrapper .header #tag-nav ul li a span.pause {
animation-play-state: paused; } animation-play-state: paused; }
.wrapper main { .wrapper main section {
z-index: 2; } /* -------------------------------- load more ------------------------------- */ }
.wrapper main section { .wrapper main section article {
/* -------------------------------- load more ------------------------------- */ } position: relative; }
.wrapper main section article { .wrapper main section article .metadata {
position: relative; } position: absolute;
.wrapper main section article .metadata { background-color: #fff;
position: absolute; padding: 2rem;
background-color: #fff; right: 0;
padding: 2rem; min-width: 50vw;
right: 0;
min-width: 50vw;
text-align: center;
font: bold 1rem "Westeinde Caption";
color: #000;
z-index: 1; }
@media (min-width: 1024px) {
.wrapper main section article .metadata {
font-size: 1.2rem; } }
@media (min-width: 1279px) {
.wrapper main section article .metadata {
font-size: 1.3rem; } }
@media (min-width: 1919px) {
.wrapper main section article .metadata {
font-size: 2.5rem; } }
@media (max-width: 768px) {
.wrapper main section article .metadata::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0;
height: 0;
left: -5rem;
top: -5rem;
border-top: 5rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-bottom: 5rem solid #fff;
position: absolute;
z-index: -1; } }
.wrapper main section .misha_loadmore {
text-align: center; text-align: center;
padding: 2rem 0; } font: bold 1rem "Westeinde Caption";
color: #000;
z-index: 1; }
@media (min-width: 1024px) {
.wrapper main section article .metadata {
font-size: 1.2rem; } }
@media (min-width: 1279px) {
.wrapper main section article .metadata {
font-size: 1.3rem; } }
@media (min-width: 1919px) {
.wrapper main section article .metadata {
font-size: 2.5rem; } }
@media (max-width: 768px) {
.wrapper main section article .metadata::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0;
height: 0;
left: -5rem;
top: -5rem;
border-top: 5rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-bottom: 5rem solid #fff;
position: absolute;
z-index: -1; } }
.wrapper main section .misha_loadmore {
text-align: center;
padding: 2rem 0; }
@media (min-width: 769px) {
.wrapper main section .misha_loadmore {
min-width: 10rem;
width: calc(100vw - ((100vh - 8rem) / 2 * 3) - 20rem);
margin-right: 10rem;
align-self: stretch;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%; } }
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
font: bold 3rem "Westeinde Caption";
color: transparent;
-webkit-text-stroke: #000 1px; }
@media (min-aspect-ratio: 1 / 1) {
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
font-size: 2rem !important; } }
@media (min-width: 1024px) {
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
font-size: 3rem; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper main section .misha_loadmore { .wrapper main section .misha_loadmore a,
min-width: 10rem; .wrapper main section .misha_loadmore p {
width: calc(100vw - ((100vh - 8rem) / 2 * 3) - 20rem); transform-origin: center;
margin-right: 10rem; white-space: nowrap;
align-self: stretch; width: 100vh;
display: flex; -moz-transform: rotate(-90deg);
flex-direction: row; -o-transform: rotate(-90deg);
justify-content: center; -ms-transform: rotate(-90deg);
align-items: center; -webkit-transform: rotate(-90deg);
height: 100%; } } transform: rotate(-90deg);
.wrapper main section .misha_loadmore a, text-align: center; } }
.wrapper main section .misha_loadmore p {
font: bold 3rem "Westeinde Caption";
color: transparent;
-webkit-text-stroke: #000 1px; }
@media (min-aspect-ratio: 1 / 1) {
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
font-size: 2rem !important; } }
@media (min-width: 1024px) {
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
font-size: 3rem; } }
@media (min-width: 769px) {
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
transform-origin: center;
white-space: nowrap;
width: 100vh;
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
text-align: center; } }
.touchevents .header-scroll { .touchevents .header-scroll {
display: none !important; } display: none !important; }
@@ -4817,9 +4822,6 @@ body.category.category-esemeny {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; } justify-content: flex-start; }
.single article .titlewrapper .metadata .metaWrapper .time-cat,
.page article .titlewrapper .metadata .metaWrapper .time-cat {
z-index: 10; }
.single article .titlewrapper .metadata .metaWrapper .time-cat::after, .single article .titlewrapper .metadata .metaWrapper .time-cat::after,
.page article .titlewrapper .metadata .metaWrapper .time-cat::after { .page article .titlewrapper .metadata .metaWrapper .time-cat::after {
content: " "; content: " ";

40
header.php
View File

@@ -48,40 +48,47 @@
<!-- logo --> <!-- logo -->
<div class="logo"> <div class="logo">
<a href="<?php echo home_url(); ?>"> <a href="<?php echo home_url(); ?>">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/dis-logo-white.svg" <div class="dis-logo">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/dis-logo-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/dis-logo-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/dis-logo-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/dis-logo-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/dis-logo-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/dis-logo-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/dis-logo-black.png" />
</object> </object> -->
</a> </a>
</div> </div>
<!-- /logo --> <!-- /logo -->
<div class="fb-link social-link"> <div class="fb-link social-link">
<a href="https://www.facebook.com/designisso" target="_blank"> <a href="https://www.facebook.com/designisso" target="_blank">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-white.svg" <div class="facebook-icon icon menuicon">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/facebook_icon-black.png" />
</object> </object> -->
</a> </a>
</div> </div>
<div class="search-box"> <div class="search-box">
<button type="button" id="search-button"> <button type="button" id="search-button">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.svg" <div class="kereso-icon icon">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.png" />
</object> </object> -->
</button> </button>
<div class="search-bar"> <div class="search-bar">
<?php get_search_form();?> <?php get_search_form();?>
@@ -104,40 +111,49 @@
<div class="header-2"> <div class="header-2">
<div class="menubutton"> <div class="menubutton">
<button type="button" id="toggle-sidebar"> <button type="button" id="toggle-sidebar">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/dis-plus-white.svg" <div class="menubutton-icon icon menuicon">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/dis-plus-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/dis-plus-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/dis-plus-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/dis-plus-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/dis-plus-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/dis-plus-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/dis-plus-black.png" />
</object> </object> -->
</button> </button>
</div> </div>
<div class="ig-link social-link"> <div class="ig-link social-link">
<a href="https://www.instagram.com/design_is_so/" target="_blank"> <a href="https://www.instagram.com/design_is_so/" target="_blank">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-white.svg" <div class="instagram-icon icon menuicon">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/instagram_icon-black.png" />
</object> </object> -->
</a> </a>
</div> </div>
<div class="events-link"> <div class="events-link">
<a href="/index.php/category/<?php echo get_theme_mod('dis-2019-event-cat-slug'); ?>" target="_top"> <a href="/index.php/category/<?php echo get_theme_mod('dis-2019-event-cat-slug'); ?>" target="_top">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-white.svg" <div class="esemeny-icon icon menuicon">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/naptar_icon-black.png" />
</object> </object> -->
</a> </a>
</div> </div>

64
js/scripts.js
View File

@@ -132,32 +132,38 @@
var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults
/* ========================================================================== */ /* -------------------------------------------------------------------------- */
/* FUNCTIONS */ /* Black logo on scroll on mobile */
/* ========================================================================== */ /* -------------------------------------------------------------------------- */
$.fn.scrollStopped = function (callback) {
var that = this, $this = $(that);
$this.scroll(function (ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
});
};
var rotateMenuButton = function () { var isMenuOpen = function () {
if ($(".menubutton button").hasClass("rotated")) { let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false
$(".menubutton button").removeClass("rotated"); return menuopen
} else {
$(".menubutton button").addClass("rotated").addClass("inverted");
}
} }
var showHideSocial = function () { $(window).scroll(function () {
if (isMobile && $('.social-link').hasClass('hidden')) { if (isMobile && !isMenuOpen()) {
$('.social-link, .events-link').removeClass('hidden') $('.dis-logo, .menubutton-icon').addClass('black')
} else if (isMobile) {
$('.social-link, .events-link').addClass('hidden')
} }
} })
$(window).scrollStopped(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').removeClass('black')
}
})
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* SEARCH */ /* SEARCH */
/* ========================================================================== */ /* -------------------------------------------------------------------------- */
// on mobile add to sidebar: // on mobile add to sidebar:
// if (isMobile) { // if (isMobile) {
@@ -191,6 +197,13 @@
/* MENU */ /* MENU */
/* ========================================================================== */ /* ========================================================================== */
var rotateMenuButton = function () {
if ($(".menubutton button").hasClass("rotated")) {
$(".menubutton button").removeClass("rotated");
} else {
$(".menubutton button").addClass("rotated").addClass("inverted");
}
}
function mwCalc() { function mwCalc() {
let ww = calcWidths() let ww = calcWidths()
@@ -239,8 +252,17 @@
}, },
callbacks: { callbacks: {
animation: { animation: {
both: showHideSocial, open: function () {
close: function () { $(".menubutton button").removeClass("inverted") }, if (isMobile) {
$('.social-link, .events-link').removeClass('hidden')
}
},
close: function () {
$(".menubutton button").removeClass("inverted")
if (isMobile) {
$('.social-link, .events-link').addClass('hidden')
}
},
freezePage: false freezePage: false
} }
} }
@@ -653,6 +675,8 @@
} }
} }
/* -------------------------- on scroll on desktop -------------------------- */
var scrolltimer = false; var scrolltimer = false;
$(window).on('wheel DOMMouseScroll', function (e) { $(window).on('wheel DOMMouseScroll', function (e) {
//e.preventDefault(); //e.preventDefault();

291
sass/base.scss
View File

@@ -76,10 +76,6 @@ button {
} }
} }
object {
pointer-events: none;
}
/* ---------------------------- default selection --------------------------- */ /* ---------------------------- default selection --------------------------- */
html *::selection { html *::selection {
@@ -429,7 +425,7 @@ $v-unit-6: 24rem;
padding: 2rem !important; padding: 2rem !important;
justify-content: space-between !important; justify-content: space-between !important;
align-content: space-between; align-content: space-between;
z-index: 3100; // z-index: 3100;
background: #fff; background: #fff;
} }
@media #{$smalldesktop} { @media #{$smalldesktop} {
@@ -438,9 +434,9 @@ $v-unit-6: 24rem;
div { div {
z-index: 3500; z-index: 3500;
object { // object {
-webkit-transform: translate3d(0, 0, 0); // -webkit-transform: translate3d(0, 0, 0);
} // }
} }
a { a {
display: inline-block; display: inline-block;
@@ -487,56 +483,131 @@ $v-unit-6: 24rem;
// } // }
// } // }
//icons in menu: // object {
object { // height: 3rem;
height: 3rem; // // width: 3rem;
// width: 3rem; // @media #{$tablet} {
@media #{$tablet} { // height: 2.5rem;
height: 2.5rem; // // width: 2.5rem;
// width: 2.5rem; // }
} // @media #{$smalldesktop} {
@media #{$smalldesktop} { // height: 3rem;
height: 3rem; // // width: 3rem;
// width: 3rem; // }
} // }
}
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* header elements */ /* header elements */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
// color of header elements, icons // color of header elements, icons
.logo, // .logo,
.social-link, // .social-link,
.menubutton, // .menubutton,
.events-link { // .events-link {
a, // a,
button, // button,
* { // * {
z-index: 3501; // // z-index: 3501;
cursor: pointer; // // cursor: pointer;
// }
// // .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);
// }
// }
//icons:
.dis-logo {
background-image: url(../img/dis-logo-white.png);
background-image: url(../img/dis-logo-white.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: $h-unit-1;
height: $h-unit-1;
&.black {
background-image: url(../img/dis-logo-black.png);
background-image: url(../img/dis-logo-black.svg);
} }
.white {
display: block; @media #{$tablet} {
background-image: url(../img/dis-logo-black.png);
background-image: url(../img/dis-logo-black.svg);
height: 4rem;
width: 4rem;
} }
.black { @media #{$smalldesktop} {
display: none; height: $h-unit-1;
width: $h-unit-1;
} }
// filter: invert(100);
} }
@media #{$tablet} {
.logo, .icon {
.social-link, height: 3rem;
.menubutton, width: 3rem;
.events-link { background-size: contain;
.white { background-position: center center;
display: none; background-repeat: no-repeat;
} -webkit-transform: translate3d(0, 0, 0);
.black { @media #{$tablet} {
display: block; height: 2.5rem;
} width: 2.5rem;
// filter: invert(100);
} }
@media #{$smalldesktop} {
height: 3rem;
width: 3rem;
}
}
@mixin bw-icon($iconname) {
background-image: url(../img/#{$iconname}-white.png);
background-image: url(../img/#{$iconname}-white.svg);
@media #{$tablet} {
background-image: url(../img/#{$iconname}-black.png);
background-image: url(../img/#{$iconname}-black.svg);
}
}
.facebook-icon {
@include bw-icon(facebook_icon);
}
.instagram-icon {
@include bw-icon(instagram_icon);
}
.esemeny-icon {
@include bw-icon(naptar_icon);
}
.menubutton-icon {
@include bw-icon(dis-plus);
&.black {
background-image: url(../img/dis-plus-black.png);
background-image: url(../img/dis-plus-black.svg);
}
}
.kereso-icon {
@include bw-icon(kereso_icon);
} }
@media #{$tablet} { @media #{$tablet} {
@@ -547,20 +618,20 @@ $v-unit-6: 24rem;
} }
// dis logo size: // dis logo size:
.logo { // .logo {
object { // object {
height: $h-unit-1; // height: $h-unit-1;
// width: $h-unit-1; // // width: $h-unit-1;
@media #{$tablet} { // @media #{$tablet} {
height: 4rem; // height: 4rem;
// width: 4rem; // // width: 4rem;
} // }
@media #{$smalldesktop} { // @media #{$smalldesktop} {
height: $h-unit-1; // height: $h-unit-1;
// width: $h-unit-1; // // width: $h-unit-1;
} // }
} // }
} // }
.menubutton { .menubutton {
$speed: 0.5s; $speed: 0.5s;
@@ -568,7 +639,7 @@ $v-unit-6: 24rem;
$easing: linear; $easing: linear;
order: 99; order: 99;
z-index: 3002; // z-index: 3002;
button { button {
transform-origin: center; transform-origin: center;
@@ -577,14 +648,16 @@ $v-unit-6: 24rem;
&.rotated { &.rotated {
@include transform(rotate($degree)); @include transform(rotate($degree));
} }
&.inverted { &.inverted .menubutton-icon {
@media #{$tablet} { @media #{$tablet} {
.white { background-image: url(../img/dis-plus-white.png);
display: block; background-image: url(../img/dis-plus-white.svg);
} // .white {
.black { // display: block;
display: none; // }
} // .black {
// display: none;
// }
} }
} }
} }
@@ -634,12 +707,12 @@ $v-unit-6: 24rem;
button { button {
flex: 0 0 auto; flex: 0 0 auto;
.white { // .white {
display: block; // display: block;
} // }
.black { // .black {
display: none; // display: none;
} // }
} }
} }
} //search-bar end } //search-bar end
@@ -650,14 +723,14 @@ $v-unit-6: 24rem;
.search-box { .search-box {
display: block; display: block;
flex: 1 1 0 !important; flex: 1 1 0 !important;
& > button { // & > button {
.white { // .white {
display: none; // display: none;
} // }
.black { // .black {
display: block; // display: block;
} // }
} // }
} }
.search-bar { .search-bar {
@@ -715,6 +788,7 @@ $v-unit-6: 24rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 100vh;
} }
.menuseparator { .menuseparator {
display: block; display: block;
@@ -823,7 +897,7 @@ $v-unit-6: 24rem;
/* STRUCTURE ALL PAGE */ /* STRUCTURE ALL PAGE */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
main { main {
z-index: 2; // z-index: 2;
section { section {
article { article {
position: relative; position: relative;
@@ -1127,26 +1201,26 @@ $v-unit-6: 24rem;
} }
//border on first elements //border on first elements
&.post_nr_1 { // &.post_nr_1 {
// .metadata { // // .metadata {
// &::after { // // &::after {
// display: none; // // display: none;
// } // // }
// @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left); // // @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
// z-index: 15; // // z-index: 15;
// & > * { // // & > * {
// z-index: 15; // // z-index: 15;
// } // // }
// } // // }
// h2 { // // h2 {
// height: calc(50vh + 1px); // // height: calc(50vh + 1px);
// top: -1px; // // top: -1px;
// position: relative; // // position: relative;
// border-top: #000 1px solid; // // border-top: #000 1px solid;
// z-index: 8; // // z-index: 8;
// } // // }
} // }
} //article end } //article end
/* ------------------------ home article desktop big ------------------------ */ /* ------------------------ home article desktop big ------------------------ */
@@ -1800,10 +1874,9 @@ body.category.category-esemeny {
padding: 0; padding: 0;
border: none; border: none;
padding-right: 2rem; padding-right: 2rem;
a{ a {
@include event-title; @include event-title;
} }
} }
.vr { .vr {
flex: 0 0 auto; flex: 0 0 auto;
@@ -1989,9 +2062,9 @@ $padd: 2rem;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
.time-cat { // .time-cat {
z-index: 10; // // z-index: 10;
} // }
.time-cat::after { .time-cat::after {
content: " "; content: " ";
display: inline-block; display: inline-block;
@@ -2197,7 +2270,7 @@ $padd: 2rem;
blockquote { blockquote {
display: inline; display: inline;
position: relative; position: relative;
p{ p {
@include single-quote-big(); @include single-quote-big();
} }

7
searchform.php
View File

@@ -2,14 +2,17 @@
<form class="search" method="get" action="<?php echo home_url(); ?>" role="search"> <form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
<input class="search-input" type="search" name="s" placeholder=""> <input class="search-input" type="search" name="s" placeholder="">
<button class="search-submit" type="submit" role="button"> <button class="search-submit" type="submit" role="button">
<object class="white" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.svg" <div class="kereso-icon icon">
</div>
<!-- <object class="white" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-white.png" />
</object> </object>
<object class="black" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.svg" <object class="black" data="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.svg"
type="image/svg+xml"> type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.png" /> <img src="<?php echo get_template_directory_uri(); ?>/img/kereso_icon-black.png" />
</object> </object> -->
</button> </button>
</form> </form>
<!-- /search --> <!-- /search -->