jekyll-theme-amethyst 0.4.2 → 0.5.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 68cfabbda5545392278fc9d9c2cb3474eff1887f8767d5a5b9139ca0704dbb19
4
- data.tar.gz: 6b51b157d9a5f17b4827014c17eb720c499ea1aef854701ab4a1e44aaf07def9
3
+ metadata.gz: 3d25c640d50aa50378b45c488e6df4ec169c7cd25e26dc86f4e48aecd01c6347
4
+ data.tar.gz: 5b4f0cf5665220fbe6ca90620ce80ec3d993abd6d48ccb5f303f959cd58b67f4
5
5
  SHA512:
6
- metadata.gz: e123815db6ee3f4ccc22520372a2818946e4ddab08602644c5fcd0fc66387079c88dd3c0eef81074df51bcb85c32bceab2f577a6c74a80e4af4dd25de4568b58
7
- data.tar.gz: d729d127294a7f520a565c389cc2679a674f339761e0f4c5d5ee992cbf62abdf9e19a155282796fdf1cb834e4088f6db0dbb894c9d3f7e7fdfd6ae6477e1f4a3
6
+ metadata.gz: 3ce82d363680407364ecf5eb15f6e73ca7adf9ea559a1593aff655356300cd2e0361629b85885ec16daba21fce647617b045b9e8c4431db2576124547fee06d5
7
+ data.tar.gz: ab6539cb2b17ef4dc23b43ae04335638c1af81713ce2db503496377c166f1658e9eb1864223d7c4e5888d46bdd10f833a51d4efc91a1b5525ff5a14e0174a850
@@ -0,0 +1,29 @@
1
+ name: typesense
2
+ on:
3
+ # Once a week on Wednesday at 11:45 UTC <https://crontab.guru/>
4
+ schedule:
5
+ - cron: '45 11 * * 3'
6
+ # Or after a deployment
7
+ push:
8
+ branches:
9
+ - main
10
+ - typesense
11
+ # Or manually
12
+ workflow_dispatch:
13
+ jobs:
14
+ typesense:
15
+ name: Update Typesense
16
+ if: ${{ github.repository_owner == 'qunitjs' }} # skip on forks
17
+ runs-on: ubuntu-latest
18
+ steps:
19
+ - uses: actions/checkout@v3
20
+ - name: Docsearch Scraper
21
+ shell: bash
22
+ run: |
23
+ docker run \
24
+ -e TYPESENSE_API_KEY=${{ secrets.TYPESENSE_ADMIN_KEY }} \
25
+ -e TYPESENSE_HOST="${{ secrets.TYPESENSE_HOST }}" \
26
+ -e TYPESENSE_PORT="443" \
27
+ -e TYPESENSE_PROTOCOL="https" \
28
+ -e CONFIG="$(cat docsearch.config.json | jq -r tostring)" \
29
+ typesense/docsearch-scraper:0.6.0.rc2
data/Gemfile CHANGED
@@ -2,5 +2,3 @@ source "https://rubygems.org"
2
2
  ruby RUBY_VERSION
3
3
 
4
4
  gemspec
