minimal-jekyll-theme 0.1.1 → 0.1.2

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.
Files changed (88) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +1 -0
  3. data/LICENSE.txt +5 -0
  4. data/README.md +54 -0
  5. data/_includes/author_bio.html +39 -0
  6. data/_includes/category_tag_list.html +20 -0
  7. data/_includes/disqus_comments.html +17 -0
  8. data/_includes/figure +12 -0
  9. data/_includes/footer.html +20 -0
  10. data/_includes/head.html +46 -0
  11. data/_includes/header.html +38 -0
  12. data/_includes/navigation.html +26 -0
  13. data/_includes/newsletter.html +19 -0
  14. data/_includes/post_meta.html +49 -0
  15. data/_includes/read_time.html +18 -0
  16. data/_includes/share_icons.html +30 -0
  17. data/_includes/sidebar.html +17 -0
  18. data/_includes/video +3 -0
  19. data/_layouts/default.html +17 -0
  20. data/_layouts/home.html +40 -0
  21. data/_layouts/page.html +25 -0
  22. data/_layouts/post.html +50 -0
  23. data/_sass/_custom.scss +137 -0
  24. data/_sass/_tachyons.scss +94 -0
  25. data/_sass/_variables.scss +38 -0
  26. data/_sass/scss/_aspect-ratios.scss +142 -0
  27. data/_sass/scss/_background-position.scss +133 -0
  28. data/_sass/scss/_background-size.scss +41 -0
  29. data/_sass/scss/_border-colors.scss +93 -0
  30. data/_sass/scss/_border-radius.scss +134 -0
  31. data/_sass/scss/_border-style.scss +55 -0
  32. data/_sass/scss/_border-widths.scss +81 -0
  33. data/_sass/scss/_borders.scss +65 -0
  34. data/_sass/scss/_box-shadow.scss +48 -0
  35. data/_sass/scss/_box-sizing.scss +50 -0
  36. data/_sass/scss/_clears.scss +47 -0
  37. data/_sass/scss/_code.scss +18 -0
  38. data/_sass/scss/_colors.scss +84 -0
  39. data/_sass/scss/_coordinates.scss +153 -0
  40. data/_sass/scss/_debug-children.scss +21 -0
  41. data/_sass/scss/_debug-grid.scss +33 -0
  42. data/_sass/scss/_debug.scss +127 -0
  43. data/_sass/scss/_debug_children.scss +18 -0
  44. data/_sass/scss/_display.scss +111 -0
  45. data/_sass/scss/_flexbox.scss +229 -0
  46. data/_sass/scss/_floats.scss +56 -0
  47. data/_sass/scss/_font-family.scss +107 -0
  48. data/_sass/scss/_font-style.scss +36 -0
  49. data/_sass/scss/_font-weight.scss +87 -0
  50. data/_sass/scss/_forms.scss +23 -0
  51. data/_sass/scss/_gradients.scss +29 -0
  52. data/_sass/scss/_heights.scss +131 -0
  53. data/_sass/scss/_hovers.scss +166 -0
  54. data/_sass/scss/_images.scss +18 -0
  55. data/_sass/scss/_letter-spacing.scss +40 -0
  56. data/_sass/scss/_line-height.scss +41 -0
  57. data/_sass/scss/_links.scss +34 -0
  58. data/_sass/scss/_lists.scss +15 -0
  59. data/_sass/scss/_max-widths.scss +105 -0
  60. data/_sass/scss/_media-queries.scss +43 -0
  61. data/_sass/scss/_module-template.scss +29 -0
  62. data/_sass/scss/_negative-margins.scss +206 -0
  63. data/_sass/scss/_nested.scss +64 -0
  64. data/_sass/scss/_normalize.scss +434 -0
  65. data/_sass/scss/_opacity.scss +27 -0
  66. data/_sass/scss/_outlines.scss +39 -0
  67. data/_sass/scss/_overflow.scss +82 -0
  68. data/_sass/scss/_position.scss +44 -0
  69. data/_sass/scss/_rotations.scss +50 -0
  70. data/_sass/scss/_skins-pseudo.scss +243 -0
  71. data/_sass/scss/_skins.scss +143 -0
  72. data/_sass/scss/_spacing.scss +956 -0
  73. data/_sass/scss/_styles.scss +15 -0
  74. data/_sass/scss/_tables.scss +42 -0
  75. data/_sass/scss/_text-align.scss +49 -0
  76. data/_sass/scss/_text-decoration.scss +42 -0
  77. data/_sass/scss/_text-transform.scss +53 -0
  78. data/_sass/scss/_type-scale.scss +102 -0
  79. data/_sass/scss/_typography.scss +129 -0
  80. data/_sass/scss/_utilities.scss +48 -0
  81. data/_sass/scss/_vertical-align.scss +43 -0
  82. data/_sass/scss/_visibility.scss +58 -0
  83. data/_sass/scss/_white-space.scss +41 -0
  84. data/_sass/scss/_widths.scss +150 -0
  85. data/_sass/scss/_word-break.scss +43 -0
  86. data/_sass/scss/_z-index.scss +60 -0
  87. data/assets/css/minimal.scss +20 -0
  88. metadata +91 -5
