commit ae8bd2f6d15d602ee9b3587662fb754b36c63a8b Author: Antonela hola@antonela.me Date: Wed Dec 4 19:14:02 2019 -0300
Update colors --- templates/brand-assets.html | 4 ++-- templates/visuals.html | 41 +++++++++++++++++++++++++++++++---------- 2 files changed, 33 insertions(+), 12 deletions(-)
diff --git a/templates/brand-assets.html b/templates/brand-assets.html index f2cd0fd..e9b08f9 100644 --- a/templates/brand-assets.html +++ b/templates/brand-assets.html @@ -47,7 +47,7 @@ </div> <div class="col-sm-6"> <div class="border p-5 text-left"> - <h5>Download Tor Logo Assets</h5> + <h6>Download Tor Logo Assets</h6> <p class="m-0">This package includes .png and .svg files</p> <a class="btn btn-lg btn-link p-0" title="Tor Media Repo" href="https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static/images/tor-logo" target="_blank">Visit Repo</a> </div> @@ -96,7 +96,7 @@ </div> <div class="col-sm-6"> <div class="border p-5 text-left"> - <h5>Download Tor Browser Icon</h5> + <h6>Download Tor Browser Icon</h6> <p class="m-0">This package includes .png and .svg files</p> <a class="btn btn-lg btn-link p-0" title="Tor Media Repo" href="https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static/images/tor-browser" target="_blank">Visit Repo</a> </div> diff --git a/templates/visuals.html b/templates/visuals.html index 03ae3b9..1357026 100644 --- a/templates/visuals.html +++ b/templates/visuals.html @@ -18,37 +18,58 @@
{{ this.body }}
- <div class="page-header mb-4 mt-5"> - <h3>Colors</h3> + <div class="page-header mb-4 mt-5"> + <h3>Colors</h3> <p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p> </div> <div class="row"> <div class="col-4"> - <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-primary text-white small">#7D4698</div> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-primary text-white small"><code>#7D4698</code></div> <h5 class="text-left">Purple</h5> </div> <div class="col-4"> - <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-white small">#333A41</div> - <h5 class="text-left">Dark Grey</h5> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white small"><code>#59316B</code></div> + <h5 class="text-left">Dark Purple</h5> </div> <div class="col-4"> - <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white small">#68B030</div> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white small"><code>#68B030</code></div> <h5 class="text-left">Green</h5> </div> <div class="col-4"> - <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-light text-black small">#F8F9FA</div> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-light text-black small"><code>#F8F9FA</code></div> <h5 class="text-left">Grey</h5> </div> <div class="col-4"> - <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white small">#59316B</div> - <h5 class="text-left">Dark Purple</h5> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-white small"><code>#333A41</code></div> + <h5 class="text-left">Dark Grey</h5> </div> <div class="col-4"> - <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-white text-black small border">#FFFFFF</div> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-white text-black small border"><code>#FFFFFF</code></div> <h5 class="text-left">White</h5> </div> </div>
+ <h3 class="mt-5">Apps</h3> + <p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p> + <div class="row"> + <div class="col-3"> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-white small" style="background:blueviolet;"><code>blueviolet</code></div> + <h5 class="text-left">Blue Violet</h5> + </div> + <div class="col-3"> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-white small" style="background:darkblue;"><code>darkblue</code></div> + <h5 class="text-left">Dark Blue</h5> + </div> + <div class="col-3"> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-white small border" style="background:blue;"><code>blue</code></div> + <h5 class="text-left">Blue</h5> + </div> + <div class="col-3"> + <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-black small" style="background:lime;"><code>lime</code></div> + <h5 class="text-left">Lime</h5> + </div> + </div> + <h1 id="grid"></h1> <div class="page-header mb-4 mt-5"> <h3>Grid</h3>