This repository has been archived by the owner on Nov 7, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
brand.html
194 lines (181 loc) · 5.16 KB
/
brand.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This is a work-in-progress design mockup for svlt/front -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="never">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Brand Guidelines</title>
<link rel="stylesheet" href="assets/css/style.min.css">
<style>
.container {
margin-bottom: 5em;
}
hr {
margin-top: 2em;
margin-bottom: 2em;
}
.brand-color .bg-primary {
display: inline-block;
width: 128px;
height: 128px;
text-align: center;
border-radius: 8px;
}
.brand-color .bg-primary .brand-color-text {
line-height: 128px;
font-size: 18px;
}
.logos {
font-size: 128px;
line-height: 1;
}
.font .col-sm-4 > :last-child,
.font .col-sm-8 > :last-child {
margin-bottom: 0;
}
/* layout */
.layout {
width: 256px;
/*height: 128px;*/
border: 1px solid #ccc;
border-radius: 2px;
}
.layout .nb {
height: 28px;
font-size: 9px;
line-height: 1;
padding-left: 5px;
padding-right: 5px;
}
.layout .nb .icon {
color: #fff;
font-size: 18px;
line-height: 28px;
}
.layout .nb .pull-xs-right .icon {
opacity: 0.75;
font-size: 16px;
}
.layout .nb .in {
display: inline-block;
width: 60px;
height: 15px;
background-color: #fff;
border-radius: 2px;
}
.layout .con > .col {
float: left;
width: 25%;
}
.layout .con > .col:nth-child(2) {
width: 50%;
}
.layout .crd {
min-height: 120px;
margin: 5px;
border: 1px solid #eee;
border-radius: 2px;
}
.layout .col:nth-child(2) .crd {
margin-left: 0;
margin-right: 0;
text-align: right;
}
.layout .bn {
display: inline-block;
margin: 30px 5px 10px;
width: 30px;
height: 8px;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="container">
<h1>Brand Guidelines</h1>
<hr>
<h2>Colors</h2>
<p>Vault uses a consistent blue color for branding. It can be mixed with other colors, but no other standard colors are defined yet.</p>
<div class="brand-color">
<div class="bg-primary">
<span class="brand-color-text"></span>
</div>
</div>
<hr>
<h2>Logo</h2>
<p>Vault is currently using a simple "vault door" glyph. The logo should generally be displayed in <code class="text-primary brand-color-text">SV blue</code>, but can be white, black, or gray to match its surroundings. For example the site navbar is the primary color, and the logo is rendered in white on it.</p>
<div class="logos">
<i class="icon icon-svlt text-primary"></i>
<i class="icon icon-svlt"></i>
</div>
<div class="btn-group">
<a class="btn btn-primary-outline" href="../logo/svlt.min.svg"><span class="hidden-xs-down">Download</span> SVG</a>
<a class="btn btn-primary-outline" href="../logo/svlt.png">PNG</a>
<a class="btn btn-primary-outline" href="../logo/svlt-blue.png">PNG (Blue)</a>
</div>
<hr>
<h2>Font</h2>
<p>The Lato font is used for headings, content, and UI elements. Headings are rendered at <code>700</code> weight, body and UI text at <code>400</code>.</p>
<div class="card font">
<div class="card-block">
<div class="row">
<div class="col-sm-4">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</div>
<div class="col-sm-8">
<p class="lead">Lead text block. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Paragraph text block. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<hr>
<h2>Layout colors</h2>
<p>The use of colors in major parts of the layout should be consistent. The primary brand color is used for navigation and primary buttons.</p>
<div class="layout">
<div class="nb bg-primary clearfix">
<i class="icon icon-svlt"></i>
<div class="pull-xs-right">
<div class="in"></div>
<i class="icon icon-bell"></i>
<i class="icon icon-user"></i>
</div>
</div>
<div class="con clearfix">
<div class="col">
<div class="crd card-default"></div>
</div>
<div class="col">
<div class="crd card-default">
<div class="bn bg-primary"></div>
</div>
</div>
<div class="col">
<div class="crd card-default"></div>
</div>
</div>
</div>
</div>
<script>
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
var style = getComputedStyle(document.querySelector('.bg-primary')),
brandColor = rgb2hex(style.getPropertyValue('background-color')),
brandColorText = document.querySelectorAll('.brand-color-text');
console.log([brandColor, brandColorText]);
for (var i = 0, max = brandColorText.length; i < max; i++) {
brandColorText[i].textContent = brandColor;
}
</script>
</body>
</html>