-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
369 lines (349 loc) · 23.4 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template - Cornell CSS Framework</title>
<link href="css/base.css" rel="stylesheet">
<link href="css/cornell.css" rel="stylesheet">
<link href="css/cwd_utilities.css" rel="stylesheet">
<!-- Activate for Cornell.edu typography and basic patterns -->
<!-- <link rel="stylesheet" href="https://use.typekit.net/nwp2wku.css"> -->
<!-- <link href="css/cwd_patterns.css" rel="stylesheet"> -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Icon Fonts -->
<link href="fonts/font-awesome.min.css" rel="stylesheet">
<link href="fonts/material-design-iconic-font.min.css" rel="stylesheet">
</head>
<body class="cu-seal sidebar sidebar-right sidebar-tint sidebar-tint-edge">
<div id="skipnav"><a href="#main">Skip to main content</a></div>
<div class="band" id="super-header">
<!-- Start Cornell Branding ////////////////////////////////////////////// -->
<header id="cu-header">
<div id="cu-search" class="cu-search">
<div class="container-fluid">
<form id="cu-search-form" tabindex="-1" role="search" action="https://www.cornell.edu/search/">
<label for="cu-search-query" class="sr-only">Search:</label>
<input type="text" id="cu-search-query" name="q" value="" size="30">
<button name="btnG" id="cu-search-submit" type="submit" value="go"><span class="sr-only">Submit Search</span></button>
<fieldset class="search-filters" role="radiogroup">
<legend class="sr-only">Search Filters</legend>
<input type="radio" id="cu-search-filter1" name="sitesearch" value="thissite" checked="checked">
<label for="cu-search-filter1"><span class="sr-only">Search </span>This Site</label>
<input type="radio" id="cu-search-filter2" name="sitesearch" value="cornell">
<label for="cu-search-filter2"><span class="sr-only">Search </span>Cornell</label>
</fieldset>
</form>
</div>
</div>
<div class="cu45-helper"></div>
<div class="container-fluid cu-brand">
<h1 class="cu-logo"><a href="https://www.cornell.edu"><img class="sr-only" src="images/cornell/bold_cornell_logo_simple_b31b1b.svg" alt="Cornell University" width="245" height="62"></a></h1>
<div class="cu-unit">
<h2>Cornell CSS Framework</h2>
<h3 class="sans">Custom Development</h3>
</div>
<div class="buttons">
<button class="mobile-button" id="mobile-nav">Main Menu</button>
<button class="mobile-button" id="cu-search-button">Toggle Search Form</button>
</div>
</div>
</header>
<!-- End Cornell Branding \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<header id="site-header" aria-label="Site Banner">
<nav class="dropdown-menu dropdown-menu-on-demand" id="main-navigation" aria-label="Main Navigation">
<div class="container-fluid" role="application" aria-label="Main Navigation Dropdown Menus">
<a id="mobile-home" href="#"><span class="sr-only">Home</span></a>
<ul class="list-menu links">
<li class="active parent"><a href="index.html">Template</a>
<ul class="list-menu links vertical children">
<li><a href="index24.html"><abbr title="In-Development/Experimental">DEV</abbr> Template (2024 Components)</a></li>
<li><a href="index_experimental.html"><abbr title="In-Development/Experimental">DEV</abbr> Experiments</a></li>
</ul>
</li>
<li class="parent"><a href="style.html">Styleguide</a>
<ul class="list-menu links vertical children">
<li><a href="patterns.html">Design Patterns</a></li>
<li><a href="patterns_people.html">People</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="tables.html">Tables (Responsive)</a></li>
<li><a href="style_customer.html"><abbr title="In-Development/Experimental">DEV</abbr> Customer Styleguide</a></li>
</ul>
</li>
<li class="parent"><a href="drupal.html">Drupal Components</a>
<ul class="list-menu links vertical children">
<li><a href="cms_drupal.html">Drupal CMS</a></li>
<li><a href="cms_drupal_login.html">Drupal SAML Login</a></li>
</ul>
</li>
<li><a href="js.html">Scripted Components</a></li>
<li class="parent"><a href="#">Tone's Projects</a>
<ul class="list-menu links vertical children">
<li><a href="projects/project.html">Starter Project</a></li>
<li class="menu-section"><a href="login_cuwa.html">CU Login</a></li>
<li class="menu-section parent"><a href="projects/cbb.html">Bright Beams Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/cbb_home.html">Bright Beams Home</a></li>
</ul>
</li>
<li class="parent"><a href="projects/brooks.html">Brooks Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/brooks_home.html">Brooks Home</a></li>
</ul>
</li>
<li class="parent"><a href="projects/diversity.html">Diversity Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/diversity_home.html">Diversity Home</a></li>
<li><a href="projects/diversity_belonging.html">Diversity Belonging</a></li>
</ul>
</li>
<li class="parent"><a href="projects/einaudi.html">Einaudi Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/einaudi_home.html">Einaudi Home</a></li>
<li><a href="projects/einaudi_program.html">Einaudi Program</a></li>
<li class="menu-section"><a href="projects/einaudi_home_global.html">Einaudi-Global Home</a></li>
<li><a href="projects/einaudi_program_global.html">Einaudi-Global Program</a></li>
<li><a href="projects/einaudi_global.html">Einaudi-Global Secondary</a></li>
<li><a href="projects/einaudi_global_landing.html">Einaudi-Global Landing</a></li>
</ul>
</li>
<li class="parent"><a href="projects/fcs.html">FCS Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/fcs_home.html">FCS Home</a></li>
<li><a href="projects/fcs_home_slider.html">FCS Home 2022</a></li>
<li><a href="projects/fcs_ct.html">FCS Components</a></li>
</ul>
</li>
<li class="parent"><a href="projects/ogl.html">Global Learning Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/ogl_home.html">Global Learning Home</a></li>
<li><a href="projects/ogl_search.html">Global Learning Search</a></li>
</ul>
</li>
<li class="parent"><a href="projects/itc.html">IT@Cornell</a>
<ul class="list-menu links vertical children">
<li><a href="projects/itc_home.html">IT@Cornell Home</a></li>
<li><a href="projects/itc_home2022.html">IT@Cornell Home 2022</a></li>
<li><a href="projects/itc_tables.html">IT@Cornell Specialty Tables</a></li>
</ul>
</li>
<li class="parent"><a href="projects/lassp.html">LASSP Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/lassp_home.html">LASSP Home</a></li>
<li><a href="projects/lassp_group.html">LASSP Research Group</a></li>
</ul>
</li>
<li class="parent"><a href="projects/living-lab.html">Living Laboratory</a>
<ul class="list-menu links vertical children">
<li><a href="projects/living-lab_listing.html">Living Laboratory Listing</a></li>
</ul>
</li>
<li class="parent"><a href="projects/migrations.html">Migrations Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/migrations_home.html">Migrations Home</a></li>
<li><a href="projects/migrations_news.html">Migrations News</a></li>
</ul>
</li>
<li class="parent"><a href="projects/scl.html">SCL Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/scl_home.html">SCL Home</a></li>
<li><a href="projects/scl_landing.html">SCL Landing Page</a></li>
<li><a href="projects/scl_sublanding.html">SCL Sublanding Page</a></li>
<li><a href="projects/scl_psc.html">SCL Public Service</a></li>
</ul>
</li>
<li class="menu-section parent"><a href="#">Archive</a>
<ul class="list-menu links vertical children">
<li class="parent"><a href="projects/china.html">China Center Splash Page</a>
<ul class="list-menu links vertical children">
<li><a href="projects/china_carousel.html">China Center with Carousel</a></li>
</ul>
</li>
<li class="parent"><a href="projects/cti.html">CTI Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/cti_home.html">CTI Home</a></li>
<li><a href="projects/cti_impact.html">CTI Editorial</a></li>
<li><a href="projects/cti_landing.html">CTI Landing Page</a></li>
<li><a href="projects/cti_people.html">CTI People Page</a></li>
</ul>
</li>
<li><a href="projects/delegate.html">Delegate App</a></li>
<li><a href="projects/emn.html">EMN Preferences</a></li>
<li><a href="projects/feeney.html">Feeney iPad Kiosk</a></li>
<li class="parent"><a href="projects/grad.html">Grad Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/grad_home.html">Grad Home</a></li>
<li><a href="projects/grad_impact.html">Grad Editorial</a></li>
<li><a href="projects/grad_lockups.html">Grad Lockups</a></li>
</ul>
</li>
<li class="parent"><a href="projects/hudson.html">Hudson Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/hudson_home.html">Hudson Home</a></li>
</ul>
</li>
<li class="parent"><a href="projects/wildlife.html">Wildlife Secondary</a>
<ul class="list-menu links vertical children">
<li><a href="projects/wildlife_home.html">Wildlife Home</a></li>
<li><a href="projects/wildlife_impact.html">Wildlife Editorial</a></li>
<li><a href="projects/wildlife_program.html">Wildlife Program Page</a></li>
<li><a href="projects/wildlife_people.html">Wildlife People Page</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
<div id="main-content" class="band">
<main id="main" class="container-fluid aria-target" tabindex="-1">
<div class="row">
<div id="sidebar-top" class="secondary">
<h2>Sidebar (Priority)</h2>
<p>To move the sidebar to the left, you can use the body class options documented on this page, under <a href="#classes-body-layout">Body Classes > Layout</a>.</p>
<p>This sidebar region appears <strong>before</strong> the main article when viewed at mobile sizes.</p>
</div>
<article id="main-article" class="primary">
<div id="breadcrumb-navigation">
<nav class="breadcrumb" aria-label="Breadcrumb">
<ul class="list-menu">
<li><a href="#"><span class="limiter">Home</span></a></li>
<li><a href="#"><span class="limiter">Section Page</span></a></li>
<li><a href="#"><span class="limiter">Subsection Page</span></a></li>
<!-- <li><a href="#"><span class="limiter">This Page Has An Especially Long Title Which Will Be Truncated With Ellipses</span></a></li> -->
<li><span class="limiter">Optional Current Page</span></li>
</ul>
</nav>
</div>
<h1>Starter Template</h1>
<p class="intro">A basic starting point for your HTML markup or theme templates</p>
<p>This template has only baseline CSS and JavaScript loaded. A default right sidebar layout is used, but can be customized using the body classes below. The <a href="style.html">Styleguide</a>, <a href="drupal.html">Drupal Components</a>, and <a href="js.html">Scripted Components</a> pages provide a reference for styles and additional options, but should not be used as starting templates, as they tend to have extra assets and other bloat that make them less ideal for a production site.</p>
<hr class="invisible">
<h2>Browser Support</h2>
<p>For the 2017 CSS Framework, it can be assumed that all reasonably-modern browsers are supported. This would primarily include recent versions of Safari (desktop and iOS), Chrome (desktop and Android), Firefox, and Edge. More esoteric browsers like Opera and IE Mobile are untested, but will typically work well if up-to-date. Internet Explorer 11 is supported, but all older versions are not. It's possible that designs will work acceptably well on older versions of these browsers. However, web hosting companies (like Pantheon, which hosts many of our Drupal sites) are moving aggressively toward secure hosting with newer standards (TLS 1.1+), which make secure-hosted websites 100% incompatible with older browsers that do not support these standards.</p>
<p>As of September 2017, this means the following browsers <strong>cannot</strong> connect to our secure-hosted sites:</p>
<ul>
<li>Any version of Internet Explorer before IE11 (about 4 years ago)</li>
<li>Safari on any MacOS prior to 10.9 (about 4 years ago)</li>
<li>iOS older than 5 (~6 years ago - a security pioneer!)</li>
<li>Android's default browser prior to v5 (only about 3 years ago - yikes!)</li>
<li>Chrome about 5 years ago</li>
<li>Firefox a little under 4 years ago</li>
</ul>
<p>Given this, and the overall passage of time, we've decided to drop support for older browsers and embrace modern CSS options like <a href="http://caniuse.com/#feat=flexbox">Flexbox layout</a>.</p>
<hr class="section-break">
<h2>CSS Class Options</h2>
<h3>Body Classes <small><code>BODY<strong>.class</strong></code></small></h3>
<h4 class="fade-bw low-margin">Cornell Branding Banner</h4>
<ul class="list-menu vertical">
<li><code>.cu-red</code> - <span class="smallprint">Overrides the default light gray banner to be red with white logo. Affects both 45px and Large Seal options.</span></li>
<li><code>.cu-black</code> - <span class="smallprint">Overrides the default light gray banner to be black with white logo. Affects both 45px and Large Seal options.</span></li>
<li><code>.cu-gray</code> - <span class="smallprint">Overrides the default light gray banner to be dark gray with white logo. Affects both 45px and Large Seal options.</span></li>
<li><code>.cu-45</code> - <span class="smallprint">Renders as a ~45px banner with small Cornell logo (this is also the default if no body class is defined). Headings appear below the banner. <strong>Note:</strong> This class is mutually exclusive with .cu-seal.</strong></span></li>
<li><code>.cu-seal</code> - <span class="smallprint">Renders as a taller banner with a large standalone Cornell seal. Headings appear to the right of the seal. <strong>Note:</strong> This class is mutually exclusive with .cu-45.</span></li>
<li><code>.cu-seal-right</code> - <span class="smallprint">Added to .cu-seal to swap the left and right positions of the seal and headings.</span></li>
<li><code>.cu-45-mobile</code> - <span class="smallprint">Added to .cu-seal to switch to 45px style at mobile sizes.</span></li>
<li><code>.cu-45-mobile-red</code> - <span class="smallprint">Added to .cu-seal-mobile also activate the red color option on the 45px banner at mobile sizes.</span></li>
<li><code>.no-main-nav</code> - <span class="smallprint">When .cu-seal is in use and no main navigation bar is planned, this class can be included to apply some subtle adjustments to the Cornell header.</span></li>
</ul>
<h4 id="classes-body-layout" class="fade-bw low-margin">Layout</h4>
<ul class="list-menu vertical half-margin">
<li><code>.sidebar</code> - <span class="smallprint">Activates a 65/35 two-column layout, applied to any container pairs with either a <code class="text-black">.primary</code> (~65% width) or <code class="text-black">.secondary</code> (35% width) class. This is primarily used by the main article, where the sidebar (aligned left by default) is comprised of <code class="text-black">#sidebar-top</code> and <code class="text-black">#sidebar-bottom</code>. They appear as a single column, but at mobile size, <code class="text-black">#sidebar-top</code> appears above the main article while <code class="text-black">#sidebar-bottom</code> appears below. The same proportion can be used elsewhere in the design, wherever <code class="text-black">.primary</code> and <code class="text-black">.secondary</code> are paired. Examples of this can be seen in the supplementary and footer regions below.</span></li>
<li><code>.sidebar-right</code> - <span class="smallprint">Displays the sidebar on the right. (requires <code class="text-black">.sidebar</code>)</span></li>
<li><code>.sidebar-tint</code> - <span class="smallprint">Sidebar is tinted a light gray, and padding adjusted. (requires <code class="text-black">.sidebar</code>)</span></li>
<li><code>.sidebar-tint-edge</code> - <span class="smallprint">Sidebar tinting is continued horizontally to the edge of the screen. (requires <code class="text-black">.sidebar</code> and <code class="text-black">.sidebar-tint</code>)</span></li>
<li><code>.sidebar-tint-fade</code> - <span class="smallprint">Sidebar tinting fades to white as it approaches the top left corner. This can be useful for designs without a solid, dark nav bar. (requires <code class="text-black">.sidebar</code> and <code class="text-black">.sidebar-tint</code>, and works best with <code class="text-black">.sidebar-right</code> and <code class="text-black">.sidebar-tint-edge</code>)</span></li>
<li><code>.one-column-article</code> - <span class="smallprint">Creates a single column design with a modern news article feel (limited max content width, figures and blockquotes offset into the gutters). As a compliment to this, a <code class="text-black">.full-window</code> image class was added to make images within the main article (typically a WYSIWYG region) break out of the content container to the full width of the window. Both the <code class="text-black">.one-column-article</code> and the <code class="text-black">.full-window</code> image should not be paired with any of the sidebar layouts and options above.</span></li>
</ul>
<aside class="smallprint"><strong>Note:</strong> Body layout options affect tablet and desktop only. They have no effect on the single-column mobile layout.</aside>
<hr class="invisible">
<h3>Cornell Seal Color <small><code>H1.cu-logo<strong>.class</strong></code></small></h3>
<ul class="list-menu vertical">
<li><code>.black</code> - <span class="smallprint">Overrides the default red seal with a black version. This works on both 45px (<code>body.cu-45</code>) and Large Seal (<code>body.cu-seal</code>) banners. Be careful, as this also overrides the white version used on red, black, and gray Cornell themes.</span></li>
</ul>
<hr class="invisible">
<h3>College/School Unit Signature <small class="fade-bw"><em>(Advanced Option)</em></small></h3>
<p class="smallprint">Renders a responsive, modernized version of the classic Cornell unit signature. This is a rarely-needed option, since only college-level units at Cornell are allowed to utilize a branding lockup with the University seal. And of those units, only a subset will want this traditional layout. See the <a href="style.html">Styleguide</a> for example markup. An SVG graphic of the unit name must be created, and two markup changes must be made:</p>
<ul class="list-menu vertical">
<li><code>.cu-unit-signature</code> - <span class="smallprint">Add this class to <code>DIV.cu-brand</code>.</span></li>
<li><code>.cu-unit-lockup</code> - <span class="smallprint">A DIV with this class replaces <code>DIV.cu-unit</code> or is added as a previous sibling if .cu-unit will still be utilized.</span></li>
</ul>
<h4 class="fade-bw low-margin">Unit Image</h4>
<p class="smallprint">To match the expected style, unit logotype images must be made with Iowan Old Style 35pt, and the SVG canvas should match the size of the Cornell University logotype (480x36) so that character sizes scale uniformly. When done correctly, the final rendering will look like the image below:</p>
<p><img src="images/cornell/unit_signature_sample.png" width="571" width="120" alt="The final rendering of the Cornell seal and unit logotype"></p>
<hr class="section-break">
<h2>Curios</h2>
<h3>What is .cu45-helper?</h3>
<p>An extra div (<code><div class="cu45-helper"></div></code>) appears in the Cornell Branding header, to facilitate the use of the 45px banner while still allowing unit heading text to be displayed. A brief technical explanation is that .cu45-helper is a full-viewport-width, relative target for an absolutely-positioned ~45px :before pseudo class, allowing unit headings to drop below the Cornell logo without requiring separate HTML markup or hardcoded heights.</p>
</article>
<div id="sidebar-bottom" class="secondary" role="complementary">
<h2>Sidebar (Secondary)</h2>
<p>This sidebar region appears <strong>after</strong> the main article when viewed at mobile sizes.</p>
</div>
</div>
</main>
</div>
<div class="band accent1 padded" role="complementary">
<div class="container-fluid">
<div class="row">
<div class="primary">
<h2>Supplementary Region</h2>
<p>This region mirrors the sidebar proportions of the <code><main></code> region above using the <code>.primary</code> and <code>.secondary</code> classes.</p>
</div>
<div class="secondary">
<h2>Supplementary Sidebar</h2>
<p>Sidebar Content</p>
</div>
</div>
</div>
</div>
<footer>
<div class="main-footer">
<div class="container-fluid sidebar-left">
<div class="row">
<div class="primary">
<h2 class="h4">Footer Primary</h2>
</div>
<div class="secondary">
<h2 class="h4">Footer Secondary</h2>
</div>
</div>
</div>
</div>
<div class="sub-footer">
<div class="container-fluid sidebar-left">
<div class="row">
<div class="content">
<div class="two-col">
<div>
<ul class="custom inline no-bullet">
<li><a href="https://www.cornell.edu">Cornell University</a> ©2021</li>
<li><a href="https://privacy.cornell.edu/">University Privacy</a></li>
</ul>
</div>
<div>
<ul class="custom inline no-bullet">
<li><a href="https://accessibility.cornell.edu/information-technology/web-accessibility/web-accessibility-assistance/">Web Accessibility Assistance</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery and Contributed Components -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- CWD Components -->
<script src="js/cwd.js"></script>
<script src="js/cwd_utilities.js"></script>
</body>
</html>