Reaperxxxx commited on
Commit
6c9cbd4
·
verified ·
1 Parent(s): 23951c6

Upload 14 files

Browse files
assets/sass/components/_actions.scss ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Actions */
8
+
9
+ ul.actions {
10
+ @include vendor('display', 'flex');
11
+ cursor: default;
12
+ list-style: none;
13
+ margin-left: (_size(element-margin) * -0.5);
14
+ padding-left: 0;
15
+
16
+ li {
17
+ padding: 0 0 0 (_size(element-margin) * 0.5);
18
+ vertical-align: middle;
19
+ }
20
+
21
+ &.special {
22
+ @include vendor('justify-content', 'center');
23
+ width: 100%;
24
+ margin-left: 0;
25
+
26
+ li {
27
+ &:first-child {
28
+ padding-left: 0;
29
+ }
30
+ }
31
+ }
32
+
33
+ &.stacked {
34
+ @include vendor('flex-direction', 'column');
35
+ margin-left: 0;
36
+
37
+ li {
38
+ padding: (_size(element-margin) * 0.65) 0 0 0;
39
+
40
+ &:first-child {
41
+ padding-top: 0;
42
+ }
43
+ }
44
+ }
45
+
46
+ &.fit {
47
+ width: calc(100% + #{_size(element-margin) * 0.5});
48
+
49
+ li {
50
+ @include vendor('flex-grow', '1');
51
+ @include vendor('flex-shrink', '1');
52
+ width: 100%;
53
+
54
+ > * {
55
+ width: 100%;
56
+ }
57
+ }
58
+
59
+ &.stacked {
60
+ width: 100%;
61
+ }
62
+ }
63
+
64
+ @include breakpoint('<=xsmall') {
65
+ &:not(.fixed) {
66
+ @include vendor('flex-direction', 'column');
67
+ margin-left: 0;
68
+ width: 100% !important;
69
+
70
+ li {
71
+ @include vendor('flex-grow', '1');
72
+ @include vendor('flex-shrink', '1');
73
+ padding: (_size(element-margin) * 0.5) 0 0 0;
74
+ text-align: center;
75
+ width: 100%;
76
+
77
+ > * {
78
+ width: 100%;
79
+ }
80
+
81
+ &:first-child {
82
+ padding-top: 0;
83
+ }
84
+
85
+ input[type="submit"],
86
+ input[type="reset"],
87
+ input[type="button"],
88
+ button,
89
+ .button {
90
+ width: 100%;
91
+
92
+ &.icon {
93
+ &:before {
94
+ margin-left: -0.5rem;
95
+ }
96
+ }
97
+ }
98
+ }
99
+ }
100
+ }
101
+ }
assets/sass/components/_box.scss ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Box */
8
+
9
+ .box {
10
+ border-radius: _size(border-radius);
11
+ border: solid 2px _palette(border);
12
+ margin-bottom: _size(element-margin);
13
+ padding: 1.5em;
14
+
15
+ > :last-child,
16
+ > :last-child > :last-child,
17
+ > :last-child > :last-child > :last-child {
18
+ margin-bottom: 0;
19
+ }
20
+
21
+ &.alt {
22
+ border: 0;
23
+ border-radius: 0;
24
+ padding: 0;
25
+ }
26
+ }
assets/sass/components/_button.scss ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Button */
8
+
9
+ input[type="submit"],
10
+ input[type="reset"],
11
+ input[type="button"],
12
+ button,
13
+ .button {
14
+ @include vendor('appearance', 'none');
15
+ @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
16
+ background-color: transparent;
17
+ border-radius: _size(border-radius);
18
+ border: 0;
19
+ box-shadow: inset 0 0 0 2px _palette(border);
20
+ color: _palette(fg-bold) !important;
21
+ cursor: pointer;
22
+ display: inline-block;
23
+ font-family: _font(family-heading);
24
+ font-size: 0.8em;
25
+ font-weight: _font(weight-heading-bold);
26
+ height: 3.75em;
27
+ letter-spacing: _font(kern-heading);
28
+ line-height: 3.75em;
29
+ padding: 0 2.25em;
30
+ text-align: center;
31
+ text-decoration: none;
32
+ text-transform: uppercase;
33
+ white-space: nowrap;
34
+
35
+ &:hover {
36
+ background-color: _palette(border-bg);
37
+ }
38
+
39
+ &:active {
40
+ background-color: _palette(border2-bg);
41
+ }
42
+
43
+ &.icon {
44
+ &:before {
45
+ margin-right: 0.5em;
46
+ color: _palette(fg-light);
47
+ }
48
+ }
49
+
50
+ &.primary {
51
+ background-color: _palette(accent);
52
+ box-shadow: none;
53
+
54
+ &:hover {
55
+ background-color: desaturate(lighten(_palette(accent), 3), 1.5);
56
+ }
57
+
58
+ &:active {
59
+ background-color: saturate(darken(_palette(accent), 3), 1.5);
60
+ }
61
+
62
+ &.icon {
63
+ &:before {
64
+ color: mix(_palette(fg-bold), _palette(accent), 25%);
65
+ }
66
+ }
67
+ }
68
+
69
+ &.fit {
70
+ width: 100%;
71
+ }
72
+
73
+ &.small {
74
+ font-size: 0.6em;
75
+ }
76
+
77
+ &.large {
78
+ font-size: 1em;
79
+ }
80
+
81
+ &.disabled,
82
+ &:disabled {
83
+ opacity: 0.25;
84
+ }
85
+
86
+ @include breakpoint('<=xsmall') {
87
+ padding: 0;
88
+ }
89
+ }
assets/sass/components/_contact.scss ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Contact */
8
+
9
+ ul.contact {
10
+ list-style: none;
11
+ padding: 0;
12
+
13
+ li {
14
+ @include icon;
15
+ margin: (_size(element-margin) * 1.25) 0 0 0;
16
+ padding: 0 0 0 3.25em;
17
+ position: relative;
18
+
19
+ &:before {
20
+ border-radius: 100%;
21
+ border: solid 2px _palette(border);
22
+ display: inline-block;
23
+ font-size: 0.8em;
24
+ height: 2.5em;
25
+ left: 0;
26
+ line-height: 2.35em;
27
+ position: absolute;
28
+ text-align: center;
29
+ top: 0;
30
+ width: 2.5em;
31
+ }
32
+
33
+ &:first-child {
34
+ margin-top: 0;
35
+ }
36
+ }
37
+
38
+ @include breakpoint('<=small') {
39
+ li {
40
+ margin: (_size(element-margin) * 0.75) 0 0 0;
41
+ }
42
+ }
43
+ }
assets/sass/components/_features.scss ADDED
@@ -0,0 +1,71 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Features */
8
+
9
+ .features {
10
+ @include vendor('display', 'flex');
11
+ @include vendor('flex-wrap', 'wrap');
12
+ margin: 0 0 _size(element-margin) 0;
13
+
14
+ article {
15
+ @include padding(1.75em, 1.75em);
16
+ background-color: desaturate(lighten(_palette(bg), 3), 1.5);
17
+ border-radius: _size(border-radius);
18
+ margin: (_size(section-spacing, large) * 0.5) _size(section-spacing, large) (_size(section-spacing, large) * 0.5) 0;
19
+ width: calc(50% - #{_size(section-spacing, large) * 0.5});
20
+
21
+ &:nth-child(2n) {
22
+ margin-right: 0;
23
+ }
24
+
25
+ .image {
26
+ border-radius: _size(border-radius) _size(border-radius) 0 0;
27
+ display: block;
28
+ margin-bottom: 1.75em;
29
+ margin-left: -1.75em;
30
+ margin-top: -1.75em;
31
+ position: relative;
32
+ width: calc(100% + #{3.5em});
33
+
34
+ img {
35
+ border-radius: _size(border-radius) _size(border-radius) 0 0;
36
+ width: 100%;
37
+ }
38
+ }
39
+ }
40
+
41
+ @include breakpoint('<=medium') {
42
+ article {
43
+ margin: (_size(section-spacing, medium) * 0.5) _size(section-spacing, medium) (_size(section-spacing, medium) * 0.5) 0;
44
+ width: calc(50% - #{_size(section-spacing, medium) * 0.5});
45
+ }
46
+ }
47
+
48
+ @include breakpoint('<=small') {
49
+ article {
50
+ @include padding(1.5em, 1.5em);
51
+ margin: (_size(section-spacing, small) * 0.5) _size(section-spacing, small) (_size(section-spacing, small) * 0.5) 0;
52
+ width: calc(50% - #{_size(section-spacing, small) * 0.5} - 1px);
53
+
54
+ .image {
55
+ margin-bottom: 1.5em;
56
+ margin-left: -1.5em;
57
+ margin-top: -1.5em;
58
+ width: calc(100% + #{3em});
59
+ }
60
+ }
61
+ }
62
+
63
+ @include breakpoint('<=xsmall') {
64
+ display: block;
65
+
66
+ article {
67
+ width: 100%;
68
+ margin: 0 0 _size(element-margin) 0 !important;
69
+ }
70
+ }
71
+ }
assets/sass/components/_form.scss ADDED
@@ -0,0 +1,236 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Form */
8
+
9
+ form {
10
+ margin: 0 0 _size(element-margin) 0;
11
+
12
+ > :last-child {
13
+ margin-bottom: 0;
14
+ }
15
+
16
+ > .fields {
17
+ $gutter: (_size(element-margin) * 0.75);
18
+
19
+ @include vendor('display', 'flex');
20
+ @include vendor('flex-wrap', 'wrap');
21
+ width: calc(100% + #{$gutter * 2});
22
+ margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
23
+
24
+ > .field {
25
+ @include vendor('flex-grow', '0');
26
+ @include vendor('flex-shrink', '0');
27
+ padding: $gutter 0 0 $gutter;
28
+ width: calc(100% - #{$gutter * 1});
29
+
30
+ &.half {
31
+ width: calc(50% - #{$gutter * 0.5});
32
+ }
33
+
34
+ &.third {
35
+ width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
36
+ }
37
+
38
+ &.quarter {
39
+ width: calc(25% - #{$gutter * 0.25});
40
+ }
41
+ }
42
+ }
43
+
44
+ @include breakpoint('<=xsmall') {
45
+ > .fields {
46
+ $gutter: (_size(element-margin) * 0.75);
47
+
48
+ width: calc(100% + #{$gutter * 2});
49
+ margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
50
+
51
+ > .field {
52
+ padding: $gutter 0 0 $gutter;
53
+ width: calc(100% - #{$gutter * 1});
54
+
55
+ &.half {
56
+ width: calc(100% - #{$gutter * 1});
57
+ }
58
+
59
+ &.third {
60
+ width: calc(100% - #{$gutter * 1});
61
+ }
62
+
63
+ &.quarter {
64
+ width: calc(100% - #{$gutter * 1});
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }
70
+
71
+ label {
72
+ color: _palette(fg-bold);
73
+ display: block;
74
+ font-family: _font(family-heading);
75
+ font-size: 0.8em;
76
+ font-weight: _font(weight-heading-bold);
77
+ letter-spacing: _font(kern-heading);
78
+ margin: 0 0 (_size(element-margin) * 0.35) 0;
79
+ text-transform: uppercase;
80
+ }
81
+
82
+ input[type="text"],
83
+ input[type="password"],
84
+ input[type="email"],
85
+ input[type="tel"],
86
+ select,
87
+ textarea {
88
+ @include vendor('appearance', 'none');
89
+ background: _palette(border-bg);
90
+ border-radius: _size(border-radius);
91
+ border: none;
92
+ border: solid 2px _palette(border);
93
+ color: inherit;
94
+ display: block;
95
+ outline: 0;
96
+ padding: 0 1em;
97
+ text-decoration: none;
98
+ width: 100%;
99
+
100
+ &:invalid {
101
+ box-shadow: none;
102
+ }
103
+
104
+ &:focus {
105
+ border-color: desaturate(lighten(_palette(accent), 6), 3);
106
+ }
107
+ }
108
+
109
+ select {
110
+ background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
111
+ background-size: 1.25rem;
112
+ background-repeat: no-repeat;
113
+ background-position: calc(100% - 1rem) center;
114
+ height: _size(element-height);
115
+ padding-right: _size(element-height);
116
+ text-overflow: ellipsis;
117
+
118
+ option {
119
+ color: _palette(fg-bold);
120
+ background: _palette(bg);
121
+ }
122
+
123
+ &:focus {
124
+ &::-ms-value {
125
+ background-color: transparent;
126
+ }
127
+ }
128
+
129
+ &::-ms-expand {
130
+ display: none;
131
+ }
132
+ }
133
+
134
+ input[type="text"],
135
+ input[type="password"],
136
+ input[type="email"],
137
+ select {
138
+ height: _size(element-height);
139
+ }
140
+
141
+ textarea {
142
+ padding: 0.75em 1em;
143
+ }
144
+
145
+ input[type="checkbox"],
146
+ input[type="radio"], {
147
+ @include vendor('appearance', 'none');
148
+ display: block;
149
+ float: left;
150
+ margin-right: -2em;
151
+ opacity: 0;
152
+ width: 1em;
153
+ z-index: -1;
154
+
155
+ & + label {
156
+ @include icon(false, solid);
157
+ color: _palette(fg);
158
+ cursor: pointer;
159
+ display: inline-block;
160
+ font-size: 1em;
161
+ font-family: _font(family);
162
+ text-transform: none;
163
+ letter-spacing: 0;
164
+ font-weight: _font(weight);
165
+ padding-left: (_size(element-height) * 0.6) + 0.75em;
166
+ padding-right: 0.75em;
167
+ position: relative;
168
+
169
+ &:before {
170
+ background: _palette(border-bg);
171
+ border-radius: _size(border-radius);
172
+ border: solid 2px _palette(border);
173
+ content: '';
174
+ display: inline-block;
175
+ font-size: 0.8em;
176
+ height: (_size(element-height) * 0.75);
177
+ left: 0;
178
+ line-height: (_size(element-height) * 0.75);
179
+ position: absolute;
180
+ text-align: center;
181
+ top: 0;
182
+ width: (_size(element-height) * 0.75);
183
+ }
184
+ }
185
+
186
+ &:checked + label {
187
+ &:before {
188
+ background: _palette(fg-bold);
189
+ border-color: _palette(fg-bold);
190
+ content: '\f00c';
191
+ color: _palette(bg);
192
+ }
193
+ }
194
+
195
+ &:focus + label {
196
+ &:before {
197
+ border-color: _palette(accent);
198
+ }
199
+ }
200
+ }
201
+
202
+ input[type="checkbox"] {
203
+ & + label {
204
+ &:before {
205
+ border-radius: _size(border-radius);
206
+ }
207
+ }
208
+ }
209
+
210
+ input[type="radio"] {
211
+ & + label {
212
+ &:before {
213
+ border-radius: 100%;
214
+ }
215
+ }
216
+ }
217
+
218
+ ::-webkit-input-placeholder {
219
+ color: _palette(fg-light) !important;
220
+ opacity: 1.0;
221
+ }
222
+
223
+ :-moz-placeholder {
224
+ color: _palette(fg-light) !important;
225
+ opacity: 1.0;
226
+ }
227
+
228
+ ::-moz-placeholder {
229
+ color: _palette(fg-light) !important;
230
+ opacity: 1.0;
231
+ }
232
+
233
+ :-ms-input-placeholder {
234
+ color: _palette(fg-light) !important;
235
+ opacity: 1.0;
236
+ }
assets/sass/components/_icon.scss ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Icon */
8
+
9
+ .icon {
10
+ @include icon;
11
+ border-bottom: none;
12
+ position: relative;
13
+
14
+ > .label {
15
+ display: none;
16
+ }
17
+
18
+ &:before {
19
+ line-height: inherit;
20
+ }
21
+
22
+ &.solid {
23
+ &:before {
24
+ font-weight: 900;
25
+ }
26
+ }
27
+
28
+ &.brands {
29
+ &:before {
30
+ font-family: 'Font Awesome 5 Brands';
31
+ }
32
+ }
33
+ }
assets/sass/components/_icons.scss ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Icons */
8
+
9
+ ul.icons {
10
+ cursor: default;
11
+ list-style: none;
12
+ padding-left: 0;
13
+
14
+ li {
15
+ display: inline-block;
16
+ padding: 0 1em 0 0;
17
+
18
+ &:last-child {
19
+ padding-right: 0;
20
+ }
21
+
22
+ .icon {
23
+ &:before {
24
+ font-size: 1.25em;
25
+ }
26
+ }
27
+ }
28
+ }
assets/sass/components/_image.scss ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Image */
8
+
9
+ .image {
10
+ border-radius: _size(border-radius);
11
+ border: 0;
12
+ display: inline-block;
13
+ position: relative;
14
+
15
+ img {
16
+ border-radius: _size(border-radius);
17
+ display: block;
18
+ }
19
+
20
+ &.left,
21
+ &.right {
22
+ max-width: 40%;
23
+
24
+ img {
25
+ width: 100%;
26
+ }
27
+ }
28
+
29
+ &.left {
30
+ float: left;
31
+ padding: 0 1.5em 1em 0;
32
+ top: 0.25em;
33
+ }
34
+
35
+ &.right {
36
+ float: right;
37
+ padding: 0 0 1em 1.5em;
38
+ top: 0.25em;
39
+ }
40
+
41
+ &.fit {
42
+ display: block;
43
+ margin: 0 0 _size(element-margin) 0;
44
+ width: 100%;
45
+
46
+ img {
47
+ width: 100%;
48
+ }
49
+ }
50
+
51
+ &.main {
52
+ display: block;
53
+ margin: 0 0 (_size(element-margin) * 1.5) 0;
54
+ width: 100%;
55
+
56
+ img {
57
+ width: 100%;
58
+ }
59
+ }
60
+ }
assets/sass/components/_list.scss ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* List */
8
+
9
+ ol {
10
+ list-style: decimal;
11
+ margin: 0 0 _size(element-margin) 0;
12
+ padding-left: 1.25em;
13
+
14
+ li {
15
+ padding-left: 0.25em;
16
+ }
17
+ }
18
+
19
+ ul {
20
+ list-style: disc;
21
+ margin: 0 0 _size(element-margin) 0;
22
+ padding-left: 1em;
23
+
24
+ li {
25
+ padding-left: 0.5em;
26
+ }
27
+
28
+ &.alt {
29
+ list-style: none;
30
+ padding-left: 0;
31
+
32
+ li {
33
+ border-top: solid 1px _palette(border);
34
+ padding: 0.5em 0;
35
+
36
+ &:first-child {
37
+ border-top: 0;
38
+ padding-top: 0;
39
+ }
40
+ }
41
+ }
42
+ }
43
+
44
+ dl {
45
+ margin: 0 0 _size(element-margin) 0;
46
+
47
+ dt {
48
+ display: block;
49
+ font-weight: _font(weight-bold);
50
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
51
+ }
52
+
53
+ dd {
54
+ margin-left: _size(element-margin);
55
+ }
56
+ }
assets/sass/components/_pagination.scss ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Pagination */
8
+
9
+ ul.pagination {
10
+ cursor: default;
11
+ list-style: none;
12
+ padding-left: 0;
13
+
14
+ li {
15
+ display: inline-block;
16
+ padding-left: 0;
17
+ vertical-align: middle;
18
+
19
+ > .page {
20
+ @include vendor('transition', (
21
+ 'background-color #{_duration(transition)} ease-in-out',
22
+ 'color #{_duration(transition)} ease-in-out'
23
+ ));
24
+ border-bottom: 0;
25
+ border-radius: _size(border-radius);
26
+ display: inline-block;
27
+ height: 1.5em;
28
+ line-height: 1.5em;
29
+ margin: 0 0.125em;
30
+ min-width: 1.5em;
31
+ padding: 0 0.5em;
32
+ text-align: center;
33
+
34
+ &:hover {
35
+ background-color: _palette(border-bg);
36
+ }
37
+
38
+ &.active {
39
+ background-color: _palette(accent);
40
+ }
41
+ }
42
+
43
+ &:first-child {
44
+ padding-right: 0.75em;
45
+ }
46
+
47
+ &:last-child {
48
+ padding-left: 0.75em;
49
+ }
50
+ }
51
+
52
+ @include breakpoint('<=xsmall') {
53
+ li {
54
+ &:nth-child(n+2):nth-last-child(n+2) {
55
+ display: none;
56
+ }
57
+
58
+ .button {
59
+ width: 100%;
60
+ }
61
+
62
+ &:first-child {
63
+ width: calc(50% - 2px);
64
+ text-align: left;
65
+ padding-right: 0.325em;
66
+ }
67
+
68
+ &:last-child {
69
+ width: calc(50% - 2px);
70
+ text-align: right;
71
+ padding-left: 0.325em;
72
+ }
73
+ }
74
+ }
75
+ }
assets/sass/components/_row.scss ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Row */
8
+
9
+ .row {
10
+ @include html-grid(1.75em);
11
+
12
+ @include breakpoint('<=xlarge') {
13
+ @include html-grid(1.75em, xlarge);
14
+ }
15
+
16
+ @include breakpoint('<=large') {
17
+ @include html-grid(1.75em, large);
18
+ }
19
+
20
+ @include breakpoint('<=medium') {
21
+ @include html-grid(1.75em, medium);
22
+ }
23
+
24
+ @include breakpoint('<=small') {
25
+ @include html-grid(1.25em, small);
26
+ }
27
+
28
+ @include breakpoint('<=xsmall') {
29
+ @include html-grid(1.25em, xsmall);
30
+ }
31
+
32
+ @include breakpoint('<=xxsmall') {
33
+ @include html-grid(1.25em, xxsmall);
34
+ }
35
+ }
assets/sass/components/_section.scss ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Section/Article */
8
+
9
+ section, article {
10
+ &.special {
11
+ text-align: center;
12
+ }
13
+ }
assets/sass/components/_table.scss ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ///
2
+ /// Solid State by HTML5 UP
3
+ /// html5up.net | @ajlkn
4
+ /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5
+ ///
6
+
7
+ /* Table */
8
+
9
+ .table-wrapper {
10
+ -webkit-overflow-scrolling: touch;
11
+ overflow-x: auto;
12
+ }
13
+
14
+ table {
15
+ margin: 0 0 _size(element-margin) 0;
16
+ width: 100%;
17
+
18
+ tbody {
19
+ tr {
20
+ border: solid 1px _palette(border);
21
+ border-left: 0;
22
+ border-right: 0;
23
+
24
+ &:nth-child(2n + 1) {
25
+ background-color: _palette(border-bg);
26
+ }
27
+ }
28
+ }
29
+
30
+ td {
31
+ padding: 0.75em 0.75em;
32
+ }
33
+
34
+ th {
35
+ color: _palette(fg-bold);
36
+ font-size: 0.9em;
37
+ font-weight: _font(weight-bold);
38
+ padding: 0 0.75em 0.75em 0.75em;
39
+ text-align: left;
40
+ }
41
+
42
+ thead {
43
+ border-bottom: solid 2px _palette(border);
44
+ }
45
+
46
+ tfoot {
47
+ border-top: solid 2px _palette(border);
48
+ }
49
+
50
+ &.alt {
51
+ border-collapse: separate;
52
+
53
+ tbody {
54
+ tr {
55
+ td {
56
+ border: solid 1px _palette(border);
57
+ border-left-width: 0;
58
+ border-top-width: 0;
59
+
60
+ &:first-child {
61
+ border-left-width: 1px;
62
+ }
63
+ }
64
+
65
+ &:first-child {
66
+ td {
67
+ border-top-width: 1px;
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ thead {
74
+ border-bottom: 0;
75
+ }
76
+
77
+ tfoot {
78
+ border-top: 0;
79
+ }
80
+ }
81
+ }