jekyll-theme-fica 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
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
+