jekyll-theme-backwhite 1.0.4 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/{LICENSE.txt → LICENSE} +0 -0
  3. data/README.md +1 -1
  4. data/_config.yml +39 -0
  5. data/_includes/back.html +48 -16
  6. data/_includes/head.html +11 -3
  7. data/_layouts/centered.html +12 -0
  8. data/_layouts/default.html +6 -5
  9. data/_layouts/page.html +10 -0
  10. data/_layouts/post-index.html +30 -0
  11. data/_layouts/post.html +5 -9
  12. data/_sass/fontawesome/_animated.scss +20 -20
  13. data/_sass/fontawesome/_bordered-pulled.scss +20 -20
  14. data/_sass/fontawesome/_core.scss +21 -21
  15. data/_sass/fontawesome/_fixed-width.scss +6 -6
  16. data/_sass/fontawesome/_icons.scss +1410 -1410
  17. data/_sass/fontawesome/_larger.scss +23 -23
  18. data/_sass/fontawesome/_list.scss +18 -18
  19. data/_sass/fontawesome/_mixins.scss +56 -56
  20. data/_sass/fontawesome/_rotated-flipped.scss +24 -24
  21. data/_sass/fontawesome/_screen-reader.scss +5 -5
  22. data/_sass/fontawesome/_shims.scss +2066 -2066
  23. data/_sass/fontawesome/_stacked.scss +31 -31
  24. data/_sass/fontawesome/_variables.scss +1427 -1427
  25. data/_sass/fontawesome/brands.scss +23 -23
  26. data/_sass/fontawesome/fontawesome.scss +16 -16
  27. data/_sass/fontawesome/regular.scss +23 -23
  28. data/_sass/fontawesome/solid.scss +24 -24
  29. data/_sass/fontawesome/v4-shims.scss +6 -6
  30. data/_sass/jekyll-theme-backwhite.scss +3 -1
  31. data/_sass/jekyll-theme-backwhite/_back.scss +2 -11
  32. data/_sass/jekyll-theme-backwhite/_base.scss +15 -18
  33. data/_sass/jekyll-theme-backwhite/_front.scss +15 -3
  34. data/_sass/jekyll-theme-backwhite/_links.scss +25 -0
  35. data/_sass/jekyll-theme-backwhite/_misc.scss +126 -6
  36. data/_sass/jekyll-theme-backwhite/_mixins.scss +5 -0
  37. data/_sass/jekyll-theme-backwhite/_post-index.scss +36 -0
  38. data/_sass/jekyll-theme-backwhite/_variables-and-fonts.scss +9 -2
  39. data/assets/fonts/fa-brands-400.svg +3570 -3570
  40. data/assets/fonts/fa-regular-400.svg +803 -803
  41. data/assets/fonts/fa-solid-900.svg +4700 -4700
  42. data/assets/js/backwhite.js +36 -10745
  43. metadata +22 -17
  44. data/assets/js/backwhite.js.map +0 -1
