jekyll-theme-fica 0.2.0 → 0.3.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.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  3. data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  4. data/.github/workflows/ci.yaml +5 -2
  5. data/.github/workflows/ci.yaml.orig +34 -0
  6. data/404.html +12 -10
  7. data/License.md +2 -8
  8. data/README.md +53 -49
  9. data/_includes/Footer.html +88 -85
  10. data/_includes/Head.html +24 -12
  11. data/_includes/Header.html +21 -34
  12. data/_includes/assets/BTT.html +8 -0
  13. data/_includes/{Google-Analytics.html → assets/Google-Analytics.html} +12 -12
  14. data/_includes/assets/anchor-headings.html +164 -0
  15. data/_includes/assets/comments.html +16 -0
  16. data/_includes/assets/toc.html +174 -0
  17. data/_layouts/default.html +16 -14
  18. data/_layouts/home.html +25 -67
  19. data/_layouts/page.html +5 -3
  20. data/_layouts/post.html +48 -52
  21. data/_layouts/post_list.html +103 -0
  22. data/_posts/2022-03-31-To-Know-if-the-nav-works.md +9 -8
  23. data/_posts/{2022-04-1-Demo.md → 2022-04-1-Elements-of-Fica-Theme.md} +111 -113
  24. data/_posts/2022-04-5-Getting-Started.md +149 -149
  25. data/_posts/2022-04-6-Creating-a-new-post.md +144 -136
  26. data/_posts/2023-04-24-Fica-Customization.md +43 -0
  27. data/_sass/base.scss +437 -0
  28. data/_sass/{themes/dark theme/highlight.scss → colors/dark-theme/highlight.scss} +362 -362
  29. data/_sass/{themes/dark theme/theme-dark.scss → colors/dark-theme/theme-dark.scss} +132 -142
  30. data/_sass/{themes/light theme/highlight.scss → colors/light-theme/highlight.scss} +198 -198
  31. data/_sass/{themes/light theme/theme-light.scss → colors/light-theme/theme-light.scss} +126 -136
  32. data/_sass/jekyll-theme-fica.scss +1 -8
  33. data/_sass/layouts/Google-fonts.scss +103 -138
  34. data/_sass/layouts/component.scss +272 -0
  35. data/_sass/layouts/layout.scss +657 -718
  36. data/_sass/layouts/typography.scss +492 -0
  37. data/_sass/layouts/variable.scss +215 -0
  38. data/assets/css/Style.scss +4 -13
  39. data/assets/favicons/android-chrome-192x192.png +0 -0
  40. data/assets/favicons/android-chrome-512x512.png +0 -0
  41. data/assets/favicons/apple-touch-icon.png +0 -0
  42. data/assets/favicons/browserconfig.xml +9 -0
  43. data/assets/favicons/favicon-16x16.png +0 -0
  44. data/assets/favicons/favicon-32x32.png +0 -0
  45. data/assets/favicons/favicon.ico +0 -0
  46. data/assets/favicons/mstile-150x150.png +0 -0
  47. data/assets/favicons/safari-pinned-tab.svg +32 -0
  48. data/assets/favicons/site.webmanifest +19 -0
  49. data/assets/img/homepage-pic.png +0 -0
  50. data/bin/run +195 -150
  51. data/js/Main.js +74 -0
  52. data/js/back-to-top.js +39 -48
  53. data/logo.png +0 -0
  54. data/post/index.html +3 -3
  55. metadata +35 -32
  56. data/_includes/BTT.html +0 -7
  57. data/_layouts/post_home.html +0 -113
  58. data/_sass/custom/styles.scss +0 -1
  59. data/_sass/custom/variables.scss +0 -1
  60. data/_sass/layouts/base.scss +0 -579
  61. data/_sass/layouts/variables.scss +0 -230
  62. data/docs/contributing.md +0 -69
