From 3bc580082f47c19e75fe8ef92a1ad86d263fc4a3 Mon Sep 17 00:00:00 2001 From: Arlin Schaffel Date: Thu, 27 Feb 2020 10:31:27 -0600 Subject: [PATCH] Add "ribbon" navigation to top of pages * as requested by #169 * css and html lifted from processing.org to be consistent with current matching design * note that font is a bit larger that processing.org but is consistent with the rest of py.processing.org which uses larger font consistently across site --- content/css/style.css | 106 +++++++++++++++++++++++++++++++++++ template/page_template.jinja | 17 ++++++ 2 files changed, 123 insertions(+) diff --git a/content/css/style.css b/content/css/style.css index d1638b86..9b2f8b38 100644 --- a/content/css/style.css +++ b/content/css/style.css @@ -109,6 +109,112 @@ a.large-link:before { background-color: white; } +/* ================ RIBBON ================== */ + +#ribbon { + width: 900px; + height: auto; + background-color: #1d517e; + background: linear-gradient(to bottom, #003b6e, #1d517e); +} + +#ribbon ul { + display: inline-block; + margin: 0; + padding: 0; +} + +#ribbon ul.left { + float: left; +} + +#ribbon ul.right { + float: right; +} + +#ribbon ul.righthighlight { + float: right; +} + +#ribbon ul li { + display: inline-block; + margin: 0; + padding: 6px 10px 5px 10px; + list-style: none; + background-color: transparent; + background-color: rgba(0, 0, 0, 0.12); +} + +#ribbon ul.left li { + float: left; + border-right: 1px solid #1a1a1a; +} + +#ribbon ul.right li { + float: right; + border-left: 1px solid #1a1a1a; +} + +#ribbon ul.righthighlight li { + background-color: black; + float: right; + border-left: 1px solid #1a1a1a; +} + +#ribbon ul.righthighlight li a { + color: white; + font-weight: bold; +} + +#ribbon ul li a { + color: #b2b2b2; +} + +#ribbon ul li.highlight { + background-color: black; + border-right: none; +} + +#ribbon ul li.highlight a { + color: white; + font-weight: bold; +} + +#ribbon-announce { + text-align: center; + width: 900px; + height: auto; + background-color: #d1f94e; + background: linear-gradient(to bottom, #1d517e, #d1f94e); + margin-bottom: 30px; /* added when placed below the header */ +} + +#ribbon-announce ul { + display: inline-block; + margin: 0; + padding: 0; +} + +#ribbon-announce ul.center { + float: center; +} + +#ribbon-announce ul li { + display: inline-block; + margin: 0; + padding: 6px 10px 5px 10px; + list-style: none; +} + +#ribbon-announce ul.center li { + float: center; +} + +#ribbon-announce ul li a { + color: white; + font-weight: bold; +} + /* ================ HEADER ================== */ #header { width: 900px; diff --git a/template/page_template.jinja b/template/page_template.jinja index 8cb45fba..27b1a87a 100644 --- a/template/page_template.jinja +++ b/template/page_template.jinja @@ -14,8 +14,25 @@
+ {% block ribbon %} + + {% endblock %} + {% block header %}