@@ -1,23 +1,23 @@
1
- /*!
2
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
- */
5
- @import 'variables';
6
-
7
- @font-face {
8
- font-family: 'Font Awesome 5 Brands';
9
- font-style: normal;
10
- font-weight: 400;
11
- font-display: $fa-font-display;
12
- src: url('#{$fa-font-path}/fa-brands-400.eot');
13
- src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
14
- url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
15
- url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
16
- url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
17
- url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
18
- }
19
-
20
- .fab {
21
- font-family: 'Font Awesome 5 Brands';
22
- font-weight: 400;
23
- }
1
+ /*!
2
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ */
5
+ @import 'variables';
6
+
7
+ @font-face {
8
+ font-family: 'Font Awesome 5 Brands';
9
+ font-style: normal;
10
+ font-weight: 400;
11
+ font-display: $fa-font-display;
12
+ src: url('#{$fa-font-path}/fa-brands-400.eot');
13
+ src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
14
+ url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
15
+ url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
16
+ url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
17
+ url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
18
+ }
19
+
20
+ .fab {
21
+ font-family: 'Font Awesome 5 Brands';
22
+ font-weight: 400;
23
+ }
@@ -1,16 +1,16 @@
1
- /*!
2
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
- */
5
- @import 'variables';
6
- @import 'mixins';
7
- @import 'core';
8
- @import 'larger';
9
- @import 'fixed-width';
10
- @import 'list';
11
- @import 'bordered-pulled';
12
- @import 'animated';
13
- @import 'rotated-flipped';
14
- @import 'stacked';
15
- @import 'icons';
16
- @import 'screen-reader';
1
+ /*!
2
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ */
5
+ @import 'variables';
6
+ @import 'mixins';
7
+ @import 'core';
8
+ @import 'larger';
9
+ @import 'fixed-width';
10
+ @import 'list';
11
+ @import 'bordered-pulled';
12
+ @import 'animated';
13
+ @import 'rotated-flipped';
14
+ @import 'stacked';
15
+ @import 'icons';
16
+ @import 'screen-reader';
@@ -1,23 +1,23 @@
1
- /*!
2
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
- */
5
- @import 'variables';
6
-
7
- @font-face {
8
- font-family: 'Font Awesome 5 Free';
9
- font-style: normal;
10
- font-weight: 400;
11
- font-display: $fa-font-display;
12
- src: url('#{$fa-font-path}/fa-regular-400.eot');
13
- src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
14
- url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
15
- url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
16
- url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
17
- url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
18
- }
19
-
20
- .far {
21
- font-family: 'Font Awesome 5 Free';
22
- font-weight: 400;
23
- }
1
+ /*!
2
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ */
5
+ @import 'variables';
6
+
7
+ @font-face {
8
+ font-family: 'Font Awesome 5 Free';
9
+ font-style: normal;
10
+ font-weight: 400;
11
+ font-display: $fa-font-display;
12
+ src: url('#{$fa-font-path}/fa-regular-400.eot');
13
+ src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
14
+ url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
15
+ url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
16
+ url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
17
+ url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
18
+ }
19
+
20
+ .far {
21
+ font-family: 'Font Awesome 5 Free';
22
+ font-weight: 400;
23
+ }
@@ -1,24 +1,24 @@
1
- /*!
2
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
- */
5
- @import 'variables';
6
-
7
- @font-face {
8
- font-family: 'Font Awesome 5 Free';
9
- font-style: normal;
10
- font-weight: 900;
11
- font-display: $fa-font-display;
12
- src: url('#{$fa-font-path}/fa-solid-900.eot');
13
- src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
14
- url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
15
- url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
16
- url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
17
- url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
18
- }
19
-
20
- .fa,
21
- .fas {
22
- font-family: 'Font Awesome 5 Free';
23
- font-weight: 900;
24
- }
1
+ /*!
2
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ */
5
+ @import 'variables';
6
+
7
+ @font-face {
8
+ font-family: 'Font Awesome 5 Free';
9
+ font-style: normal;
10
+ font-weight: 900;
11
+ font-display: $fa-font-display;
12
+ src: url('#{$fa-font-path}/fa-solid-900.eot');
13
+ src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
14
+ url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
15
+ url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
16
+ url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
17
+ url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
18
+ }
19
+
20
+ .fa,
21
+ .fas {
22
+ font-family: 'Font Awesome 5 Free';
23
+ font-weight: 900;
24
+ }
@@ -1,6 +1,6 @@
1
- /*!
2
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
- */
5
- @import 'variables';
6
- @import 'shims';
1
+ /*!
2
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ */
5
+ @import 'variables';
6
+ @import 'shims';
@@ -12,4 +12,6 @@ $fa-font-path: "/assets/fonts";
12
12
  @import "jekyll-theme-backwhite/base";
13
13
  @import "jekyll-theme-backwhite/form";
14
14
  @import "jekyll-theme-backwhite/misc";
15
- @import "jekyll-theme-backwhite/syntax-highlighting";
15
+ @import "jekyll-theme-backwhite/syntax-highlighting";
16
+ @import "jekyll-theme-backwhite/post-index";
17
+ @import "jekyll-theme-backwhite/links";
@@ -7,7 +7,7 @@
7
7
  * how it's included in the document.
8
8
  * It is exactly what it says, the
9
9
  * z-axis position of the element */
10
- z-index: -1;
10
+ z-index: 1;
11
11
 
