jekyll-theme-basically-basic 1.0.1 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +31 -14
  3. data/README.md +125 -24
  4. data/_includes/skip-links.html +3 -3
  5. data/_layouts/default.html +42 -38
  6. data/_sass/basically-basic.scss +41 -41
  7. data/_sass/basically-basic/_base.scss +8 -0
  8. data/_sass/basically-basic/_buttons.scss +39 -39
  9. data/_sass/basically-basic/_entries.scss +155 -155
  10. data/_sass/basically-basic/_global.scss +2 -0
  11. data/_sass/basically-basic/_intro.scss +65 -65
  12. data/_sass/basically-basic/_layout.scss +18 -0
  13. data/_sass/basically-basic/_navicons.scss +125 -144
  14. data/_sass/basically-basic/_navigation.scss +15 -0
  15. data/_sass/basically-basic/_print.scss +226 -226
  16. data/_sass/basically-basic/_sidebar.scss +132 -177
  17. data/_sass/basically-basic/_tables.scss +0 -8
  18. data/_sass/basically-basic/utilities/_accessibility.scss +0 -11
  19. data/_sass/basically-basic/utilities/_align.scss +3 -5
  20. data/assets/javascripts/main.js +57 -57
  21. metadata +2 -2
data/_sass/basically-basic/_layout.scss CHANGED
@@ -2,9 +2,23 @@
2
2
  Layout
3
3
  ========================================================================== */
4
4
 
5
+ .canvas {
6
+ position: relative;
7
+ width: 100%;
8
+ overflow: hidden;
9
+ }
10
+
5
11
  .wrapper {
12
+ position: relative;
13
+ width: 100%;
14
+ height: 100%;
6
15
  min-height: 100vh;
16
+ transform: translateX(0);
7
17
  transition: $global-transition;
18
+ background-color: $background-color;
19
+ z-index: 100;
20
+ -webkit-backface-visibility: hidden;
21
+ backface-visibility: hidden;
8
22
  }
9
23
 
10
24
  .intro,
