-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (170 loc) · 8.22 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>The Citadel Framework</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/citadel-framework.css">
<link rel="stylesheet" href="styles/custom.css">
</head>
<body>
<header class="masthead">
<div class="top-header">
<div class="wrapper flex-container flex-between">
<div class="right-header flex-item flex-middle flex-right">
<nav class="secondary-nav" role="navigation" aria-label="secondary navigation">
<ul>
<li><a href="">Alumni</a></li>
<li><a href="">Faculty & Staff</a></li>
<li><a href="">Parents</a></li>
<li><a href="">Students</a></li>
<li><a href="">Visitors</a></li>
<li><button class="search-toggle btn btn-sm">Search</button></li>
<li><button class="tools-toggle btn-clr btn-sm"><span>Tools</span></button></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="main-header" style="min-height: 55px;">
</div>
</header>
<nav class="main-nav">
<div class="wrapper">
<ul>
<li class="has-submenu">
<a href="#">Link</a>
<ul class="submenu">
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li>
<a href="#">Link</a>
<ul class="submenu">
<li><a href="#">Submenu</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<main id="top">
<header class="entry-header">
<h1 class="wrapper">The Citadel Framework</h1>
</header>
<div class="page-content">
<div class="wrapper flex-container-md">
<aside class="sidebar" role="complementary">
<nav>
<ul>
<li><a href="#headings">Headings</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#colors">Colors</a></li>
</ul>
</nav>
</aside>
<div class="content-container">
<div class="entry-content">
<p>The Citadel Framework establishes base styles for all websites owned by <a href="https://citadel.edu/" target="_blank" rel="nofollow noreferrer">The Citadel.</a> This Framework complies with the college's <a href="https://brand.citadel.edu/" target="_blank" rel="nofollow noreferrer">Brand Guidelines</a> and is meant to demonstrate the proper usage of these guidelines on Citadel websites. Websites may contain items that are not mentioned in the standard brand guidelines and should then default to the framework outlined below. Anything outlined below that does not directly follow the standard brand guidelines has been approved by the brand manager.</p>
<p>With most of The Citadel websites the styles are generated for you which means you can focus on adding the content and the website will do the rest. This page shows how those styles are applied to the content for your reference.</p>
<section id="headings">
<h2>Headings</h2>
<p>Headings provide structure for a website. It creates a hierarchy that makes the content easier to read and understand. Below are the headings for our website and use cases for each.</p>
<h1>Heading 1 (H1)</h1>
<p>A heading 1 should only be used once on each page. This tells search engines as well as the user what the page is about. For almost all Citadel websites the heading 1 is automatically created for the page and, therefore, another one <strong>should not be added into the content of the page.</strong></p>
<h2>Heading 2 (H2)</h2>
<p>Heading 2 should be the highest level of hierarchy for your page structure because Heading 1 is typically generated for us and should only be used once. Heading 2 can be used in any quantity as long as it follows a logical structure.</p>
<h3>Heading 3 (H3)</h3>
<p>Should follow an H2, another H3, or anything below it (H4, H5, or H6).</p>
<h4>Heading 4 (H4)</h4>
<p>Should follow an H3, another H4, or anything below it (H5 or H6).</p>
<h5>Heading 5 (H5)</h5>
<p>Should follow an H4, another H5, or anything below it (H6).</p>
<h6>Heading 6 (H6)</h6>
<p>Should follow an H5 or another H6.</p>
<p>It might make it easier to picture headings in a list structure to understand the hierarchy:</p>
<ul>
<li>
<strong>Heading 1:</strong> automatically generated for the page, only one per page.
<ul>
<li><strong>Heading 2:</strong> the highest level for page content.</li>
</ul>
</li>
</ul>
<a href="#top">Back to top</a>
</section>
<section id="fonts">
<h2>Fonts</h2>
<h3>Poynter Old Style Display</h3>
<p>The Citadel uses <strong>Poynter Oldstyle Display</strong> for all headings on the website (like the one above). For all other elements of text (like this paragraph) The Citadel uses the font <strong>Open Sans</strong>. There are very few instances where exceptions are made.</p>
<a href="#top">Back to top</a>
</section>
<section id="colors">
<h2>Colors</h2>
<h3>Primary Colors</h3>
<p>The primary colors are the main colors used on our websites. Typically, these colors will suit all needs for our website designs.</p>
<h4>Navy</h4>
<div class="flex-container flex-middle colors">
<div class="flex-item citadel-navy-bg white"></div>
<div class="flex-item citadel-navy-80 white"></div>
<div class="flex-item citadel-navy-60 white"></div>
<div class="flex-item citadel-navy-40 white"></div>
<div class="flex-item citadel-navy-20 white"></div>
</div>
<h4>Citadel Blue</h4>
<div class="flex-container flex-middle colors">
<div class="flex-item citadel-blue-bg white"></div>
<div class="flex-item citadel-blue-80 white"></div>
<div class="flex-item citadel-blue-60 white"></div>
<div class="flex-item citadel-blue-40 white"></div>
<div class="flex-item citadel-blue-20 white"></div>
</div>
<h3>Secondary Colors</h3>
<p>The secondary color palette should be used sparingly and requires permission from the college's webmaster to utilize. These are here more for a reference so that if the secondary colors are used on a site you can reference them here.</p>
<h4>PT Barracks</h4>
<div class="flex-container flex-middle colors">
<div class="flex-item pt-barracks-bg shako"></div>
<div class="flex-item pt-barracks-80 shako"></div>
<div class="flex-item pt-barracks-60 shako"></div>
<div class="flex-item pt-barracks-40 shako"></div>
<div class="flex-item pt-barracks-20 shako"></div>
</div>
<h4>Shako</h4>
<div class="flex-container flex-middle colors">
<div class="flex-item shako-bg white"></div>
<div class="flex-item shako-80 white"></div>
<div class="flex-item shako-60 white"></div>
<div class="flex-item shako-40 white"></div>
<div class="flex-item shako-20 white"></div>
</div>
<h4>Band of Gold</h4>
<div class="flex-container flex-middle colors">
<div class="flex-item band-gold-bg white"></div>
<div class="flex-item band-gold-80 white"></div>
<div class="flex-item band-gold-60 white"></div>
<div class="flex-item band-gold-40 white"></div>
<div class="flex-item band-gold-20 white"></div>
</div>
<h4>Officer Sash</h4>
<div class="flex-container flex-middle colors">
<div class="flex-item officer-sash-bg white"></div>
<div class="flex-item officer-sash-80 white"></div>
<div class="flex-item officer-sash-60 white"></div>
<div class="flex-item officer-sash-40 white"></div>
<div class="flex-item officer-sash-20 white"></div>
</div>
<a href="#top">Back to top</a>
</section>
<section id="buttons">
<h2>Buttons</h2>
<p>These are the button styles for The Citadel.</p>
<button type="button" name="button" class="btn">Primary Button</button>
<button type="button" name="button" class="btn-alt">Alternate Button</button>
<a href="#top">Back to top</a>
</section>
</div>
</div>
</div>
</div>
</main>
</body>
</html>