-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
154 lines (140 loc) · 5.82 KB
/
index.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
---
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include base_url_assignment.html %}
<!-- LOCALIST COMMENT - START head_tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- LOCALIST COMMENT - PLACEHOLDER localist_styles -->
<link rel="stylesheet" media="all" href="{{ base_url }}/css/ucsf.css">
<link rel="stylesheet" media="print" href="{{ base_url }}/css/ucsf-print.css">
<link rel="shortcut icon" href="{{ base_url }}/favicon.ico" />
<!-- LOCALIST COMMENT - PLACEHOLDER localist_js -->
<!-- LOCALIST COMMENT - END head_tags -->
</head>
<body>
<!-- LOCALIST COMMENT - START body -->
<div id="wrapper">
<header>
<section class="background--dark">
<div id="ucsf-header-nav" class="universal-header l-container">
<a id='site-name' class="first universal-header__title"
href="https://www.ucsf.edu">University of California San Francisco</a>
<!-- Mobile nav toggle -->
<button data-js="nav-toggle" class="universal-header__menu-toggle">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<!-- Navigation -->
<nav id="ucsf-banner-nav">
<h2 class="sr-only" id="universal-header-main-menu">Main Menu</h2>
<ul id="collapsible-menu" class="menu universal-header__menu">
<li>
<a href="https://www.ucsfhealth.org/" class="universal-header__menu-link">UCSF
Medical Center</a>
</li>
<li>
<a href="https://www.ucsf.edu/search" class="universal-header__menu-link">Search
UCSF</a>
</li>
<li>
<a href="https://www.ucsf.edu/about" class="universal-header__menu-link">About
UCSF</a>
</li>
<!-- Give btn - mobile -->
<a href="https://giving.ucsf.edu"
class="universal-header__give universal-header__give--mobile">Give to UCSF<span
class="icon-give"></span></a>
</ul>
</nav>
<!-- Give btn - desktop -->
<a href="https://giving.ucsf.edu"
class="universal-header__give universal-header__give--desktop">Give to UCSF</a>
</div>
</section>
<div id="top" class="l-container">
<section class="alpha action-menu">
<!-- LOCALIST COMMENT - PLACEHOLDER search_bar -->
<!-- LOCALIST COMMENT - PLACEHOLDER user_menu -->
<a class="home_link" href="/">UCSF Events Calendar</a>
</section>
</div>
</header>
<div class="content-wrapper">
<div class="wrapper">
<!-- LOCALIST COMMENT - PLACEHOLDER top_bar -->
<!-- LOCALIST COMMENT - PLACEHOLDER content -->
</div>
<footer class="background--dark universal-footer">
<!-- Mobile Footer Start -->
<div id="ucsf-footer-mobile" class="universal-footer--mobile l-container">
<div class="universal-footer__content">© {{ site.time | date: "%Y" }} The UC
Regents |
<a class="universal-footer__link"
href="https://www.ucsf.edu/content/ucsf-events-calendar-frequently-asked-questions">FAQ</a>
| <a href="mailto:[email protected]" class="universal-footer__link">Contact Us</a>
</div>
</div>
<!-- Mobile Footer End-->
<!-- Desktop Footer Start -->
<div id="ucsf-footer" class="universal-footer--desktop l-container">
<div class="universal-footer__content">
<span>Questions about the Events Calendar? Check out our </span>
<a href="https://www.ucsf.edu/content/ucsf-events-calendar-frequently-asked-questions"
class="universal-footer__link">FAQ</a>
<span> or contact us at </span>
<a href="mailto:[email protected]"
class="universal-footer__link">[email protected]</a>.
</div>
<div class="universal-footer__content">© {{ site.time | date: "%Y" }} The Regents
of the University of California.
All
rights reserved.</div>
</div>
<!-- Desktop Footer End -->
</footer>
</div>
</div>
<script>
var body = document.querySelector('body');
var $menuToggle = document.querySelector('[data-js="nav-toggle"]');
// Add / remove CSS class responsible for revealing mobile nav.
// toggle aria attributes for accessibility.
function toggleMenu() {
document.body.classList.toggle('show-nav');
if ($menuToggle.getAttribute('aria-expanded') === 'false') {
$menuToggle.setAttribute('aria-expanded', 'true');
} else {
$menuToggle.setAttribute('aria-expanded', 'false');
}
};
// Only execute navigation extend / collapse code in mobile
var mobileDetect = function (event) {
// Mobile
if (event.matches) {
// set area controls
$menuToggle.setAttribute('aria-expanded', 'false');
$menuToggle.setAttribute('aria-controls', 'collapsible-menu');
// toggle mobile menu open and closed
$menuToggle.addEventListener('click', toggleMenu);
// Desktop
} else {
body.classList.remove('show-nav');
$menuToggle.removeEventListener('click', toggleMenu);
// Remove unnecessary Aria controls from desktop nav
$menuToggle.removeAttribute('aria-expanded');
$menuToggle.removeAttribute('aria-controls');
}
}
// Use MatchMedia to ensure that nav expand/collapse is only happening in mobile
var mql = matchMedia('(max-width: 960px)');
// Detect mobile on page load.
mobileDetect(mql);
// Watch to see if the page size changes.
mql.addListener(mobileDetect);
</script>
<!-- LOCALIST COMMENT - END body -->
</body>
</html>