commit ea106a74e3c24b7539f976be304fedd78090c093 Author: hiro hiro@torproject.org Date: Thu Oct 4 06:00:18 2018 +0200
Update templates and layout --- assets/static/images/tor-logo.svg | 50 +++++++++++++++++++++++++++++++++++ assets/static/images/tor-logo1x.png | Bin 0 -> 4143 bytes assets/static/images/tor-logo@2x.png | Bin 0 -> 10042 bytes content/contents.lr | 27 +++++++------------ content/getting-started/contents.lr | 43 +++++++++--------------------- databags/components.ini | 10 ++++--- templates/layout.html | 22 ++------------- templates/navbar.html | 31 ++++++++++++++++++++++ 8 files changed, 111 insertions(+), 72 deletions(-)
diff --git a/assets/static/images/tor-logo.svg b/assets/static/images/tor-logo.svg new file mode 100644 index 0000000..13d6bdd --- /dev/null +++ b/assets/static/images/tor-logo.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="82px" height="50px" viewBox="0 0 82 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --> + <title>tor-logo</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Support-Portal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-164.000000, -49.000000)"> + <g id="tor-logo" transform="translate(164.000000, 49.000000)" fill-rule="nonzero"> + <g id="Group"> + <g id="layer3_17_" transform="translate(27.606039, 0.000174)"> + <g id="layer5_17_"> + <g id="path2554_28_" transform="translate(14.569854, 0.000000)" fill="#68B044"> + <path d="M3.9108555,3.69230769 L2.607237,8.92307692 C4.44763959,5.23076923 7.43829379,2.46153846 10.8123652,-7.10542736e-15 C8.35849509,2.92307692 6.05799185,5.76923077 4.67768991,8.69230769 C7.05487659,5.38461538 10.1988977,3.53846154 13.726336,2.38461538 C8.97196262,6.61538462 5.29115744,11.1538462 2.37718668,15.6923077 L0.0766834412,14.6923077 C0.536784088,11 1.91708603,7.30769231 3.9108555,3.69230769 Z" id="Shape"></path> + </g> + <g id="path2534_7_" transform="translate(0.000000, 13.076923)" fill="#F5F8DE"> + <path d="M12.4227175,0.615384615 L16.7169902,2.38461538 C16.7169902,3.46153846 16.6403067,6.84615385 17.3304577,7.84615385 C24.5387012,17.1538462 23.3117661,35.6923077 15.8734723,36.1538462 C4.60100647,36.1538462 0.230050324,28.4615385 0.230050324,21.3846154 C0.230050324,14.9230769 7.97507788,10.6153846 12.5760844,6.84615385 C13.8030194,5.84615385 13.5729691,3.53846154 12.4227175,0.615384615 Z" id="Shape"></path> + </g> + <g id="path2536_18_" transform="translate(16.744548, 15.384615)" fill="#FFFFFF"> + <path d="M0.0491253295,0 L1.58279415,0.769230769 C1.42942727,1.76923077 1.65947759,4.07692308 2.65636233,4.69230769 C7.18068536,7.53846154 11.4749581,10.6153846 13.1619938,13.6923077 C19.1433022,24.5384615 8.94440451,34.6153846 0.125808771,33.6153846 C4.88018212,30.0769231 6.33716751,22.7692308 4.49676492,14.7692308 C3.72993051,11.6153846 2.65636233,8.84615385 0.585909418,5.61538462 C-0.180924994,4.15384615 0.125808771,2.23076923 0.0491253295,0 Z" id="Shape"></path> + </g> + </g> + <g id="layer4_17_" transform="translate(3.834172, 15.384615)" fill="#010101"> + <g id="path2540_18_" transform="translate(0.000000, 4.615385)"> + <path d="M11.1957824,0.615384615 C10.8890486,2.30769231 10.5056314,5.38461538 9.04864606,6.46153846 C8.43517853,6.92307692 7.821711,7.30769231 7.13156003,7.76923077 C4.52432303,9.53846154 1.84040259,11.2307692 0.690150971,15.6153846 C0.460100647,16.5384615 0.690150971,17.5384615 0.843517853,18.4615385 C1.53366882,21.0769231 3.37407141,24 4.83105679,25.6153846 C4.83105679,25.6923077 5.13779056,25.8461538 5.13779056,25.9230769 C6.36472562,27.3846154 6.74814282,27.7692308 11.2724659,28.7692308 L11.1957824,29.3076923 C8.43517853,28.5384615 6.21135873,27.9230769 4.75437335,26.2307692 C4.75437335,26.2307692 4.52432303,25.9230769 4.52432303,25.9230769 C2.99065421,24.1538462 1.15025162,21.2307692 0.460100647,18.4615385 C0.230050324,17.3846154 -4.30211422e-14,16.5384615 0.306733765,15.3846154 C1.53366882,10.9230769 4.29427271,9.15384615 6.97819315,7.30769231 C7.59166068,6.92307692 8.35849509,6.53846154 8.89527918,6.07692308 C9.96884735,5.23076923 10.5823149,2.6923 0769 11.1957824,0.615384615 Z" id="Shape"></path> + </g> + <g id="path2542_18_" transform="translate(3.067338, 12.179487)"> + <path d="M9.27869638,0.0512820513 C9.27869638,1.97435897 9.1253295,2.8974359 9.58543015,4.28205128 C9.89216391,5.05128205 10.8890486,6.20512821 11.1957824,7.28205128 C11.5791996,8.74358974 12.0393003,10.2820513 11.9626168,11.2820513 C11.9626168,12.3589744 11.8859334,14.4358974 11.4258327,16.6666667 C11.0424155,18.5128205 10.1988977,20.0512821 8.81859573,20.8974359 C7.36161035,20.5897436 5.67457465,20.1282051 4.67768991,19.2051282 C2.76060388,17.5128205 0.996884735,14.6666667 0.766834412,12.2051282 C0.613467529,10.2051282 2.45387012,7.20512821 5.06110712,5.74358974 C7.28492691,4.43589744 7.74502756,2.97435897 8.20512821,0.666666667 C7.51497723,2.74358974 6.90150971,4.43589744 4.83105679,5.51282051 C1.76371915,7.12820513 0.153366882,9.82051282 0.306733765,12.4358974 C0.536784088,15.7435897 1.84040259,17.974359 4.44763959,19.7435897 C5.52120776,20.5128205 7.59166068,21.3589744 8.89527918,21.5128205 L8.89527918,21.3589744 C9.89216391,21.2051282 11.119099,19.5 897436 11.7325665,17.4358974 C12.2693506,15.5128205 12.4994009,12.974359 12.4227175,11.4358974 C12.4227175,10.5128205 11.9626168,8.51282051 11.2724659,6.74358974 C10.8890486,5.74358974 10.2755811,4.74358974 9.81548047,4.05128205 C9.50874671,3.35897436 9.50874671,1.82051282 9.27869638,0.0512820513 Z" id="Shape"></path> + </g> + <g id="path2544_18_" transform="translate(8.435179, 19.230769)"> + <path d="M3.60412173,0.538461538 C3.60412173,1.84615385 4.14090582,3.46153846 4.37095615,5.15384615 C4.52432303,6.38461538 4.44763959,7.69230769 4.44763959,8.76923077 C4.44763959,10.0769231 3.98753894,12.3076923 3.37407141,13.4615385 C2.83728732,13.2307692 2.607237,12.9230769 2.22381979,12.4615385 C1.76371915,11.8461538 1.45698538,11.2307692 1.22693506,10.4615385 C0.996884735,9.92307692 0.766834412,9.30769231 0.613467529,8.53846154 C0.460100647,7.46153846 0.536784088,5.69230769 1.76371915,3.92307692 C2.68392044,2.53846154 2.91397076,2.38461538 3.29738797,0.846153846 C2.83728732,2.30769231 2.53055356,2.38461538 1.53366882,3.61538462 C0.383417206,4.92307692 0.230050324,6.84615385 0.230050324,8.46153846 C0.230050324,9.15384615 0.460100647,9.84615385 0.766834412,10.5384615 C1.07356818,11.3076923 1.3036185,12 1.68703571,12.5384615 C2.30050324,13.4615385 3.06733765,13.9230769 3.45075485,14 C3.45075485,14 3.45075485,14 3.45075485,14 C3.45075485,14 3.45075485,14 3.45075485,14 L3.45075485,13.9230769 C4.14090582,13.1538462 4.60100647,12.3076923 4.75437335,11.5384615 C4.90774023,10.6153846 4.98442368,9.61538462 5.06110712,8.46153846 C5.13779056,7.53846154 5.06110712,6.23076923 4.83105679,4.92307692 C4.44763959,3.38461538 3.83417206,1.69230769 3.60412173,0.538461538 Z" id="Shape"></path> + </g> + <g id="path2550_18_" transform="translate(11.502516, 3.076923)"> + <path d="M0.766834412,0.538461538 C0.766834412,2.46153846 0.920201294,6 1.45698538,7.38461538 C1.61035226,7.84615385 2.99065421,9.92307692 3.9108555,12.4615385 C4.60100647,14.2307692 4.67768991,15.8461538 4.83105679,16.3076923 C5.29115744,18.3846154 4.75437335,21.9230769 3.98753894,25.2307692 C3.60412173,27 2.37718668,29.2307692 0.920201294,30.1538462 L0.613467529,30.6923077 C1.38030194,30.6923077 3.37407141,28.6923077 4.06422238,26.3076923 C5.214474,22.2307692 5.67457465,20.3076923 5.13779056,15.7692308 C5.06110712,15.3076923 4.90774023,13.8461538 4.21758926,12.2307692 C3.22070453,9.76923077 1.76371915,7.46153846 1.53366882,6.92307692 C1.3036185,6.15384615 0.843517853,2.84615385 0.766834412,0.538461538 Z" id="Shape"></path> + </g> + <g id="path2552_18_" transform="translate(11.502516, 0.000000)"> + <path d="M1.45698538,0.230769231 C1.38030194,2.15384615 1.3036185,3.76923077 1.68703571,5.15384615 C2.07045291,6.76923077 4.14090582,9 4.98442368,11.6153846 C6.59477594,16.6153846 6.21135873,23.1538462 4.98442368,28.2307692 C4.52432303,30 2.45387012,32.6153846 0.383417206,33.4615385 L1.91708603,33.8461538 C2.76060388,33.8461538 4.90774023,31.7692308 5.75125809,29.4615385 C7.13156003,25.8461538 7.36161035,21.5384615 6.82482626,16.9230769 C6.82482626,16.4615385 6.05799185,12.5384615 5.36784088,10.9230769 C4.37095615,8.46153846 2.83728732,6.76923077 2.22381979,5.23076923 C1.76371915,4.07692308 1.61035226,1.07692308 1.91708603,0.384615385 L1.45698538,0.230769231 Z" id="Shape"></path> + </g> + </g> + </g> + <g id="path2528_14_" transform="translate(0.000000, 4.615385)" fill="#FFFFFF"> + <path d="M2.07045291,0.153846154 L31.4402109,0.153846154 C32.5137791,0.153846154 33.5106638,1.07692308 33.5106638,2.23076923 L33.5106638,10.9230769 C33.5106638,12.0769231 32.5904625,13 31.4402109,13 L25.382219,13 C24.0019171,13 23.465133,13.7692308 23.465133,14.6153846 L23.465133,43.0769231 C23.465133,44 22.6982986,44.7692308 21.7780973,44.7692308 L11.8092499,44.7692308 C10.8890486,44.7692308 10.1988977,44 10.1988977,43.0769231 L10.1988977,14.3846154 C10.1988977,13.5384615 9.43206326,13 8.74191229,13 L2.07045291,13 C0.920201294,13 0,12.0769231 0,10.9230769 L0,2.23076923 C0,1.07692308 0.920201294,0.153846154 2.07045291,0.153846154 Z" id="Shape"></path> + </g> + <g id="path2532_14_" transform="translate(63.647256, 16.153846)" fill="#FFFFFF"> + <path d="M16.333573,0.153846154 C17.2537743,0.153846154 18.0206087,0.923076923 18.0206087,1.84615385 L18.0206087,11.1538462 C18.0206087,12.3846154 18.0972921,12.8461538 16.6403067,12.8461538 C13.726336,12.8461538 12.4227175,14.3846154 12.4227175,16.0769231 L12.4227175,31.8461538 C12.4227175,32.6153846 11.7325665,33.2307692 10.8890486,33.2307692 L1.61035226,33.2307692 C0.766834412,33.2307692 0.0766834412,32.6153846 0.0766834412,31.8461538 L0.0766834412,13.9230769 C0.0766834412,13.6153846 0.0766834412,13.1538462 0.0766834412,12.9230769 C0.613467529,6.30769231 5.75125809,1 12.346034,0.307692308 C12.5760844,0.230769231 13.4196022,0.153846154 13.726336,0.153846154 L16.333573,0.153846154 Z" id="Shape"></path> + </g> + </g> + <path d="M55.2120776,25.2307692 C53.6017254,23.7692308 51.6846393,22.6153846 49.6141864,21.4615385 C48.6939851,20.9230769 45.8566978,18.7692308 46.8535826,15.6153846 L39.7220225,12.6923077 L39.2619219,13.0769231 C41.6391086,17.3846154 40.4121735,19.6153846 39.2619219,20.4615385 C36.8847352,22.0769231 33.4339803,24.1538462 31.6702612,26 C28.3728732,29.3846154 27.3759885,32.6923077 27.6827223,37 C27.989456,42.5384615 31.976995,47.0769231 37.3448358,48.9230769 C39.7220225,49.6923077 41.8691589,49.7692308 44.2463456,49.7692308 C48.1572011,49.7692308 52.14474,48.7692308 54.9820273,46.3076923 C58.049365,43.7692308 59.8897676,39.9230769 59.8897676,35.9230769 C59.8897676,31.6923077 58.2027318,27.9230769 55.2120776,25.2307692 Z M54.1385095,45.3076923 C51.5312725,47.5384615 46.7002157,49 44.1696621,48.9230769 C41.3323748,48.7692308 38.5717709,48.3076923 36.1945842,47.1538462 C31.9003115,45.0769231 29.0630242,40.6153846 28.9096573,36.9230769 C28.5262401,29.4615385 32.0536784,27.307 6923 35.3510664,24.6153846 C37.191469,23.0769231 39.798706,22.3076923 41.2556913,19.6153846 C41.5624251,19 41.715792,17.6923077 41.3323748,16.3846154 C41.1790079,15.9230769 40.4888569,14.2307692 40.2588066,13.9230769 L45.6266475,16.3076923 C44.9364965,18.7692308 47.0069494,21.3076923 48.6173017,22.2307692 C50.227654,23.1538462 52.834891,24.8461538 54.3685598,26.3076923 C57.1291637,28.7692308 58.5861491,32.2307692 58.5861491,35.9230769 C58.5094656,39.3846154 56.9757968,42.9230769 54.1385095,45.3076923 Z" id="Shape" fill="#010101"></path> + </g> + </g> +</svg> \ No newline at end of file diff --git a/assets/static/images/tor-logo1x.png b/assets/static/images/tor-logo1x.png new file mode 100644 index 0000000..2e27b69 Binary files /dev/null and b/assets/static/images/tor-logo1x.png differ diff --git a/assets/static/images/tor-logo@2x.png b/assets/static/images/tor-logo@2x.png new file mode 100644 index 0000000..5a459de Binary files /dev/null and b/assets/static/images/tor-logo@2x.png differ diff --git a/content/contents.lr b/content/contents.lr index 424c225..a22e4f2 100644 --- a/content/contents.lr +++ b/content/contents.lr @@ -2,26 +2,17 @@ title: Tor Styleguide | The Tor Project --- body:
-The visual identity of software is an integral part of its user experience. -Correctly using a consistent and attractive style is important to the Tor Project -<mark>to build user trust in our work.</mark> +The visual identity of software is an integral part of its user experience. Correctly using a consistent and attractive style is important to the Tor Project <mark>to build user trust in our work.</mark> + +This guide can help you create materials and answer questions you might have about using the Tor brand. <p class="text-black small text-muted">Conventions</p> + +<p>This guide aims to show by doing. The main body of each page contains examples of graphic elements that are (and, in some cases, are not) conformant with the style + being described. The column on the left specifies the details of each style and offers guidance on when and how to use it. </p>
-This guide can help you create materials and answer questions you might have about using the Tor brand. -<p class="text-black small text-muted">Conventions</p> -<p> -This guide aims to show by doing. The main body of each page contains examples of - graphic elements that are (and, in some cases, are not) conformant with the style - being described. The column on the left specifies the details of each style and - offers guidance on when and how to use it. -</p> <p class="text-black small text-muted">Contact</p> -<p class="purple"> -Please reach out to the UX team if you encounter a situation this guide does not -cover. We will work with you to help you find a solution for your design problem, -and your feedback will also help us expand and refine the guide to help it better -meet the Tor Community’s needs. You can also reach out to the UX team for any -other styleguide related questions or inquiries. -</p> + +<p class="purple"> Please reach out to the UX team if you encounter a situation this guide does not cover. We will work with you to help you find a solution for your design problem, and your feedback will also help us expand and refine the guide to help it better meet the Tor Community’s needs. You can also reach out to the UX team for any +other styleguide related questions or inquiries.</p>
--- diff --git a/content/getting-started/contents.lr b/content/getting-started/contents.lr index c3dfeb9..a12cf1e 100644 --- a/content/getting-started/contents.lr +++ b/content/getting-started/contents.lr @@ -4,37 +4,18 @@ title: Getting Started | Tor Styleguide --- body:
-The Tor Styleguide is based on [Bootstrap](https://getbootstrap.com/), an open-source -toolkit for developing with HTML, CSS, and JS. We are currently implementing -[v4.0.0-beta.2](https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta.2). - -To use the Tor styleguide, you can download our [css style](https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static) -and import it in your project. Alternatively, you can also clone this repository -and use our SASS files. [SASS](http://sass-lang.com/) is a CSS extension language. -Bootstrap and this styleguide are based on [v3.5.4](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#3_5_4__15_Decemb...). - -<p class="purple"> -If you want to use SASS you can download the complete archive for the [styleguide](https://oniongit.eu/infra/styleguide). -The [scss folder under assets](https://oniongit.eu/infra/styleguide/tree/master/assets/scss) -contains all the sass files. Since we use bootstrap, we only add a few styles -without modifying bootstrap core or defining new elements whenever possible. -These are [_tor_variables.scss](https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/scss/_t...) -and [_tor.scss](https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/scss/_t...). -These are imported in the main bootstrap scss file and compiled into the final css. -</p> - -Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. -We use these libraries but do not add extra JavaScript. You might notice that if -you run Tor Browser with high security mode, JavaScript is disabled by default. -<mark>This styleguide is designed to also work for users using Tor Browser in high -security mode</mark>, so that only few elements are affected if you disable JavaScript. - -This styleguide has been built using [Lektor](https://www.getlektor.com/). Lektor -is a static content management system. You can build this yourself by -[installing Lektor](https://www.getlektor.com/downloads/). - -We also a minimal Lektor template website that you can start modifying. This is -available at this [repository](https://gitweb.torproject.org/project/web/template.git/). +The Tor Styleguide is based on [Bootstrap](https://getbootstrap.com/), an open-source toolkit for developing with HTML, CSS, and JS. We are currently implementing [v4.0.0-beta.2](https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta.2). + +To use the Tor styleguide, you can download our [css style](https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static) and import it in your project. Alternatively, you can also clone this repository and use our SASS files. [SASS](http://sass-lang.com/) is a CSS extension language. Bootstrap and this styleguide are based on [v3.5.4](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#3_5_4__15_Decemb...). + +<p class="purple"> If you want to use SASS you can download the complete archive for the [styleguide](https://oniongit.eu/infra/styleguide). The [scss folder under assets](https://oniongit.eu/infra/styleguide/tree/master/assets/scss) contains all the sass files. Since we use bootstrap, we only add a few styles without modifying bootstrap core or defining new elements whenever possible. These are [_tor_variables.scss](https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/scss/_t...) and [_tor.scss](https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/scss/_t...). These are imported in the main bootstrap scss file and compiled into the final css. </p> + +Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript. You might notice that if you run Tor Browser with high security mode, JavaScript is disabled by default. +<mark>This styleguide is designed to also work for users using Tor Browser in high security mode</mark>, so that only few elements are affected if you disable JavaScript. + +This styleguide has been built using [Lektor](https://www.getlektor.com/). Lektor is a static content management system. You can build this yourself by [installing Lektor](https://www.getlektor.com/downloads/). + +We also provide a minimal Lektor template website that you can start modifying. This is available at this [repository](https://gitweb.torproject.org/project/web/template.git/).
<div class="border p-5 mb-3"> <h6>Use The Tor Project Styleguide</h6> diff --git a/databags/components.ini b/databags/components.ini index 8be3c14..a54b360 100644 --- a/databags/components.ini +++ b/databags/components.ini @@ -18,6 +18,10 @@ label = Tables path = #cards label = Cards
-[Scrollspy] -path = #scrollspy -label = Scrollspy \ No newline at end of file +[Pagination] +path = #pagination +label = Pagination + +[Alerts] +path = #alerts +label = Alerts diff --git a/templates/layout.html b/templates/layout.html index f636621..52a41e2 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -8,25 +8,7 @@ <title>{% block title %}Tor Styleguide | The Tor Project {% endblock %}</title> <body> <header> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> - <a class="navbar-brand" href="#">The Tor Project <span>Styleguide</span></a> - <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <div class="mx-auto pt-2"> - <ul class="navbar-nav mr-auto mobile"> - {% for id, item in bag('menu').items() %} - <li{% if this.is_child_of(item.path) %} class="nav-item toc-entry toc-h2 active" {% else %} class="toc-entry toc-h2"{% endif %}><a class="nav-link" href="{{ item.path|url }}">{{ item.label }}</a></li> {% endfor %} - </ul> - </div> - <div class="pr-2 mt-2"> - <a class="btn btn-outline-light my-2 my-sm-0 pull-right" href="https://www.torproject.org/download/download-easy.html.en" target="_blank">Download Tor Browser</a> - </div> - - </div> - </nav> + {% include 'navbar.html' %} </header> <div class="page"> <div class="container-fluid"> @@ -34,7 +16,7 @@ <div class="col-12 col-md-2 col-xl-1 bd-sidebar"> <nav id="bd-docs-nav" class="collapse bd-links"> <ul class="nav nav-pills flex-column"> - {% for id, item in bag('menu').items() %} + {% for id, item in bag('menu').items() %} <li{% if this.is_child_of(item.path) %} class="nav-item toc-entry toc-h2 active" {% else %} class="toc-entry toc-h2"{% endif %}><a class="nav-link" href="{{ item.path|url }}">{{ item.label }}</a></li> {% endfor %} </ul>
diff --git a/templates/navbar.html b/templates/navbar.html new file mode 100644 index 0000000..fd615c6 --- /dev/null +++ b/templates/navbar.html @@ -0,0 +1,31 @@ +<nav class="navbar no-background navbar-expand-lg navbar-dark fixed-top bg-primary"> + <a class="navbar-brand" href="/"> + <img src="{{ '/static/images/tor-logo.svg' }}" > + <span class="sr-only"></span> + </a> + <label for="nav-toggle"> + <a class="btn btn-lg btn-primary navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </a> + </label> + <input type="checkbox" id="nav-toggle"/> + <div class="collapse navbar-collapse hamburger-menu" id="navbarSupportedContent"> + <div class="mx-auto pt-2 pl-4"> + <ul class="navbar-nav"> + {% for id, item in bag('menu').items() %} + <li{% if this.is_child_of(item.path) %} class="nav-item active" {% else %} class="nav-item"{% endif %}> + <a class="nav-link" href="{{ item.path }}">{{ item.label }} + {% if this.is_child_of(item.path) %} + <span class="sr-only">(current)</span> + {% endif %} + </a> + </li> + {% endfor %} + </ul> + </div> + + <a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/download-easy.html.en"> + <i class="glyphicon-glyphicon-arrow-down"></i> Download Tor Browser + </a> + </div> +</nav>