jekyll-sharp-styleguide 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +382 -0
- data/_includes/blockquotes.html +4 -0
- data/_includes/buttons.html +16 -0
- data/_includes/codes.html +64 -0
- data/_includes/colors.html +36 -0
- data/_includes/columns.html +10 -0
- data/_includes/favicons.html +9 -0
- data/_includes/footer.html +7 -0
- data/_includes/header.html +10 -0
- data/_includes/headings.html +10 -0
- data/_includes/icons.html +1068 -0
- data/_includes/image.html +4 -0
- data/_includes/inputs.html +50 -0
- data/_includes/lightbox.html +8 -0
- data/_includes/lists.html +44 -0
- data/_includes/loader.html +5 -0
- data/_includes/paragraphs.html +7 -0
- data/_includes/scripts.html +5 -0
- data/_includes/tags.html +23 -0
- data/_layouts/default.html +1 -0
- data/_layouts/page.html +5 -0
- data/_layouts/post.html +5 -0
- data/_sass/_blockquotes.scss +15 -0
- data/_sass/_buttons.scss +37 -0
- data/_sass/_codes.scss +253 -0
- data/_sass/_colors.scss +24 -0
- data/_sass/_columns.scss +42 -0
- data/_sass/_content.scss +26 -0
- data/_sass/_footer.scss +7 -0
- data/_sass/_header.scss +37 -0
- data/_sass/_headings.scss +66 -0
- data/_sass/_helpers.scss +85 -0
- data/_sass/_icons.scss +865 -0
- data/_sass/_inputs.scss +116 -0
- data/_sass/_lightbox.scss +67 -0
- data/_sass/_lists.scss +94 -0
- data/_sass/_loader.scss +53 -0
- data/_sass/_paragraphs.scss +60 -0
- data/_sass/_reset.scss +50 -0
- data/_sass/_tags.scss +21 -0
- data/_sass/_tooltips.scss +56 -0
- data/_sass/_variables.scss +30 -0
- data/_sass/main.scss +21 -0
- data/assets/css/main.scss +4 -0
- data/assets/fonts/Feather.svg +276 -0
- data/assets/fonts/Feather.ttf +0 -0
- data/assets/fonts/Feather.woff +0 -0
- data/assets/img/favicons/android-chrome-192x192.png +0 -0
- data/assets/img/favicons/android-chrome-512x512.png +0 -0
- data/assets/img/favicons/apple-touch-icon.png +0 -0
- data/assets/img/favicons/browserconfig.xml +9 -0
- data/assets/img/favicons/favicon-16x16.png +0 -0
- data/assets/img/favicons/favicon-32x32.png +0 -0
- data/assets/img/favicons/favicon.ico +0 -0
- data/assets/img/favicons/mstile-150x150.png +0 -0
- data/assets/img/favicons/safari-pinned-tab.svg +25 -0
- data/assets/img/favicons/site.webmanifest +19 -0
- data/assets/img/header_bg.webp +0 -0
- data/assets/img/lightbox.jpg +0 -0
- data/assets/img/logo.png +0 -0
- data/assets/js/copycode.js +49 -0
- data/assets/js/loader.js +11 -0
- data/assets/js/main.js +60 -0
- data/assets/js/tooltip.js +492 -0
- metadata +123 -0
@@ -0,0 +1,50 @@
|
|
1
|
+
<h3>Inputs</h3>
|
2
|
+
|
3
|
+
<div class="row md-3">
|
4
|
+
<div class="col">
|
5
|
+
<h6>Default state</h6>
|
6
|
+
<input type="text" placeholder="Placeholder text">
|
7
|
+
</div>
|
8
|
+
<div class="col">
|
9
|
+
<h6>Focus state</h6>
|
10
|
+
<input class="focus" type="text" placeholder="Placeholder text">
|
11
|
+
</div>
|
12
|
+
<div class="col">
|
13
|
+
<h6>Disabled state</h6>
|
14
|
+
<input type="text" placeholder="Placeholder text" disabled>
|
15
|
+
</div>
|
16
|
+
</div>
|
17
|
+
|
18
|
+
<h6>Textarea</h6>
|
19
|
+
<textarea rows="5" placeholder="Add your comment here"></textarea>
|
20
|
+
|
21
|
+
<div class="row md-2">
|
22
|
+
<div class="col">
|
23
|
+
<h6>Select field</h6>
|
24
|
+
<div class="select-field">
|
25
|
+
<select class="select-box">
|
26
|
+
<option value="">Select an option</option>
|
27
|
+
<option value="opt-1">Option 1</option>
|
28
|
+
<option value="opt-2">Option 2</option>
|
29
|
+
<option value="opt-3">Option 3</option>
|
30
|
+
</select>
|
31
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 1792 1792" width="16"><path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
<div class="col">
|
35
|
+
<h6>Checkbox & radio</h6>
|
36
|
+
<label class="checkbox d-inline-block">
|
37
|
+
<input type="checkbox">
|
38
|
+
<span class="checkmark"></span>
|
39
|
+
Checkbox
|
40
|
+
</label>
|
41
|
+
<label class="checkbox radio d-inline-block">
|
42
|
+
<input type="radio">
|
43
|
+
<span class="checkmark"></span>
|
44
|
+
Radio button
|
45
|
+
</label>
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
|
50
|
+
|
@@ -0,0 +1,44 @@
|
|
1
|
+
<h3>Lists</h3>
|
2
|
+
|
3
|
+
<div class="row md-4 sm-2 xs-1">
|
4
|
+
<div class="col">
|
5
|
+
<h6>Unordered list</h6>
|
6
|
+
<ul>
|
7
|
+
<li>List item 1</li>
|
8
|
+
<li>List item 2</li>
|
9
|
+
<li>List item 3</li>
|
10
|
+
<li>List item 4</li>
|
11
|
+
<li>List item 5</li>
|
12
|
+
</ul>
|
13
|
+
</div>
|
14
|
+
<div class="col">
|
15
|
+
<h6>Ordered list</h6>
|
16
|
+
<ol>
|
17
|
+
<li>List item 1</li>
|
18
|
+
<li>List item 2</li>
|
19
|
+
<li>List item 3</li>
|
20
|
+
<li>List item 4</li>
|
21
|
+
<li>List item 5</li>
|
22
|
+
</ol>
|
23
|
+
</div>
|
24
|
+
<div class="col">
|
25
|
+
<h6>Check list</h6>
|
26
|
+
<ul class="check-list">
|
27
|
+
<li>List item 1</li>
|
28
|
+
<li>List item 2</li>
|
29
|
+
<li>List item 3</li>
|
30
|
+
<li>List item 4</li>
|
31
|
+
<li>List item 5</li>
|
32
|
+
</ul>
|
33
|
+
</div>
|
34
|
+
<div class="col">
|
35
|
+
<h6>Number list</h6>
|
36
|
+
<ol class="number-list">
|
37
|
+
<li>List item 1</li>
|
38
|
+
<li>List item 2</li>
|
39
|
+
<li>List item 3</li>
|
40
|
+
<li>List item 4</li>
|
41
|
+
<li>List item 5</li>
|
42
|
+
</ol>
|
43
|
+
</div>
|
44
|
+
</div>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<h3>Paragraphs</h3>
|
2
|
+
|
3
|
+
<h6>Body copy</h6>
|
4
|
+
<p>Sed elementum vel sapien in ultricies. Sed a dui dui. Fusce <code>commodo</code> esta faucibus lobortis. <b>Nulla facilisi</b>. Fusce sagittis, massa ut faucibus feugiat, velit neque pharetra enim, aliquet mollis <a href="#">lectus tellus quis</a> odio. Sed a ante sed nibh iaculis scelerisque. Vestibulum a magna nunc.</p>
|
5
|
+
|
6
|
+
<h6>Small text</h6>
|
7
|
+
<p><small>Sed elementum vel sapien in ultricies. Sed a dui dui. Fusce commodo esta faucibus lobortis. Nulla facilisi. Fusce sagittis, massa ut faucibus feugiat, velit neque pharetra enim, aliquet mollis.</small></p>
|
data/_includes/tags.html
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
<h3>Tags</h3>
|
2
|
+
|
3
|
+
<h6>Tagcloud</h6>
|
4
|
+
<div class="tag-cloud">
|
5
|
+
<a href="#">html</a>
|
6
|
+
<a href="#">css</a>
|
7
|
+
<a href="#">jquery</a>
|
8
|
+
<a href="#">javascript</a>
|
9
|
+
<a href="#">jekyll</a>
|
10
|
+
<a href="#">php</a>
|
11
|
+
<a href="#">design</a>
|
12
|
+
<a href="#">gulp</a>
|
13
|
+
<a href="#">ui</a>
|
14
|
+
<a href="#">node</a>
|
15
|
+
<a href="#">article</a>
|
16
|
+
<a href="#">basic note</a>
|
17
|
+
<a href="#">ruby</a>
|
18
|
+
<a href="#">python</a>
|
19
|
+
<a href="#">wordpress</a>
|
20
|
+
<a href="#">addon</a>
|
21
|
+
<a href="#">plugin</a>
|
22
|
+
<a href="#">photoshop</a>
|
23
|
+
</div>
|
@@ -0,0 +1 @@
|
|
1
|
+
{{ content }}
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
/* BLOCKQUOTES
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
blockquote {
|
5
|
+
padding: $spacer (($spacer / 2) * 3);
|
6
|
+
background: $light;
|
7
|
+
border-left: 5px solid $accent;
|
8
|
+
margin-bottom: $spacer;
|
9
|
+
border-radius: $border-radius / 2;
|
10
|
+
display: block;
|
11
|
+
&.accent {
|
12
|
+
background-color: $accent;
|
13
|
+
opacity: 0.3;
|
14
|
+
}
|
15
|
+
}
|
data/_sass/_buttons.scss
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
/* BUTTONS
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
// Basic button
|
5
|
+
button {
|
6
|
+
outline: none;
|
7
|
+
border: 0;
|
8
|
+
}
|
9
|
+
|
10
|
+
// Theme button
|
11
|
+
.btn {
|
12
|
+
background: $accent;
|
13
|
+
color: $white;
|
14
|
+
font-weight: bold;
|
15
|
+
padding: (($spacer / 4) * 3) (($spacer / 4) * 5);
|
16
|
+
border: 0;
|
17
|
+
display: inline-block;
|
18
|
+
box-shadow: none;
|
19
|
+
font-size: $base-font-size * 1.1;
|
20
|
+
border-radius: $border-radius / 2;
|
21
|
+
margin-bottom: $spacer;
|
22
|
+
text-align: center;
|
23
|
+
text-decoration: none;
|
24
|
+
cursor: pointer;
|
25
|
+
&:not(.disabled):hover, &.hover {
|
26
|
+
background: $accent-hover;
|
27
|
+
transition: background-color 0.3s;
|
28
|
+
color: $white;
|
29
|
+
}
|
30
|
+
&:disabled, &.disabled {
|
31
|
+
opacity: 0.5;
|
32
|
+
cursor: not-allowed;
|
33
|
+
}
|
34
|
+
@media (max-width: $breakpoint-xs) {
|
35
|
+
display: block;
|
36
|
+
}
|
37
|
+
}
|
data/_sass/_codes.scss
ADDED
@@ -0,0 +1,253 @@
|
|
1
|
+
/* CODES & HIGHLIGHTS
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
// Code block
|
5
|
+
.highlight {
|
6
|
+
background-color: $light;
|
7
|
+
margin-bottom: $spacer;
|
8
|
+
padding: $spacer;
|
9
|
+
border-radius: $border-radius;
|
10
|
+
max-height: 450px;
|
11
|
+
overflow: auto;
|
12
|
+
}
|
13
|
+
|
14
|
+
// Copy code button
|
15
|
+
pre {
|
16
|
+
position: relative;
|
17
|
+
button {
|
18
|
+
position: absolute;
|
19
|
+
right: -5px;
|
20
|
+
top: -5px;
|
21
|
+
border: 0;
|
22
|
+
background: #e7e7e7;
|
23
|
+
padding: 3px 6px;
|
24
|
+
border-radius: $border-radius / 2;
|
25
|
+
font-size: 13px;
|
26
|
+
color: #666;
|
27
|
+
opacity: 0;
|
28
|
+
cursor: pointer;
|
29
|
+
&:hover {
|
30
|
+
background: #d5dae2;
|
31
|
+
color: black;
|
32
|
+
transition: background-color 0.2s;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
&:hover {
|
36
|
+
button {
|
37
|
+
opacity: 1;
|
38
|
+
transition: opacity 0.3s;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
// Rouge github theme syntax highlight
|
44
|
+
.highlight table td { padding: 5px; }
|
45
|
+
.highlight table pre { margin: 0; }
|
46
|
+
.highlight .cm {
|
47
|
+
color: #999988;
|
48
|
+
font-style: italic;
|
49
|
+
}
|
50
|
+
.highlight .cp {
|
51
|
+
color: #999999;
|
52
|
+
font-weight: bold;
|
53
|
+
}
|
54
|
+
.highlight .c1 {
|
55
|
+
color: #999988;
|
56
|
+
font-style: italic;
|
57
|
+
}
|
58
|
+
.highlight .cs {
|
59
|
+
color: #999999;
|
60
|
+
font-weight: bold;
|
61
|
+
font-style: italic;
|
62
|
+
}
|
63
|
+
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
|
64
|
+
color: #999988;
|
65
|
+
font-style: italic;
|
66
|
+
}
|
67
|
+
.highlight .err {
|
68
|
+
color: #a61717;
|
69
|
+
background-color: #e3d2d2;
|
70
|
+
}
|
71
|
+
.highlight .gd {
|
72
|
+
color: #000000;
|
73
|
+
background-color: #ffdddd;
|
74
|
+
}
|
75
|
+
.highlight .ge {
|
76
|
+
color: #000000;
|
77
|
+
font-style: italic;
|
78
|
+
}
|
79
|
+
.highlight .gr {
|
80
|
+
color: #aa0000;
|
81
|
+
}
|
82
|
+
.highlight .gh {
|
83
|
+
color: #999999;
|
84
|
+
}
|
85
|
+
.highlight .gi {
|
86
|
+
color: #000000;
|
87
|
+
background-color: #ddffdd;
|
88
|
+
}
|
89
|
+
.highlight .go {
|
90
|
+
color: #888888;
|
91
|
+
}
|
92
|
+
.highlight .gp {
|
93
|
+
color: #555555;
|
94
|
+
}
|
95
|
+
.highlight .gs {
|
96
|
+
font-weight: bold;
|
97
|
+
}
|
98
|
+
.highlight .gu {
|
99
|
+
color: #aaaaaa;
|
100
|
+
}
|
101
|
+
.highlight .gt {
|
102
|
+
color: #aa0000;
|
103
|
+
}
|
104
|
+
.highlight .kc {
|
105
|
+
color: #000000;
|
106
|
+
font-weight: bold;
|
107
|
+
}
|
108
|
+
.highlight .kd {
|
109
|
+
color: #000000;
|
110
|
+
font-weight: bold;
|
111
|
+
}
|
112
|
+
.highlight .kn {
|
113
|
+
color: #000000;
|
114
|
+
font-weight: bold;
|
115
|
+
}
|
116
|
+
.highlight .kp {
|
117
|
+
color: #000000;
|
118
|
+
font-weight: bold;
|
119
|
+
}
|
120
|
+
.highlight .kr {
|
121
|
+
color: #000000;
|
122
|
+
font-weight: bold;
|
123
|
+
}
|
124
|
+
.highlight .kt {
|
125
|
+
color: #445588;
|
126
|
+
font-weight: bold;
|
127
|
+
}
|
128
|
+
.highlight .k, .highlight .kv {
|
129
|
+
color: #000000;
|
130
|
+
font-weight: bold;
|
131
|
+
}
|
132
|
+
.highlight .mf {
|
133
|
+
color: #009999;
|
134
|
+
}
|
135
|
+
.highlight .mh {
|
136
|
+
color: #009999;
|
137
|
+
}
|
138
|
+
.highlight .il {
|
139
|
+
color: #009999;
|
140
|
+
}
|
141
|
+
.highlight .mi {
|
142
|
+
color: #009999;
|
143
|
+
}
|
144
|
+
.highlight .mo {
|
145
|
+
color: #009999;
|
146
|
+
}
|
147
|
+
.highlight .m, .highlight .mb, .highlight .mx {
|
148
|
+
color: #009999;
|
149
|
+
}
|
150
|
+
.highlight .sa {
|
151
|
+
color: #000000;
|
152
|
+
font-weight: bold;
|
153
|
+
}
|
154
|
+
.highlight .sb {
|
155
|
+
color: #d14;
|
156
|
+
}
|
157
|
+
.highlight .sc {
|
158
|
+
color: #d14;
|
159
|
+
}
|
160
|
+
.highlight .sd {
|
161
|
+
color: #d14;
|
162
|
+
}
|
163
|
+
.highlight .s2 {
|
164
|
+
color: #d14;
|
165
|
+
}
|
166
|
+
.highlight .se {
|
167
|
+
color: #d14;
|
168
|
+
}
|
169
|
+
.highlight .sh {
|
170
|
+
color: #d14;
|
171
|
+
}
|
172
|
+
.highlight .si {
|
173
|
+
color: #d14;
|
174
|
+
}
|
175
|
+
.highlight .sx {
|
176
|
+
color: #d14;
|
177
|
+
}
|
178
|
+
.highlight .sr {
|
179
|
+
color: #009926;
|
180
|
+
}
|
181
|
+
.highlight .s1 {
|
182
|
+
color: #d14;
|
183
|
+
}
|
184
|
+
.highlight .ss {
|
185
|
+
color: #990073;
|
186
|
+
}
|
187
|
+
.highlight .s, .highlight .dl {
|
188
|
+
color: #d14;
|
189
|
+
}
|
190
|
+
.highlight .na {
|
191
|
+
color: #008080;
|
192
|
+
}
|
193
|
+
.highlight .bp {
|
194
|
+
color: #999999;
|
195
|
+
}
|
196
|
+
.highlight .nb {
|
197
|
+
color: #0086B3;
|
198
|
+
}
|
199
|
+
.highlight .nc {
|
200
|
+
color: #445588;
|
201
|
+
font-weight: bold;
|
202
|
+
}
|
203
|
+
.highlight .no {
|
204
|
+
color: #008080;
|
205
|
+
}
|
206
|
+
.highlight .nd {
|
207
|
+
color: #3c5d5d;
|
208
|
+
font-weight: bold;
|
209
|
+
}
|
210
|
+
.highlight .ni {
|
211
|
+
color: #800080;
|
212
|
+
}
|
213
|
+
.highlight .ne {
|
214
|
+
color: #990000;
|
215
|
+
font-weight: bold;
|
216
|
+
}
|
217
|
+
.highlight .nf, .highlight .fm {
|
218
|
+
color: #990000;
|
219
|
+
font-weight: bold;
|
220
|
+
}
|
221
|
+
.highlight .nl {
|
222
|
+
color: #990000;
|
223
|
+
font-weight: bold;
|
224
|
+
}
|
225
|
+
.highlight .nn {
|
226
|
+
color: #555555;
|
227
|
+
}
|
228
|
+
.highlight .nt {
|
229
|
+
color: #000080;
|
230
|
+
}
|
231
|
+
.highlight .vc {
|
232
|
+
color: #008080;
|
233
|
+
}
|
234
|
+
.highlight .vg {
|
235
|
+
color: #008080;
|
236
|
+
}
|
237
|
+
.highlight .vi {
|
238
|
+
color: #008080;
|
239
|
+
}
|
240
|
+
.highlight .nv, .highlight .vm {
|
241
|
+
color: #008080;
|
242
|
+
}
|
243
|
+
.highlight .ow {
|
244
|
+
color: #000000;
|
245
|
+
font-weight: bold;
|
246
|
+
}
|
247
|
+
.highlight .o {
|
248
|
+
color: #000000;
|
249
|
+
font-weight: bold;
|
250
|
+
}
|
251
|
+
.highlight .w {
|
252
|
+
color: #bbbbbb;
|
253
|
+
}
|
data/_sass/_colors.scss
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
/* COLOR SWATCHES
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
// Swatch
|
5
|
+
.color-item {
|
6
|
+
margin-bottom: $spacer;
|
7
|
+
figure {
|
8
|
+
height: 150px;
|
9
|
+
border-radius: $border-radius;
|
10
|
+
line-height: 150px;
|
11
|
+
text-align: center;
|
12
|
+
@media (max-width: $breakpoint-sm) {
|
13
|
+
height: 200px;
|
14
|
+
line-height: 200px;
|
15
|
+
}
|
16
|
+
@media (max-width: $breakpoint-xs) {
|
17
|
+
height: 100px;
|
18
|
+
line-height: 100px;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
p {
|
22
|
+
margin-bottom: 0;
|
23
|
+
}
|
24
|
+
}
|
data/_sass/_columns.scss
ADDED
@@ -0,0 +1,42 @@
|
|
1
|
+
/* COLUMNS LAYOUT
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
// Generate MD columns
|
5
|
+
@for $i from 1 through 6 {
|
6
|
+
@media (min-width: $breakpoint-sm) {
|
7
|
+
.md-#{$i} {
|
8
|
+
column-count: $i;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
// Generate SM columns
|
14
|
+
@for $i from 1 through 6 {
|
15
|
+
@media (max-width: $breakpoint-sm) {
|
16
|
+
.sm-#{$i} {
|
17
|
+
column-count: $i;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
// Generate XS columns
|
23
|
+
@for $i from 1 through 6 {
|
24
|
+
@media (max-width: $breakpoint-xs) {
|
25
|
+
.xs-#{$i} {
|
26
|
+
column-count: $i;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
// Styleguide columns
|
32
|
+
.row-columns {
|
33
|
+
.col {
|
34
|
+
height: 300px;
|
35
|
+
@media (max-width: $breakpoint-xs) {
|
36
|
+
height: 300px;
|
37
|
+
&:nth-child(4), &:nth-child(5), &:nth-child(6) {
|
38
|
+
display: none;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
data/_sass/_content.scss
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
/* THE CONTENT
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
main {
|
5
|
+
padding: 100px 0;
|
6
|
+
@media (max-width: $breakpoint-sm) {
|
7
|
+
padding: 75px 0;
|
8
|
+
}
|
9
|
+
@media (max-width: $breakpoint-xs) {
|
10
|
+
padding: 50px 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
.container {
|
15
|
+
max-width: 680px;
|
16
|
+
margin: 0 auto;
|
17
|
+
padding: 0 $spacer;
|
18
|
+
}
|
19
|
+
|
20
|
+
.row {
|
21
|
+
gap: $spacer;
|
22
|
+
}
|
23
|
+
|
24
|
+
.col {
|
25
|
+
width: 100%;
|
26
|
+
}
|
data/_sass/_footer.scss
ADDED
data/_sass/_header.scss
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
/* HEADER
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
// Header base
|
5
|
+
header {
|
6
|
+
background-color: $dark;
|
7
|
+
background-image: url('../img/header_bg.webp');
|
8
|
+
background-size: cover;
|
9
|
+
background-position: center;
|
10
|
+
min-height: 550px;
|
11
|
+
padding-top: 50px;
|
12
|
+
display: flex;
|
13
|
+
align-items: center;
|
14
|
+
h1, h2, h3 {
|
15
|
+
color: $white;
|
16
|
+
}
|
17
|
+
@media (max-width: $breakpoint-sm) {
|
18
|
+
min-height: 450px;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
// Branding logo
|
23
|
+
.site-logo {
|
24
|
+
position: absolute;
|
25
|
+
top: $spacer;
|
26
|
+
img {
|
27
|
+
width: 80px;
|
28
|
+
height: auto;
|
29
|
+
opacity: 0.9;
|
30
|
+
}
|
31
|
+
&:hover {
|
32
|
+
img {
|
33
|
+
opacity: 1;
|
34
|
+
transition: opacity 0.3s;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
/* HEADINGS
|
2
|
+
=========================================================================================*/
|
3
|
+
|
4
|
+
// All headings
|
5
|
+
h1, h2, h3, h4, h5, h6 {
|
6
|
+
font-weight: bold;
|
7
|
+
margin-bottom: $spacer;
|
8
|
+
line-height: 1;
|
9
|
+
color: $dark;
|
10
|
+
}
|
11
|
+
|
12
|
+
// Anchor links
|
13
|
+
h2, h3, h4 {
|
14
|
+
.anchor {
|
15
|
+
float: left;
|
16
|
+
margin-left: -25px;
|
17
|
+
line-height: 1;
|
18
|
+
opacity: 0;
|
19
|
+
padding-right: 5px;
|
20
|
+
cursor: pointer;
|
21
|
+
i {
|
22
|
+
font-size: 18px;
|
23
|
+
color: $dark;
|
24
|
+
position: relative;
|
25
|
+
top: -3px;
|
26
|
+
}
|
27
|
+
&:hover {
|
28
|
+
opacity: 1;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
&:hover {
|
32
|
+
.anchor {
|
33
|
+
text-decoration: none;
|
34
|
+
opacity: 0.4;
|
35
|
+
&:hover {
|
36
|
+
opacity: 0.7;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// Generate responsive headings
|
43
|
+
@each $heading, $size in $font-size {
|
44
|
+
#{$heading}{
|
45
|
+
font-size: $size;
|
46
|
+
letter-spacing: -($size / 35);
|
47
|
+
@media (max-width: $breakpoint-sm) {
|
48
|
+
font-size: $size * 0.8;
|
49
|
+
}
|
50
|
+
@media (max-width: $breakpoint-xs) {
|
51
|
+
font-size: $size * 0.6;
|
52
|
+
letter-spacing: -($size / 55);
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
// H6 styling
|
58
|
+
h6 {
|
59
|
+
font-size: 16px;
|
60
|
+
@media (max-width: $breakpoint-sm) {
|
61
|
+
font-size: 14px;
|
62
|
+
}
|
63
|
+
@media (max-width: $breakpoint-xxs) {
|
64
|
+
font-size: 12px;
|
65
|
+
}
|
66
|
+
}
|