@@ -64,10 +78,13 @@ main {
64
78
  .layout--about {
65
79
 
66
80
  .entry-wrap {
81
+ display: -ms-flexbox;
67
82
  display: flex;
83
+ -ms-flex-wrap: wrap;
68
84
  flex-wrap: wrap;
69
85
 
70
86
  @include breakpoint($medium) {
87
+ -ms-flex-wrap: nowrap;
71
88
  flex-wrap: nowrap;
72
89
  }
73
90
  }
@@ -75,6 +92,7 @@ main {
75
92
  .entry-content {
76
93
 
77
94
  @include breakpoint($medium) {
95
+ -ms-flex: 1;
78
96
  flex: 1;
79
97
  }
80
98
  }
data/_sass/basically-basic/_navicons.scss CHANGED
@@ -1,144 +1,125 @@
1
- /* ==========================================================================
2
- Navicons
3
- ========================================================================== */
4
-
5
- .navicon-button {
6
- display: inline-block;
7
- position: relative;
8
- padding: 1.8125rem 1rem;
9
- transition: $navicon-duration / 2;
10
- background-color: $navicon-nav-bg-close;
11
- cursor: pointer;
12
- -moz-user-select: none;
13
- -ms-user-select: none;
14
- -webkit-user-select: none;
15
- user-select: none;
16
-
17
- @include breakpoint($medium) {
18
- margin-right: 2rem;
19
- }
20
-
21
- @include breakpoint($large) {
22
- margin-right: 5vw;
23
- }
24
-
25
- &.open {
26
- background-color: $navicon-nav-bg-open;
27
- }
28
-
29
- .navicon::before,
30
- .navicon::after {
31
- transition-duration: $navicon-duration / 2;
32
- }
33
-
34
- &:hover {
35
- transition-duration: $navicon-duration;
36
-
37
- .navicon::before,
38
- .navicon::after {
39
- transition-duration: $navicon-duration / 2;
40
- }
41
-
42
- .navicon::before { top: (2.5 * $navicon-height); }
43
- .navicon::after { top: (-2.5 * $navicon-height); }
44
- }
45
- }
46
-
47
- .navicon {
48
- position: relative;
49
- width: $navicon-width;
50
- height: $navicon-height;
51
- transition-duration: $navicon-duration;
52
- border-radius: $navicon-width;
53
- background: $navicon-content-bg;
54
-
55
- &::before,
56
- &::after {
57
- display: block;
58
- position: absolute;
59
- width: $navicon-width;
60
- height: $navicon-height;
61
- transition-duration: $navicon-duration $navicon-duration / 2;
62
- border-radius: $navicon-width;
63
- background: $navicon-content-bg;
64
- content: '';
65
- }
66
-
67
- &::before { top: (2 * $navicon-height); }
68
- &::after { top: (-2 * $navicon-height); }
69
- }
70
-
71
- .open:not(.steps) .navicon::before,
72
- .open:not(.steps) .navicon::after {
73
- top: 0 !important;
74
- }
75
-
76
- .open {
77
- transform: scale($navicon-toggled-size);
78
-
79
- .navicon::before,
80
- .navicon::after {
81
- transition-duration: $navicon-duration;
82
- }
83
-
84
- /* Arrows */
85
- &.larr .navicon,
86
- &.rarr .navicon,
87
- &.uarr .navicon {
88
-
89
- &::before,
90
- &::after {
91
- width: (0.6 * $navicon-width);
92
- }
93
-
94
- &::before {
95
- transform: rotate(35deg);
96
- transform-origin: left top;
97
- }
98
-
99
- &::after {
100
- transform: rotate(-35deg);
101
- transform-origin: left bottom;
102
- }
103
- }
104
-
105
- &.uarr {
106
- transform: scale($navicon-toggled-size) rotate(90deg);
107
- }
108
-
109
- &.rarr .navicon {
110
-
111
- &::before {
112
- transform: translate3d(1em, 0, 0) rotate(-35deg);
113
- transform-origin: right top;
114
- }
115
-
116
- &::after {
117
- transform: translate3d(1em, 0, 0) rotate(35deg);
118
- transform-origin: right bottom;
119
- }
120
- }
121
-
122
- /* × and + */
123
- /* &.plus,*/
124
- /* &.x {*/
125
- /* .navicon {*/
126
- /* background: transparent;*/
127
-
128
- /* &::before {*/
129
- /* -ms-transform: rotate(-45deg);*/
130
- /* transform: rotate(-45deg);*/
131
- /* }*/
132
-
133
- /* &::after {*/
134
- /* -ms-transform: rotate(45deg);*/
135
- /* transform: rotate(45deg);*/
136
- /* }*/
137
- /* }*/
138
- /* }*/
139
-
140
- /* &.plus {*/
141
- /* -ms-transform: scale($navicon-toggled-size) rotate(45deg);*/
142
- /* transform: scale($navicon-toggled-size) rotate(45deg);*/
143
- /* }*/
144
- }
1
+ /* ==========================================================================
2
+ Navicons
3
+ ========================================================================== */
4
+
5
+ .navicon-button {
6
+ display: inline-block;
7
+ position: relative;
8
+ margin: 0.90625rem 0;
9
+ padding: 0.90625rem 1rem;
10
+ transition: $navicon-duration / 2;
11
+ border: 0;
12
+ outline: none;
13
+ background-color: $navicon-nav-bg-close;
14
+ line-height: 5 * $navicon-height;
15
+ cursor: pointer;
16
+ -moz-user-select: none;
17
+ -ms-user-select: none;
18
+ -webkit-user-select: none;
19
+ user-select: none;
20
+
21
+ @include breakpoint($medium) {
22
+ margin-right: 2rem;
23
+ }
24
+
25
+ @include breakpoint($large) {
26
+ margin-right: 5vw;
27
+ }
28
+
29
+ &.open {
30
+ background-color: $navicon-nav-bg-open;
31
+ }
32
+
33
+ .navicon::before,
34
+ .navicon::after {
35
+ transition-duration: $navicon-duration / 2;
36
+ }
37
+
38
+ &:hover {
39
+ transition-duration: $navicon-duration;
40
+
41
+ .navicon::before,
42
+ .navicon::after {
43
+ transition-duration: $navicon-duration / 2;
44
+ }
45
+
46
+ .navicon::before { top: (2.5 * $navicon-height); }
47
+ .navicon::after { top: (-2.5 * $navicon-height); }
48
+ }
49
+ }
50
+
51
+ .navicon {
52
+ position: relative;
53
+ width: $navicon-width;
54
+ height: $navicon-height;
55
+ transition-duration: $navicon-duration;
56
+ border-radius: $navicon-width;
57
+ background: $navicon-content-bg;
58
+
59
+ &::before,
60
+ &::after {
61
+ display: block;
62
+ position: absolute;
63
+ width: $navicon-width;
64
+ height: $navicon-height;
65
+ transition-duration: $navicon-duration $navicon-duration / 2;
66
+ border-radius: $navicon-width;
67
+ background: $navicon-content-bg;
68
+ content: '';
69
+ }
70
+
71
+ &::before { top: (2 * $navicon-height); }
72
+ &::after { top: (-2 * $navicon-height); }
73
+ }
74
+
75
+ .open:not(.steps) .navicon::before,
76
+ .open:not(.steps) .navicon::after {
77
+ top: 0 !important;
78
+ }
79
+
80
+ .open {
81
+ transform: scale($navicon-toggled-size);
82
+
83
+ .navicon::before,
84
+ .navicon::after {
85
+ transition-duration: $navicon-duration;
86
+ }
87
+
88
+ /* Arrows */
89
+ &.larr .navicon,
90
+ &.rarr .navicon,
91
+ &.uarr .navicon {
92
+
93
+ &::before,
94
+ &::after {
95
+ width: (0.6 * $navicon-width);
96
+ }
97
+
98
+ &::before {
99
+ transform: rotate(35deg);
100
+ transform-origin: left top;
101
+ }
102
+
103
+ &::after {
104
+ transform: rotate(-35deg);
105
+ transform-origin: left bottom;
106
+ }
107
+ }
108
+
109
+ &.uarr {
110
+ transform: scale($navicon-toggled-size) rotate(90deg);
111
+ }
112
+
113
+ &.rarr .navicon {
114
+
115
+ &::before {
116
+ transform: translate3d(1em, 0, 0) rotate(-35deg);
117
+ transform-origin: right top;
118
+ }
119
+
120
+ &::after {
121
+ transform: translate3d(1em, 0, 0) rotate(35deg);
122
+ transform-origin: right bottom;
123
+ }
124
+ }
125
+ }
data/_sass/basically-basic/_navigation.scss CHANGED
@@ -11,6 +11,19 @@
11
11
  }
12
12
  }
13
13
 
14
+ /*
15
+ Skip links
16
+ ========================================================================== */
17
+
18
+ .skip-links {
19
+ position: absolute;
20
+ width: 100%;
21
+
22
+ ul {
23
+ @include list-unstyled;
24
+ }
25
+ }
26
+
14
27
  /*
15
28
  Paginator
16
29
  ========================================================================== */
@@ -21,9 +34,11 @@
21
34
 
22
35
  ul {
23
36
  @include list-unstyled;
37
+ display: -ms-flexbox;
24
38
  display: flex;
25
39
 
26
40
  > li {
41
+ -ms-flex: 1;
27
42
  flex: 1;
28
43
  justify-content: space-between;
29
44
  -ms-flex-pack: justify;
data/_sass/basically-basic/_print.scss CHANGED
@@ -1,226 +1,226 @@
1
- /* ==========================================================================
2
- PRINT STYLES
3
- ========================================================================== */
4
-
5
- @media print {
6
-
7
- [hidden] {
8
- display: none;
9
- }
10
-
11
- * {
12
- -moz-box-sizing: border-box;
13
- -webkit-box-sizing: border-box;
14
- box-sizing: border-box;
15
- }
16
-
17
- html {
18
- margin: 0;
19
- padding: 0;
20
- font-size: 16px;
21
- }
22
-
23
- body {
24
- margin: 0 auto;
25
- background: #fff !important;
26
- color: #000 !important;
27
- font-size: 1rem;
28
- -moz-osx-font-smoothing: grayscale;
29
- -webkit-font-smoothing: antialiased;
30
- line-height: 1.5;
31
- text-rendering: optimizeLegibility;
32
- }
33
-
34
- h1,
35
- h2,
36
- h3,
37
- h4,
38
- h5,
39
- h6 {
40
- margin-top: 0;
41
- margin-bottom: 0.75rem;
42
- color: #000;
43
- line-height: 1.2;
44
- }
45
-
46
- h1 {
47
- font-size: 2.5rem;
48
- }
49
-
50
- h2 {
51
- font-size: 2rem;
52
- }
53
-
54
- h3 {
55
- font-size: 1.75rem;
56
- }
57
-
58
- h4 {
59
- font-size: 1.5rem;
60
- }
61
-
62
- h5 {
63
- font-size: 1.25rem;
64
- }
65
-
66
- h6 {
67
- font-size: 1rem;
68
- }
69
-
70
- a {
71
- background: none;
72
- color: #000;
73
- text-decoration: underline;
74
- word-wrap: break-word;
75
- }
76
-
77
- table {
78
- border-collapse: collapse;
79
- }
80
-
81
- thead {
82
- display: table-header-group;
83
- }
84
-
85
- table,
86
- th,
87
- td {
88
- border-bottom: 1px solid #000;
89
- }
90
-
91
- td,
92
- th {
93
- padding: 8px 16px;
94
- }
95
-
96
- img {
97
- display: block;
98
- max-width: 100% !important;
99
- border: 0;
100
- vertical-align: middle;
101
- }
102
-
103
- hr {
104
- height: 0;
105
- margin: 2.25rem 0;
106
- padding: 0;
107
- border: 0;
108
- border-bottom: 2px solid #bbb;
109
- }
110
-
111
- dt {
112
- font-weight: bold;
113
- }
114
-
115
- dd {
116
- margin: 0;
117
- margin-bottom: 0.75rem;
118
- }
119
-
120
- abbr[title],
121
- acronym[title] {
122
- border: 0;
123
- text-decoration: none;
124
- }
125
-
126
- table,
127
- blockquote,
128
- pre,
129
- code,
130
- figure,
131
- li,
132
- hr,
133
- ul,
134
- ol,
135
- a,
136
- tr {
137
- page-break-inside: avoid;
138
- }
139
-
140
- h2,
141
- h3,
142
- h4,
143
- p,
144
- a {
145
- orphans: 3;
146
- widows: 3;
147
- }
148
-
149
- h1,
150
- h2,
151
- h3,
152
- h4,
153
- h5,
154
- h6 {
155
- page-break-after: avoid;
156
- page-break-inside: avoid;
157
- }
158
-
159
- h1 + p,
160
- h2 + p,
161
- h3 + p {
162
- page-break-before: avoid;
163
- }
164
-
165
- img {
166
- page-break-after: auto;
167
- page-break-before: auto;
168
- page-break-inside: avoid;
169
- }
170
-
171
- pre {
172
- white-space: pre-wrap !important;
173
- word-wrap: break-word;
174
- }
175
-
176
- a[href^='http://']::after,
177
- a[href^='https://']::after,
178
- a[href^='ftp://']::after {
179
- font-size: 80%;
180
- content: ' (' attr(href) ')';
181
- }
182
-
183
- abbr[title]::after,
184
- acronym[title]::after {
185
- content: ' (' attr(title) ')';
186
- }
187
-
188
- .page-break,
189
- .page-break-before {
190
- page-break-before: always;
191
- }
192
-
193
- .page-break-after {
194
- page-break-after: always;
195
- }
196
-
197
- .no-print {
198
- display: none;
199
- }
200
-
201
- a.no-reformat::after {
202
- content: '';
203
- }
204
-
205
- abbr[title].no-reformat::after,
206
- acronym[title].no-reformat::after {
207
- content: '';
208
- }
209
-
210
- .btn {
211
- background: none;
212
- color: #000;
213
- }
214
-
215
- /*
216
- Hide the following elements on print
217
- ========================================================================== */
218
-
219
- .sidebar-toggle-wrapper,
220
- .title-area,
221
- .pager,
222
- .site-footer,
223
- .adsbygoogle {
224
- display: none !important;
225
- }
226
- }
1
+ /* ==========================================================================
2
+ PRINT STYLES
3
+ ========================================================================== */
4
+
5
+ @media print {
6
+
7
+ [hidden] {
8
+ display: none;
9
+ }
10
+
11
+ * {
12
+ -moz-box-sizing: border-box;
13
+ -webkit-box-sizing: border-box;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ html {
18
+ margin: 0;
19
+ padding: 0;
20
+ font-size: 16px;
21
+ }
22
+
23
+ body {
24
+ margin: 0 auto;
25
+ background: #fff !important;
26
+ color: #000 !important;
27
+ font-size: 1rem;
28
+ -moz-osx-font-smoothing: grayscale;
29
+ -webkit-font-smoothing: antialiased;
30
+ line-height: 1.5;
31
+ text-rendering: optimizeLegibility;
32
+ }
33
+
34
+ h1,
35
+ h2,
36
+ h3,
37
+ h4,
38
+ h5,
39
+ h6 {
40
+ margin-top: 0;
41
+ margin-bottom: 0.75rem;
42
+ color: #000;
43
+ line-height: 1.2;
44
+ }
45
+
46
+ h1 {
47
+ font-size: 2.5rem;
48
+ }
49
+
50
+ h2 {
51
+ font-size: 2rem;
52
+ }
53
+
54
+ h3 {
55
+ font-size: 1.75rem;
56
+ }
57
+
58
+ h4 {
59
+ font-size: 1.5rem;
60
+ }
61
+
62
+ h5 {
63
+ font-size: 1.25rem;
64
+ }
65
+
66
+ h6 {
67
+ font-size: 1rem;
68
+ }
69
+
70
+ a {
71
+ background: none;
72
+ color: #000;
73
+ text-decoration: underline;
74
+ word-wrap: break-word;
75
+ }
76
+
77
+ table {
78
+ border-collapse: collapse;
79
+ }
80
+
81
+ thead {
82
+ display: table-header-group;
83
+ }
84
+
85
+ table,
86
+ th,
87
+ td {
88
+ border-bottom: 1px solid #000;
89
+ }
90
+
91
+ td,
92
+ th {
93
+ padding: 8px 16px;
94
+ }
95
+
96
+ img {
97
+ display: block;
98
+ max-width: 100% !important;
99
+ border: 0;
100
+ vertical-align: middle;
101
+ }
102
+
103
+ hr {
104
+ height: 0;
105
+ margin: 2.25rem 0;
106
+ padding: 0;
107
+ border: 0;
108
+ border-bottom: 2px solid #bbb;
109
+ }
110
+
111
+ dt {
112
+ font-weight: bold;
113
+ }
114
+
115
+ dd {
116
+ margin: 0;
117
+ margin-bottom: 0.75rem;
118
+ }
119
+
120
+ abbr[title],
121
+ acronym[title] {
122
+ border: 0;
123
+ text-decoration: none;
124
+ }
125
+
126
+ table,
127
+ blockquote,
128
+ pre,
129
+ code,
130
+ figure,
131
+ li,
132
+ hr,
133
+ ul,
134
+ ol,
135
+ a,
136
+ tr {
137
+ page-break-inside: avoid;
138
+ }
139
+
140
+ h2,
141
+ h3,
142
+ h4,
143
+ p,
144
+ a {
145
+ orphans: 3;
146
+ widows: 3;
147
+ }
148
+
149
+ h1,
150
+ h2,
151
+ h3,
152
+ h4,
153
+ h5,
154
+ h6 {
155
+ page-break-after: avoid;
156
+ page-break-inside: avoid;
157
+ }
158
+
159
+ h1 + p,
160
+ h2 + p,
161
+ h3 + p {
162
+ page-break-before: avoid;
163
+ }
164
+
165
+ img {
166
+ page-break-after: auto;
167
+ page-break-before: auto;
168
+ page-break-inside: avoid;
169
+ }
170
+
171
+ pre {
172
+ white-space: pre-wrap !important;
173
+ word-wrap: break-word;
174
+ }
175
+
176
+ a[href^='http://']::after,
177
+ a[href^='https://']::after,
178
+ a[href^='ftp://']::after {
179
+ font-size: 80%;
180
+ content: ' (' attr(href) ')';
181
+ }
182
+
183
+ abbr[title]::after,
184
+ acronym[title]::after {
185
+ content: ' (' attr(title) ')';
186
+ }
187
+
188
+ .page-break,
189
+ .page-break-before {
190
+ page-break-before: always;
191
+ }
192
+
193
+ .page-break-after {
194
+ page-break-after: always;
195
+ }
196
+
197
+ .no-print {
198
+ display: none;
199
+ }
200
+
201
+ a.no-reformat::after {
202
+ content: '';
203
+ }
204
+
205
+ abbr[title].no-reformat::after,
206
+ acronym[title].no-reformat::after {
207
+ content: '';
208
+ }
209
+
210
+ .btn {
211
+ background: none;
212
+ color: #000;
213
+ }
214
+
215
+ /*
216
+ Hide the following elements on print
217
+ ========================================================================== */
218
+
219
+ .sidebar-toggle-wrapper,
220
+ .title-area,
221
+ .pager,
222
+ .site-footer,
223
+ .adsbygoogle {
224
+ display: none !important;
225
+ }
226
+ }