steve-for-jekyll 0.2.0 → 1.1

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/404.html +9 -0
  3. data/LICENSE.txt +21 -21
  4. data/README.md +194 -5
  5. data/_config.yml +96 -51
  6. data/_includes/blog/custom-widgets.html +3 -0
  7. data/_includes/blog/post.html +57 -47
  8. data/_includes/blog/sidebar.html +42 -39
  9. data/_includes/footer.html +11 -13
  10. data/_includes/footer/custom-text.html +5 -3
  11. data/_includes/header.html +17 -17
  12. data/_includes/header/menu.html +12 -12
  13. data/_includes/post/comment-form.html +69 -0
  14. data/_includes/post/comments.html +43 -0
  15. data/_includes/search-form.html +13 -17
  16. data/_layouts/archive.html +21 -25
  17. data/_layouts/default.html +18 -18
  18. data/_layouts/home.html +23 -0
  19. data/_layouts/page.html +15 -15
  20. data/_layouts/post.html +115 -96
  21. data/_sass/{steve.scss → steve-for-jekyll.scss} +51 -51
  22. data/_sass/steve/_base.scss +237 -248
  23. data/_sass/steve/_layout.scss +472 -380
  24. data/assets/css/screen.scss +34 -34
  25. data/assets/js/responsive-videos.js +79 -79
  26. data/staticman.yml +33 -0
  27. metadata +14 -9
