Skip to content

Commit 9a43d48

Browse files
HaroenvDaniel15
Haroenv
authored and
Daniel15
committed
Packages search: allow searching for packages on every pages (#383)
* chore(tooling): Add webpack and babel to allow ES6 code The JavaScript code of the website itself starts to be bigger than in the beginings. To allow for a greater dev experience (write modern JavaScript) and plan next iterations on the search and package detail pages (use React), this PR propose to add Babel and Webpack to the toolbet of the website. The structure of the JS files now is (in my opinion) more reasonable to think about, and also will allow for faster development for further features. * fix non-display of initial results on Safari fixes #4 Safari is more strict about closing brackets in querySelectors than Chrome, which just closes it for you * use hashes in webpack build * initial add of preact * add common.js always * order of operations * fix typo and add polyfill * fix typo * make webpack work slightly faster on development * put very basic instantsearch-react in there doesn't work with preact for some reason. Will troubleshoot later * some jsx filling in * move html structure * search inside different file * initialising instant search * use classname; clean * add icons * put common.js manually ensure it doesn't get overwritten * move order of operations * not every item has a license * move Search to folder to be able to split up * move to separate files per component * extend bootstrap in our pagination we can't really add custom classes to the algolia pagination * cleanup * add possible faceting * add placeholder mixin * put placeholder * style searchbox * border images * add container around results * hide comment * switch out moment for date-fns * make the hero not float down on small sizes * center pagination * update react-instantsearch * make <main> and reset appear/disappear * don't do the redirect yet * don't link to /packages yet * no packages page yet * no dedicated search page the /packages will later be occupied by the detail page * add very light to the colors * wip: make active color darker * active background * add homepage * update dependencies * make urls work * in 3.2.0 key for configure became not necessary bug/feature was fixed in react-instantsearch * wip of keywords * don't show faceting * remove preact alias (didn't work) * only update location when needed, otherwise it makes the UI slow * save newPush when it's pushed this will fix the updating while you're typing fast, but doesn't catch it if it's the last character typed * keywords doesn't matter * no connectedToggle issue is still open with nested widgets * don't show refinementlist * add packages page same as what used to be done in /search, but now in React * make search be on the packages url * separate component for HasResults * don't mess with the react state for things that don't change rendering * chore(dev): webpack build speed optimization * fix(keys): fix react keys * fix(url): good url sync handling * "static rendering" of search component * no log * add "key" to lists of components * put back margin on hero * don't override docsearch style this didn't get applied on the version that's now live, but for some reason it does count now. It doesn't really work, so I'm going back to the defaults * use prettier settings: * with single-quotes * with trailing comma * query -> q * run prettier on webpack * stub out the featured packages so they don't "jump in" * put page in url * add title to history * no results "screen" * make the cross icon take up place regardless of state suggested by @cpojer in chat * make sure input doesn't have border-radius iOS is naughty and gives us radii all the time * small css fixes * chore(prettier): use precommit hook from prettier docs * style(searchbar): be more precise about position there seems to be an iOS Safari bug where the buttons don't show up on the right place. This should fix that * chore(dev): add vendor, start i18n in js * chore(pagesize): avoid babel-polyfill since the only place this is needed now is to iterate of this NodeList, we can replace it safely and save a considerable abount of space * chore(build): fix production build * chore(build): fix production build * bootstrap fix * build optimization * build optimization * remove bundle analyze * remove lodash optimizations, failing * feate(i18n): use i18n values for searchbar cue * chore(bundle): include bootstrap collapse this is needed for the 🍔menu * nit(search): don't put a default in the code for placeholder * feat(searchbox): use own searchbox component the way to go for react-instantsearch is to make sure that our widgets are reusable and "copy-paste"able. This is an experiment of how this is done. The reason a custom SearchBox is necessary is because we need events to add a class around the root when it's focused * style(searchbox): style ":active" things needed for this: 1. different way of referencing the border-images 2. custom searchbox 3. other image * fix(search): add pointer cursors to buttons * fix(explore): list /packages under language it should be fully i19d * feat(search): internationalise search by algolia * fix(search): url is internationalised too * fix(search): same margin left and right * fix(search): only show keywords when not empty * feat(search): no pagination when there's only one page * fix(searchbar): color with mix instead of darken() cc @LukyVj * feat(search): make "search" show up in iOS keyboard needs a form with action and an inputtype=search with a name * fix(search): don't autocorrect etc. input this usually causes you to type a certain package name and then it's autocorrected into something irrelevant * feat(search): blur input on submit this causes the keyboard to disappear on mobile leaving you more place to explore the results * style(search): make input noticeable use a white background, which is better for a11y, as suggested by @thejameskyle * style(search): give searchbar a bit more margin suggested by @LukyVj * fix(build): run webpack before jekyll Jekyll doesn't rebuild the files when the `webpack.json` doesn't exist yet * fix(pagesize): import directly from react-instantsearch core this is to save size in the final build * fix(search): put more exact min-height to wrapper to avoid jump this is only relevant on empty cache where the js isn't loaded yet * fix(i18n): json encode translation string this is the case because some languages or strings could contain ' and break the string.
1 parent a8ae911 commit 9a43d48

30 files changed

+1703
-680
lines changed

‎.babelrc

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"presets": [
3-
["es2015", {"modules": false}],
3+
["es2015", { "modules": false }],
44
// webpack understands the native import syntax, and uses it for tree shaking
55

66
"stage-2",
@@ -10,5 +10,5 @@
1010

1111
"react"
1212
// Transpile React components to JavaScript
13-
]
13+
],
1414
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ _data/i18n/*.yml
1212
node_modules/
1313
js/build
1414
_data/webpack.json
15+
.happypack/

‎404.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<div class="hero">
99
<div class="container">
1010
<h1 class="hero-text display-4">404: Page Not Found</h1>
11-
<script type="text/javascript">
11+
<script>
1212
var GOOG_FIXURL_LANG = "en";
1313
var GOOG_FIXURL_SITE = "https://yarnpkg.com";
1414
</script>
15-
<script type="text/javascript" src="https://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
15+
<script src="https://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
1616
</div>
1717
</div>

‎Makefile

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ install: test-builddeps
1111
@yarn install
1212

1313
serve: test-builddeps
14-
@yarn build
15-
@bundle exec jekyll serve --incremental& yarn start
14+
@yarn start& bundle exec jekyll serve --incremental& wait
1615

1716
build: test-builddeps
1817
@yarn build

‎_data/i18n/en.yml

+6
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,8 @@ users: Yarn Users
197197
compare: Compare Yarn Performance
198198
blog: Blog
199199

200+
packages: Packages
201+
200202
users_lead: Meet all the users of Yarn.
201203
users_description: >
202204
Logos are added by company or project representatives. They may or may not be
@@ -265,3 +267,7 @@ ci_circle: CircleCI
265267
ci_codeship: Codeship
266268
ci_travis: Travis
267269
ci_semaphore: Semaphore
270+
271+
search_placeholder: Search packages (i.e. babel, webpack, react…)
272+
search_by_algolia: Search by Algolia
273+
search_by_read_more: read how it works

‎_includes/i18n-as-script.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{% comment %} get the current translations from Jekyll, to be used in scripts {% endcomment %}
2+
<script>
3+
window.i18n = {
4+
url_base: {{url_base | jsonify }},
5+
active_language: {{vars_active_language.tag | jsonify }},
6+
search_placeholder: {{ i18n.search_placeholder | jsonify }},
7+
search_by_algolia: {{ i18n.search_by_algolia | jsonify }},
8+
search_by_read_more: {{ i18n.search_by_read_more | jsonify }},
9+
}
10+
11+
</script>

‎_includes/navigation.html

+15-18
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
</a>
99

1010
<div class="clearfix hidden-lg-up">
11-
<button class="navbar-toggler hidden-lg-up float-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
11+
<button class="navbar-toggler hidden-lg-up float-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="exCollapsingNavbar2"
12+
aria-expanded="false" aria-label="Toggle navigation"></button>
1213
</div>
1314

1415
<div class="collapse navbar-toggleable-md" id="navbar">
@@ -20,33 +21,29 @@
2021
<a class="nav-link" href="{{url_base}}/docs">{{i18n.site_nav_documentation}}</a>
2122
</li>
2223
<li class="nav-item">
23-
<a class="nav-link" href="{{site.baseurl}}/search">{{i18n.site_nav_packages}}</a>
24+
<a class="nav-link" href="{{url_base}}/packages">{{i18n.site_nav_packages}}</a>
2425
</li>
2526
<li class="nav-item">
2627
<a class="nav-link" href="{{site.baseurl}}/blog">{{i18n.site_nav_blog}}</a>
2728
</li>
2829
</ul>
2930

3031
<ul class="nav navbar-nav float-lg-right">
31-
{% assign path = page.url | split: '/' %}
32-
{% unless path[1] == 'blog' %}
33-
<li class="nav-item dropdown">
34-
<a id="dropdownNavLanguage" class="nav-link dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
35-
{% include svg/language.svg class="navbar-icon" %}
36-
{{vars_active_language.name}}
32+
{% assign path = page.url | split: '/' %} {% unless path[1] == 'blog' %}
33+
<li class="nav-item dropdown">
34+
<a id="dropdownNavLanguage" class="nav-link dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true"
35+
aria-expanded="false">
36+
{% include svg/language.svg class="navbar-icon" %} {{vars_active_language.name}}
3737
</a>
3838
<div class="dropdown-menu" aria-labelledby="dropdownNavLanguage" id="dropdownNavLanguageMenu">
39-
{% for language in site.data.languages %}
40-
{% if language.enabled %}
41-
<a href="{{site.baseurl}}/{{language.tag}}/{{vars_url_relative}}"
42-
class="dropdown-item{% if vars_active_language.tag == language.tag %} active{% endif %}"
43-
data-lang="{{language.accept_languages[0]}}">
44-
{{language.name}}
45-
</a>
46-
{% endif %}
47-
{% endfor %}
39+
{% for language in site.data.languages %} {% if language.enabled %}
40+
<a href="{{site.baseurl}}/{{language.tag}}/{{vars_url_relative}}" class="dropdown-item{% if vars_active_language.tag == language.tag %} active{% endif %}"
41+
data-lang="{{language.accept_languages[0]}}">
42+
{{language.name}}
43+
</a>
44+
{% endif %} {% endfor %}
4845
</div>
49-
</li>
46+
</li>
5047
{% endunless %}
5148

5249
<li class="nav-item">

‎_layouts/default.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
scripts:
3-
- '/js/build/common.js'
4-
---
51
{% include vars.html %}
62
<!doctype html>
73
<html lang="{% if vars_active_language.tag %}{{vars_active_language.tag}}{% else %}en{% endif %}">
@@ -26,30 +22,34 @@
2622
{% for stylesheet in page.stylesheets %}
2723
<link rel="stylesheet" href="{{stylesheet}}" />
2824
{% endfor %}
29-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
30-
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}?t={{ site.time | date_to_xmlschema }}">
25+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" />
3126
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
27+
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}?t={{ site.time | date_to_xmlschema }}">
3228
</head>
3329
<body>
3430
{% include debug/url.html url=page.url %}
3531
{% include debug/todo.html content=page.content %}
3632

3733
{% include navigation.html %}
38-
{{content}}
34+
<!-- Here to avoid flash of unstyled content on page load -->
35+
<div id="search">
36+
<div class="ais-InstantSearch__root">
37+
<form novalidate="" class="ais-SearchBox__root">
38+
<div role="search" class="ais-SearchBox__wrapper"></div>
39+
</form>
40+
</div>
41+
</div>
42+
<main>{{content}}</main>
3943
{% include footer.html %}
4044

41-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
42-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha256-/5pHDZh2fv1eZImyfiThtB5Ag4LqDjyittT7fLjdT/8=" crossorigin="anonymous"></script>
43-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha256-j+XrvkQ4jJ99Hj0pJKPr6k0RCgxDDSTs3PBqLrX2EMc=" crossorigin="anonymous"></script>
44-
45-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js" integrity="sha256-ifihHN6L/pNU1ZQikrAb7CnyMBvisKG3SUAab0F3kVU=" crossorigin="anonymous"></script>
46-
45+
{% include i18n-as-script.html %}
46+
<script src="{{site.data.webpack['/js/build/vendor.js']}}"></script>
47+
<script src="{{site.data.webpack['/js/build/common.js']}}"></script>
4748
{% for script in layout.scripts %}
48-
<script type="text/javascript" src="{{site.data.webpack[script]}}"></script>
49+
<script src="{{site.data.webpack[script]}}"></script>
4950
{% endfor %}
50-
5151
{% for script in page.scripts %}
52-
<script type="text/javascript" src="{{site.data.webpack[script]}}"></script>
52+
<script src="{{site.data.webpack[script]}}"></script>
5353
{% endfor %}
5454
</body>
5555
</html>

‎_sass/_base.scss

+28
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,31 @@ svg {
1919
.collapse.in {
2020
display: block;
2121
}
22+
23+
.searching {
24+
main {
25+
display: none;
26+
}
27+
28+
.ais-SearchBox__reset {
29+
visibility: initial;
30+
}
31+
}
32+
33+
@mixin placeholder {
34+
&::-webkit-input-placeholder {
35+
@content
36+
}
37+
&:-moz-placeholder {
38+
@content
39+
}
40+
&::-moz-placeholder {
41+
@content
42+
}
43+
&:-ms-input-placeholder {
44+
@content
45+
}
46+
}
47+
48+
$image-border-yarn-blue: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAOCAYAAACPUsFyAAAKxklEQVRoge2b63OdVRXGfyR5c6G5kNL0ArSl3KyggFLFis4weBkVP8g/4Gf/FP4L/eAnv+gHpjqKDjOCxQG00AEKvQxNgKYXCE3SnnNykuqH9TyzV96eND1pDhTtmsmc877v3muv9ay197v3ybNu2/f8oTFgDGgS0gSGgTawQpElffbpc0ifbjMKDKT2TWAb0FLbC7o/ACwn/e43CiwCFdAARtQmy7L+hoEF3atkf0N/vtfW9SDQL32N9Myyoucrqd0AcK7mf136ExbtdM/jVbq3mNr063tfzYasy3jcQcGsmWxb1vWS+gyk8cbSWMv6br+NefbZ39HzIV37+xjwma6vJHsHZZ9zpQnMsz5eI8nOBdnT0vMryS77tSw8jEH22Tpb6mvcLbZlKX13fPK9TlJpjGEifh7PPvu6IT2eGyup76jsr+OScc95N1i7dp52ymWLx4fA9h7Zm+eSY76c+i1S5jiUGAxR8t99PqVgbr0kn7OshaltdvwhcOkbAB4Bfgn8FXgdOAA8DbxKTMJFDfYZ8DiRPEeBXcA3gWlgCnhCA40Cx+TcU8BZYDfwW+BD9d8FfCJDvgtsAe4CPhYIJ4H7KaDZWS9aO4ATsgngXtl5DPi32p3TszG1n0rXAI8RoB6V/lPqd5favC5bthJBuMDqCTwM7AXuA97T/a8ADwNzArgtXJ3E/Wl82w4l4bYBP5aePcAf1W8PcDdwEfg78AYl0QZlQ0XEbSuB+SwxYYbl20tqPwQcpywEFfB1YL/wu114/AH4GnBefiwQcRuSnffL9gvABPA28BdKgtXlCpGA3yfy4jUC+1FiApwlYtYn/Q8CZ4DvEHk3CxxS+3H1McZLum7I5y3AJWExLds9sXcJOy+stg3KwvqgbFggYrtLYw4Loy1qf4nykkDPDwA7dT1AxP+8no0RuZQx8ssFygt5hMhpiNgcJfIS4Bki/kek6wMiJgeJPBjR5zARy5Z0niXy4KL+PhI2o/KhKbvuE94DBP6vC4cxYs405d/t8uuoxviU1S+Tvg6fW4ncHpYNEwPAz4ggnyES43E5P0UsHN7BvAVMEon3KvAAEZRBYtKNaPB+4Hu6P04kyTzwDfW5G/iRDDijvuNyuEEsPvuAr1J2WVeIRJvVvTsVCCiLU5NIqleAGQHbls2LstuTHCLRZgRsv+zYn0B8TH4gm5rJhnkiUE318cI0SllgnKgTRPLMyZaPhe35hJntHAMeFXa75M+AsNipsYeF5TQl0X6iT+PQErYLwEO6/3ONPQq8QCyetuk5jTVFvJCGiThV6vMQMVkP6NlxYpJOJh1zwJOUhSG/RceJJL9bPnqR/pbG+CHwsvSitgeF3T0af5qI2U4i/uf03G9kL7jvSO/ZhMcikTeniXidkC2npW8+xWK3xvxQtj0JbCcWou1E/kyoreN9Qd8n5cscEd9pYhGfTe0XNcZMsulOPZ8k8m63rv0SPUjJgUEiRr8g5uS0+rV0/wTwbPIL4LJseCrpnQcOEzE/QczNaSJWO4k4P6y/Sj4doOxIjVWTeLl9RonxaSK/7NtFYsGqNN5eIr/337bv+UMXNNg8MWG8hfR211tjb+tHdK+ibDkdPIu3jv6+RAlypXE8aatavyU5Nd7hWT5W1I9nsPqY0a/vPu4Mc/W218fOirL1b6dnFauPHhbvgKBs6S0+Srmfk78luy+pTz7y5COb9Q2qrXWO6H7eNhuH2ykTvh436/UiXhGxyOMYL8uQ2tju0dTXukl9lzX+POVYZN8sS5S4D6f7OSYNSu55l+Hccmxtp2Obj+s+MrmPMbB/blv/bLH6WOc8qIgYuG09blDwdb4NcfWbv0WJhedOzgtPauNZ93eFq+eY2/iFaTs8d3yvfgQzvj7+2rfsk+OZMXNbHxfzkc65ldsOsRrn+s8FbaDvtn3PH/pPB8duyS25Jbek51L/MbQX0mv93cqN2LORvp36tNd5/r8o1/Kz/qy9xv3NGq+bNmv16bbvlyHOnXzrqZ99rP2j4YaV1uR69Pdasv0bsafTcfFGxstb45sBH+guxhtJyk5+1jHI12v1uR6b6j8BXGvcbn2pap/Xa9NmxbmXL69Ovl0Lx2vpuC7pW79J90pvQrlR+7vtfz3tbzZMu7Fns/Co3++U+BsZYz09NzJON9IL3Z+X7dcad9PkehegL5N8UVvdGz2e9XIH0q2eXh8vvgzHkS9a/i8w6mYB2sgEWe/3j82Qur7NWKm7XRi6PS5Y1nubrWXHRo4mnX5nWWvMnm67N9C+F1LHZTNzdTN+K7yZMOpFnzZcvQBdq/NGtujrbX83Q26GbW6vkmUzttv1WKz329MXtcX/vKWOy2bm6o2+jG4W6aUfFRTuhrkJZhqbel/nSuT/7ZsTYjG/wHyO3NY66xT6zEGoWM0vcNv8Q+E8hUPie0OpbZYGhUNR1dqYt1PnYmTeUD9rczrMgcp22CfjYN/MfTEHpF76sBY3JfNXjHNDdpqj5LaOHx38dXlK5h+Zz5FLMkh63dZS5/aMszqeuUwn840yvmYvW3KphDlJ46lvLnMxBi65MH6XEw4mrTqPGhS+0pbaONZr/3PctiR9maNT53dR05cZzVnqPLScB86dtThqmTeUeUed8t04oOd1Dp3nzmCHZ+5/icLnGa+17bRjblDik3lZHr8eN3ObLkl/c0AXxwjm7GkK9f4ywfj8hMJq3EtQuLcRrNOn5dRMMmqRoG9PSs8u3W9SWMR7KOzL8wTTc5xgmrqt6d7o2Szwa/V5m0iQOel6VG0eIhJiFniXwjC13hngTfUj+daisFNzvctOAbmHYHBOAi+q/yKFru/2FwkW+TmCcn5OY7cp7Fpj5SDPJlwfIGJhm0YpC+4OonzhYYJ1arr/qMbdLn9mCWb0HuB9jXmRYL2aBf4gwfJ+UbbNESzZt+SPY9yJ0TwE/JSrWdDHpbdJxH9A49+lMZ7Ts7cJVvodwO+TjtMEW3tRffZq3Pcp5TtDrGZ8/0mfp+TvNoLJb9b4u7L720R+LyUf5ygTqkFhp9dZ6weJObJfbXO8KyJeLncxi7jSPZervEzEH/lwTP6syO7dlNIcl/ycJGJrO82gfopSYgNlQa6I+LeSDV40W8Ix2+Q6tXdkywRRSvOR8H5W/riawS8IL4QN9TXJ+ARRUXFSNj9KeWnNAD8gykaO6PlzwAsDwK9QXQYRzPeIYK1Vz2EQtwK/IWpVpih072Fikrt+5IAcXNbg71OKGLcJ2MMEhXtCf/cRE85v0MsUSv1hItiH5eC9suVxoh7tb7LxY0odDXK+IR259iazctvStaDxpgTca3o+S0wuM6jtQ702yJPwDLEQma5/nEi0emGvi09H1cdvwTEiQT+l1Df9jtjBDFHeUF4Y5il1TjuF96vC/7hsuEIsVjvUZ1E4TQL/JGrNXIDYSdpq9wiRN17UTkq/y0BcZzYlLD6SvZeJiX6MiE2bUph6Wv0XiZeby13szw7Z9pLanxKWrot7Qu0nKLVOy8J2msjtP1MmeWZq36HPhXTfi3tFTLZJfebav1OyO++AKuHiOsIWMQ8WiLys5Nug7r2pP4+PMDqr6xEiZhVR67hftn2QbH9A7euseoj8cn3lEUrd5SXgH2pzJ6V85x4ivjME5q9I535hvULUo50n8vNf6vuG+h+RTYOyc7vaviTsvCYc+i9pQJWwuXILrwAAAABJRU5ErkJggg==);
49+
$image-border-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAOCAMAAAC4jDFAAAAAnFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9FaQsiAAAAM3RSTlP69O/s8QoN9hIGBOjmfQEadiYfgnFTFr6TbGjORo6GpWJeuJuKOCzGsaqeMdeWP6HeWU5mrKx6AAAFQklEQVR4ATyMBXIEUAxCazAkFeavcP+jlmpc3wMtQQSwO8MWsa1zOVJExMeXXFyJTOqSBi6YJhLVeD9+pIgGUGpR4M9IKQyMsIMSLk4uEYkahjVjdheW9c/qpTizRWD0/QzOgiSwPcDf6UADWAmx2zbflJZVEFT1+7FjHB9f7CQQOcPYnywRBbYjKTDuTONu7W65/+GW/LcFlDs8Jecp6w/+L5/qP17PQz0zbP23bhC3DC2U6XLoCShWES1T+y6HYggkrGtZzrL3EM5VHBt+y0ZrGSN+Z2NjGUY1+g38GFnTMKDynadhsuya8AMp2WlVhXlPrTVfJoOD3qmmXjLcjLnPdXzYscH1wiCM1P57/sGLM7c39Zi9ntmCcgeb2i5jgzBHI6qzNDZKa33+1rowi2v7ReOIHtfrw+Z5xNcHThM+fn/A8bKoZd9LXaPnzWoqyzD0kkZWZyngUWvF8AN/ba4Zwr8/+TvYfpfvgRjgxFYWXVGVwveFeF8ux8/5cN6kXz+TeN8PF9Oe7vfjadou5/PnsxkJCXAk9EKYTs4gDAMRopQO6or0IXRCzKsmlGigKVWgKsS0BvMxQ6XcvKUMk+imqRj6HChgRNkaQLSrRLu2UzoAaqU0jCkQODmVEMayb8/GD13ZD4Of1VpVBILcR5DDVML1TgKpSKQUVJDIqe1SM5BAmZwoJZ0xRZEaOLdFpQBcwXZ/v7c2aXvqo9fQzTMgNHRdZ1oPU9YUFhX1/7FXFVl2wwBM9J4W9n6Wc4jc/26NM20HP5ZBIZMgDvjxYcKcKVjGI2K67cC+c4obsGr0cWk3LDShYoahHTZ0tGASJFtyaGR6yCJBSAGlEReHW0txetqSOjQolgQKa8j2jEmGGXsxQEMqI+ZIZGse27AVZy960RKqLCtHXLrEwQ0WKpEGNqAFNbJIw0soRFuu4lIeFhVs/3EWwKmOa8hnqvh8wv3Rni94Z3XCE7fdwTPtJPO5jHvyn1K9cZpPa6zz+/g4+QBOGl9+XrjnRfkPfH8STj80nBh88v3+pbd5ACeKOC53vLurcHrEWws8d94FfBwVt0zOacZzyl8EbL8/EFEe8/Piz7ZgVtHD1sgQ0QIbYFIqFsKsAjk0qFhlWTFZJE/NOLKX0NpsJYPOiHhwk+kRhqT34qLJKECWWrqVZE9Pim1YAnWGREQCQepwy0rBliRIayFmytgMQ0dMioWtPV4L87hgoya/vMQNleHDrZk05sPjJxLrQ0WCEAYA6F6vAUEh4wS7YEGn/f/HXXaPbu/mWaW9YjyCF7ZQrdUpCXMyjK23qkWicvz8fBywC9A5lpdfcpFzq1TcjLkqhTBLLWORIoNSXmqGLfNWqVVwr5YryZx3PW3vLdVu6aW05IVIYzEQM/h/O8MD0nvBbFYJVBISaAitxzEqjrvBp9G5E09gH8gNNQ8BD7TvE7E612ReeTIJUfbuYC6VEJuTBtjVxD0wJY9x3/HnQq+3jx8cv7tdjpcbHwSfIcZmMeVYYzrQAMnbtf21XB84DMMgAAA1uheGhiyRHeiw4sr5/9+67xc3C/3zsV0RctnJTBviotTNcoOg3Cb57d4MeVLKaotaDjGGIgRKP8/ZbDYr2iyp7Tr5POjzoVmUhAN8/7sEfLcJFD2mhOaDqLmqwwDbHXi1WPF7il8nSVrnOCiZl01bdnXnjSCoFVXtqibn2RAwTs1YlNe8wG+yAT7Djl1x/DzQf/a1QUViMc+xPjOLeFil5ttxcq6+5dMwPB7vYL6bmcdYsLTZoz+eb/eh5CQgS4qmcy3Ek74AfwYQ++m3uxQAAAAASUVORK5CYII=);

‎_sass/_heros.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.hero {
22
position: relative;
3-
margin: 1rem 0;
3+
margin: 0;
44
padding: 2.5rem 0;
55
color: white;
66
background-color: $yarn-blue-dark;
@@ -15,7 +15,6 @@
1515
}
1616
}
1717

18-
.hero::before,
1918
.hero::after {
2019
content: "";
2120
display: block;
@@ -24,9 +23,11 @@
2423
left: 0;
2524
right: 0;
2625
height: 7px;
27-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAOCAMAAAC4jDFAAAAAnFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9FaQsiAAAAM3RSTlP69O/s8QoN9hIGBOjmfQEadiYfgnFTFr6TbGjORo6GpWJeuJuKOCzGsaqeMdeWP6HeWU5mrKx6AAAFQklEQVR4ATyMBXIEUAxCazAkFeavcP+jlmpc3wMtQQSwO8MWsa1zOVJExMeXXFyJTOqSBi6YJhLVeD9+pIgGUGpR4M9IKQyMsIMSLk4uEYkahjVjdheW9c/qpTizRWD0/QzOgiSwPcDf6UADWAmx2zbflJZVEFT1+7FjHB9f7CQQOcPYnywRBbYjKTDuTONu7W65/+GW/LcFlDs8Jecp6w/+L5/qP17PQz0zbP23bhC3DC2U6XLoCShWES1T+y6HYggkrGtZzrL3EM5VHBt+y0ZrGSN+Z2NjGUY1+g38GFnTMKDynadhsuya8AMp2WlVhXlPrTVfJoOD3qmmXjLcjLnPdXzYscH1wiCM1P57/sGLM7c39Zi9ntmCcgeb2i5jgzBHI6qzNDZKa33+1rowi2v7ReOIHtfrw+Z5xNcHThM+fn/A8bKoZd9LXaPnzWoqyzD0kkZWZyngUWvF8AN/ba4Zwr8/+TvYfpfvgRjgxFYWXVGVwveFeF8ux8/5cN6kXz+TeN8PF9Oe7vfjadou5/PnsxkJCXAk9EKYTs4gDAMRopQO6or0IXRCzKsmlGigKVWgKsS0BvMxQ6XcvKUMk+imqRj6HChgRNkaQLSrRLu2UzoAaqU0jCkQODmVEMayb8/GD13ZD4Of1VpVBILcR5DDVML1TgKpSKQUVJDIqe1SM5BAmZwoJZ0xRZEaOLdFpQBcwXZ/v7c2aXvqo9fQzTMgNHRdZ1oPU9YUFhX1/7FXFVl2wwBM9J4W9n6Wc4jc/26NM20HP5ZBIZMgDvjxYcKcKVjGI2K67cC+c4obsGr0cWk3LDShYoahHTZ0tGASJFtyaGR6yCJBSAGlEReHW0txetqSOjQolgQKa8j2jEmGGXsxQEMqI+ZIZGse27AVZy960RKqLCtHXLrEwQ0WKpEGNqAFNbJIw0soRFuu4lIeFhVs/3EWwKmOa8hnqvh8wv3Rni94Z3XCE7fdwTPtJPO5jHvyn1K9cZpPa6zz+/g4+QBOGl9+XrjnRfkPfH8STj80nBh88v3+pbd5ACeKOC53vLurcHrEWws8d94FfBwVt0zOacZzyl8EbL8/EFEe8/Piz7ZgVtHD1sgQ0QIbYFIqFsKsAjk0qFhlWTFZJE/NOLKX0NpsJYPOiHhwk+kRhqT34qLJKECWWrqVZE9Pim1YAnWGREQCQepwy0rBliRIayFmytgMQ0dMioWtPV4L87hgoya/vMQNleHDrZk05sPjJxLrQ0WCEAYA6F6vAUEh4wS7YEGn/f/HXXaPbu/mWaW9YjyCF7ZQrdUpCXMyjK23qkWicvz8fBywC9A5lpdfcpFzq1TcjLkqhTBLLWORIoNSXmqGLfNWqVVwr5YryZx3PW3vLdVu6aW05IVIYzEQM/h/O8MD0nvBbFYJVBISaAitxzEqjrvBp9G5E09gH8gNNQ8BD7TvE7E612ReeTIJUfbuYC6VEJuTBtjVxD0wJY9x3/HnQq+3jx8cv7tdjpcbHwSfIcZmMeVYYzrQAMnbtf21XB84DMMgAAA1uheGhiyRHeiw4sr5/9+67xc3C/3zsV0RctnJTBviotTNcoOg3Cb57d4MeVLKaotaDjGGIgRKP8/ZbDYr2iyp7Tr5POjzoVmUhAN8/7sEfLcJFD2mhOaDqLmqwwDbHXi1WPF7il8nSVrnOCiZl01bdnXnjSCoFVXtqibn2RAwTs1YlNe8wG+yAT7Djl1x/DzQf/a1QUViMc+xPjOLeFil5ttxcq6+5dMwPB7vYL6bmcdYsLTZoz+eb/eh5CQgS4qmcy3Ek74AfwYQ++m3uxQAAAAASUVORK5CYII=);
28-
background-repeat: repeat-x;
29-
background-size: 144px auto;
26+
background: {
27+
image: $image-border-white;
28+
repeat: repeat-x;
29+
size: 144px auto;
30+
}
3031
}
3132

3233
.hero::before {
@@ -116,7 +117,7 @@
116117

117118
@include media-breakpoint-up('sm') {
118119
.hero {
119-
margin: 3rem 0;
120+
margin: 0 0 3rem 0;
120121
padding: 4rem 0;
121122
}
122123

0 commit comments

Comments
 (0)