Skip to content

Commit 4cd1716

Browse files
jdfjdf
authored
Merge pull request #170 from FeXd/header-menu
Add "ribbon" navigation to top of pages
2 parents 6050fcd + 4e59b3b commit 4cd1716

File tree

2 files changed

+123
-0
lines changed

2 files changed

+123
-0
lines changed

‎content/css/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,112 @@ a.large-link:before {
109109
background-color: white;
110110
}
111111

112+
/* ================ RIBBON ================== */
113+
114+
#ribbon {
115+
width: 900px;
116+
height: auto;
117+
background-color: #1d517e;
118+
background: linear-gradient(to bottom, #003b6e, #1d517e);
119+
}
120+
121+
#ribbon ul {
122+
display: inline-block;
123+
margin: 0;
124+
padding: 0;
125+
}
126+
127+
#ribbon ul.left {
128+
float: left;
129+
}
130+
131+
#ribbon ul.right {
132+
float: right;
133+
}
134+
135+
#ribbon ul.righthighlight {
136+
float: right;
137+
}
138+
139+
#ribbon ul li {
140+
display: inline-block;
141+
margin: 0;
142+
padding: 6px 10px 5px 10px;
143+
list-style: none;
144+
background-color: transparent;
145+
background-color: rgba(0, 0, 0, 0.12);
146+
}
147+
148+
#ribbon ul.left li {
149+
float: left;
150+
border-right: 1px solid #1a1a1a;
151+
}
152+
153+
#ribbon ul.right li {
154+
float: right;
155+
border-left: 1px solid #1a1a1a;
156+
}
157+
158+
#ribbon ul.righthighlight li {
159+
background-color: black;
160+
float: right;
161+
border-left: 1px solid #1a1a1a;
162+
}
163+
164+
#ribbon ul.righthighlight li a {
165+
color: white;
166+
font-weight: bold;
167+
}
168+
169+
#ribbon ul li a {
170+
color: #b2b2b2;
171+
}
172+
173+
#ribbon ul li.highlight {
174+
background-color: black;
175+
border-right: none;
176+
}
177+
178+
#ribbon ul li.highlight a {
179+
color: white;
180+
font-weight: bold;
181+
}
182+
183+
#ribbon-announce {
184+
text-align: center;
185+
width: 900px;
186+
height: auto;
187+
background-color: #d1f94e;
188+
background: linear-gradient(to bottom, #1d517e, #d1f94e);
189+
margin-bottom: 30px; /* added when placed below the header */
190+
}
191+
192+
#ribbon-announce ul {
193+
display: inline-block;
194+
margin: 0;
195+
padding: 0;
196+
}
197+
198+
#ribbon-announce ul.center {
199+
float: center;
200+
}
201+
202+
#ribbon-announce ul li {
203+
display: inline-block;
204+
margin: 0;
205+
padding: 6px 10px 5px 10px;
206+
list-style: none;
207+
}
208+
209+
#ribbon-announce ul.center li {
210+
float: center;
211+
}
212+
213+
#ribbon-announce ul li a {
214+
color: white;
215+
font-weight: bold;
216+
}
217+
112218
/* ================ HEADER ================== */
113219
#header {
114220
width: 900px;

‎template/page_template.jinja‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,25 @@
1414
</head>
1515
<body id="Langauge-en" onload="" >
1616
<div id="container">
17+
{% block ribbon %}
18+
<div id="ribbon">
19+
<ul class="left">
20+
<li><a href="http://processing.org/">Processing</a></li>
21+
<li><a href="http://p5js.org/">p5.js</a></li>
22+
<li class="highlight"><a href="http://py.processing.org/">Processing.py</a></li>
23+
<li><a href="http://android.processing.org/">Processing for Android</a></li>
24+
<li><a href="http://pi.processing.org/">Processing for Pi</a></li>
25+
</ul>
26+
<ul class="right">
27+
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
28+
</ul>
29+
<div class="clear"></div>
30+
</div>
31+
{% endblock %}
32+
1733
{% block header %}
1834
<div id="header">
35+
// put a menu here? https://github.com/jdf/processing-py-site/issues/169
1936
<a href="/" title="Back to Python Mode" class="processing-logo no-cover"></a>
2037
</div>
2138
<a id="TOP" name="TOP"></a>

0 commit comments

Comments
 (0)