ssg-guideline 0.1.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.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +45 -0
- data/_layouts/default.html +1 -0
- data/_layouts/page.html +5 -0
- data/_layouts/post.html +5 -0
- data/_sass/bootstrap/_alert.scss +55 -0
- data/_sass/bootstrap/_badge.scss +77 -0
- data/_sass/bootstrap/_breadcrumb.scss +38 -0
- data/_sass/bootstrap/_button-group.scss +202 -0
- data/_sass/bootstrap/_buttons.scss +170 -0
- data/_sass/bootstrap/_card.scss +276 -0
- data/_sass/bootstrap/_carousel.scss +178 -0
- data/_sass/bootstrap/_close.scss +31 -0
- data/_sass/bootstrap/_code.scss +64 -0
- data/_sass/bootstrap/_custom-forms.scss +263 -0
- data/_sass/bootstrap/_custom.scss +4 -0
- data/_sass/bootstrap/_dropdown.scss +161 -0
- data/_sass/bootstrap/_forms.scss +388 -0
- data/_sass/bootstrap/_grid.scss +52 -0
- data/_sass/bootstrap/_images.scss +43 -0
- data/_sass/bootstrap/_input-group.scss +178 -0
- data/_sass/bootstrap/_jumbotron.scss +20 -0
- data/_sass/bootstrap/_list-group.scss +141 -0
- data/_sass/bootstrap/_media.scss +8 -0
- data/_sass/bootstrap/_mixins.scss +57 -0
- data/_sass/bootstrap/_modal.scss +142 -0
- data/_sass/bootstrap/_nav.scss +119 -0
- data/_sass/bootstrap/_navbar.scss +268 -0
- data/_sass/bootstrap/_normalize.scss +461 -0
- data/_sass/bootstrap/_pagination.scss +67 -0
- data/_sass/bootstrap/_popover.scss +171 -0
- data/_sass/bootstrap/_print.scss +119 -0
- data/_sass/bootstrap/_progress.scss +32 -0
- data/_sass/bootstrap/_reboot.scss +389 -0
- data/_sass/bootstrap/_responsive-embed.scss +52 -0
- data/_sass/bootstrap/_tables.scss +153 -0
- data/_sass/bootstrap/_tooltip.scss +90 -0
- data/_sass/bootstrap/_transitions.scss +34 -0
- data/_sass/bootstrap/_type.scss +143 -0
- data/_sass/bootstrap/_utilities.scss +13 -0
- data/_sass/bootstrap/_variables.scss +961 -0
- data/_sass/bootstrap/bootstrap-grid.scss +43 -0
- data/_sass/bootstrap/bootstrap-reboot.scss +10 -0
- data/_sass/bootstrap/bootstrap.scss +54 -0
- data/_sass/extra/_syntax-highlighting.scss +71 -0
- data/_sass/main.scss +48 -0
- metadata +132 -0
@@ -0,0 +1,276 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.card {
|
6
|
+
position: relative;
|
7
|
+
display: flex;
|
8
|
+
flex-direction: column;
|
9
|
+
background-color: $card-bg;
|
10
|
+
border: $card-border-width solid $card-border-color;
|
11
|
+
@include border-radius($card-border-radius);
|
12
|
+
}
|
13
|
+
|
14
|
+
.card-block {
|
15
|
+
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
16
|
+
// as much space as possible, ensuring footers are aligned to the bottom.
|
17
|
+
flex: 1 1 auto;
|
18
|
+
padding: $card-spacer-x;
|
19
|
+
}
|
20
|
+
|
21
|
+
.card-title {
|
22
|
+
margin-bottom: $card-spacer-y;
|
23
|
+
}
|
24
|
+
|
25
|
+
.card-subtitle {
|
26
|
+
margin-top: -($card-spacer-y / 2);
|
27
|
+
margin-bottom: 0;
|
28
|
+
}
|
29
|
+
|
30
|
+
.card-text:last-child {
|
31
|
+
margin-bottom: 0;
|
32
|
+
}
|
33
|
+
|
34
|
+
.card-link {
|
35
|
+
@include hover {
|
36
|
+
text-decoration: none;
|
37
|
+
}
|
38
|
+
|
39
|
+
+ .card-link {
|
40
|
+
margin-left: $card-spacer-x;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
.card {
|
45
|
+
> .list-group:first-child {
|
46
|
+
.list-group-item:first-child {
|
47
|
+
@include border-top-radius($card-border-radius);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
> .list-group:last-child {
|
52
|
+
.list-group-item:last-child {
|
53
|
+
@include border-bottom-radius($card-border-radius);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
|
59
|
+
//
|
60
|
+
// Optional textual caps
|
61
|
+
//
|
62
|
+
|
63
|
+
.card-header {
|
64
|
+
padding: $card-spacer-y $card-spacer-x;
|
65
|
+
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
66
|
+
background-color: $card-cap-bg;
|
67
|
+
border-bottom: $card-border-width solid $card-border-color;
|
68
|
+
|
69
|
+
&:first-child {
|
70
|
+
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
.card-footer {
|
75
|
+
padding: $card-spacer-y $card-spacer-x;
|
76
|
+
background-color: $card-cap-bg;
|
77
|
+
border-top: $card-border-width solid $card-border-color;
|
78
|
+
|
79
|
+
&:last-child {
|
80
|
+
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
|
85
|
+
//
|
86
|
+
// Header navs
|
87
|
+
//
|
88
|
+
|
89
|
+
.card-header-tabs {
|
90
|
+
margin-right: -($card-spacer-x / 2);
|
91
|
+
margin-bottom: -$card-spacer-y;
|
92
|
+
margin-left: -($card-spacer-x / 2);
|
93
|
+
border-bottom: 0;
|
94
|
+
}
|
95
|
+
|
96
|
+
.card-header-pills {
|
97
|
+
margin-right: -($card-spacer-x / 2);
|
98
|
+
margin-left: -($card-spacer-x / 2);
|
99
|
+
}
|
100
|
+
|
101
|
+
|
102
|
+
//
|
103
|
+
// Background variations
|
104
|
+
//
|
105
|
+
|
106
|
+
.card-primary {
|
107
|
+
@include card-variant($brand-primary, $brand-primary);
|
108
|
+
}
|
109
|
+
.card-success {
|
110
|
+
@include card-variant($brand-success, $brand-success);
|
111
|
+
}
|
112
|
+
.card-info {
|
113
|
+
@include card-variant($brand-info, $brand-info);
|
114
|
+
}
|
115
|
+
.card-warning {
|
116
|
+
@include card-variant($brand-warning, $brand-warning);
|
117
|
+
}
|
118
|
+
.card-danger {
|
119
|
+
@include card-variant($brand-danger, $brand-danger);
|
120
|
+
}
|
121
|
+
|
122
|
+
// Remove all backgrounds
|
123
|
+
.card-outline-primary {
|
124
|
+
@include card-outline-variant($btn-primary-bg);
|
125
|
+
}
|
126
|
+
.card-outline-secondary {
|
127
|
+
@include card-outline-variant($btn-secondary-border);
|
128
|
+
}
|
129
|
+
.card-outline-info {
|
130
|
+
@include card-outline-variant($btn-info-bg);
|
131
|
+
}
|
132
|
+
.card-outline-success {
|
133
|
+
@include card-outline-variant($btn-success-bg);
|
134
|
+
}
|
135
|
+
.card-outline-warning {
|
136
|
+
@include card-outline-variant($btn-warning-bg);
|
137
|
+
}
|
138
|
+
.card-outline-danger {
|
139
|
+
@include card-outline-variant($btn-danger-bg);
|
140
|
+
}
|
141
|
+
|
142
|
+
//
|
143
|
+
// Inverse text within a card for use with dark backgrounds
|
144
|
+
//
|
145
|
+
|
146
|
+
.card-inverse {
|
147
|
+
@include card-inverse;
|
148
|
+
}
|
149
|
+
|
150
|
+
//
|
151
|
+
// Blockquote
|
152
|
+
//
|
153
|
+
|
154
|
+
.card-blockquote {
|
155
|
+
padding: 0;
|
156
|
+
margin-bottom: 0;
|
157
|
+
border-left: 0;
|
158
|
+
}
|
159
|
+
|
160
|
+
// Card image
|
161
|
+
.card-img {
|
162
|
+
// margin: -1.325rem;
|
163
|
+
@include border-radius($card-border-radius-inner);
|
164
|
+
}
|
165
|
+
.card-img-overlay {
|
166
|
+
position: absolute;
|
167
|
+
top: 0;
|
168
|
+
right: 0;
|
169
|
+
bottom: 0;
|
170
|
+
left: 0;
|
171
|
+
padding: $card-img-overlay-padding;
|
172
|
+
}
|
173
|
+
|
174
|
+
|
175
|
+
|
176
|
+
// Card image caps
|
177
|
+
.card-img-top {
|
178
|
+
@include border-top-radius($card-border-radius-inner);
|
179
|
+
}
|
180
|
+
.card-img-bottom {
|
181
|
+
@include border-bottom-radius($card-border-radius-inner);
|
182
|
+
}
|
183
|
+
|
184
|
+
|
185
|
+
// Card deck
|
186
|
+
|
187
|
+
@include media-breakpoint-up(sm) {
|
188
|
+
.card-deck {
|
189
|
+
display: flex;
|
190
|
+
flex-flow: row wrap;
|
191
|
+
|
192
|
+
.card {
|
193
|
+
display: flex;
|
194
|
+
flex: 1 0 0;
|
195
|
+
flex-direction: column;
|
196
|
+
|
197
|
+
// Selectively apply horizontal margins to cards to avoid doing the
|
198
|
+
// negative margin dance like our grid. This differs from the grid
|
199
|
+
// due to the use of margins as gutters instead of padding.
|
200
|
+
&:not(:first-child) { margin-left: $card-deck-margin; }
|
201
|
+
&:not(:last-child) { margin-right: $card-deck-margin; }
|
202
|
+
}
|
203
|
+
}
|
204
|
+
}
|
205
|
+
|
206
|
+
|
207
|
+
//
|
208
|
+
// Card groups
|
209
|
+
//
|
210
|
+
|
211
|
+
@include media-breakpoint-up(sm) {
|
212
|
+
.card-group {
|
213
|
+
display: flex;
|
214
|
+
flex-flow: row wrap;
|
215
|
+
|
216
|
+
.card {
|
217
|
+
flex: 1 0 0;
|
218
|
+
|
219
|
+
+ .card {
|
220
|
+
margin-left: 0;
|
221
|
+
border-left: 0;
|
222
|
+
}
|
223
|
+
|
224
|
+
// Handle rounded corners
|
225
|
+
@if $enable-rounded {
|
226
|
+
&:first-child {
|
227
|
+
@include border-right-radius(0);
|
228
|
+
|
229
|
+
.card-img-top {
|
230
|
+
border-top-right-radius: 0;
|
231
|
+
}
|
232
|
+
.card-img-bottom {
|
233
|
+
border-bottom-right-radius: 0;
|
234
|
+
}
|
235
|
+
}
|
236
|
+
&:last-child {
|
237
|
+
@include border-left-radius(0);
|
238
|
+
|
239
|
+
.card-img-top {
|
240
|
+
border-top-left-radius: 0;
|
241
|
+
}
|
242
|
+
.card-img-bottom {
|
243
|
+
border-bottom-left-radius: 0;
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
&:not(:first-child):not(:last-child) {
|
248
|
+
border-radius: 0;
|
249
|
+
|
250
|
+
.card-img-top,
|
251
|
+
.card-img-bottom {
|
252
|
+
border-radius: 0;
|
253
|
+
}
|
254
|
+
}
|
255
|
+
}
|
256
|
+
}
|
257
|
+
}
|
258
|
+
}
|
259
|
+
|
260
|
+
|
261
|
+
//
|
262
|
+
// Columns
|
263
|
+
//
|
264
|
+
|
265
|
+
@include media-breakpoint-up(sm) {
|
266
|
+
.card-columns {
|
267
|
+
column-count: $card-columns-count;
|
268
|
+
column-gap: $card-columns-gap;
|
269
|
+
|
270
|
+
.card {
|
271
|
+
display: inline-block; // Don't let them vertically span multiple columns
|
272
|
+
width: 100%; // Don't let their width change
|
273
|
+
margin-bottom: $card-columns-margin;
|
274
|
+
}
|
275
|
+
}
|
276
|
+
}
|
@@ -0,0 +1,178 @@
|
|
1
|
+
// Wrapper for the slide container and indicators
|
2
|
+
.carousel {
|
3
|
+
position: relative;
|
4
|
+
}
|
5
|
+
|
6
|
+
.carousel-inner {
|
7
|
+
position: relative;
|
8
|
+
width: 100%;
|
9
|
+
overflow: hidden;
|
10
|
+
}
|
11
|
+
|
12
|
+
.carousel-item {
|
13
|
+
position: relative;
|
14
|
+
display: none;
|
15
|
+
width: 100%;
|
16
|
+
|
17
|
+
@include if-supports-3d-transforms() {
|
18
|
+
@include transition($carousel-transition);
|
19
|
+
backface-visibility: hidden;
|
20
|
+
perspective: 1000px;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
.carousel-item.active,
|
25
|
+
.carousel-item-next,
|
26
|
+
.carousel-item-prev {
|
27
|
+
display: flex;
|
28
|
+
}
|
29
|
+
|
30
|
+
.carousel-item-next,
|
31
|
+
.carousel-item-prev {
|
32
|
+
position: absolute;
|
33
|
+
top: 0;
|
34
|
+
}
|
35
|
+
|
36
|
+
// CSS3 transforms when supported by the browser
|
37
|
+
@include if-supports-3d-transforms() {
|
38
|
+
.carousel-item-next.carousel-item-left,
|
39
|
+
.carousel-item-prev.carousel-item-right {
|
40
|
+
transform: translate3d(0, 0, 0);
|
41
|
+
}
|
42
|
+
|
43
|
+
.carousel-item-next,
|
44
|
+
.active.carousel-item-right {
|
45
|
+
transform: translate3d(100%, 0, 0);
|
46
|
+
}
|
47
|
+
|
48
|
+
.carousel-item-prev,
|
49
|
+
.active.carousel-item-left {
|
50
|
+
transform: translate3d(-100%, 0, 0);
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
|
55
|
+
//
|
56
|
+
// Left/right controls for nav
|
57
|
+
//
|
58
|
+
|
59
|
+
.carousel-control-prev,
|
60
|
+
.carousel-control-next {
|
61
|
+
position: absolute;
|
62
|
+
top: 0;
|
63
|
+
bottom: 0;
|
64
|
+
// Use flex for alignment (1-3)
|
65
|
+
display: flex; // 1. allow flex styles
|
66
|
+
align-items: center; // 2. vertically center contents
|
67
|
+
justify-content: center; // 3. horizontally center contents
|
68
|
+
width: $carousel-control-width;
|
69
|
+
color: $carousel-control-color;
|
70
|
+
text-align: center;
|
71
|
+
opacity: $carousel-control-opacity;
|
72
|
+
// We can't have a transition here because WebKit cancels the carousel
|
73
|
+
// animation if you trip this while in the middle of another animation.
|
74
|
+
|
75
|
+
// Hover/focus state
|
76
|
+
@include hover-focus {
|
77
|
+
color: $carousel-control-color;
|
78
|
+
text-decoration: none;
|
79
|
+
outline: 0;
|
80
|
+
opacity: .9;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
.carousel-control-prev {
|
84
|
+
left: 0;
|
85
|
+
}
|
86
|
+
.carousel-control-next {
|
87
|
+
right: 0;
|
88
|
+
}
|
89
|
+
|
90
|
+
// Icons for within
|
91
|
+
.carousel-control-prev-icon,
|
92
|
+
.carousel-control-next-icon {
|
93
|
+
display: inline-block;
|
94
|
+
width: $carousel-control-icon-width;
|
95
|
+
height: $carousel-control-icon-width;
|
96
|
+
background: transparent no-repeat center center;
|
97
|
+
background-size: 100% 100%;
|
98
|
+
}
|
99
|
+
.carousel-control-prev-icon {
|
100
|
+
background-image: $carousel-control-prev-icon-bg;
|
101
|
+
}
|
102
|
+
.carousel-control-next-icon {
|
103
|
+
background-image: $carousel-control-next-icon-bg;
|
104
|
+
}
|
105
|
+
|
106
|
+
|
107
|
+
// Optional indicator pips
|
108
|
+
//
|
109
|
+
// Add an ordered list with the following class and add a list item for each
|
110
|
+
// slide your carousel holds.
|
111
|
+
|
112
|
+
.carousel-indicators {
|
113
|
+
position: absolute;
|
114
|
+
right: 0;
|
115
|
+
bottom: 10px;
|
116
|
+
left: 0;
|
117
|
+
z-index: 15;
|
118
|
+
display: flex;
|
119
|
+
justify-content: center;
|
120
|
+
padding-left: 0; // override <ol> default
|
121
|
+
// Use the .carousel-control's width as margin so we don't overlay those
|
122
|
+
margin-right: $carousel-control-width;
|
123
|
+
margin-left: $carousel-control-width;
|
124
|
+
list-style: none;
|
125
|
+
|
126
|
+
li {
|
127
|
+
position: relative;
|
128
|
+
flex: 1 0 auto;
|
129
|
+
max-width: $carousel-indicator-width;
|
130
|
+
height: $carousel-indicator-height;
|
131
|
+
margin-right: $carousel-indicator-spacer;
|
132
|
+
margin-left: $carousel-indicator-spacer;
|
133
|
+
text-indent: -999px;
|
134
|
+
cursor: pointer;
|
135
|
+
background-color: rgba($carousel-indicator-active-bg, .5);
|
136
|
+
|
137
|
+
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
138
|
+
&::before {
|
139
|
+
position: absolute;
|
140
|
+
top: -10px;
|
141
|
+
left: 0;
|
142
|
+
display: inline-block;
|
143
|
+
width: 100%;
|
144
|
+
height: 10px;
|
145
|
+
content: "";
|
146
|
+
}
|
147
|
+
&::after {
|
148
|
+
position: absolute;
|
149
|
+
bottom: -10px;
|
150
|
+
left: 0;
|
151
|
+
display: inline-block;
|
152
|
+
width: 100%;
|
153
|
+
height: 10px;
|
154
|
+
content: "";
|
155
|
+
}
|
156
|
+
}
|
157
|
+
|
158
|
+
.active {
|
159
|
+
background-color: $carousel-indicator-active-bg;
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
163
|
+
|
164
|
+
// Optional captions
|
165
|
+
//
|
166
|
+
//
|
167
|
+
|
168
|
+
.carousel-caption {
|
169
|
+
position: absolute;
|
170
|
+
right: ((100% - $carousel-caption-width) / 2);
|
171
|
+
bottom: 20px;
|
172
|
+
left: ((100% - $carousel-caption-width) / 2);
|
173
|
+
z-index: 10;
|
174
|
+
padding-top: 20px;
|
175
|
+
padding-bottom: 20px;
|
176
|
+
color: $carousel-caption-color;
|
177
|
+
text-align: center;
|
178
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
.close {
|
2
|
+
float: right;
|
3
|
+
font-size: $close-font-size;
|
4
|
+
font-weight: $close-font-weight;
|
5
|
+
line-height: 1;
|
6
|
+
color: $close-color;
|
7
|
+
text-shadow: $close-text-shadow;
|
8
|
+
opacity: .5;
|
9
|
+
|
10
|
+
@include hover-focus {
|
11
|
+
color: $close-color;
|
12
|
+
text-decoration: none;
|
13
|
+
cursor: pointer;
|
14
|
+
opacity: .75;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// Additional properties for button version
|
19
|
+
// iOS requires the button element instead of an anchor tag.
|
20
|
+
// If you want the anchor version, it requires `href="#"`.
|
21
|
+
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
22
|
+
|
23
|
+
// scss-lint:disable QualifyingElement
|
24
|
+
button.close {
|
25
|
+
padding: 0;
|
26
|
+
cursor: pointer;
|
27
|
+
background: transparent;
|
28
|
+
border: 0;
|
29
|
+
-webkit-appearance: none;
|
30
|
+
}
|
31
|
+
// scss-lint:enable QualifyingElement
|
@@ -0,0 +1,64 @@
|
|
1
|
+
// Inline and block code styles
|
2
|
+
code,
|
3
|
+
kbd,
|
4
|
+
pre,
|
5
|
+
samp {
|
6
|
+
font-family: $font-family-monospace;
|
7
|
+
}
|
8
|
+
|
9
|
+
// Inline code
|
10
|
+
code {
|
11
|
+
padding: $code-padding-y $code-padding-x;
|
12
|
+
font-size: $code-font-size;
|
13
|
+
color: $code-color;
|
14
|
+
background-color: $code-bg;
|
15
|
+
@include border-radius($border-radius);
|
16
|
+
|
17
|
+
// Streamline the style when inside anchors to avoid broken underline and more
|
18
|
+
a > & {
|
19
|
+
padding: 0;
|
20
|
+
color: inherit;
|
21
|
+
background-color: inherit;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
// User input typically entered via keyboard
|
26
|
+
kbd {
|
27
|
+
padding: $code-padding-y $code-padding-x;
|
28
|
+
font-size: $code-font-size;
|
29
|
+
color: $kbd-color;
|
30
|
+
background-color: $kbd-bg;
|
31
|
+
@include border-radius($border-radius-sm);
|
32
|
+
@include box-shadow($kbd-box-shadow);
|
33
|
+
|
34
|
+
kbd {
|
35
|
+
padding: 0;
|
36
|
+
font-size: 100%;
|
37
|
+
font-weight: $nested-kbd-font-weight;
|
38
|
+
@include box-shadow(none);
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// Blocks of code
|
43
|
+
pre {
|
44
|
+
display: block;
|
45
|
+
margin-top: 0;
|
46
|
+
margin-bottom: 1rem;
|
47
|
+
font-size: $code-font-size;
|
48
|
+
color: $pre-color;
|
49
|
+
|
50
|
+
// Account for some code outputs that place code tags in pre tags
|
51
|
+
code {
|
52
|
+
padding: 0;
|
53
|
+
font-size: inherit;
|
54
|
+
color: inherit;
|
55
|
+
background-color: transparent;
|
56
|
+
border-radius: 0;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
// Enable scrollable blocks of code
|
61
|
+
.pre-scrollable {
|
62
|
+
max-height: $pre-scrollable-max-height;
|
63
|
+
overflow-y: scroll;
|
64
|
+
}
|