data/_layouts/post.html CHANGED
@@ -1,96 +1,115 @@
1
- ---
2
- layout: blog
3
- ---
4
-
5
- {% assign lang = page.lang | default: site.lang %}
6
-
7
- {% assign locale = site.data.locales[lang] %}
8
-
9
- <article class="content post">
10
- <header class="content-header">
11
- {% if page.title != "" %}
12
- <h1 class="content-title">
13
- {{ page.title }}
14
- </h1>
15
- {% endif %}
16
-
17
- <div class="content-meta">
18
- <a class="content-date" href="{{ page.url }}" rel="bookmark">
19
- <time datetime="{{ page.date | date_to_xmlschema }}">
20
- {{ page.date | date: locale.date_formats.post }}
21
- </time>
22
- </a>
23
-
24
- {% if page.author %}
25
- {% assign author = site.data.authors[page.author] %}
26
-
27
- {% if author.url %}
28
- <a class="content-author" href="{{ author.url }}" rel="author">
29
- {{ author.name }}
30
- </a>
31
- {% else %}
32
- <a class="content-author" href="{{ site.twitter.username | append: 'https://twitter.com/' }}" rel="author">
33
- {{ page.author }}
34
- </a>
35
- {% endif %}
36
- {% endif %}
37
- </div>
38
- </header>
39
-
40
- {% if page.image %}
41
- <fig[ure class="content-cover">
42
- <img src="{{ page.image.url | default: page.image }}" alt="{{ page.image.alt | default: '' }}" />
43
- </fi]gure>
44
- {% endif %}
45
-
46
- <div class="content-body">
47
- {{ page.content }}
48
- </div>
49
-
50
- {% if page.tags.size > 0 %}
51
- <footer class="content-footer">
52
- <p>{{ locale.post.tags }}</p>
53
-
54
- <ul class="content-tags">
55
- {% for tag in page.tags %}
56
- <li>
57
- {%- assign tag_slug = tag | slugify -%}
58
-
59
- <a href="{{ site.jekyll-archives.permalinks.tag | replace: ':name', tag_slug }}" rel="tag">
60
- {{ tag }}
61
- </a>
62
- </li>
63
- {% endfor %}
64
- </ul>
65
- </footer>
66
- {% endif %}
67
- </article>
68
-
69
- {% if site.steve.intensedebate_account and page.comments != false %}
70
- <section id="comments" class="content comments">
71
- <script>
72
- var idcomments_acct = "{{ site.steve.intensedebate_account }}";
73
- var idcomments_post_id = "{{ post.date | date: "%s" }}";
74
- var idcomments_post_url = "{{ post.url | absolute_url }}";
75
- </script>
76
- <span id="IDCommentsPostTitle" style="display:none"></span>
77
- <script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
78
- </section>
79
- {% endif %}
80
-
81
- {% if page.previous or page.next %}
82
- <nav class="content-navigation">
83
- {% if page.previous %}
84
- <a class="nav-link prev-link" href="{{ page.previous.url }}" rel="prev">
85
- {{ locale.pagination.prev_post }} <strong>{{ page.previous.title }}</strong>
86
- </a>
87
- {% endif %}
88
-
89
- {% if page.next %}
90
- <a class="nav-link next-link" href="{{ page.next.url }}" rel="next">
91
- {{ locale.pagination.next_post }} <strong>{{ page.next.title }}</strong>
92
- </a>
93
- {% endif %}
94
- </nav>
95
- {% endif %}
96
-
1
+ ---
2
+ layout: blog
3
+ ---
4
+
5
+ <article class="content post">
6
+ <header class="content-header">
7
+ {% if page.category %}
8
+ <div class="content-meta">
9
+ {%- assign category_slug = page.category | slugify -%}
10
+ {%- assign category_url = site.jekyll-archives.permalinks.category -%}
11
+
12
+ <a
13
+ href="{{ category_url | replace: ':name', category_slug | relative_url }}"
14
+ rel="tag"
15
+ >
16
+ {{- page.category -}}
17
+ </a>
18
+ </div>
19
+ {% endif %}
20
+
21
+ {% if page.title != "" %}
22
+ <h1 class="content-title">{{ page.title }}</h1>
23
+ {% endif %}
24
+
25
+ <div class="content-meta">
26
+ <a class="content-date" href="{{ page.url }}" rel="bookmark">
27
+ <time datetime="{{ page.date | date_to_xmlschema }}">
28
+ {{ page.date | date: site.steve.date_formats.post }}
29
+ </time>
30
+ </a>
31
+
32
+ {% if page.author %}
33
+ {% assign author = site.data.authors[page.author] %}
34
+
35
+ {% if author.url %}
36
+ <a class="content-author" href="{{ author.url }}" rel="author">
37
+ {{ author.name }}
38
+ </a>
39
+ {% else %}
40
+ <a
41
+ class="content-author"
42
+ href="{{ page.author | prepend: 'https://twitter.com/' }}"
43
+ rel="author"
44
+ >
45
+ {{ page.author }}
46
+ </a>
47
+ {% endif %}
48
+ {% endif %}
49
+ </div>
50
+ </header>
51
+
52
+ {% if page.image %}
53
+ <figure class="content-cover">
54
+ <img
55
+ src="{{ page.image.url | default: page.image }}"
56
+ alt="{{ page.image.alt | default: '' }}"
57
+ />
58
+ </figure>
59
+ {% endif %}
60
+
61
+ <div class="content-body">
62
+ {{ page.content }}
63
+ </div>
64
+
65
+ {% if page.tags.size > 0 %}
66
+ <footer class="content-footer">
67
+ <p>{{ site.steve.post.tags }}</p>
68
+
69
+ <ul class="content-tags">
70
+ {% for tag in page.tags %}
71
+ <li>
72
+ {%- assign tag_slug = tag | slugify -%}
73
+ {%- assign tag_url = site.jekyll-archives.permalinks.tag -%}
74
+
75
+ <a
76
+ href="{{ tag_url | replace: ':name', tag_slug | relative_url }}"
77
+ rel="tag"
78
+ >
79
+ {{- tag -}}
80
+ </a>
81
+ </li>
82
+ {% endfor %}
83
+ </ul>
84
+ </footer>
85
+ {% endif %}
86
+ </article>
87
+
88
+ {% include post/comments.html %}
89
+
90
+ {% if page.previous or page.next %}
91
+ <nav class="content-navigation">
92
+ {% if page.previous %}
93
+ <a
94
+ class="nav-link prev-link"
95
+ href="{{ page.previous.url | relative_url }}"
96
+ rel="prev"
97
+ >
98
+ {{ site.steve.pagination.prev_post }}
99
+
100
+ <strong>{{ page.previous.title }}</strong>
101
+ </a>
102
+ {% endif %}
103
+ {% if page.next %}
104
+ <a
105
+ class="nav-link next-link"
106
+ href="{{ page.next.url | relative_url }}"
107
+ rel="next"
108
+ >
109
+ {{ site.steve.pagination.next_post }}
110
+
111
+ <strong>{{ page.next.title }}</strong>
112
+ </a>
113
+ {% endif %}
114
+ </nav>
115
+ {% endif %}
data/_sass/{steve.scss → steve-for-jekyll.scss} RENAMED
@@ -1,51 +1,51 @@
1
- /*
2
- Color Scheme
3
- */
4
-
5
- $color__background-content: #fff !default; // posts, pages and sidebar background color.
6
- $color__background-body: #e4f0f6 !default; // body background color
7
- $color__text: #000112 !default; // body text color
8
-
9
- $color__link: #4e9dd8 !default; // color for links and accents
10
- $color__link-hover: #2361a7 !default; // alternate color for active or focused links and accents
11
-
12
- $color__details: #939496 !default; // color for details such as borders and shadows
13
- $color__details-lighter: #f0f1f4 !default; // lighter alternative for details
14
- $color__details-darker: #6d6e70 !default; // darker alternative for details
15
-
16
- /*
17
- Typography
18
- */
19
-
20
- $font__body: "Avenir Next", Corbel, "Fira Sans", "Trebuchet MS", Ubuntu, sans-serif !default; // used for the main, body typography
21
- $font__headings: $font__body !default; // used for headings and feature elements
22
- $font__code: "Cascadia Code", SFMono-Regular, Menlo, Consolas, "Fira Mono", "DejaVu Sans Mono", monospace !default; // used for pre-formatted text and code.
23
-
24
-
25
- /*
26
- Layout
27
- */
28
- $layout__container-width: 1180px !default; // the width of the main content (content + sidebar)
29
- $layout__gutter: 2rem !default; // the spacing unit between elements.
30
-
31
- :root {
32
- --color-bg: #{$color__background-content};
33
- --color-body: #{$color__background-body};
34
- --color-text: #{$color__text};
35
-
36
- --color-link: #{$color__link};
37
- --color-link-hover: #{$color__link-hover};
38
-
39
- --color-details: #{$color__details};
40
- --color-details-lighter: #{$color__details-lighter};
41
- --color-details-darker: #{$color__details-darker};
42
-
43
- --font: #{$font__body};
44
- --font-headings: #{$font__headings};
45
- --font-code: #{$font__code};
46
-
47
- --container: #{$layout__container-width};
48
- --gap: #{$layout__gutter};
49
- }
50
-
51
- @import "steve/base", "steve/layout", "steve/syntax";
1
+ /*
2
+ Color Scheme
3
+ */
4
+
5
+ $color__background-content: #fff !default; // posts, pages and sidebar background color.
6
+ $color__background-body: #e4f0f6 !default; // body background color
7
+ $color__text: #000112 !default; // body text color
8
+
9
+ $color__link: #4e9dd8 !default; // color for links and accents
10
+ $color__link-hover: #2361a7 !default; // alternate color for active or focused links and accents
11
+
12
+ $color__details: #939496 !default; // color for details such as borders and shadows
13
+ $color__details-lighter: #f0f1f4 !default; // lighter alternative for details
14
+ $color__details-darker: #6d6e70 !default; // darker alternative for details
15
+
16
+ /*
17
+ Typography
18
+ */
19
+
20
+ $font__body: "Avenir Next", Corbel, "Fira Sans", "Trebuchet MS", Ubuntu, sans-serif !default; // used for the main, body typography
21
+ $font__headings: $font__body !default; // used for headings and feature elements
22
+ $font__code: "Cascadia Code", SFMono-Regular, Menlo, Consolas, "Fira Mono", "DejaVu Sans Mono", monospace !default; // used for pre-formatted text and code.
23
+
24
+
25
+ /*
26
+ Layout
27
+ */
28
+ $layout__container-width: 1180px !default; // the width of the main content (content + sidebar)
29
+ $layout__gutter: 2rem !default; // the spacing unit between elements.
30
+
31
+ :root {
32
+ --color-bg: #{$color__background-content};
33
+ --color-body: #{$color__background-body};
34
+ --color-text: #{$color__text};
35
+
36
+ --color-link: #{$color__link};
37
+ --color-link-hover: #{$color__link-hover};
38
+
39
+ --color-details: #{$color__details};
40
+ --color-details-lighter: #{$color__details-lighter};
41
+ --color-details-darker: #{$color__details-darker};
42
+
43
+ --font: #{$font__body};
44
+ --font-headings: #{$font__headings};
45
+ --font-code: #{$font__code};
46
+
47
+ --container: #{$layout__container-width};
48
+ --gap: #{$layout__gutter};
49
+ }
50
+
51
+ @import "steve/base", "steve/layout", "steve/syntax";
data/_sass/steve/_base.scss CHANGED
@@ -1,248 +1,237 @@
1
- /*
2
- Resets
3
- */
4
-
5
- body,
6
- h1,
7
- h2,
8
- h3,
9
- h4,
10
- h5,
11
- h6,
12
- p,
13
- blockquote,
14
- pre,
15
- hr,
16
- dl,
17
- dd,
18
- ol,
19
- ul,
20
- figure {
21
- margin: 0;
22
- padding: 0;
23
- }
24
-
25
- /*
26
- Basic styling
27
- */
28
-
29
- html {
30
- font-size: 16px;
31
-
32
- @media screen and (max-width: 800px) {
33
- font-size: 14px;
34
- }
35
- }
36
-
37
- body {
38
- background-color: var(--color-body);
39
- font-family: var(--font);
40
- line-height: 1.5;
41
- }
42
-
43
- /*
44
- Text Elements
45
- */
46
-
47
- .content-body {
48
- p,
49
- pre,
50
- blockquote,
51
- dl,
52
- ul,
53
- ol,
54
- figure,
55
- iframe,
56
- table {
57
- margin-bottom: var(--gap);
58
- }
59
- }
60
-
61
- // Links
62
- a {
63
- color: var(--color-link);
64
- text-decoration: none;
65
- transition: color 250ms ease;
66
-
67
- &:hover,
68
- &:focus {
69
- color: var(--color-link-hover);
70
- text-decoration: underline;
71
- }
72
- }
73
-
74
- // Lists
75
- ul, ol {
76
- margin-left: var(--gap);
77
- }
78
-
79
- dl {
80
- dt + dd {
81
- margin-bottom: calc(var(--gap) / 2);
82
- }
83
-
84
- dt + dd + dt {
85
- margin-top: calc(var(--gap) / 2);
86
- }
87
- }
88
-
89
- // Headings
90
- h1,
91
- h2,
92
- h3,
93
- h4,
94
- h5,
95
- h6 {
96
- line-height: 1.2;
97
- font-family: var(--font-headings);
98
- }
99
-
100
- h1 {
101
- font-size: 2rem;
102
- }
103
-
104
- h2 {
105
- font-size: 1.5rem;
106
- }
107
-
108
- h3 {
109
- font-size: 1.25rem;
110
- }
111
-
112
- h4 {
113
- font-size: 1rem;
114
- }
115
-
116
- h5 {
117
- font-size: 0.875rem;
118
- }
119
-
120
- h6 {
121
- font-size: 0.75rem;
122
- }
123
-
124
- // Code
125
- pre {
126
- max-width: 100%;
127
- overflow-x: auto;
128
- }
129
-
130
- // Media
131
- img, iframe,
132
- video, audio {
133
- max-width: 100%;
134
- border-radius: 3px;
135
- box-shadow: 0 2px 5px var(--color-details);
136
- }
137
-
138
- // Tables
139
- table {
140
- border: 1px solid var(--color-details-lighter);
141
- border-radius: 3px;
142
- border-collapse: collapse;
143
- color: var(--color-details-darker);
144
- width: 100%;
145
-
146
- th, td {
147
- border-bottom: 1px solid var(--color-details-lighter);
148
- padding: calc(var(--gap) / 4);
149
- text-align: left;
150
- }
151
-
152
- th {
153
- background: var(--color-details-lighter);
154
- }
155
- }
156
-
157
- // Quotes
158
-
159
- blockquote {
160
- border-left: 4px solid var(--color-details-lighter);
161
- padding-left: calc(var(--gap) / 2);
162
- padding-top: calc(var(--gap) / 4);
163
- padding-bottom: calc(var(--gap) / 4);
164
- font-style: italic;
165
- color: var(--color-details-darker);
166
-
167
- > :last-child {
168
- margin-bottom: 0;
169
- }
170
- }
171
-
172
- // Horizontal rule
173
- hr {
174
- width: 250px;
175
- height: 3px;
176
- margin: calc(var(--gap) * 2) auto;
177
- background-color: var(--color-details-lighter);
178
- border: none;
179
- border-radius: 3px;
180
- }
181
-
182
- // Forms
183
- input[type="text"],
184
- input[type="email"],
185
- input[type="password"],
186
- input[type="search"],
187
- input[type="tel"],
188
- input[type="number"],
189
- input[type="color"],
190
- input[type="button"],
191
- input[type="reset"],
192
- input[type="submit"],
193
- textarea,
194
- button {
195
- -webkit-appearance: none;
196
- -moz-appearance: none;
197
- border: none;
198
- border-radius: 0;
199
- box-shadow: none;
200
- background: var(--color-bg);
201
- padding: 5px;
202
- margin: 0;
203
- font: inherit;
204
- }
205
-
206
- input[type="text"],
207
- input[type="email"],
208
- input[type="password"],
209
- input[type="search"],
210
- input[type="tel"],
211
- input[type="number"],
212
- input[type="color"],
213
- textarea {
214
- border-bottom: 3px dashed var(--color-details-lighter);
215
- transition: border-bottom-color 250ms ease;
216
-
217
- &:hover,
218
- &:focus {
219
- outline: none;
220
- border-bottom-color: var(--color-link);
221
- }
222
- }
223
-
224
- input[type="button"],
225
- input[type="reset"],
226
- input[type="submit"],
227
- button {
228
- box-shadow: inset 0 0 0 var(--color-details-lighter);
229
- border-bottom: 3px solid var(--color-details-lighter);
230
- color: var(--color-link);
231
- transition-property: color, box-shadow, border-bottom-color;
232
- transition-duration: 250ms;
233
- transition-timing-function: ease;
234
- padding-left: 10px;
235
- padding-right: 10px;
236
-
237
- &:hover,
238
- &:focus {
239
- cursor: pointer;
240
- box-shadow: inset 0 -2.5em 0 var(--color-link);
241
- border-bottom-color: var(--color-link-hover);
242
- color: var(--color-details-lighter);
243
- }
244
-
245
- &:active {
246
- box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
247
- }
248
- }
1
+ /*
2
+ Resets
3
+ */
4
+
5
+ body,
6
+ h1, h2, h3, h4, h5, h6,
7
+ p, blockquote, pre, hr,
8
+ dl, dd, ol, ul, figure {
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ /*
14
+ Basic styling
15
+ */
16
+
17
+ html {
18
+ font-size: 16px;
19
+ }
20
+
21
+ body {
22
+ background-color: var(--color-body);
23
+ font-family: var(--font);
24
+ line-height: 1.5;
25
+ }
26
+
27
+ /*
28
+ Accessibility helpers
29
+ */
30
+ .visually-hidden {
31
+ position: absolute !important;
32
+ height: 1px;
33
+ width: 1px;
34
+ overflow: hidden;
35
+ clip: rect(1px 1px 1px 1px);
36
+ clip: rect(1px, 1px, 1px, 1px);
37
+ white-space: nowrap;
38
+ }
39
+
40
+ /*
41
+ Text Elements
42
+ */
43
+
44
+ .content-body {
45
+ p, pre, blockquote,
46
+ dl, ul, ol,
47
+ figure, iframe, table,
48
+ .highlight {
49
+ margin-bottom: var(--gap);
50
+ }
51
+ }
52
+
53
+ // Links
54
+ a {
55
+ color: var(--color-link);
56
+ text-decoration: none;
57
+ transition: color 250ms ease;
58
+
59
+ &:hover,
60
+ &:focus {
61
+ color: var(--color-link-hover);
62
+ text-decoration: underline;
63
+ }
64
+ }
65
+
66
+ // Lists
67
+ ul, ol {
68
+ margin-left: var(--gap);
69
+ }
70
+
71
+ dl {
72
+ dt + dd {
73
+ margin-bottom: calc(var(--gap) / 2);
74
+ }
75
+
76
+ dt + dd + dt {
77
+ margin-top: calc(var(--gap) / 2);
78
+ }
79
+ }
80
+
81
+ // Headings
82
+ h1, h2, h3, h4, h5, h6 {
83
+ line-height: 1.2;
84
+ font-family: var(--font-headings);
85
+ }
86
+
87
+ h1 {
88
+ font-size: 2rem;
89
+ }
90
+
91
+ h2 {
92
+ font-size: 1.5rem;
93
+ }
94
+
95
+ h3 {
96
+ font-size: 1.25rem;
97
+ }
98
+
99
+ h4 {
100
+ font-size: 1rem;
101
+ }
102
+
103
+ h5 {
104
+ font-size: 0.875rem;
105
+ }
106
+
107
+ h6 {
108
+ font-size: 0.75rem;
109
+ }
110
+
111
+ // Code
112
+ pre {
113
+ max-width: 100%;
114
+ overflow-x: auto;
115
+ }
116
+
117
+ // Media
118
+ img, iframe,
119
+ video, audio {
120
+ max-width: 100%;
121
+ border-radius: 3px;
122
+ box-shadow: 0 2px 5px var(--color-details);
123
+ }
124
+
125
+ // Tables
126
+ table {
127
+ border: 1px solid var(--color-details-lighter);
128
+ border-radius: 3px;
129
+ border-collapse: collapse;
130
+ color: var(--color-details-darker);
131
+ width: 100%;
132
+
133
+ th, td {
134
+ border-bottom: 1px solid var(--color-details-lighter);
135
+ padding: calc(var(--gap) / 4);
136
+ text-align: left;
137
+ }
138
+
139
+ th {
140
+ background: var(--color-details-lighter);
141
+ }
142
+ }
143
+
144
+ // Quotes
145
+
146
+ blockquote {
147
+ border-left: 4px solid var(--color-details-lighter);
148
+ padding-left: calc(var(--gap) / 2);
149
+ padding-top: calc(var(--gap) / 4);
150
+ padding-bottom: calc(var(--gap) / 4);
151
+ font-style: italic;
152
+ color: var(--color-details-darker);
153
+
154
+ > :last-child {
155
+ margin-bottom: 0;
156
+ }
157
+ }
158
+
159
+ // Horizontal rule
160
+ hr {
161
+ width: 250px;
162
+ height: 3px;
163
+ margin: calc(var(--gap) * 2) auto;
164
+ background-color: var(--color-details-lighter);
165
+ border: none;
166
+ border-radius: 3px;
167
+ }
168
+
169
+ // Forms
170
+ input[type="text"],
171
+ input[type="email"],
172
+ input[type="password"],
173
+ input[type="search"],
174
+ input[type="tel"],
175
+ input[type="number"],
176
+ input[type="color"],
177
+ input[type="url"],
178
+ input[type="button"],
179
+ input[type="reset"],
180
+ input[type="submit"],
181
+ textarea,
182
+ button {
183
+ -webkit-appearance: none;
184
+ -moz-appearance: none;
185
+ border: none;
186
+ border-radius: 0;
187
+ box-shadow: none;
188
+ background: var(--color-bg);
189
+ padding: 5px;
190
+ margin: 0;
191
+ font: inherit;
192
+ }
193
+
194
+ input[type="text"],
195
+ input[type="email"],
196
+ input[type="password"],
197
+ input[type="search"],
198
+ input[type="tel"],
199
+ input[type="number"],
200
+ input[type="color"],
201
+ input[type="url"],
202
+ textarea {
203
+ border-bottom: 3px dashed var(--color-details-lighter);
204
+ transition: border-bottom-color 250ms ease;
205
+
206
+ &:hover,
207
+ &:focus {
208
+ outline: none;
209
+ border-bottom-color: var(--color-link);
210
+ }
211
+ }
212
+
213
+ input[type="button"],
214
+ input[type="reset"],
215
+ input[type="submit"],
216
+ button {
217
+ box-shadow: inset 0 0 0 var(--color-details-lighter);
218
+ border-bottom: 3px solid var(--color-details-lighter);
219
+ color: var(--color-link);
220
+ transition-property: color, box-shadow, border-bottom-color;
221
+ transition-duration: 250ms;
222
+ transition-timing-function: ease;
223
+ padding-left: 10px;
224
+ padding-right: 10px;
225
+
226
+ &:hover,
227
+ &:focus {
228
+ cursor: pointer;
229
+ box-shadow: inset 0 -2.5em 0 var(--color-link);
230
+ border-bottom-color: var(--color-link-hover);
231
+ color: var(--color-details-lighter);
232
+ }
233
+
234
+ &:active {
235
+ box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
236
+ }
237
+ }