-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (148 loc) · 7.46 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
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css">
<link rel="stylesheet" type="text/css" href="css/pennapps-styles.css">
</head>
<body>
<div class="splash">
<div class="center-block">
<h1>PennApps Unified Styles</h1>
</div>
</div>
<nav id="navbar" class="pennapps-nav">
<div class="container">
<div class="nav-header">
<a href="#" class="nav-expand">
<span class="expand-bar"></span>
<span class="expand-bar"></span>
<span class="expand-bar"></span>
</a>
<a href="#">
<h1 class="nav-brand">
Unified Styles <span style="font-family: HalisR-Light">XIII</span>
</h1>
</a>
</div>
<div class="nav-collapse">
<ul class="nav-links">
<li><a id="nav-slider" class="nav-slider"></a></li>
<li><a href="#grid-section"><div class="bubble"></div>The Grid</a></li>
<li><a href="#nav-section"><div class="bubble"></div>The Nav</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<section>
<h2>Standard Unified Styles</h2>
<p>In order to maintain uniform styles across all PennApps sites, use this site as a template and the provided styles as a base stylesheet. Custom styles can then be applied for page-specific design and styles. The necessary javascript is also provided.</p>
<ul>
<li><a href="css/pennapps-styles.css">Unified Styles</a></li>
<li><a href="css/pennapps-styles.min.css">Unified Styles (Minified)</a></li>
<li><a href="js/pennapps-scripts.js">Unified Javascript</a></li>
<li><a href="js/pennapps-scripts.min.js">Unified Javascript (Minified)</a></li>
</ul>
<p>Note: It would be a good idea to link to these files so that all websites share the same base styles and will all automatically update when this site is updated.</p>
</section>
<section id="grid-section">
<h1>The Grid</h1>
<h2>Columns Like Bootstrap</h2>
<p>If you're familiar with the grid system in Bootstrap, the same basic grid applies here. See <a href="http://getbootstrap.com/css/#grid">here</a> for more information.</p>
<div class="show-grid">
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
<div class="col-sm-1 col-xs-2">.col-sm-1 .col-xs-2</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">.col-lg-3 .col-md-6 .col-sm-12</div>
<div class="col-lg-3 col-md-6 col-sm-12">.col-lg-3 .col-md-6 .col-sm-12</div>
<div class="col-lg-3 col-md-6 col-sm-12">.col-lg-3 .col-md-6 .col-sm-12</div>
<div class="col-lg-3 col-md-6 col-sm-12">.col-lg-3 .col-md-6 .col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
</section>
<section id="nav-section">
<h1>The Nav</h1>
<h2>Base Code</h2>
<p>Below is the code for this page's navigation bar.</p>
<pre>
<code class="html">
<nav id="navbar" class="pennapps-nav">
<div class="container">
<div class="nav-header">
<a href="#top">
<h1 class="nav-brand">
Unified Styles <span style="font-family: HalisR-Light">XIII</span>
</h1>
</a>
</div>
<div class="nav-collapse">
<ul class="nav-links">
<li><a id="nav-slider" class="nav-slider"></a></li>
<li><a href="#grid-section"><div class="bubble"></div>The Grid</a></li>
<li><a href="#nav-section"><div class="bubble"></div>The Nav</a></li>
</ul>
</div>
</div>
</nav>
</code>
</pre>
<p>Follow this template when adding a nav bar to a page. Note that the nav slider must be the first element of the nav-links list. Each navigation link must link to an anchor which is the id of the repsective section on the page. Not doing so will cause the nav slider to function improperly.</p>
<h2>Initialization</h2>
<p>Initialize the nav bar by calling <code>nav.initializeNav($('#navbar'), -70);</code> in a script tag just before the closing body tag. Here, <code>#navbar</code> is the id of the navbar you are initializing and <code>-70</code> is the target offset (Due to padding and margin, the position of the anchor elements on the page is slightly different from the position of the upper edge of those elements. This is that offset in pixels).</p>
<h2>Dynamic Pinning</h2>
<p>The navbar has two modes. By default, it is relatively positioned and located on the page where you would expect it. Adding the class "fixed" to the nav element causes the nav bar to pin to the top of the screen. On this site, the navbar is first relatively positioned below the splash and then pins to the top when scrolling down. To accomplish this effect, you need to call:</p>
<pre><code>
nav.registerNav($('#navbar'), function () {
return $(window).scrollTop() + $('#navbar').height() > $(window).height();
});
</code></pre>
<p>The function parameter is a function that returns <code>true</code> when you want the nav to be pinned, and <code>false</code> otherwise; In this example, the navbar pins when the user has scrolled down farther than the window is tall;</p>
</section>
</div>
<footer>
<div class="center-block">
<div>
<img width="100px" src="http://2016s.pennapps.com/img/PennApps-white.png" />
<p>© 2016 PennApps</p>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="js/pennapps-scripts.js"></script>
<script>
nav.registerNav($('#navbar'), function () {
return $(window).scrollTop() + $('#navbar').height() > $(window).height();
});
nav.initializeNav($('#navbar'), 0);
nav.registerCollapse($('#navbar'), function () {
return $(window).width() <= 590;
});
nav.initializeCollapse();
</script>
</body>
</html>