doccoli-jekyll 1.1.3 → 1.1.4
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 +4 -4
- data/README.md +4 -50
- data/_layouts/home.html +0 -2
- data/_sass/doccoli-jekyll.scss +1 -1
- data/_sass/scss/_base.scss +493 -172
- data/_sass/scss/_reusable.scss +0 -566
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: de67aad988a5ab64b10b209301d92bb588ffb7d4
|
4
|
+
data.tar.gz: dcf574938e920a036a174f93b265bf023865d3b9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 32907b23799cceafe603b780811c79dc051bf9cf04cbbd711213656f7548a93c1e9c70d99179bf813f0f377033dd13bbc329bccc1ac6056adc7fac14f0775451
|
7
|
+
data.tar.gz: b4cb94ebf6198b105041f95cee61b83c9285947ae1c27385156e7c80427b54b67ac00ac90a834216595e914d54d62067e9efa8b8a46df114d5bb3f471080c77e
|
data/README.md
CHANGED
@@ -1,19 +1,14 @@
|
|
1
1
|
# doccoli-jekyll
|
2
2
|
|
3
|
-
The `doccoli-jekyll` is the Jekyll theme in use for documentation
|
3
|
+
The `doccoli-jekyll` is the Jekyll theme in use for [documentation](https://bubblin.io/docs/) at Bubblin Superbooks. This theme is particularly useful for solo founders (developers) or small bootstrapped teams with very limited time and resources.
|
4
4
|
|
5
|
-
|
5
|
+
Tack a responsive "blog-like" implementation of SEO-optimized documentation onto your website; it will sit on a url like so, right next to your actual product or website:
|
6
6
|
|
7
7
|
> https://example.com/docs/
|
8
8
|
|
9
|
+
A tutorial on how to set up documentation using the `doccoli-jekyll` theme alongside a rails app is available [here](https://bubblin.io/blog/).
|
9
10
|
|
10
|
-
|
11
|
-
|
12
|
-
A tutorial on how to setup a jekyll blog using the `doccoli-jekyll` theme alongside your rails app is available [here](https://bubblin.io/blog/).
|
13
|
-
|
14
|
-
[Theme preview](https://jekyll.github.io/doccoli-jekyll/)
|
15
|
-
|
16
|
-

|
11
|
+

|
17
12
|
|
18
13
|
## Installation
|
19
14
|
|
@@ -35,47 +30,6 @@ And then execute:
|
|
35
30
|
|
36
31
|
$ bundle
|
37
32
|
|
38
|
-
### Layouts
|
39
|
-
|
40
|
-
Refers to files within the `_layouts` directory, that define the markup for your theme.
|
41
|
-
|
42
|
-
- `default.html` — The base layout that lays the foundation for subsequent layouts. The derived layouts inject their contents into this file at the line that says ` {{ content }} ` and are linked to this file via [FrontMatter](https://jekyllrb.com/docs/frontmatter/) declaration `layout: default`.
|
43
|
-
- `home.html` — The layout for your landing-page / home-page / index-page.
|
44
|
-
- `page.html` — The layout for your documents that contain FrontMatter, but are not posts.
|
45
|
-
- `post.html` — The layout for your posts.
|
46
|
-
|
47
|
-
### Includes
|
48
|
-
|
49
|
-
Refers to snippets of code within the `_includes` directory that can be inserted in multiple layouts (and another include-file as well) within the same theme-gem.
|
50
|
-
|
51
|
-
- `disqus_comments.html` — Code to markup disqus comment box.
|
52
|
-
- `footer.html` — Defines the site's footer section.
|
53
|
-
- `google-analytics.html` — Inserts Google Analytics module (active only in production environment).
|
54
|
-
- `head.html` — Code-block that defines the `<head></head>` in *default* layout.
|
55
|
-
- `header.html` — Defines the site's main header section. By default, pages with a defined `title` attribute will have links displayed here.
|
56
|
-
- `icon-* files` — Inserts github and twitter ids with respective icons.
|
57
|
-
|
58
|
-
### Sass
|
59
|
-
|
60
|
-
Refers to `.scss` files within the `_sass` directory that define the theme's styles.
|
61
|
-
|
62
|
-
- `doccoli-jekyll.scss` — The core file imported by preprocessed `main.scss`, it defines the variable defaults for the theme and also further imports sass partials to supplement itself.
|
63
|
-
- `doccoli-jekyll/_base.scss` — Resets and defines base styles for various HTML elements.
|
64
|
-
- `doccoli-jekyll/_layout.scss` — Defines the visual style for various layouts.
|
65
|
-
- `doccoli-jekyll/_syntax-highlighting.scss` — Defines the styles for syntax-highlighting.
|
66
|
-
|
67
|
-
### Assets
|
68
|
-
|
69
|
-
Refers to various asset files within the `assets` directory.
|
70
|
-
Contains the `main.scss` that imports sass files from within the `_sass` directory. This `main.scss` is what gets processed into the theme's main stylesheet `main.css` called by `_layouts/default.html` via `_includes/head.html`.
|
71
|
-
|
72
|
-
This directory can include sub-directories to manage assets of similar type, and will be copied over as is, to the final transformed site directory.
|
73
|
-
|
74
|
-
### Plugins
|
75
|
-
|
76
|
-
doccoli-jekyll comes preinstalled with the [`jekyll-seo-tag`](https://github.com/jekyll/jekyll-seo-tag) plugin to make sure your website gets the most useful meta tags. See [usage](https://github.com/jekyll/jekyll-seo-tag#usage) to know how to set it up.
|
77
|
-
|
78
|
-
## Usage
|
79
33
|
|
80
34
|
### Customization
|
81
35
|
|
data/_layouts/home.html
CHANGED
data/_sass/doccoli-jekyll.scss
CHANGED
data/_sass/scss/_base.scss
CHANGED
@@ -1,245 +1,566 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
1
|
+
article,
|
2
|
+
aside,
|
3
|
+
details,
|
4
|
+
footer,
|
5
|
+
header,
|
6
|
+
hgroup,
|
7
|
+
main,
|
8
|
+
nav,
|
9
|
+
section,
|
10
|
+
summary {
|
11
|
+
display: block;
|
9
12
|
}
|
10
13
|
|
14
|
+
html {
|
15
|
+
font-size: 100%;
|
16
|
+
-ms-text-size-adjust: 100%;
|
17
|
+
-webkit-text-size-adjust: 100%;
|
18
|
+
font-size: 1em;
|
19
|
+
line-height: 1.4;
|
20
|
+
text-rendering: optimizelegibility;
|
21
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
22
|
+
-webkit-backface-visibility: hidden;
|
23
|
+
}
|
11
24
|
|
12
|
-
|
13
|
-
/**
|
14
|
-
* Basic styling
|
15
|
-
*/
|
16
25
|
body {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
+
color: rgba(0, 0, 0, 0.85);
|
27
|
+
background: aliceblue;
|
28
|
+
margin: 0;
|
29
|
+
font-family: 'EB Garamond', serif;
|
30
|
+
font-smooth: always;
|
31
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
32
|
+
text-rendering: optimizelegibility;
|
33
|
+
font-display: swap;
|
34
|
+
font-display: optional;
|
35
|
+
-moz-osx-font-smoothing: grayscale;
|
36
|
+
-webkit-osx-font-smoothing: antialiased;
|
26
37
|
}
|
27
38
|
|
28
39
|
|
40
|
+
/* Anchors */
|
29
41
|
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
42
|
+
a {
|
43
|
+
color: #1177FF;
|
44
|
+
text-decoration: none;
|
45
|
+
text-rendering: optimizelegibility;
|
46
|
+
outline: 0;
|
47
|
+
&:focus,
|
48
|
+
&:active,
|
49
|
+
&:hover {
|
50
|
+
outline: 0;
|
51
|
+
}
|
38
52
|
}
|
39
53
|
|
40
54
|
|
55
|
+
/* Typography */
|
41
56
|
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
57
|
+
h1,
|
58
|
+
h2,
|
59
|
+
h3,
|
60
|
+
h4,
|
61
|
+
h5,
|
62
|
+
h6 {
|
63
|
+
margin: 0;
|
64
|
+
font-family: 'proxima-nova', Arial, sans-serif;
|
48
65
|
}
|
49
66
|
|
67
|
+
h1 {
|
68
|
+
font-size: 280%;
|
69
|
+
font-weight: normal;
|
70
|
+
}
|
50
71
|
|
72
|
+
h2 {
|
73
|
+
font-size: 200%;
|
74
|
+
font-weight: normal;
|
75
|
+
}
|
51
76
|
|
52
|
-
|
53
|
-
|
54
|
-
*/
|
55
|
-
figure > img {
|
56
|
-
display: block;
|
77
|
+
h3 {
|
78
|
+
font-size: 150%;
|
57
79
|
}
|
58
80
|
|
59
|
-
|
60
|
-
|
81
|
+
h4 {
|
82
|
+
font-size: 125%;
|
61
83
|
}
|
62
84
|
|
85
|
+
h5 {
|
86
|
+
font-size: 110%;
|
87
|
+
}
|
63
88
|
|
89
|
+
h6 {
|
90
|
+
font-size: 100%;
|
91
|
+
}
|
64
92
|
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
ul, ol {
|
69
|
-
margin-left: $spacing-unit;
|
93
|
+
b,
|
94
|
+
strong {
|
95
|
+
font-weight: bold;
|
70
96
|
}
|
71
97
|
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
98
|
+
hr {
|
99
|
+
-moz-box-sizing: content-box;
|
100
|
+
box-sizing: content-box;
|
101
|
+
display: block;
|
102
|
+
height: 1px;
|
103
|
+
border: 0;
|
104
|
+
border-top: 2px solid #1177FF;
|
105
|
+
margin: 1em 0;
|
106
|
+
padding: 0;
|
77
107
|
}
|
78
108
|
|
109
|
+
p {
|
110
|
+
margin: .8em 0;
|
111
|
+
}
|
79
112
|
|
113
|
+
menu,
|
114
|
+
ul,
|
115
|
+
ol {
|
116
|
+
margin: 0;
|
117
|
+
padding: 0;
|
118
|
+
}
|
80
119
|
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
font-weight: $base-font-weight;
|
120
|
+
menu,
|
121
|
+
ul {
|
122
|
+
list-style-image: none;
|
123
|
+
list-style: none;
|
86
124
|
}
|
87
125
|
|
126
|
+
nav ul {
|
127
|
+
list-style: none;
|
128
|
+
list-style-image: none;
|
129
|
+
}
|
88
130
|
|
131
|
+
img {
|
132
|
+
border: 0;
|
133
|
+
-ms-interpolation-mode: bicubic;
|
134
|
+
}
|
89
135
|
|
90
|
-
/**
|
91
|
-
* Links
|
92
|
-
*/
|
93
|
-
a {
|
94
|
-
color: $brand-color;
|
95
|
-
text-decoration: none;
|
96
136
|
|
97
|
-
|
98
|
-
color: darken($brand-color, 15%);
|
99
|
-
}
|
137
|
+
/* Code formatting */
|
100
138
|
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
139
|
+
pre,
|
140
|
+
code {
|
141
|
+
border: 1px solid #e8e8e8;
|
142
|
+
border-radius: 3px;
|
143
|
+
background-color: #eff;
|
144
|
+
}
|
105
145
|
|
106
|
-
|
107
|
-
|
146
|
+
code {
|
147
|
+
padding: 1px 5px;
|
148
|
+
}
|
108
149
|
|
109
|
-
|
110
|
-
|
150
|
+
pre {
|
151
|
+
padding: 8px 12px;
|
152
|
+
overflow-x: auto;
|
153
|
+
>code {
|
154
|
+
border: 0;
|
155
|
+
padding-right: 0;
|
156
|
+
padding-left: 0;
|
111
157
|
}
|
112
|
-
}
|
113
158
|
}
|
114
159
|
|
115
|
-
|
116
|
-
/**
|
117
|
-
* Blockquotes
|
118
|
-
*/
|
119
160
|
blockquote {
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
161
|
+
color: #333;
|
162
|
+
border-left: 10px solid #1177FF;
|
163
|
+
letter-spacing: -1px;
|
164
|
+
padding: 1em;
|
165
|
+
margin: 2em auto;
|
166
|
+
font-style: italic;
|
167
|
+
background: #fffafa;
|
168
|
+
> :last-child {
|
169
|
+
margin-bottom: 0;
|
170
|
+
}
|
171
|
+
}
|
172
|
+
|
173
|
+
|
174
|
+
/*-- Coloring pseudos text selection/inactive state. Sooth! :D --*/
|
175
|
+
|
176
|
+
* {
|
177
|
+
box-sizing: border-box;
|
178
|
+
&:after {
|
179
|
+
box-sizing: border-box;
|
180
|
+
}
|
181
|
+
&:before {
|
182
|
+
box-sizing: border-box;
|
183
|
+
}
|
184
|
+
}
|
126
185
|
|
127
|
-
|
128
|
-
|
129
|
-
|
186
|
+
::-moz-selection {
|
187
|
+
background: #a7d7ff;
|
188
|
+
color: #000;
|
189
|
+
text-shadow: none;
|
130
190
|
}
|
131
191
|
|
192
|
+
::selection {
|
193
|
+
background: #a7d7ff;
|
194
|
+
color: #000;
|
195
|
+
text-shadow: none;
|
196
|
+
&:window-inactive {
|
197
|
+
background: #eaeaea;
|
198
|
+
color: #000;
|
199
|
+
}
|
200
|
+
}
|
132
201
|
|
202
|
+
input:-webkit-autofill {
|
203
|
+
-webkit-box-shadow: 0 0 1000px #FBFBFB inset;
|
204
|
+
}
|
133
205
|
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
pre,
|
138
|
-
code {
|
139
|
-
@include relative-font-size(0.9375);
|
140
|
-
border: 1px solid $grey-color-light;
|
141
|
-
border-radius: 3px;
|
142
|
-
background-color: #eef;
|
206
|
+
::-webkit-input-placeholder {
|
207
|
+
color: #05f !important;
|
208
|
+
font-size: 13px;
|
143
209
|
}
|
144
210
|
|
145
|
-
|
146
|
-
|
211
|
+
:-moz-placeholder {
|
212
|
+
color: #05f;
|
213
|
+
font-size: 13px;
|
147
214
|
}
|
148
215
|
|
149
|
-
|
150
|
-
|
151
|
-
|
216
|
+
::-moz-placeholder {
|
217
|
+
color: #05f;
|
218
|
+
font-size: 13px;
|
219
|
+
}
|
152
220
|
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
221
|
+
:-ms-input-placeholder {
|
222
|
+
color: #05f;
|
223
|
+
font-size: 13px;
|
224
|
+
}
|
225
|
+
|
226
|
+
table {
|
227
|
+
border-collapse: collapse;
|
228
|
+
border-spacing: 0;
|
229
|
+
}
|
230
|
+
|
231
|
+
td,
|
232
|
+
th {
|
233
|
+
padding: 1vw;
|
234
|
+
vertical-align: top;
|
158
235
|
}
|
159
236
|
|
160
237
|
|
238
|
+
/* Element Positioning */
|
239
|
+
|
240
|
+
.container {
|
241
|
+
margin: 44px 0 0 0;
|
242
|
+
background: white;
|
243
|
+
}
|
161
244
|
|
162
|
-
/**
|
163
|
-
* Wrapper
|
164
|
-
*/
|
165
245
|
.wrapper {
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
246
|
+
margin: 0 auto;
|
247
|
+
}
|
248
|
+
|
249
|
+
.left {
|
250
|
+
float: left;
|
251
|
+
left: 0;
|
252
|
+
}
|
173
253
|
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
padding-right: $spacing-unit / 2;
|
178
|
-
padding-left: $spacing-unit / 2;
|
179
|
-
}
|
254
|
+
.right {
|
255
|
+
float: right;
|
256
|
+
right: 0;
|
180
257
|
}
|
181
258
|
|
259
|
+
.center {
|
260
|
+
text-align: center;
|
261
|
+
margin: 0 auto;
|
262
|
+
}
|
263
|
+
|
264
|
+
.centerize {
|
265
|
+
margin: 0 auto;
|
266
|
+
}
|
182
267
|
|
268
|
+
.fixed {
|
269
|
+
position: fixed;
|
270
|
+
will-change: transform;
|
271
|
+
transform: translateZ(0);
|
272
|
+
}
|
183
273
|
|
184
|
-
|
185
|
-
|
186
|
-
*/
|
187
|
-
%clearfix:after {
|
188
|
-
content: "";
|
189
|
-
display: table;
|
190
|
-
clear: both;
|
274
|
+
.top {
|
275
|
+
top: 0;
|
191
276
|
}
|
192
277
|
|
278
|
+
.bottom {
|
279
|
+
bottom: 0px;
|
280
|
+
}
|
193
281
|
|
282
|
+
.absolute-center {
|
283
|
+
margin: auto;
|
284
|
+
position: absolute;
|
285
|
+
top: 0;
|
286
|
+
left: 0;
|
287
|
+
bottom: 0;
|
288
|
+
right: 0;
|
289
|
+
}
|
194
290
|
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
291
|
+
.flex {
|
292
|
+
display: flex;
|
293
|
+
flex-wrap: wrap;
|
294
|
+
align-items: center;
|
295
|
+
justify-content: center;
|
296
|
+
}
|
201
297
|
|
202
|
-
|
203
|
-
|
204
|
-
|
298
|
+
.fold {
|
299
|
+
min-height: calc(90vh - 45px);
|
300
|
+
max-width: 100vw;
|
301
|
+
overflow-x: hidden;
|
302
|
+
-webkit-overflow-scrolling: touch;
|
205
303
|
}
|
206
304
|
|
207
|
-
.social-media-list {
|
208
|
-
.icon {
|
209
|
-
padding-right: 5px;
|
210
|
-
}
|
211
305
|
|
212
|
-
|
213
|
-
|
214
|
-
|
306
|
+
/* -- Push aside, out & away ---*/
|
307
|
+
|
308
|
+
.side-gap {
|
309
|
+
margin-right: .5em;
|
310
|
+
margin-left: .5em;
|
215
311
|
}
|
216
312
|
|
313
|
+
.top-gap {
|
314
|
+
margin-top: .5em;
|
315
|
+
}
|
217
316
|
|
317
|
+
.double-top-gap {
|
318
|
+
margin-top: 1em;
|
319
|
+
}
|
218
320
|
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
321
|
+
.bottom-gap {
|
322
|
+
margin-bottom: 1em;
|
323
|
+
}
|
324
|
+
|
325
|
+
.double-bottom-gap {
|
326
|
+
margin-bottom: 2em;
|
327
|
+
}
|
328
|
+
|
329
|
+
.pad {
|
330
|
+
padding: 0.5em 1em;
|
331
|
+
}
|
332
|
+
|
333
|
+
.pad-vertically {
|
334
|
+
padding: 1em 0;
|
335
|
+
}
|
336
|
+
|
337
|
+
.pad-horizontally {
|
338
|
+
padding: 0 1em;
|
339
|
+
}
|
340
|
+
|
341
|
+
|
342
|
+
/* -- Text --*/
|
343
|
+
|
344
|
+
.justify {
|
345
|
+
text-align: justify;
|
346
|
+
}
|
347
|
+
|
348
|
+
.uppercase {
|
349
|
+
text-transform: uppercase;
|
350
|
+
}
|
351
|
+
|
352
|
+
.lowercase {
|
353
|
+
text-transform: lowercase;
|
354
|
+
}
|
355
|
+
|
356
|
+
.camelcase {
|
357
|
+
text-transform: capitalize;
|
358
|
+
}
|
359
|
+
|
360
|
+
.italics {
|
361
|
+
font-style: italic;
|
362
|
+
}
|
363
|
+
|
364
|
+
menu.horizontal-list li,
|
365
|
+
ul.horizontal-list li {
|
366
|
+
float: left;
|
367
|
+
}
|
368
|
+
|
369
|
+
.will-change {
|
370
|
+
will-change: transform;
|
371
|
+
transform: translate3d(0, 0, 0);
|
372
|
+
}
|
373
|
+
|
374
|
+
.unpointable {
|
375
|
+
pointer-events: none;
|
376
|
+
}
|
377
|
+
|
378
|
+
.pointable {
|
379
|
+
pointer-events: auto;
|
380
|
+
}
|
381
|
+
|
382
|
+
.ir {
|
383
|
+
background-color: transparent;
|
384
|
+
border: 0;
|
385
|
+
overflow: hidden;
|
386
|
+
*text-indent: -9999px;
|
387
|
+
&:before {
|
388
|
+
content: "";
|
389
|
+
display: block;
|
390
|
+
width: 0;
|
391
|
+
height: 150%;
|
392
|
+
}
|
393
|
+
}
|
394
|
+
|
395
|
+
.hidden {
|
396
|
+
display: none !important;
|
397
|
+
visibility: hidden;
|
398
|
+
}
|
399
|
+
|
400
|
+
.visuallyhidden {
|
401
|
+
border: 0;
|
402
|
+
clip: rect(0 0 0 0);
|
403
|
+
height: 1px;
|
404
|
+
margin: -1px;
|
405
|
+
overflow: hidden;
|
406
|
+
padding: 0;
|
407
|
+
position: absolute;
|
408
|
+
width: 1px;
|
409
|
+
&.focusable {
|
410
|
+
&:active,
|
411
|
+
&:focus {
|
412
|
+
clip: auto;
|
413
|
+
height: auto;
|
414
|
+
margin: 0;
|
415
|
+
overflow: visible;
|
416
|
+
position: static;
|
417
|
+
width: auto;
|
418
|
+
}
|
419
|
+
}
|
420
|
+
}
|
421
|
+
|
422
|
+
.invisible {
|
423
|
+
visibility: hidden;
|
424
|
+
}
|
425
|
+
|
426
|
+
.clearfix {
|
427
|
+
&:before {
|
428
|
+
content: " ";
|
429
|
+
display: table;
|
430
|
+
}
|
431
|
+
&:after {
|
432
|
+
content: " ";
|
433
|
+
display: table;
|
434
|
+
clear: both;
|
435
|
+
}
|
436
|
+
*zoom: 1;
|
437
|
+
}
|
438
|
+
|
439
|
+
@media (orientation: portrait) {
|
440
|
+
body {
|
441
|
+
.hide-on-mobiles {
|
442
|
+
display: none;
|
443
|
+
}
|
444
|
+
.display-on-mobiles {
|
445
|
+
display: inline-block;
|
446
|
+
}
|
447
|
+
.divide-in-half {
|
448
|
+
width: 90vw;
|
449
|
+
}
|
450
|
+
.one-half {
|
451
|
+
width: 100%;
|
452
|
+
}
|
453
|
+
.one-third {
|
454
|
+
width: 100%;
|
455
|
+
}
|
456
|
+
.two-third {
|
457
|
+
width: 100%;
|
458
|
+
}
|
459
|
+
.shrink {
|
460
|
+
width: 95%;
|
461
|
+
}
|
462
|
+
.align {
|
463
|
+
margin: 0 auto;
|
464
|
+
text-align: center;
|
465
|
+
}
|
466
|
+
|
467
|
+
}
|
468
|
+
}
|
469
|
+
|
470
|
+
@media (orientation: landscape) {
|
471
|
+
body {
|
472
|
+
.hide-on-mobiles {
|
473
|
+
display: marker;
|
474
|
+
}
|
475
|
+
.display-on-mobiles {
|
476
|
+
display: none;
|
477
|
+
}
|
478
|
+
.divide-in-half {
|
479
|
+
width: 50vw;
|
480
|
+
}
|
481
|
+
.one-half {
|
482
|
+
width: 50%;
|
483
|
+
}
|
484
|
+
.one-third {
|
485
|
+
width: 33.33333%;
|
486
|
+
}
|
487
|
+
.two-third {
|
488
|
+
width: 66.66666%;
|
489
|
+
}
|
490
|
+
.shrink {
|
491
|
+
width: 90%;
|
492
|
+
}
|
493
|
+
.align {
|
494
|
+
margin: 0 0;
|
495
|
+
}
|
496
|
+
.container {
|
497
|
+
width: calc(100vw - 208px);
|
498
|
+
margin-left: 208px;
|
499
|
+
}
|
500
|
+
}
|
501
|
+
}
|
502
|
+
|
503
|
+
@media print,
|
504
|
+
(-o-min-device-pixel-ratio: 5 / 4),
|
505
|
+
(-webkit-min-device-pixel-ratio: 1.25),
|
506
|
+
(min-resolution: 120dpi) {
|
507
|
+
/* Style adjustments for high resolution devices */
|
508
|
+
}
|
509
|
+
|
510
|
+
@media print {
|
511
|
+
* {
|
512
|
+
background: transparent !important;
|
513
|
+
color: #000 !important;
|
514
|
+
box-shadow: none !important;
|
515
|
+
text-shadow: none !important;
|
516
|
+
}
|
517
|
+
a {
|
518
|
+
text-decoration: underline;
|
519
|
+
&:visited {
|
520
|
+
text-decoration: underline;
|
521
|
+
}
|
522
|
+
&[href]:after {
|
523
|
+
content: " (" attr(href) ")";
|
524
|
+
}
|
525
|
+
}
|
526
|
+
abbr[title]:after {
|
527
|
+
content: " (" attr(title) ")";
|
528
|
+
}
|
529
|
+
.ir a:after {
|
530
|
+
content: "";
|
531
|
+
}
|
532
|
+
a {
|
533
|
+
&[href^="javascript:"]:after,
|
534
|
+
&[href^="#"]:after {
|
535
|
+
content: "";
|
536
|
+
}
|
537
|
+
}
|
538
|
+
pre,
|
539
|
+
blockquote {
|
540
|
+
border: 1px solid #999;
|
541
|
+
page-break-inside: avoid;
|
542
|
+
}
|
543
|
+
thead {
|
544
|
+
display: table-header-group;
|
545
|
+
}
|
546
|
+
tr {
|
547
|
+
page-break-inside: avoid;
|
548
|
+
}
|
549
|
+
img {
|
550
|
+
page-break-inside: avoid;
|
551
|
+
max-width: 100% !important;
|
552
|
+
}
|
553
|
+
@page {
|
554
|
+
margin: 0.5cm;
|
555
|
+
}
|
556
|
+
p,
|
557
|
+
h2,
|
558
|
+
h3 {
|
559
|
+
orphans: 3;
|
560
|
+
widows: 3;
|
561
|
+
}
|
562
|
+
h2,
|
563
|
+
h3 {
|
564
|
+
page-break-after: avoid;
|
565
|
+
}
|
245
566
|
}
|