Skip to content

Commit 7e69442

Browse files
author
Kristján Oddsson
authored
Merge pull request #101 from github/responsive
Make the documentation responsive
2 parents f2b1688 + bfaba72 commit 7e69442

6 files changed

Lines changed: 23 additions & 22 deletions

File tree

‎docs/_includes/reference_sidebar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<aside class="col-3 pl-4 pt-1 bg-gray">
1+
<aside class="col-lg-3 pl-4 pt-1 pb-1 bg-gray">
22
<nav>
33
<ul class="f3-light ml-4">
44
{% for item in sidebarItems %}

‎docs/_includes/sidebar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<aside class="col-3 pl-4 pt-1 bg-gray">
1+
<aside class="col-lg-3 pl-4 pt-1 pb-1 bg-gray">
22
<nav>
33
<ol class="f3-light ml-4">
44
{% for item in sidebarItems %}

‎docs/_layouts/default.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,29 +22,29 @@
2222
<link rel="icon" href="{{ site.baseurl }}/icons/icon-48x48.png">
2323
</head>
2424
<body class="d-flex flex-column height-full">
25-
<header class="position-sticky top-0 d-flex"
25+
<header class="position-sticky top-0 d-md-flex"
2626
style="z-index: 1; background-image: linear-gradient(to top, var(--color-bg-canvas-shadow), var(--color-bg-canvas) 25%)">
27-
<div class="flex-1 pl-3 pb-6 col-3 {% if page.layout != "default" %}bg-gray{% endif %}">
28-
<h1 class="m-0 mt-2">Catalyst</h1>
27+
<div class="flex-1 pl-3 pb-6 col-md-3 {% if page.layout != "default" %}bg-gray{% endif %}">
28+
<h1 class="m-0 mt-md-2">Catalyst</h1>
2929
</div>
30-
<nav class="f3 col-9 d-flex flex-justify-end">
31-
<ul class="d-flex list-style-none mr-6">
32-
<li class="m-3">
30+
<nav class="f3 col-md-9 d-flex flex-justify-center flex-md-justify-end">
31+
<ul class="d-flex list-style-none mr-md-6">
32+
<li class="ml-3 mt-3 mb-3">
3333
<a href="{{ site.baseurl }}/">
3434
Home
3535
</a>
3636
</li>
37-
<li class="m-3">
37+
<li class="ml-3 mt-3 mb-3">
3838
<a href="{{ site.baseurl }}/guide/introduction">
3939
Guide
4040
</a>
4141
</li>
42-
<li class="m-3">
42+
<li class="ml-3 mt-3 mb-3">
4343
<a href="{{ site.baseurl }}/reference">
4444
Reference
4545
</a>
4646
</li>
47-
<li class="m-3">
47+
<li class="ml-3 mt-3 mb-3">
4848
<a href="https://github.com/github/catalyst">
4949
Source Code
5050
</a>

‎docs/_layouts/guide.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
layout: default
33
---
44

5-
<div class="d-flex flex-1">
5+
<div class="d-md-flex flex-1">
66
{% assign sidebarItems = site.guide | sort: 'chapter' %}
77
{% include sidebar.html %}
88

9-
<section class="col-9 px-5 f4">
9+
<section class="col-lg-9 px-5 f4">
1010
<div class="container-md markdown-body mb-5">
1111
<h1 class="mb-4 f0-light">{{ page.title }}</h1>
1212
{{ content }}

‎docs/_layouts/reference.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
layout: default
33
---
44

5-
<div class="d-flex flex-1">
5+
<div class="d-md-flex flex-1">
66
{% assign sidebarItems = site.data.reference.children %}
77
{% include reference_sidebar.html %}
88

9-
<section class="col-9 px-5 f4">
9+
<section class="col-lg-9 px-5 f4">
1010
<div class="container-md markdown-body">
1111
<h1 class="mb-4 f0-light">{{ page.title }}</h1>
1212
{{ content }}

‎docs/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
layout: default
33
---
4-
<section class="d-flex flex-justify-center container-xl clearfix">
5-
<div class="mt-6">
6-
<h1 class="h000-mktg mt-6 mr-6">Web Components<br class="hide-sm"> made easy</h1>
7-
<ul class="d-flex list-style-none mt-4">
4+
<section class="d-lg-flex p-3 flex-justify-center container-xl clearfix">
5+
<div class="mt-lg-6">
6+
<h1 class="h0-mktg mt-lg-6 mr-6">Web Components<br class="hide-sm"> made easy</h1>
7+
<ul class="d-flex flex-justify-center list-style-none mt-4">
88
<li class="ml-0 mt-3">
99
<a href="{{ site.baseurl }}/guide/introduction" class="f3 btn btn-large btn-outline bg-blue text-white" style="height: 56px; line-height: 1.2;">
1010
Read the Guide
@@ -18,12 +18,13 @@ <h1 class="h000-mktg mt-6 mr-6">Web Components<br class="hide-sm"> made easy</h1
1818
</li>
1919
</ul>
2020
</div>
21-
<svg width="500px" class="hide-md hide-sm" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
21+
<svg width="500px" class="width-full" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
2222
</section>
2323

24-
<section class="d-flex flex-justify-center container-xl">
24+
<section class="container-xl hide-sm">
2525
<div class="mt-6">
26-
<h1 class="h000-mktg mt-6 mr-6">Catalyse your Web Components</h1>
26+
<h1 class="h000-mktg hide-sm mt-6 mr-6">Catalyse your Web Components</h1>
27+
<h1 class="h0-mktg hide-md hide-lg hide-xl mt-6 mr-6">Catalyse your Web Components</h1>
2728
<div class="d-flex f4">
2829
<div class="mt-4">
2930
{% highlight html %}

0 commit comments

Comments
 (0)