-
Notifications
You must be signed in to change notification settings - Fork 11
/
header.php
100 lines (89 loc) · 2.82 KB
/
header.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?php
/**
* The header template. Included by get_header().
*/
namespace Vincit;
use \Vincit\Media;
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<!--
"Not all mobile browsers handle orientation changes in the same way.
For example, Mobile Safari often just zooms the page when changing
from portrait to landscape, instead of laying out the page as it
would if originally loaded in landscape. If web developers want their
scale settings to remain consistent when switching orientations on the
iPhone, they must add a maximum-scale value to prevent this zooming,
which has the sometimes-unwanted side effect of preventing users from zooming in."
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_width_and_screen_width
Users can enable zoom in browser settings if they want.
-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<?php wp_head(); ?>
</head>
<?php
global $is_anon_user;
$is_anon_user = !is_user_logged_in();
?>
<body <?php body_class([
!$is_anon_user ? 'user-logged-in' : 'user-not-logged-in',
]);?>>
<a class="skip-link screen-reader-text" href="#content">
Skip to content
</a>
<?php
$logo = function () {
if (has_custom_logo()) {
the_custom_logo();
} else { ?>
<a href="<?=home_url()?>" class="custom-logo-link custom-logo-unset" rel="home" itemprop="url">
<img
src="https://vincit.fi/wp-content/themes/vincit.com/images/Vincit_tirppa_white.png"
class="custom-logo"
alt="Vincit logo"
itemprop="logo"
>
</a>
<?php }
};
?>
<header class="site-header">
<div class="container">
<nav class="main-navigation">
<?=$logo()?>
<?=wp_nav_menu([
// "container" => "nav",
"theme_location" => "header-menu",
])?>
</nav>
</div>
</header>
<header class="mobile-header">
<div class="header-bar">
<div class="container">
<button class="menu-toggle">
<?=Media\svg("menu-2.svg", "open-icon")?>
<?=Media\svg("close.svg", "close-icon")?>
<span class="screen-reader-text">Menu</span>
</button>
<?=$logo()?>
<button class="search-toggle">
<?=Media\svg("search.svg", "open-icon")?>
<?=Media\svg("close.svg", "close-icon")?>
<span class="screen-reader-text">Menu</span>
</button>
</div>
</div>
<nav class="mobile-navigation">
<?=wp_nav_menu([
// "container" => "nav",
"theme_location" => "header-menu",
])?>
</nav>
<form class="mobile-search search-form" action="/">
<input type="search" name="s" placeholder="Search from site">
<button type="submit">Search</button>
</form>
</header>
<main id="content">