Merge pull request #170 from FeXd/header-menu

Add "ribbon" navigation to top of pages
jdf · Aug 28, 2020 · 4cd1716 · 4cd1716
2 parents 6050fcd + 4e59b3b
commit 4cd1716
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 0 deletions.
diff --git 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
@@ -14,8 +14,25 @@
     </head>
     <body id="Langauge-en" onload="" >
         <div id="container">
+            {% block ribbon %}
+            <div id="ribbon">
+				<ul class="left">
+					<li><a href="http://processing.org/">Processing</a></li>
+					<li><a href="http://p5js.org/">p5.js</a></li>
+					<li class="highlight"><a href="http://py.processing.org/">Processing.py</a></li>
+					<li><a href="http://android.processing.org/">Processing for Android</a></li>
+					<li><a href="http://pi.processing.org/">Processing for Pi</a></li>
+				</ul>
+				<ul class="right">
+					<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
+				</ul>
+				<div class="clear"></div>
+			</div>
+            {% endblock %}
+
             {% block header %}
             <div id="header">
+                // put a menu here? https://github.com/jdf/processing-py-site/issues/169
                 <a href="/" title="Back to Python Mode" class="processing-logo no-cover"></a>
             </div>
             <a id="TOP" name="TOP"></a>