data/_includes/video ADDED
@@ -0,0 +1,3 @@
1
+ <div class="aspect-ratio aspect-ratio--16x9 w-100 mb4">
2
+ <iframe class="aspect-ratio--object" src="{{ include.src }}" frameborder="0" allowfullscreen></iframe>
3
+ </div>
data/_layouts/default.html ADDED
@@ -0,0 +1,17 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ {% include head.html %}
4
+ <body class="black-80 {% if page.class or layout.class %}{{ page.class | default: layout.class | join: ' ' | prepend: ' ' }}{% endif %}">
5
+
6
+ {% if page.header != false %}
7
+ {% include header.html %}
8
+ {% endif%}
9
+
10
+ {{ content }}
11
+
12
+ {% if page.footer != false %}
13
+ {% include footer.html %}
14
+ {% endif%}
15
+
16
+ </body>
17
+ </html>
data/_layouts/home.html ADDED
@@ -0,0 +1,40 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <article class="flex justify-center mt3">
6
+
7
+ <div class="mw7 w-100 pa3 pa4-m">
8
+ <h3 class="f5 f4-ns fw3 mb0 pb2 bb b--light-gray">{{ site.data.theme.text.latest_articles | capitalize | default: "Latest writings" }}</h3>
9
+
10
+ {% for post in site.posts limit: site.data.theme.text.post_limit %}
11
+ <div class="post pt3 pb3 bb b--light-gray">
12
+ <div class="f5 fw3 light-silver lh-copy">
13
+ {% if post.last_modified_at %}
14
+ <span>{{ site.data.theme.text.updated }} {{ post.last_modified_at | date: site.date_format }}</span>
15
+ {% else %}
16
+ <span>{{ post.date | date: site.date_format }}</span>
17
+ {% endif %}
18
+ <span class="ttl">&middot;
19
+ {% include read_time.html %}
20
+ </span>
21
+ </div>
22
+
23
+ <a class="link black" href="{{ post.url | relative_url }}">
24
+ <h3 class="f3 f2-ns fw6 lh-title mt0 mb0">{{ post.title | escape }}</h3>
25
+ <div class="f5 f4-ns fw3 lh-copy">
26
+ {% if post.summary %}
27
+ {{ post.summary }}
28
+ {% else %}
29
+ {{ post.excerpt }}
30
+ {% endif %}
31
+ </div>
32
+ </a>
33
+ <a class="f6 fw3 link light-silver lh-copy mb0" href="{{ post.url | relative_url }}">{{ site.data.theme.text.read_more | capitalize }}</a>
34
+ </div>
35
+ {% endfor %}
36
+
37
+ <p class="f5 f4-ns fw3 mb0 mt4"><a class="link black" href="{{ site.data.theme.text.full_archive_url | relative_url }}">{{ site.data.theme.text.full_archive | capitalize }}</a></p>
38
+ </div>
39
+
40
+ </article>
data/_layouts/page.html ADDED
@@ -0,0 +1,25 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <main class="mw8 center flex flex-column flex-row-l justify-center">
6
+ <article class="mw7 {% if page.sidebar %}center-l{% else %}center{% endif %} w-100 w-75-l">
7
+ {% unless page.header.layout == 'hero' %}
8
+ <header class="ph3 ph4-m">
9
+ <h1 class="f2 fw6 lh-title mb1">{{ page.title }}</h1>
10
+ {% if page.subtitle %}
11
+ <h2 class="f3 fw3 lh-title light-silver mv2">{{ page.subtitle }}</h2>
12
+ {% endif %}
13
+ </header>
14
+ {% endunless %}
15
+
16
+ <div class="ph3 ph4-m f5 f4-ns fw3 lh-copy mb0">
17
+ {{ content }}
18
+ </div>
19
+ </article>
20
+
21
+ {% if page.sidebar %}
22
+ {% include sidebar.html %}
23
+ {% endif %}
24
+
25
+ </main>
data/_layouts/post.html ADDED
@@ -0,0 +1,50 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <main>
6
+ <article class="flex flex-column items-center">
7
+
8
+ <header class="mw7 w-100 ph3 ph4-m">
9
+ {% if site.data.theme.post_meta %}
10
+ {% include post_meta.html %}
11
+ {% endif %}
12
+
13
+ {% unless page.header.layout == 'hero' %}
14
+ <h1 class="f2 fw6 lh-title mb1">{{ page.title }}</h1>
15
+ {% if page.subtitle %}
16
+ <h2 class="f3 fw3 lh-title light-silver mv2">{{ page.subtitle }}</h2>
17
+ {% endif %}
18
+ {% endunless %}
19
+ </header>
20
+
21
+
22
+ <div class="mw7 w-100 ph3 ph4-m f5 f4-ns fw3 lh-copy mb0">
23
+ {{ content }}
24
+ </div>
25
+
26
+ <div class="mw7 w-100 ph3 ph4-m lh-copy">
27
+ {% if site.data.theme.category_tag_list %}
28
+ {% include category_tag_list.html %}
29
+ {% endif %}
30
+
31
+ {% if site.data.theme.share_icons %}
32
+ {% include share_icons.html %}
33
+ {% endif %}
34
+
35
+ {% if site.data.theme.author_bio %}
36
+ {% include author_bio.html %}
37
+ {% endif %}
38
+
39
+ {% if page.cta %}
40
+ {% include cta/{{page.cta}}.html %}
41
+ {% endif %}
42
+
43
+ {% if site.data.theme.disqus.shortname %}
44
+ {% include disqus_comments.html %}
45
+ {% endif %}
46
+ </div>
47
+
48
+ </article>
49
+ </main>
50
+
data/_sass/_custom.scss ADDED
@@ -0,0 +1,137 @@
1
+ /*
2
+
3
+ CUSTOM CSS
4
+
5
+ */
6
+
7
+ // Set default font
8
+ html {
9
+ font-family: $font-family;
10
+ }
11
+
12
+ // Removes nav margin on last menu link
13
+ nav a:last-child {
14
+ margin-right: 0;
15
+ }
16
+
17
+ // Full width
18
+ .full {
19
+ width: 100vw;
20
+ position: relative;
21
+ left: 50%;
22
+ right: 50%;
23
+ margin-left: -50vw;
24
+ margin-right: -50vw;
25
+ }
26
+
27
+ // Link color
28
+ a {
29
+ color: $link;
30
+ }
31
+
32
+ // Header caption link
33
+ span a {
34
+ color: $figcaption-color;
35
+ }
36
+
37
+ // Horizontal rules
38
+ hr {
39
+ height: 1px;
40
+ width: 100%;
41
+ border: 0;
42
+ border-top: $light-gray 1px solid;
43
+ padding: 0;
44
+ }
45
+
46
+ // Definition list
47
+ dt {
48
+ margin-top: 1em;
49
+ font-weight: bold;
50
+ }
51
+
52
+ dd {
53
+ margin-left: 1em;
54
+ }
55
+
56
+ // Abbreviation
57
+ abbr[title] {
58
+ text-decoration: none;
59
+ cursor: help;
60
+ border-bottom: 1px dotted $black;
61
+ }
62
+
63
+ // Bold text
64
+ b,
65
+ strong {
66
+ font-weight: 600;
67
+ }
68
+
69
+ // Mark tag
70
+ mark {
71
+ background-color: $mark-color;
72
+ }
73
+
74
+ // Image captions
75
+ figcaption {
76
+ color: $figcaption-color;
77
+ font-size: 0.8em;
78
+ font-weight: 300;
79
+ }
80
+
81
+ // Tables
82
+ table {
83
+ border-collapse: collapse;
84
+ border-spacing: 0;
85
+ }
86
+
87
+ table thead {
88
+ background-color: $table-header;
89
+ }
90
+
91
+ table, th, td {
92
+ padding: 0.4em;
93
+ border: 1px solid $table-border;
94
+ }
95
+
96
+ // Blockquotes
97
+ blockquote {
98
+ font-size: 1.4rem;
99
+ line-height: 1.5;
100
+ color: $blockquote-color;
101
+ border-left: $blockquote-border-left solid $blockquote-border;
102
+ padding-left: 1.2rem;
103
+ margin: 3rem 0 3rem 0;
104
+ font-style: italic;
105
+ }
106
+ blockquote cite {
107
+ font-size: .875rem;
108
+ text-transform: uppercase;
109
+ letter-spacing: .1em;
110
+ font-style: normal;
111
+ }
112
+
113
+ // Codeblocks
114
+ code {
115
+ font-family: $code-font-family;
116
+ color: $black-80;
117
+ padding: .25rem .25rem;
118
+ background-color: $code-background-color;
119
+ }
120
+
121
+ pre {
122
+ display: block;
123
+ overflow-x: auto;
124
+ margin: 2rem 0 2rem 0;
125
+ padding: .50rem 1rem;
126
+ background-color: $code-background-color;
127
+ }
128
+
129
+ pre > code {
130
+ padding: 0;
131
+ }
132
+
133
+ // Remove Tachyons 40px left/right margins on codeblocks
134
+ figure { margin: 1em 0; }
135
+
136
+ // Remove Tachyons default body margin
137
+ body { margin: 0; }
data/_sass/_tachyons.scss ADDED
@@ -0,0 +1,94 @@
1
+ // ! TACHYONS v4.6.1 | http://tachyons.io
2
+
3
+ //
4
+ //
5
+ // ________ ______
6
+ // ___ __/_____ _________ /______ ______________________
7
+ // __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
8
+ // _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
9
+ // /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
10
+ // /____/
11
+ //
12
+ // TABLE OF CONTENTS
13
+ //
14
+ // 1. External Library Includes
15
+ // - Normalize.css | http://normalize.css.github.io
16
+ // 2. Tachyons Modules
17
+ // 3. Variables
18
+ // - Media Queries
19
+ // - Colors
20
+ // 4. Debugging
21
+ // - Debug all
22
+ // - Debug children
23
+ //
24
+ //
25
+
26
+
27
+ // External Library Includes
28
+ @import 'scss/normalize';
29
+
30
+
31
+ // Variables
32
+ // Importing here will allow you to override any variables in the modules
33
+ @import 'scss/colors';
34
+ @import 'scss/media-queries';
35
+
36
+ // Debugging
37
+ @import 'scss/debug-children';
38
+ @import 'scss/debug-grid';
39
+
40
+ // Uncomment out the line below to help debug layout issues
41
+ // @import 'scss/debug';
42
+
43
+ // Modules
44
+ @import 'scss/box-sizing';
45
+ @import 'scss/aspect-ratios';
46
+ @import 'scss/images';
47
+ @import 'scss/background-size';
48
+ @import 'scss/background-position';
49
+ @import 'scss/outlines';
50
+ @import 'scss/borders';
51
+ @import 'scss/border-colors';
52
+ @import 'scss/border-radius';
53
+ @import 'scss/border-style';
54
+ @import 'scss/border-widths';
55
+ @import 'scss/box-shadow';
56
+ @import 'scss/code';
57
+ @import 'scss/coordinates';
58
+ @import 'scss/clears';
59
+ @import 'scss/display';
60
+ @import 'scss/flexbox';
61
+ @import 'scss/floats';
62
+ @import 'scss/font-family';
63
+ @import 'scss/font-style';
64
+ @import 'scss/font-weight';
65
+ @import 'scss/forms';
66
+ @import 'scss/heights';
67
+ @import 'scss/letter-spacing';
68
+ @import 'scss/line-height';
69
+ @import 'scss/links';
70
+ @import 'scss/lists';
71
+ @import 'scss/max-widths';
72
+ @import 'scss/widths';
73
+ @import 'scss/overflow';
74
+ @import 'scss/position';
75
+ @import 'scss/opacity';
76
+ @import 'scss/rotations';
77
+ @import 'scss/skins';
78
+ @import 'scss/skins-pseudo';
79
+ @import 'scss/spacing';
80
+ @import 'scss/negative-margins';
81
+ @import 'scss/tables';
82
+ @import 'scss/text-decoration';
83
+ @import 'scss/text-align';
84
+ @import 'scss/text-transform';
85
+ @import 'scss/type-scale';
86
+ @import 'scss/typography';
87
+ @import 'scss/utilities';
88
+ @import 'scss/visibility';
89
+ @import 'scss/white-space';
90
+ @import 'scss/vertical-align';
91
+ @import 'scss/hovers';
92
+ @import 'scss/z-index';
93
+ @import 'scss/nested';
94
+ @import 'scss/styles';
data/_sass/_variables.scss ADDED
@@ -0,0 +1,38 @@
1
+ /*
2
+
3
+ THEME VARIABLES
4
+
5
+ */
6
+
7
+ // Links
8
+ $link: $black;
9
+
10
+ // Fonts
11
+ $font-family: -apple-system, BlinkMacSystemFont,
12
+ 'avenir next', avenir,
13
+ 'helvetica neue', helvetica,
14
+ ubuntu,
15
+ roboto, noto,
16
+ 'segoe ui', arial,
17
+ sans-serif;
18
+
19
+
20
+ $code-font-family: monospace;
21
+
22
+ // Codeblocks
23
+ $code-background-color: $light-gray;
24
+
25
+ // Blockquotes
26
+ $blockquote-border: $black;
27
+ $blockquote-color: $black;
28
+ $blockquote-border-left: 3px;
29
+
30
+ // Tables
31
+ $table-border: $black;
32
+ $table-header: $white;
33
+
34
+ // Highlighted text
35
+ $mark-color: $lightest-blue;
36
+
37
+ // Image captions
38
+ $figcaption-color: $light-silver;
data/_sass/scss/_aspect-ratios.scss ADDED
@@ -0,0 +1,142 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ ASPECT RATIOS
11
+
12
+ */
13
+
14
+ /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
15
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
16
+ * Make sure there are no height and width attributes on the embedded media.
17
+ * Adapted from: https://github.com/suitcss/components-flex-embed
18
+ *
19
+ * Example:
20
+ *
21
+ * <div class="aspect-ratio aspect-ratio--16x9">
22
+ * <iframe class="aspect-ratio--object"></iframe>
23
+ * </div>
24
+ *
25
+ * */
26
+
27
+ .aspect-ratio {
28
+ height: 0;
29
+ position: relative;
30
+ }
31
+
32
+ .aspect-ratio--16x9 { padding-bottom: 56.25%; }
33
+ .aspect-ratio--9x16 { padding-bottom: 177.77%; }
34
+
35
+ .aspect-ratio--4x3 { padding-bottom: 75%; }
36
+ .aspect-ratio--3x4 { padding-bottom: 133.33%; }
37
+
38
+ .aspect-ratio--6x4 { padding-bottom: 66.6%; }
39
+ .aspect-ratio--4x6 { padding-bottom: 150%; }
40
+
41
+ .aspect-ratio--8x5 { padding-bottom: 62.5%; }
42
+ .aspect-ratio--5x8 { padding-bottom: 160%; }
43
+
44
+ .aspect-ratio--7x5 { padding-bottom: 71.42%; }
45
+ .aspect-ratio--5x7 { padding-bottom: 140%; }
46
+
47
+ .aspect-ratio--1x1 { padding-bottom: 100%; }
48
+
49
+ .aspect-ratio--object {
50
+ position: absolute;
51
+ top: 0;
52
+ right: 0;
53
+ bottom: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ z-index: 100;
58
+ }
59
+
60
+ @media #{$breakpoint-not-small}{
61
+ .aspect-ratio-ns {
62
+ height: 0;
63
+ position: relative;
64
+ }
65
+ .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
66
+ .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
67
+ .aspect-ratio--4x3-ns { padding-bottom: 75%; }
68
+ .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
69
+ .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
70
+ .aspect-ratio--4x6-ns { padding-bottom: 150%; }
71
+ .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
72
+ .aspect-ratio--5x8-ns { padding-bottom: 160%; }
73
+ .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
74
+ .aspect-ratio--5x7-ns { padding-bottom: 140%; }
75
+ .aspect-ratio--1x1-ns { padding-bottom: 100%; }
76
+ .aspect-ratio--object-ns {
77
+ position: absolute;
78
+ top: 0;
79
+ right: 0;
80
+ bottom: 0;
81
+ left: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ z-index: 100;
85
+ }
86
+ }
87
+
88
+ @media #{$breakpoint-medium}{
89
+ .aspect-ratio-m {
90
+ height: 0;
91
+ position: relative;
92
+ }
93
+ .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
94
+ .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
95
+ .aspect-ratio--4x3-m { padding-bottom: 75%; }
96
+ .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
97
+ .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
98
+ .aspect-ratio--4x6-m { padding-bottom: 150%; }
99
+ .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
100
+ .aspect-ratio--5x8-m { padding-bottom: 160%; }
101
+ .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
102
+ .aspect-ratio--5x7-m { padding-bottom: 140%; }
103
+ .aspect-ratio--1x1-m { padding-bottom: 100%; }
104
+ .aspect-ratio--object-m {
105
+ position: absolute;
106
+ top: 0;
107
+ right: 0;
108
+ bottom: 0;
109
+ left: 0;
110
+ width: 100%;
111
+ height: 100%;
112
+ z-index: 100;
113
+ }
114
+ }
115
+
116
+ @media #{$breakpoint-large}{
117
+ .aspect-ratio-l {
118
+ height: 0;
119
+ position: relative;
120
+ }
121
+ .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
122
+ .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
123
+ .aspect-ratio--4x3-l { padding-bottom: 75%; }
124
+ .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
125
+ .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
126
+ .aspect-ratio--4x6-l { padding-bottom: 150%; }
127
+ .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
128
+ .aspect-ratio--5x8-l { padding-bottom: 160%; }
129
+ .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
130
+ .aspect-ratio--5x7-l { padding-bottom: 140%; }
131
+ .aspect-ratio--1x1-l { padding-bottom: 100%; }
132
+ .aspect-ratio--object-l {
133
+ position: absolute;
134
+ top: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ left: 0;
138
+ width: 100%;
139
+ height: 100%;
140
+ z-index: 100;
141
+ }
142
+ }