5
-
6
- gem "jekyll-algolia", "~> 1.7.0", group: :jekyll_plugins
data/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  [![Build Status: spider-check](https://github.com/qunitjs/jekyll-theme-amethyst/actions/workflows/spider-check.yaml/badge.svg)](https://github.com/qunitjs/jekyll-theme-amethyst/actions/workflows/spider-check.yaml)
2
+ [![rubygems.org: jekyll-theme-amethyst](https://badge.fury.io/rb/jekyll-theme-amethyst.svg)](https://rubygems.org/gems/jekyll-theme-amethyst)
2
3
 
3
4
  # Amethyst theme
4
5
 
@@ -17,6 +18,8 @@ Thanks to [Leo Balter](https://github.com/leobalter) for initiating the use of M
17
18
 
18
19
  ## Contributing
19
20
 
21
+ ### Local development
22
+
20
23
  Requirements:
21
24
 
22
25
  * [Ruby](https://www.ruby-lang.org/) (tested with Ruby 2.7+)
@@ -33,3 +36,21 @@ To generate the site and serve it locally at <http://localhost:4000/>:
33
36
  ```shell
34
37
  bundle exec jekyll serve
35
38
  ```
39
+
40
+ ### Releasing
41
+
42
+ * Edit `amethyst.gemspec` and set the next release number.
43
+ * Stage and commit the changes:
44
+ ```
45
+ git add -p
46
+ git commit
47
+ # Tag v0.0.0
48
+ git push
49
+ ```
50
+ * Create a signed semver tag, and push it:
51
+ ```
52
+ git tag -s v0.0.0
53
+ # Tag v0.0.0
54
+ git push --tags
55
+ ```
56
+ * CI will create and publish a new package to <https://rubygems.org/gems/jekyll-theme-amethyst>.
data/_config.yml CHANGED
@@ -45,9 +45,11 @@ amethyst:
45
45
  release_base: https://github.com/qunitjs/qunit/releases/tag/
46
46
  github: qunitjs
47
47
  gitter: qunitjs/qunit
48
- # https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/getting-started.md#enable-algolia-search
49
- algolia:
50
- search_only_api_key: f93ac48385f4f5866ffe9227829b329e
48
+ # https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/getting-started.md#enable-typesense
49
+ typesense:
50
+ origin: https://typesense.jquery.com
51
+ collection: amethyst_demo
52
+ search_only_api_key: Zh8mMgohXECel9wjPwqT7lekLSG3OCgz
51
53
 
52
54
 
53
55
  # Conversion settings
@@ -67,19 +69,6 @@ sass:
67
69
  sourcemap: never
68
70
 
69
71
 
70
- # Backend search settings
71
- #
72
- # Docs: https://github.com/algolia/jekyll-algolia
73
- algolia:
74
- application_id: 2Q66ROFTLQ
75
- index_name: amethyst-demo
76
- # By default only HTML paragraphs are indexed (and headings, albeit through a different mechanism).
77
- # * Include list items (similar to paragraphs).
78
- # * Include tables (index per row for better excerpts).
79
- # * Include <pre> (typically code examples, omit if it "poisons" results too much).
80
- nodes_to_index: "p,li,tr,pre"
81
-
82
-
83
72
  # Blog archives
84
73
  #
85
74
  # Docs: https://github.com/jekyll/jekyll-archives/
@@ -4,10 +4,14 @@
4
4
 
5
5
  - group: lorem
6
6
 
7
- - type: link
8
- url: /api/deprecated/
7
+ - group: deprecated
8
+ expand: false
9
9
  title: Deprecated
10
10
 
11
- - type: link
12
- url: /api/removed/
11
+ - group: removed
12
+ expand: false
13
13
  title: Removed
14
+
15
+ - type: link
16
+ url: /api/foo/quux/
17
+ title: Quux
@@ -1,14 +1,6 @@
1
- <form class="site-search" id="site-search-form" action="https://duckduckgo.com">
2
- <label class="screen-reader-text" for="aa-search-input">Search</label>
3
- <input type="search" name="q" id="aa-search-input" class="aa-input-search" placeholder="Search..." autocomplete="off">
4
- <input type="hidden" name="sites" value="{{ site.url | remove_first: 'http://' | remove_first: 'https://' }}">
5
- <svg class="aa-input-icon" viewBox="654 -372 1664 1664" height="20">
6
- <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z"/>
7
- </svg>
1
+ <form role="search" class="tsmb-form"{%- if site.amethyst.typesense.search_only_api_key -%} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{%- endif -%} action="https://duckduckgo.com">
2
+ <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
3
+ <input type="hidden" name="sites" value="{{ site.url | remove_first: 'http://' | remove_first: 'https://' }}">
8
4
  </form>
9
5
 
10
- {%- comment -%}
11
6
 
12
- See also search-js.html
13
-
14
- {%- endcomment -%}
@@ -22,7 +22,7 @@ Parameters:
22
22
  {%- endif -%}
23
23
 
24
24
  {%- if include.version == "unreleased" -%}
25
- not yet released
25
+ not yet released<span class="sep">.</span>
26
26
  {%- else -%}
27
- {{ include.label }}: {% if site.amethyst.release_base %}<a href="{{ site.amethyst.release_base }}{{ _full_version | escape }}">{{ include.version | escape }}</a>{% else %}{{ include.version | escape }}{% endif %}
27
+ {{ include.label }}: {% if site.amethyst.release_base %}<a href="{{ site.amethyst.release_base }}{{ _full_version | escape }}">{{ include.version | escape }}</a>{% else %}{{ include.version | escape }}{% endif %}<span class="sep">.</span>
28
28
  {%- endif -%}
@@ -27,29 +27,38 @@ do that here for convenience.
27
27
  {%- endunless -%}
28
28
  <div class="main main--columns wrapper">
29
29
  <div class="content" role="main">
30
+ <article>
31
+ <header>
30
32
  <h1>{{ page.title }}</h1>
31
- {%- if page.version_added or page.version_deprecated -%}
33
+ {% if page.groups -%}
34
+ <p class="post-meta">Categories: {% comment %} space {% endcomment -%}
35
+ {%- for group in page.groups -%}
36
+ {%- if page.groups.first != group %}, {% endif -%}
37
+ {%- assign group_page = site.pages | where: "layout", "group" | where: "group", group | first -%}
38
+ <a class="category" href="{{ group_page.url | relative_url }}">{{ group_page.title | escape }}</a>
39
+ {%- endfor -%}
40
+ .</p>
41
+ {%- endif %}
42
+ </header>
43
+ {% if page.version_added or page.version_deprecated -%}
32
44
  {%- assign warning = false -%}
33
45
  {%- if page.version_added == "unreleased" or page.version_deprecated or page.version_removed -%}
34
46
  {%- assign warning = true -%}
35
47
  {%- endif -%}
36
-
37
- <p class="version-details{% if warning %} note--warning{% endif %}">
38
- {%- capture lines -%}
39
- {%- if page.version_added %}
40
- {% include version.html version=page.version_added label="version added" %}
41
- {%- endif -%}
42
- {%- if page.version_deprecated %}
43
- {% include version.html version=page.version_deprecated label="deprecated" %}
44
- {%- endif -%}
45
- {%- if page.version_removed %}
46
- {% include version.html version=page.version_removed label="removed" %}
47
- {%- endif -%}
48
- {%- endcapture -%}
49
- {{ lines | strip | newline_to_br }}
50
- </p>
48
+ <p class="version-details">
49
+ {%- if page.version_added %}
50
+ {% include version.html version=page.version_added label="version added" %}
51
+ {%- endif -%}
52
+ {%- if page.version_deprecated %}
53
+ {% include version.html version=page.version_deprecated label="deprecated" %}
54
+ {%- endif -%}
55
+ {%- if page.version_removed %}
56
+ {% include version.html version=page.version_removed label="removed" %}
57
+ {%- endif -%}
58
+ </p>
51
59
  {%- endif %}
52
- {{- content }}
60
+ {{ content }}
61
+ </article>
53
62
  </div>
54
63
  {%- assign toc = true -%}
55
64
  {%- if layout.amethyst.toc == false -%}
data/_layouts/post.html CHANGED
@@ -3,15 +3,15 @@ layout: wrapper
3
3
  ---
4
4
 
5
5
  <div class="main main--columns wrapper">
6
- <div class="content">
7
- <article class="content">
6
+ <div class="content" role="main">
7
+ <article>
8
8
  <header>
9
9
  <h1>{{ page.title | escape }}</h1>
10
10
  {%- assign date_format = site.amethyst.date_format | default: "%e %B %Y" -%}
11
11
  <p class="post-meta byline">Posted on <a href="{{ page.url | relative_url }}" rel="bookmark"><time itemprop="pubdate" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: date_format }}</time></a>{% if page.author %} by <span class="vcard"><span class="fn n" rel="author">{{ page.author | escape }}</span></span>{% endif %}</p>
12
12
  </header>
13
13
  {{ content }}
14
- </article>
14
+ </article>
15
15
  {%- comment -%}
16
16
  Support basic read-only rendering of imported comments.
17
17
 
@@ -3,7 +3,7 @@
3
3
  <meta charset="utf-8">
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
5
  <link rel="icon" href="{{ site.amethyst.favicon | default: '/favicon.svg' | relative_url }}">
6
- <link rel="stylesheet" href="{{ '/assets/styles.css' | file_version_query: '/_sass/amethyst-variables.scss', '/_sass/amethyst.scss', '/_sass/highlight.scss', '/_sass/custom.scss' | relative_url }}" media="screen">
6
+ <link rel="stylesheet" href="{{ '/assets/styles.css' | file_version_query: '/_sass/amethyst-variables.scss', '/_sass/amethyst.scss', '/_sass/highlight.scss', '/_sass/custom.scss', '/_sass/typesense-minibar.css' | relative_url }}" media="screen">
7
7
  {% include opengraph.html -%}
8
8
  <body>
9
9
  <header class="site-header" role="banner">
@@ -15,9 +15,7 @@
15
15
  {{ site.title | escape }}
16
16
  {%- endif -%}
17
17
  </a>
18
- {%- if site.amethyst.algolia.search_only_api_key -%}
19
- {%- include search.html -%}
20
- {%- endif -%}
18
+ {%- include search.html -%}
21
19
  <nav class="site-nav"><ul class="site-nav-list">
22
20
  {%- for item in site.data.sitenav -%}
23
21
  <li class="site-nav-item{%- if item.sub %} has-sub-list{% endif %}">
@@ -35,8 +33,7 @@
35
33
  {%- endfor -%}
36
34
  </ul></nav>
37
35
  <div class="site-toggles">
38
- {%- if site.amethyst.algolia.search_only_api_key %}
39
- <button class="search-toggle toggle" data-opens=".site-search" aria-expanded="false">
36
+ <button class="search-toggle toggle" aria-expanded="false">
40
37
  <span class="screen-reader-text">Search</span>
41
38
  <svg class="icon aa-input-icon" aria-hidden="true" viewBox="654 -372 1664 1664" height="20">
42
39
  <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z"/>
@@ -44,16 +41,17 @@
44
41
  </button>
45
42
  <script type="module">
46
43
  const searchToggle = document.querySelector('.search-toggle');
47
- const searchToggleOpens = document.querySelector(searchToggle.dataset.opens);
44
+ const searchForm = document.querySelector('form[role=search]');
45
+ const searchInput = searchForm.querySelector('input[type=search]');
48
46
  searchToggle.addEventListener('click', () => {
49
- const state = searchToggle.classList.contains('opened');
50
- searchToggle.classList.toggle('opened', !state);
51
- searchToggle.setAttribute('aria-expanded', !state);
52
- searchToggleOpens.classList.toggle('opened', !state);
53
- searchToggleOpens.setAttribute('aria-expanded', !state);
47
+ const newState = searchToggle.getAttribute('aria-expanded') !== 'true';
48
+ searchToggle.setAttribute('aria-expanded', String(newState));
49
+ searchForm.style.display = newState ? 'block' : '';
50
+ if (newState) {
51
+ searchInput.focus();
52
+ }
54
53
  });
55
54
  </script>
56
- {%- endif %}
57
55
  <button class="nav-toggle toggle" data-opens=".site-nav" aria-expanded="false">
58
56
  <span class="screen-reader-text">Menu</span>
59
57
  <svg class="icon icon-nav-toggle" aria-hidden="true" viewBox="0 0 100 100" height="20">
@@ -103,8 +101,18 @@
103
101
  </p>
104
102
  </div>
105
103
  </footer>
106
- {%- if site.amethyst.algolia.search_only_api_key -%}
107
- {%- include search-js.html -%}
104
+ {%- comment -%}
105
+
106
+ We use type="module" as a natural way to cut the mustard,
107
+ executing the script only on modern browsers with ES6 support,
108
+ and causing no errors on older browsers.
109
+
110
+ <https://responsivenews.tumblr.com/post/18948466399/cutting-the-mustard>
111
+ <http://web.archive.org/web/20150305005331/http://responsivenews.co.uk/post/18948466399/cutting-the-mustard>
112
+
113
+ {%- endcomment -%}
114
+ {%- if site.amethyst.typesense.search_only_api_key -%}
115
+ <script defer type="module" src="{{ '/assets/typesense-minibar.js' | file_version_query | relative_url }}"></script>
108
116
  {%- endif -%}
109
117
  </body>
110
118
  </html>
data/_sass/amethyst.scss CHANGED
@@ -131,7 +131,9 @@ iframe {
131
131
  .wrapper {
132
132
  max-width: 65rem;
133
133
  margin: 0 auto;
134
- padding: 0 $size-spacing;
134
+ @media (min-width: $screen-m) {
135
+ padding: 0 $size-spacing;
136
+ }
135
137
  }
136
138
 
137
139
  .main {
@@ -289,6 +291,8 @@ table {
289
291
 
290
292
  .site-header-wrapper {
291
293
  display: flex;
294
+ flex-flow: row wrap;
295
+ gap: 0 $size-spacing;
292
296
  justify-content: space-between;
293
297
  position: relative;
294
298
  }
@@ -299,7 +303,7 @@ table {
299
303
  align-items: center;
300
304
  font-size: $size-2;
301
305
  font-weight: bold;
302
- padding: $size-1 0;
306
+ padding: $size-1 0 $size-1 $size-1;
303
307
  text-decoration: none;
304
308
  transition: color 0.3s;
305
309
 
@@ -445,227 +449,34 @@ table {
445
449
 
446
450
  /* Search */
447
451
 
448
- .site-search {
449
- display: none;
450
- position: absolute;
451
- top: 100%;
452
- left: 0;
453
- width: 100vw;
454
- height: 100%;
455
- z-index: 1;
456
- border-top: 1px solid $color-off-white;
457
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
458
-
459
- &.opened {
460
- display: block;
461
- }
462
-
463
- @media (min-width: $screen-m) {
464
- display: block;
465
- align-self: center;
466
- position: relative;
467
- flex: 1;
468
- max-width: 20rem;
469
- margin: 0 $size-spacing;
470
- border: none;
471
- box-shadow: none;
472
- }
473
- }
474
-
475
- .algolia-autocomplete {
476
- width: 100%;
477
- height: 100%;
478
- }
479
-
480
- .aa-input-search {
481
- width: 100%;
482
- height: 100%;
483
- padding: 12px 28px 12px 12px;
484
- border: none;
485
- -webkit-appearance: none;
486
- -moz-appearance: none;
487
- appearance: none;
488
- font-size: $size-1;
489
-
490
- &::-webkit-search-decoration,
491
- &::-webkit-search-cancel-button,
492
- &::-webkit-search-results-button,
493
- &::-webkit-search-results-decoration {
494
- display: none;
495
- }
496
-
497
- @media (min-width: $screen-m) {
498
- border-radius: 3px;
499
- &:not(:focus) {
500
- background: lighten($color-accent, 12%);
501
- color: $color-white;
502
- }
503
- }
504
- }
505
-
506
- // On wide viewports, when the search field is not focussed,
507
- // the search field has a dark background. Override the default
508
- // user agent styles for placeholders (which are often mid-grey,
509
- // and thus blend into the background too much) to use a bright
510
- // color instead.
511
- //
512
- // When focussed, or when toggling on narrow viewports, the search
513
- // field has a bright background, so don't apply this there!
514
- @media (min-width: $screen-m) {
515
- .site-search:not(:focus-within) .aa-input-search::placeholder {
516
- color: $color-bright;
517
- opacity: 0.6;
518
- }
519
- }
520
-
521
- // Only displayed when the optional JS code was supported in the current browser
522
- // and run to completion. Also, don't show on narrow viewports (e.g. mobile)
523
- // where keyboard shortcuts are typically not used.
524
- // Avoid using device type or pointer support, because one can have a large
525
- // "mobile"-like device with external keyboard.
526
- .site-search--bound:not(:focus-within):after {
527
- @media (min-width: $screen-m) {
528
- content: '/';
529
- display: inline-block;
530
-
531
- font-size: 60%;
532
- line-height: 2.5;
533
- text-align: center;
534
- width: 2.5em;
535
- height: 2.5em;
536
- position: absolute;
537
- top: 50%;
538
- right: 48px;
539
- transform: translateY(-50%);
540
-
541
- border-radius: 3px;
542
- border: 1px solid $color-bright;
543
- color: $color-bright;
544
- opacity: 0.6;
545
- }
546
- }
547
-
548
- .aa-input-icon {
549
- width: 16px;
550
- height: 16px;
551
- position: absolute;
552
- top: 50%;
553
- right: 16px;
554
- transform: translateY(-50%);
555
- fill: $color-accent;
452
+ .tsmb-form {
453
+ --tsmb-color-base-background: #{lighten($color-accent, 12%)};
454
+ --tsmb-color-primary30: #{$color-accent};
455
+ --tsmb-color-primary50: #{$color-vibrant};
456
+ --tsmb-color-primary90: #{$color-bright};
457
+ --tsmb-color-base30: var(--tsmb-color-primary90);
458
+ --tsmb-color-base50: #{change-color($color-bright, $alpha: 0.6)}; // #a98dc1
459
+ --tsmb-color-base90: #{change-color($color-bright, $alpha: 0.6)};
556
460
 
557
- @media (min-width: $screen-m) {
558
- .site-search:not(:focus-within) & {
559
- fill: $color-bright;
560
- }
561
- }
461
+ width: auto;
462
+ flex: 1;
463
+ align-self: center;
562
464
  }
563
-
564
- .aa-dropdown-menu {
565
- background: $color-white;
566
- border-top: 1px solid $color-off-white;
567
- width: 100%;
568
- max-height: 60vh;
569
- overflow: auto;
570
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
571
-
572
- @media (min-width: $screen-m) {
573
- border-radius: 3px;
574
- border-top: none;
575
- min-width: 500px;
576
- margin-top: $size-spacing;
577
- }
465
+ .tsmb-form:not(:focus-within)::before {
466
+ filter: unquote("invert()");
578
467
  }
579
-
580
- .aa-footer {
581
- // A sticky element is normally at the start of the content,
582
- // but since this is a footer, the space of the sticky element
583
- // is naturally preserved at the end of the list and thus won't
584
- // overlap the last suggestion.
585
- // If this were a ::before or -header instead, then this would need:
586
- // .aa-header {
587
- // margin-top: -2.4rem;
588
- // }
589
- //
590
- // and
591
- //
592
- // .aa-dropdown-menu::after {
593
- // display: block;
594
- // content: "";
595
- // height: 2.4rem;
596
- // }
597
- position: sticky;
598
- left: 0;
599
- right: 0;
600
- box-shadow: 0 0 6px rgba(0,0,0,0.19);
601
-
602
- top: calc(100% - 2.4rem);
603
- padding: 0.8rem 1rem;
604
- font-size: $size-sm;
605
- line-height: 1;
606
-
607
- color: $color-darkgrey;
608
- text-align: right;
609
-
610
- .aa-logo {
611
- // Replace alt text with image
612
- line-height: 0;
613
- font-size: 0;
614
- }
615
- .aa-logo::after {
616
- content: '';
617
- display: inline-block;
618
- vertical-align: top;
619
- // Nominal size is 485x120
620
- background: url(./logo-algolia.svg);
621
- width: calc((485 / 120) * 0.8rem);
622
- height: 0.8rem;
623
- }
468
+ .tsmb-form input[type="search"] {
469
+ border: none;
624
470
  }
625
-
626
- .aa-empty {
627
- padding: $size-spacing;
628
- }
629
-
630
- .aa-suggestion {
631
- padding: $box-spacing;
632
- cursor: pointer;
633
- border-top: 1px solid $color-off-white;
634
- border-left: 2px solid transparent;
635
-
636
- a {
637
- // reset default link style
638
- text-decoration: none;
639
- }
640
-
641
- &:hover,
642
- &.aa-cursor {
643
- background: $color-bright;
644
- border-left: 2px solid $color-vibrant;
471
+ @media (max-width: $screen-m) {
472
+ .tsmb-form {
473
+ display: none;
474
+ flex: 100%;
475
+ order: 10;
476
+ --tsmb-size-input: calc( var(--tsmb-size-base) * 2.0 );
645
477
  }
646
478
  }
647
479
 
648
- .ais-Highlight {
649
- font-style: normal;
650
- font-weight: bold;
651
- }
652
-
653
- .aa-suggestion_title,
654
- .aa-suggestion_content {
655
- // reset paragraph margin
656
- margin: 0;
657
- // clip title chunks and content match to one line
658
- white-space: nowrap;
659
- overflow: hidden;
660
- text-overflow: ellipsis;
661
- }
662
- .aa-suggestion_title {
663
- color: $color-accent;
664
- }
665
- .aa-suggestion_content {
666
- font-size: $size-sm;
667
- color: $color-darkgrey;
668
- }
669
480
 
670
481
  /* Site header: Mobile toggle controls */
671
482
 
@@ -698,7 +509,7 @@ table {
698
509
  transform: none;
699
510
  }
700
511
 
701
- .opened .icon {
512
+ .toggle[aria-expanded="true"] .icon {
702
513
  fill: $color-white;
703
514
  }
704
515
 
@@ -826,9 +637,16 @@ table {
826
637
  text-align: left;
827
638
  border-width: 1px;
828
639
  border-style: solid;
640
+
641
+ .sep {
642
+ display: block;
643
+ width: 0px;
644
+ height: 0px;
645
+ overflow: hidden;
646
+ }
829
647
  }
830
648
  }
831
- .version-details:not(.note--warning) {
649
+ .version-details {
832
650
  background: $color-light;
833
651
  border-color: $color-off-white;
834
652
  }