data/_sass/layouts/typography.scss ADDED
@@ -0,0 +1,492 @@
1
+ /* Plain typeface */
2
+ $md-ref-typeface-plain: "Noto Sans", sans-serif;
3
+ /* Brand typeface */
4
+ $md-ref-typeface-brand: 'Varela Round', sans-serif;
5
+ /* Bold weight */
6
+ $md-ref-typeface-weight-bold: 700;
7
+ /* Medium weight */
8
+ $md-ref-typeface-weight-medium: 500;
9
+ /* Regular weight */
10
+ $md-ref-typeface-weight-regular: 400;
11
+ /* Display Small font name */
12
+ $md-sys-typescale-display-small-font: $md-ref-typeface-brand;
13
+ /* Display Medium */
14
+ $md-sys-typescale-display-medium-text-transform: unset;
15
+ $md-sys-typescale-display-medium-axis-value: unset;
16
+ $md-sys-typescale-display-medium-font-style: unset;
17
+ $md-sys-typescale-display-medium-text-decoration: unset;
18
+ /* Display Medium line height */
19
+ $md-sys-typescale-display-medium-line-height-value: 52px;
20
+ $md-sys-typescale-display-medium-line-height-unit: 2px;
21
+ $md-sys-typescale-display-medium-line-height: 52px;
22
+ /* Display Medium font tracking */
23
+ $md-sys-typescale-display-medium-tracking-value: 0px;
24
+ $md-sys-typescale-display-medium-tracking-unit: 2px;
25
+ $md-sys-typescale-display-medium-tracking: 0px;
26
+ /* Display Medium font size */
27
+ $md-sys-typescale-display-medium-size-value: 45px;
28
+ $md-sys-typescale-display-medium-size-unit: 2px;
29
+ $md-sys-typescale-display-medium-size: 52px;
30
+ /* Display Medium font weight */
31
+ $md-sys-typescale-display-medium-weight: $md-ref-typeface-weight-regular;
32
+ /* Display Medium font name */
33
+ $md-sys-typescale-display-medium-font: $md-ref-typeface-brand;
34
+ /* Display Large */
35
+ $md-sys-typescale-display-large-text-transform: unset;
36
+ $md-sys-typescale-display-large-axis-value: unset;
37
+ $md-sys-typescale-display-large-font-style: unset;
38
+ $md-sys-typescale-display-large-text-decoration: unset;
39
+ /* Display Large line height */
40
+ $md-sys-typescale-display-large-line-height-value: 64px;
41
+ $md-sys-typescale-display-large-line-height-unit: 2px;
42
+ $md-sys-typescale-display-large-line-height: 64px;
43
+ /* Display Large font tracking */
44
+ $md-sys-typescale-display-large-tracking-value: -0.25px;
45
+ $md-sys-typescale-display-large-tracking-unit: 2px;
46
+ $md-sys-typescale-display-large-tracking: -0.25px;
47
+ /* Display Large font size */
48
+ $md-sys-typescale-display-large-size-value: 57px;
49
+ $md-sys-typescale-display-large-size-unit: 2px;
50
+ $md-sys-typescale-display-large-size: 64px;
51
+ /* Display Large font weight */
52
+ $md-sys-typescale-display-large-weight: $md-ref-typeface-weight-regular;
53
+ /* Display Large font name */
54
+ $md-sys-typescale-display-large-font: $md-ref-typeface-brand;
55
+
56
+ /* Label Small */
57
+ $md-sys-typescale-label-small-text-transform: unset;
58
+ $md-sys-typescale-label-small-axis-value: unset;
59
+ $md-sys-typescale-label-small-font-style: unset;
60
+ $md-sys-typescale-label-small-text-decoration: unset;
61
+ /* Label Small line height */
62
+ $md-sys-typescale-label-small-line-height-value: 16px;
63
+ $md-sys-typescale-label-small-line-height-unit: 2px;
64
+ $md-sys-typescale-label-small-line-height: 16px;
65
+ /* Label Small font tracking */
66
+ $md-sys-typescale-label-small-tracking-value: 0.5px;
67
+ $md-sys-typescale-label-small-tracking-unit: 2px;
68
+ $md-sys-typescale-label-small-tracking: 0.5px;
69
+ /* Label Small font size */
70
+ $md-sys-typescale-label-small-size-value: 11px;
71
+ $md-sys-typescale-label-small-size-unit: 2px;
72
+ $md-sys-typescale-label-small-size: 16px;
73
+ /* Label Small font weight */
74
+ $md-sys-typescale-label-small-weight: $md-ref-typeface-weight-medium;
75
+ /* Label Small font name */
76
+ $md-sys-typescale-label-small-font: $md-ref-typeface-plain;
77
+ /* Label Medium */
78
+ $md-sys-typescale-label-medium-axis-value: unset;
79
+ $md-sys-typescale-label-medium-font-style: unset;
80
+ $md-sys-typescale-label-medium-text-decoration: unset;
81
+ /* Label Medium text transform */
82
+ $md-sys-typescale-label-medium-text-transform: 1;
83
+ /* Label Medium line height */
84
+ $md-sys-typescale-label-medium-line-height-value: 16px;
85
+ $md-sys-typescale-label-medium-line-height-unit: 2px;
86
+ $md-sys-typescale-label-medium-line-height: 16px;
87
+ /* Label Medium font tracking */
88
+ $md-sys-typescale-label-medium-tracking-value: 0.5px;
89
+ $md-sys-typescale-label-medium-tracking-unit: 2px;
90
+ $md-sys-typescale-label-medium-tracking: 0.5px;
91
+ /* Label Medium font size */
92
+ $md-sys-typescale-label-medium-size-value: 12px;
93
+ $md-sys-typescale-label-medium-size-unit: 2px;
94
+ $md-sys-typescale-label-medium-size: 16px;
95
+ /* Label Medium font weight */
96
+ $md-sys-typescale-label-medium-weight: $md-ref-typeface-weight-medium;
97
+ /* Label Medium font name */
98
+ $md-sys-typescale-label-medium-font: $md-ref-typeface-plain;
99
+ /* Label Large */
100
+ $md-sys-typescale-label-large-text-transform: unset;
101
+ $md-sys-typescale-label-large-axis-value: unset;
102
+ $md-sys-typescale-label-large-font-style: unset;
103
+ $md-sys-typescale-label-large-text-decoration: unset;
104
+ /* Label Large line height */
105
+ $md-sys-typescale-label-large-line-height-value: 20px;
106
+ $md-sys-typescale-label-large-line-height-unit: 2px;
107
+ $md-sys-typescale-label-large-line-height: 20px;
108
+ /* Label Large font tracking */
109
+ $md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
110
+ $md-sys-typescale-label-large-tracking-unit: 2px;
111
+ $md-sys-typescale-label-large-tracking: 0.10000000149011612px;
112
+ /* Label Large font size */
113
+ $md-sys-typescale-label-large-size-value: 14px;
114
+ $md-sys-typescale-label-large-size-unit: 2px;
115
+ $md-sys-typescale-label-large-size: 20px;
116
+ /* Label Large font weight */
117
+ $md-sys-typescale-label-large-weight: $md-ref-typeface-weight-medium;
118
+ /* Label Large font name */
119
+ $md-sys-typescale-label-large-font: $md-ref-typeface-plain;
120
+ /* Body Small */
121
+ $md-sys-typescale-body-small-text-transform: unset;
122
+ $md-sys-typescale-body-small-axis-value: unset;
123
+ $md-sys-typescale-body-small-font-style: unset;
124
+ $md-sys-typescale-body-small-text-decoration: unset;
125
+ /* Body Small line height */
126
+ $md-sys-typescale-body-small-line-height-value: 16px;
127
+ $md-sys-typescale-body-small-line-height-unit: 2px;
128
+ $md-sys-typescale-body-small-line-height: 16px;
129
+ /* Body Small font tracking */
130
+ $md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
131
+ $md-sys-typescale-body-small-tracking-unit: 2px;
132
+ $md-sys-typescale-body-small-tracking: 0.4000000059604645px;
133
+ /* Body Small font size */
134
+ $md-sys-typescale-body-small-size-value: 12px;
135
+ $md-sys-typescale-body-small-size-unit: 2px;
136
+ $md-sys-typescale-body-small-size: 16px;
137
+ /* Body Small font weight */
138
+ $md-sys-typescale-body-small-weight: $md-ref-typeface-weight-regular;
139
+ /* Body Small font name */
140
+ $md-sys-typescale-body-small-font: $md-ref-typeface-plain;
141
+ /* Body Medium */
142
+ $md-sys-typescale-body-medium-text-transform: unset;
143
+ $md-sys-typescale-body-medium-axis-value: unset;
144
+ $md-sys-typescale-body-medium-font-style: unset;
145
+ $md-sys-typescale-body-medium-text-decoration: unset;
146
+ /* Body Medium line height */
147
+ $md-sys-typescale-body-medium-line-height-value: 20px;
148
+ $md-sys-typescale-body-medium-line-height-unit: 2px;
149
+ $md-sys-typescale-body-medium-line-height: 20px;
150
+ /* Body Medium font tracking */
151
+ $md-sys-typescale-body-medium-tracking-value: 0.25px;
152
+ $md-sys-typescale-body-medium-tracking-unit: 2px;
153
+ $md-sys-typescale-body-medium-tracking: 0.25px;
154
+ /* Body Medium font size */
155
+ $md-sys-typescale-body-medium-size-value: 14px;
156
+ $md-sys-typescale-body-medium-size-unit: 2px;
157
+ $md-sys-typescale-body-medium-size: 20px;
158
+ /* Body Medium font weight */
159
+ $md-sys-typescale-body-medium-weight: $md-ref-typeface-weight-regular;
160
+ /* Body Medium font name */
161
+ $md-sys-typescale-body-medium-font: $md-ref-typeface-plain;
162
+ /* Body Large */
163
+ $md-sys-typescale-body-large-text-transform: unset;
164
+ $md-sys-typescale-body-large-axis-value: unset;
165
+ $md-sys-typescale-body-large-font-style: unset;
166
+ $md-sys-typescale-body-large-text-decoration: unset;
167
+ /* Body Large line height */
168
+ $md-sys-typescale-body-large-line-height-value: 24px;
169
+ $md-sys-typescale-body-large-line-height-unit: 2px;
170
+ $md-sys-typescale-body-large-line-height: 24px;
171
+ /* Body Large font tracking */
172
+ $md-sys-typescale-body-large-tracking-value: 0.5px;
173
+ $md-sys-typescale-body-large-tracking-unit: 2px;
174
+ $md-sys-typescale-body-large-tracking: 0.5px;
175
+ /* Body Large font size */
176
+ $md-sys-typescale-body-large-size-value: 16px;
177
+ $md-sys-typescale-body-large-size-unit: 2px;
178
+ $md-sys-typescale-body-large-size: 24px;
179
+ /* Body Large font weight */
180
+ $md-sys-typescale-body-large-weight: $md-ref-typeface-weight-regular;
181
+ /* Body Large font name */
182
+ $md-sys-typescale-body-large-font: $md-ref-typeface-plain;
183
+ /* Title Small */
184
+ $md-sys-typescale-title-small-text-transform: unset;
185
+ $md-sys-typescale-title-small-axis-value: unset;
186
+ $md-sys-typescale-title-small-font-style: unset;
187
+ $md-sys-typescale-title-small-text-decoration: unset;
188
+ /* Title Small line height */
189
+ $md-sys-typescale-title-small-line-height-value: 20px;
190
+ $md-sys-typescale-title-small-line-height-unit: 2px;
191
+ $md-sys-typescale-title-small-line-height: 20px;
192
+ /* Title Small font tracking */
193
+ $md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
194
+ $md-sys-typescale-title-small-tracking-unit: 2px;
195
+ $md-sys-typescale-title-small-tracking: 0.10000000149011612px;
196
+ /* Title Small font size */
197
+ $md-sys-typescale-title-small-size-value: 14px;
198
+ $md-sys-typescale-title-small-size-unit: 2px;
199
+ $md-sys-typescale-title-small-size: 20px;
200
+ /* Title Small font weight */
201
+ $md-sys-typescale-title-small-weight: $md-ref-typeface-weight-medium;
202
+ /* Title Small font name */
203
+ $md-sys-typescale-title-small-font: $md-ref-typeface-plain;
204
+ /* Title Medium */
205
+ $md-sys-typescale-title-medium-text-transform: unset;
206
+ $md-sys-typescale-title-medium-axis-value: unset;
207
+ $md-sys-typescale-title-medium-font-style: unset;
208
+ $md-sys-typescale-title-medium-text-decoration: unset;
209
+ /* Title Medium line height */
210
+ $md-sys-typescale-title-medium-line-height-value: 24px;
211
+ $md-sys-typescale-title-medium-line-height-unit: 2px;
212
+ $md-sys-typescale-title-medium-line-height: 24px;
213
+ /* Title Medium font tracking */
214
+ $md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
215
+ $md-sys-typescale-title-medium-tracking-unit: 2px;
216
+ $md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
217
+ /* Title Medium font size */
218
+ $md-sys-typescale-title-medium-size-value: 16px;
219
+ $md-sys-typescale-title-medium-size-unit: 2px;
220
+ $md-sys-typescale-title-medium-size: 24px;
221
+ /* Title Medium font weight */
222
+ $md-sys-typescale-title-medium-weight: $md-ref-typeface-weight-medium;
223
+ /* Title Medium font name */
224
+ $md-sys-typescale-title-medium-font: $md-ref-typeface-plain;
225
+ /* Title Large */
226
+ $md-sys-typescale-title-large-text-transform: unset;
227
+ $md-sys-typescale-title-large-axis-value: unset;
228
+ $md-sys-typescale-title-large-font-style: unset;
229
+ $md-sys-typescale-title-large-text-decoration: unset;
230
+ /* Title Large line height */
231
+ $md-sys-typescale-title-large-line-height-value: 28px;
232
+ $md-sys-typescale-title-large-line-height-unit: 2px;
233
+ $md-sys-typescale-title-large-line-height: 28px;
234
+ /* Title Large font tracking */
235
+ $md-sys-typescale-title-large-tracking-value: 0px;
236
+ $md-sys-typescale-title-large-tracking-unit: 2px;
237
+ $md-sys-typescale-title-large-tracking: 0px;
238
+ /* Title Large font size */
239
+ $md-sys-typescale-title-large-size-value: 22px;
240
+ $md-sys-typescale-title-large-size-unit: 2px;
241
+ $md-sys-typescale-title-large-size: 28px;
242
+ /* Title Large font weight */
243
+ $md-sys-typescale-title-large-weight: $md-ref-typeface-weight-regular;
244
+ /* Title Large font name */
245
+ $md-sys-typescale-title-large-font: $md-ref-typeface-brand;
246
+ /* Headline Small */
247
+ $md-sys-typescale-headline-small-text-transform: unset;
248
+ $md-sys-typescale-headline-small-axis-value: unset;
249
+ $md-sys-typescale-headline-small-font-style: unset;
250
+ $md-sys-typescale-headline-small-text-decoration: unset;
251
+ /* Headline Small line height */
252
+ $md-sys-typescale-headline-small-line-height-value: 32px;
253
+ $md-sys-typescale-headline-small-line-height-unit: 2px;
254
+ $md-sys-typescale-headline-small-line-height: 32px;
255
+ /* Headline Small font tracking */
256
+ $md-sys-typescale-headline-small-tracking-value: 0px;
257
+ $md-sys-typescale-headline-small-tracking-unit: 2px;
258
+ $md-sys-typescale-headline-small-tracking: 0px;
259
+ /* Headline Small font size */
260
+ $md-sys-typescale-headline-small-size-value: 24px;
261
+ $md-sys-typescale-headline-small-size-unit: 2px;
262
+ $md-sys-typescale-headline-small-size: 32px;
263
+ /* Headline Small font weight */
264
+ $md-sys-typescale-headline-small-weight: $md-ref-typeface-weight-regular;
265
+ /* Headline Small font name */
266
+ $md-sys-typescale-headline-small-font: $md-ref-typeface-brand;
267
+ /* Headline Medium */
268
+ $md-sys-typescale-headline-medium-text-transform: unset;
269
+ $md-sys-typescale-headline-medium-axis-value: unset;
270
+ $md-sys-typescale-headline-medium-font-style: unset;
271
+ $md-sys-typescale-headline-medium-text-decoration: unset;
272
+ /* Headline Medium line height */
273
+ $md-sys-typescale-headline-medium-line-height-value: 36px;
274
+ $md-sys-typescale-headline-medium-line-height-unit: 2px;
275
+ $md-sys-typescale-headline-medium-line-height: 36px;
276
+ /* Headline Medium font tracking */
277
+ $md-sys-typescale-headline-medium-tracking-value: 0px;
278
+ $md-sys-typescale-headline-medium-tracking-unit: 2px;
279
+ $md-sys-typescale-headline-medium-tracking: 0px;
280
+ /* Headline Medium font size */
281
+ $md-sys-typescale-headline-medium-size-value: 28px;
282
+ $md-sys-typescale-headline-medium-size-unit: 2px;
283
+ $md-sys-typescale-headline-medium-size: 36px;
284
+ /* Headline Medium font weight */
285
+ $md-sys-typescale-headline-medium-weight: $md-ref-typeface-weight-regular;
286
+ /* Headline Medium font name */
287
+ $md-sys-typescale-headline-medium-font: $md-ref-typeface-brand;
288
+ /* Headline Large */
289
+ $md-sys-typescale-headline-large-text-transform: unset;
290
+ $md-sys-typescale-headline-large-axis-value: unset;
291
+ $md-sys-typescale-headline-large-font-style: unset;
292
+ $md-sys-typescale-headline-large-text-decoration: unset;
293
+ /* Headline Large line height */
294
+ $md-sys-typescale-headline-large-line-height-value: 40px;
295
+ $md-sys-typescale-headline-large-line-height-unit: 2px;
296
+ $md-sys-typescale-headline-large-line-height: 40px;
297
+ /* Headline Large font tracking */
298
+ $md-sys-typescale-headline-large-tracking-value: 0px;
299
+ $md-sys-typescale-headline-large-tracking-unit: 2px;
300
+ $md-sys-typescale-headline-large-tracking: 0px;
301
+ /* Headline Large font size */
302
+ $md-sys-typescale-headline-large-size-value: 32px;
303
+ $md-sys-typescale-headline-large-size-unit: 2px;
304
+ $md-sys-typescale-headline-large-size: 40px;
305
+ /* Headline Large font name */
306
+ $md-sys-typescale-headline-large-font: $md-ref-typeface-brand;
307
+ /* Headline Large font weight */
308
+ $md-sys-typescale-headline-large-weight: $md-ref-typeface-weight-regular;
309
+ /* Display Small */
310
+ $md-sys-typescale-display-small-text-transform: unset;
311
+ $md-sys-typescale-display-small-axis-value: unset;
312
+ $md-sys-typescale-display-small-font-style: unset;
313
+ $md-sys-typescale-display-small-text-decoration: unset;
314
+ /* Display Small line height */
315
+ $md-sys-typescale-display-small-line-height-value: 44px;
316
+ $md-sys-typescale-display-small-line-height-unit: 2px;
317
+ $md-sys-typescale-display-small-line-height: 44px;
318
+ /* Display Small font tracking */
319
+ $md-sys-typescale-display-small-tracking-value: 0px;
320
+ $md-sys-typescale-display-small-tracking-unit: 2px;
321
+ $md-sys-typescale-display-small-tracking: 0px;
322
+ /* Display Small font size */
323
+ $md-sys-typescale-display-small-size-value: 36px;
324
+ $md-sys-typescale-display-small-size-unit: 2px;
325
+ $md-sys-typescale-display-small-size: 44px;
326
+ /* Display Small font weight */
327
+ $md-sys-typescale-display-small-weight: $md-ref-typeface-weight-regular;
328
+ /* Label Small */
329
+ @mixin label-small {
330
+ font-family: $md-sys-typescale-label-small-font;
331
+ font-weight: $md-sys-typescale-label-small-weight;
332
+ font-size: $md-sys-typescale-label-small-size;
333
+ font-style: $md-sys-typescale-label-small-font-style;
334
+ letter-spacing: $md-sys-typescale-label-small-tracking;
335
+ line-height: $md-sys-typescale-label-small-line-height;
336
+ text-transform: $md-sys-typescale-label-small-text-transform;
337
+ text-decoration: $md-sys-typescale-label-small-text-decoration;
338
+ }
339
+ /* Label Medium */
340
+ @mixin label-medium {
341
+ font-family: $md-sys-typescale-label-medium-font;
342
+ font-weight: $md-sys-typescale-label-medium-weight;
343
+ font-size: $md-sys-typescale-label-medium-size;
344
+ font-style: $md-sys-typescale-label-medium-font-style;
345
+ letter-spacing: $md-sys-typescale-label-medium-tracking;
346
+ line-height: $md-sys-typescale-label-medium-line-height;
347
+ text-transform: $md-sys-typescale-label-medium-text-transform;
348
+ text-decoration: $md-sys-typescale-label-medium-text-decoration;
349
+ }
350
+ /* Label Large */
351
+ @mixin label-large {
352
+ font-family: $md-sys-typescale-label-large-font;
353
+ font-weight: $md-sys-typescale-label-large-weight;
354
+ font-size: $md-sys-typescale-label-large-size;
355
+ font-style: $md-sys-typescale-label-large-font-style;
356
+ letter-spacing: $md-sys-typescale-label-large-tracking;
357
+ line-height: $md-sys-typescale-label-large-line-height;
358
+ text-transform: $md-sys-typescale-label-large-text-transform;
359
+ text-decoration: $md-sys-typescale-label-large-text-decoration;
360
+ }
361
+ /* Body Small */
362
+ @mixin body-small {
363
+ font-family: $md-sys-typescale-body-small-font;
364
+ font-weight: $md-sys-typescale-body-small-weight;
365
+ font-size: $md-sys-typescale-body-small-size;
366
+ font-style: $md-sys-typescale-body-small-font-style;
367
+ letter-spacing: $md-sys-typescale-body-small-tracking;
368
+ line-height: $md-sys-typescale-body-small-line-height;
369
+ text-transform: $md-sys-typescale-body-small-text-transform;
370
+ text-decoration: $md-sys-typescale-body-small-text-decoration;
371
+ }
372
+ /* Body Medium */
373
+ @mixin body-medium {
374
+ font-family: $md-sys-typescale-body-medium-font;
375
+ font-weight: $md-sys-typescale-body-medium-weight;
376
+ font-size: $md-sys-typescale-body-medium-size;
377
+ font-style: $md-sys-typescale-body-medium-font-style;
378
+ letter-spacing: $md-sys-typescale-body-medium-tracking;
379
+ line-height: $md-sys-typescale-body-medium-line-height;
380
+ text-transform: $md-sys-typescale-body-medium-text-transform;
381
+ text-decoration: $md-sys-typescale-body-medium-text-decoration;
382
+ }
383
+ /* Body Large */
384
+ @mixin body-large {
385
+ font-family: $md-sys-typescale-body-large-font;
386
+ font-weight: $md-sys-typescale-body-large-weight;
387
+ font-size: $md-sys-typescale-body-large-size;
388
+ font-style: $md-sys-typescale-body-large-font-style;
389
+ letter-spacing: $md-sys-typescale-body-large-tracking;
390
+ line-height: $md-sys-typescale-body-large-line-height;
391
+ text-transform: $md-sys-typescale-body-large-text-transform;
392
+ text-decoration: $md-sys-typescale-body-large-text-decoration;
393
+ }
394
+ /* Title Small */
395
+ @mixin title-small {
396
+ font-family: $md-sys-typescale-title-small-font;
397
+ font-weight: $md-sys-typescale-title-small-weight;
398
+ font-size: $md-sys-typescale-title-small-size;
399
+ font-style: $md-sys-typescale-title-small-font-style;
400
+ letter-spacing: $md-sys-typescale-title-small-tracking;
401
+ line-height: $md-sys-typescale-title-small-line-height;
402
+ text-transform: $md-sys-typescale-title-small-text-transform;
403
+ text-decoration: $md-sys-typescale-title-small-text-decoration;
404
+ }
405
+ /* Title Medium */
406
+ @mixin title-medium {
407
+ font-family: $md-sys-typescale-title-medium-font;
408
+ font-weight: $md-sys-typescale-title-medium-weight;
409
+ font-size: $md-sys-typescale-title-medium-size;
410
+ font-style: $md-sys-typescale-title-medium-font-style;
411
+ letter-spacing: $md-sys-typescale-title-medium-tracking;
412
+ line-height: $md-sys-typescale-title-medium-line-height;
413
+ text-transform: $md-sys-typescale-title-medium-text-transform;
414
+ text-decoration: $md-sys-typescale-title-medium-text-decoration;
415
+ }
416
+ /* Title Large */
417
+ @mixin title-large {
418
+ font-family: $md-sys-typescale-title-large-font;
419
+ font-weight: $md-sys-typescale-title-large-weight;
420
+ font-size: $md-sys-typescale-title-large-size;
421
+ font-style: $md-sys-typescale-title-large-font-style;
422
+ letter-spacing: $md-sys-typescale-title-large-tracking;
423
+ line-height: $md-sys-typescale-title-large-line-height;
424
+ text-transform: $md-sys-typescale-title-large-text-transform;
425
+ text-decoration: $md-sys-typescale-title-large-text-decoration;
426
+ }
427
+ /* Headline Small */
428
+ @mixin headline-small {
429
+ font-family: $md-sys-typescale-headline-small-font;
430
+ font-weight: $md-sys-typescale-headline-small-weight;
431
+ font-size: $md-sys-typescale-headline-small-size;
432
+ font-style: $md-sys-typescale-headline-small-font-style;
433
+ letter-spacing: $md-sys-typescale-headline-small-tracking;
434
+ line-height: $md-sys-typescale-headline-small-line-height;
435
+ text-transform: $md-sys-typescale-headline-small-text-transform;
436
+ text-decoration: $md-sys-typescale-headline-small-text-decoration;
437
+ }
438
+ /* Headline Medium */
439
+ @mixin headline-medium {
440
+ font-family: $md-sys-typescale-headline-medium-font;
441
+ font-weight: $md-sys-typescale-headline-medium-weight;
442
+ font-size: $md-sys-typescale-headline-medium-size;
443
+ font-style: $md-sys-typescale-headline-medium-font-style;
444
+ letter-spacing: $md-sys-typescale-headline-medium-tracking;
445
+ line-height: $md-sys-typescale-headline-medium-line-height;
446
+ text-transform: $md-sys-typescale-headline-medium-text-transform;
447
+ text-decoration: $md-sys-typescale-headline-medium-text-decoration;
448
+ }
449
+ /* Headline Large */
450
+ @mixin headline-large {
451
+ font-family: $md-sys-typescale-headline-large-font;
452
+ font-weight: $md-sys-typescale-headline-large-weight;
453
+ font-size: $md-sys-typescale-headline-large-size;
454
+ font-style: $md-sys-typescale-headline-large-font-style;
455
+ letter-spacing: $md-sys-typescale-headline-large-tracking;
456
+ line-height: $md-sys-typescale-headline-large-line-height;
457
+ text-transform: $md-sys-typescale-headline-large-text-transform;
458
+ text-decoration: $md-sys-typescale-headline-large-text-decoration;
459
+ }
460
+ /* Display Small */
461
+ @mixin display-small {
462
+ font-family: $md-sys-typescale-display-small-font;
463
+ font-weight: $md-sys-typescale-display-small-weight;
464
+ font-size: $md-sys-typescale-display-small-size;
465
+ font-style: $md-sys-typescale-display-small-font-style;
466
+ letter-spacing: $md-sys-typescale-display-small-tracking;
467
+ line-height: $md-sys-typescale-display-small-line-height;
468
+ text-transform: $md-sys-typescale-display-small-text-transform;
469
+ text-decoration: $md-sys-typescale-display-small-text-decoration;
470
+ }
471
+ /* Display Medium */
472
+ @mixin display-medium {
473
+ font-family: $md-sys-typescale-display-medium-font;
474
+ font-weight: $md-sys-typescale-display-medium-weight;
475
+ font-size: $md-sys-typescale-display-medium-size;
476
+ font-style: $md-sys-typescale-display-medium-font-style;
477
+ letter-spacing: $md-sys-typescale-display-medium-tracking;
478
+ line-height: $md-sys-typescale-display-medium-line-height;
479
+ text-transform: $md-sys-typescale-display-medium-text-transform;
480
+ text-decoration: $md-sys-typescale-display-medium-text-decoration;
481
+ }
482
+ /* Display Large */
483
+ @mixin display-large {
484
+ font-family: $md-sys-typescale-display-large-font;
485
+ font-weight: $md-sys-typescale-display-large-weight;
486
+ font-size: $md-sys-typescale-display-large-size;
487
+ font-style: $md-sys-typescale-display-large-font-style;
488
+ letter-spacing: $md-sys-typescale-display-large-tracking;
489
+ line-height: $md-sys-typescale-display-large-line-height;
490
+ text-transform: $md-sys-typescale-display-large-text-transform;
491
+ text-decoration: $md-sys-typescale-display-large-text-decoration;
492
+ }
data/_sass/layouts/variable.scss ADDED
@@ -0,0 +1,215 @@
1
+ //
2
+ // text settings
3
+ //
4
+ $font-family: 'Roboto', sans-serif !default;
5
+ $code-font-family: "Noto Sans", sans-serif !default;
6
+
7
+ $font-size: 17px !default;
8
+ $small-font-size: $font-size * 0.875 !default;
9
+
10
+ $font-weight: 400 !default;
11
+ $font-spacing: 40px !default;
12
+ $line-height: 3.5 !default;
13
+
14
+ //
15
+ // Table
16
+ //
17
+ $table-text-align: left !default;
18
+
19
+ //
20
+ // Site banner
21
+ //
22
+ $site-banner-title-fnt-sze: 50px;
23
+ $site-banner-description-fnt-sze: 18px;
24
+ $site-banner-picture-sze_wdth: 60%;
25
+
26
+ //
27
+ // Transitions
28
+ //
29
+ $transition-btn: all 0.5s ease-in-out;
30
+ $transition-links: all 0.5s ease-in-out;
31
+ $tansitions-page-bar: all 0.3s ease-in-out;
32
+
33
+ //
34
+ // Animations
35
+ //
36
+ $animation-site-pic: 2s; //animations for banner-pic
37
+ $animation-main: 1s; //animations for banner description and the body of the site.
38
+ $animation-left: 250ms;
39
+
40
+ //
41
+ // Content
42
+ //
43
+ $content-width: 800px !default;
44
+
45
+
46
+ $mobile-width: 710px !default;
47
+ $pc-width: 800px !default;
48
+ $medium-width: 442px !default;
49
+
50
+ $Site-Nav-Logo-text-autohide: 560px !default;
51
+
52
+ // //
53
+ // ---------- site queries ---------- //
54
+ // //
55
+
56
+ @mixin media-query($device) {
57
+ @media screen and (max-width: $device) {
58
+ @content;
59
+ }
60
+ }
61
+
62
+ @mixin animation-fade-in($speed) {
63
+ opacity: 0;
64
+ animation: fade-in 1s linear forwards;
65
+ animation-delay: #{$speed}s;
66
+ -webkit-animation-delay: #{$speed}s;
67
+ }
68
+
69
+ @mixin relative-font-size($ratio) {
70
+ font-size: #{$ratio}rem;
71
+ }
72
+
73
+ // //
74
+ //---------- scss mixin --------- //
75
+ // //
76
+
77
+ @mixin text-muted {
78
+ color: $text-mute-color;
79
+ }
80
+
81
+ @mixin text-unmuted {
82
+ color: $text-color;
83
+ }
84
+
85
+ @mixin footer-wrapper {
86
+ margin-bottom: $font-spacing / 2;
87
+ width: calc(18% - (#{$font-spacing} / 2));
88
+ padding: 0 ($font-spacing / 2);
89
+
90
+ &:first-child {
91
+ padding-right: $font-spacing / 2;
92
+ padding-left: 0;
93
+ }
94
+
95
+ &:last-child {
96
+ padding-right: 0;
97
+ padding-left: $font-spacing / 2;
98
+ }
99
+ }
100
+
101
+ @mixin prompt($gf-icon, $gf-color, $bg-color, $fnt-fam) {
102
+ border-radius: 5px;
103
+ padding: 0.8rem 1.2rem;
104
+ font-style: normal;
105
+ color: $text-color;
106
+ border-left: 6px solid $gf-color;
107
+ background-color: $bg-color;
108
+ p {
109
+ line-height: 35px;
110
+ }
111
+
112
+ &::before {
113
+ content: $gf-icon;
114
+ font-family: $fnt-fam;
115
+ color: $gf-color;
116
+ font-size: 34px;
117
+ line-height: 1;
118
+ padding-right: 10px;
119
+ padding-bottom: 13px;
120
+ }
121
+ }
122
+
123
+ @mixin horizontal-scroll {
124
+ &::-webkit-scrollbar {
125
+ height: 16px;
126
+ }
127
+
128
+ &::-webkit-scrollbar-track {
129
+ background-color: transparent;
130
+ }
131
+
132
+ &::-webkit-scrollbar-thumb {
133
+ background: rgba(128, 134, 139, 0.2);
134
+ background-clip: padding-box;
135
+ border: 4px solid transparent;
136
+ border-radius: 10px;
137
+ box-sizing: border-box;
138
+
139
+ &:hover {
140
+ background: rgba(128, 134, 139, 0.4);
141
+ box-sizing: border-box;
142
+ background-clip: padding-box;
143
+ }
144
+ }
145
+ }
146
+
147
+ // //
148
+ //---------- Animations --------- //
149
+ // //
150
+
151
+ @keyframes left-animation {
152
+ from {
153
+ opacity: 0;
154
+ transform: translate3d(100%, 0, 0);
155
+ }
156
+
157
+ to {
158
+ opacity: 1;
159
+ transform: translate3d(0, 0, 0);
160
+ }
161
+ }
162
+
163
+ @keyframes BTT-Entrance {
164
+ from {
165
+ opacity: 0;
166
+ transform: translate3d(0, 100%, 0);
167
+ }
168
+
169
+ to {
170
+ opacity: 1;
171
+ transform: translate3d(0, 0, 0);
172
+ }
173
+ }
174
+
175
+ @keyframes BTT-Exit {
176
+ from {
177
+ opacity: 1;
178
+ }
179
+
180
+ to {
181
+ opacity: 0;
182
+ transform: translate3d(0, 100%, 0);
183
+ }
184
+ }
185
+
186
+ @keyframes slide {
187
+ 100% {
188
+ transform: translateX(0);
189
+ }
190
+ }
191
+
192
+ @keyframes slide-up {
193
+ 100% {
194
+ opacity: 1;
195
+ transform: translateY(0);
196
+ }
197
+ }
198
+
199
+ @keyframes fade-in {
200
+ from {
201
+ opacity: 0;
202
+ }
203
+ to {
204
+ opacity: 1;
205
+ }
206
+ }
207
+ @keyframes fade-out {
208
+ from {
209
+ opacity: 1;
210
+ }
211
+ to {
212
+ opacity: 0;
213
+ }
214
+ }
215
+