12
12
  /* Back panel sizing. Fill vertically from
13
13
  * top to bottom. Horizontally, start at
@@ -16,6 +16,7 @@
16
16
  left: 0%;
17
17
  bottom: 0%;
18
18
  width: $desktop-menu-size;
19
+ max-width: 100%;
19
20
 
20
21
  // Styling
21
22
  background-color: $back-color;
@@ -55,16 +56,6 @@
55
56
  }
56
57
  }
57
58
 
58
- // Links
59
- .bw-links {
60
- a {
61
- text-decoration: none;
62
- &:hover {
63
- border-bottom: 1px solid;
64
- }
65
- }
66
- }
67
-
68
59
  // Backwhite footer
69
60
  .bw-footer {
70
61
  color: darken($white-color, 25%);
@@ -1,7 +1,6 @@
1
1
  body {
2
2
  font-family: $font-family;
3
3
  font-size: $normal-font-size;
4
- overflow-x: hidden;
5
4
  }
6
5
 
7
6
  a {
@@ -13,27 +12,16 @@ a {
13
12
  }
14
13
  }
15
14
 
16
- h1,h2,h3,h4 {
17
- color: $back-color;
18
- margin: $spacing-unit 0pt;
19
- }
20
- h1 {
21
- display: block;
22
- font-size: $large-font-size;
23
- }
24
- h2 {
25
- display: block;
26
- font-size: $medium-font-size;
27
- }
28
- h3 {
29
- display: block;
30
- font-size: $medium-font-size;
31
- }
32
- p {
15
+ h1,h2,h3,h4,h5,h6,p {
33
16
  display: block;
34
17
  margin-top: $spacing-unit;
35
18
  margin-bottom: $spacing-unit;
36
19
  }
20
+ h1,h2,h3,h4,h5,h6 { color: $back-color; }
21
+ p { font-size: $normal-font-size; }
22
+ h1 { font-size: $mega-font-size; }
23
+ h2,h3 { font-size: $large-font-size; }
24
+ h4,h5,h6 { font-size: $medium-font-size; }
37
25
 
38
26
  ul {
39
27
  display: block;
@@ -101,6 +89,15 @@ blockquote {
101
89
  }
102
90
 
103
91
  img {
92
+ display: block;
93
+ margin: $spacing-unit auto;
104
94
  max-width: 100%;
105
95
  box-shadow: 0px 0pt 8pt darken($white-color, 33%);
96
+ }
97
+
98
+ figure {
99
+ display: block;
100
+ margin: 0pt;
101
+ margin-top: $spacing-unit;
102
+ margin-bottom: $spacing-unit;
106
103
  }
@@ -1,15 +1,21 @@
1
1
  .bw-front {
2
+ // No transition
3
+ transition: none;
4
+
2
5
  // Positioning and sizing
3
6
  position: absolute;
4
7
  top: 0%;
5
8
  left: $desktop-menu-size;
6
9
  right: 0%;
7
10
  min-height: 100%;
11
+ &.slided {
12
+ left: $desktop-menu-size;
13
+ }
8
14
 
9
15
  /* Setting a z-index of 0 to so that
10
16
  * this is in front of the back layer
11
17
  * with a z-index of -1 (see _back.scss) */
12
- z-index: 0;
18
+ z-index: 2;
13
19
 
14
20
  // Only vertical scrolling
15
21
  overflow-x: hidden;
@@ -24,11 +30,17 @@
24
30
 
25
31
  // Mobile
26
32
  @include on-mobile {
27
- // Positioning
33
+ // Animated transition
34
+ transition: left 0.5s ease-in-out;
35
+
36
+ // Positioning and slide handling
28
37
  top: 0%;
29
38
  left: 0%;
30
39
  right: 0%;
31
- margin-left: 0%;
40
+ min-width: 100%;
41
+ &.slided {
42
+ left: 100%;
43
+ }
32
44
  };
33
45
 
34
46
  // Container
@@ -0,0 +1,25 @@
1
+ // Links
2
+ .bw-links {
3
+ display: grid;
4
+ grid-template-columns: repeat(3, 1fr);
5
+ a {
6
+ text-align: center;
7
+ display: inline-block;
8
+ text-decoration: none;
9
+ margin: $spacing-unit;
10
+ }
11
+ }
12
+
13
+ // Social
14
+ .bw-social {
15
+ margin: $spacing-unit 0pt;
16
+ display: flex;
17
+ flex-direction: row;
18
+ justify-content: center;
19
+ align-items: center;
20
+ a {
21
+ flex: 1;
22
+ text-align: center;
23
+ font-size: $back-icon-size;
24
+ }
25
+ }
@@ -1,3 +1,73 @@
1
+ .bw-app {
2
+ position: absolute;
3
+ display: block;
4
+ top: 0%;
5
+ left: 0%;
6
+ max-width: 100%;
7
+ width: 100%;
8
+ min-height: 100%;
9
+ overflow-x: hidden;
10
+ overflow-y: visible;
11
+ }
12
+
13
+ .bw-full-back {
14
+ // Position
15
+ position: absolute;
16
+ top: 0%;
17
+ left: 0%;
18
+ bottom: 0%;
19
+ right: 0%;
20
+
21
+ // Grid Layout
22
+ display: grid;
23
+ grid-template-rows: 1fr;
24
+ grid-template-columns: 1fr;
25
+ place-items: center;
26
+
27
+ // Coloring
28
+ background-color: $back-color;
29
+ color: $white-color;
30
+
31
+ // Container
32
+ .bw-full-back-container {
33
+ // Transform and sizing
34
+ transform: translateY(-25%);
35
+ max-width: 25%;
36
+ margin: 0pt $spacing-unit;
37
+
38
+ @include on-mobile {
39
+ max-width: 75%;
40
+ }
41
+
42
+ // Title
43
+ .bw-full-back-page-title {
44
+ padding: $spacing-unit 0pt;
45
+ color: $white-color;
46
+ border-bottom: 1px solid $white-color;
47
+ }
48
+
49
+ // Content
50
+ .bw-full-back-page-content {
51
+ margin: 2*$spacing-unit 0pt;
52
+ }
53
+
54
+ // Link
55
+ .bw-full-back-page-links {
56
+ display: flex;
57
+ flex-direction: row-reverse;
58
+ .bw-full-back-page-link {
59
+ @extend .bw-border-button;
60
+ border-color: $white-color !important;
61
+ padding: $spacing-unit/2 $spacing-unit !important;
62
+ &:hover {
63
+ background-color: $white-color;
64
+ color: black;
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }
70
+
1
71
  // Hide on desktop, show on mobile
2
72
  .bw-show-on-mobile {
3
73
  display: none;
@@ -6,27 +76,63 @@
6
76
  }
7
77
  }
8
78
 
79
+ // Sizing
80
+ .bw-mega { font-size: $mega-font-size; }
81
+ .bw-large { font-size: $large-font-size; }
82
+ .bw-medium { font-size: $medium-font-size; }
83
+ .bw-normal { font-size: $normal-font-size; }
84
+ .bw-small { font-size: $small-font-size; }
85
+
9
86
  // Basic header with action button availability
10
87
  .bw-header {
88
+ // Flex systme
11
89
  display: flex;
12
- align-items: center;
13
- border-bottom: 1px solid;
90
+ flex-direction: row;
91
+ align-items: stretch;
92
+
93
+ // Spacing and border
14
94
  margin: $spacing-unit 0pt;
95
+ border-bottom: 1px solid;
15
96
 
97
+ // Title button
16
98
  .bw-title {
17
99
  flex: 1;
18
100
  margin: 0;
19
- font-size: $large-font-size;
20
101
  color: inherit;
21
102
  }
22
103
 
104
+ // Action button
23
105
  .bw-action {
24
106
  flex: 0;
25
- background: none;
107
+ background-color: inherit;
26
108
  border: none;
27
109
  color: inherit;
28
- padding: $spacing-unit/2;
29
- margin: $spacing-unit/2;
110
+ padding: $spacing-unit;
111
+ }
112
+ }
113
+
114
+ // Front page header
115
+ .bw-page-header {
116
+ @extend .bw-header;
117
+ align-items: center !important;
118
+
119
+ // Front header action
120
+ .bw-action {
121
+ @include cutout;
122
+ padding: $spacing-unit 4*$spacing-unit/3 !important;
123
+ background-color: $back-color !important;
124
+ color: $white-color !important;
125
+ }
126
+ }
127
+
128
+ // Content gutters
129
+ .bw-content-gutters {
130
+ display: block;
131
+ max-width: $gutters-width;
132
+ margin-left: auto;
133
+ margin-right: auto;
134
+ @include on-tablet {
135
+ max-width: 100%;
30
136
  }
31
137
  }
32
138
 
@@ -56,6 +162,11 @@
56
162
  color: inherit;
57
163
  padding: $spacing-unit;
58
164
  }
165
+ .bw-border-button {
166
+ @extend .bw-text-button;
167
+ border: 1px solid;
168
+ border-color: $back-color;
169
+ }
59
170
  .bw-cutout-button {
60
171
  @include cutout;
61
172
  border: none;
@@ -74,10 +185,19 @@
74
185
  box-shadow: none;
75
186
  }
76
187
  }
188
+ .bw-emph-button {
189
+ @extend .bw-cutout-button;
190
+ }
77
191
 
78
192
  // Cutout section (appears as a recessed section that uses the back color)
79
193
  .bw-cutout {
80
194
  @include block-cutout;
195
+ .bw-border-button {
196
+ border-color: $white-color;
197
+ }
198
+ .bw-emph-button {
199
+ @extend .bw-raised-button;
200
+ }
81
201
  }
82
202
 
83
203
  // Wraps an element with a horizontal scroll bar