Skip to content

Commit 5dda6af

Browse files
divyanshugarg36divyanshugarg36
authored
Merge pull request #1 from divyanshugarg36/navbar
feat: update navbar ui with main project site
2 parents 0e01038 + 1764b77 commit 5dda6af

File tree

10 files changed

+302
-12
lines changed

10 files changed

+302
-12
lines changed

‎ui-supplemental/css/custom.css

+193
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
1+
:root {
2+
--white: #fff;
3+
--primary-color: #d0245e;
4+
--secondary-color: #888;
5+
--button-gradient: linear-gradient(82.8deg, #d0245e 5%, #df487b 95%);
6+
--main-gradient: linear-gradient(135deg, #0b365b, #6b1011);
7+
--black-10: rgba(0, 0, 0, .1);
8+
--black-20: rgba(0, 0, 0, .2);
9+
--black-30: rgba(0, 0, 0, .3);
10+
--black-40: rgba(0, 0, 0, .4);
11+
--black-50: rgba(0, 0, 0, .5);
12+
--black-60: rgba(0, 0, 0, .6);
13+
--black-70: rgba(0, 0, 0, .7);
14+
--black-80: rgba(0, 0, 0, .8);
15+
--black-90: rgba(0, 0, 0, .9);
16+
--black-100: #000;
17+
--bg-grad-1: #f3f3f3;
18+
--bg-grad-2: #f8f3f3;
19+
--dialog-bg: #f6f6f6;
20+
--border-primary: #eaeaea;
21+
--light-grey: #999;
22+
--medium-grey: #666;
23+
--dark-grey: #333;
24+
}
25+
26+
body {
27+
background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
28+
padding-top: 4rem;
29+
}
30+
31+
.toolbar {
32+
top: 4rem;
33+
}
34+
35+
.content {
36+
max-width: 1200px;
37+
margin: 0 auto;
38+
}
39+
40+
.doc {
41+
width: 100%;
42+
max-width: 100%;
43+
}
144

245
.doc .prompt {
346
color: blue;
@@ -108,3 +151,153 @@ kbd {
108151
img.medium-zoom-image {
109152
z-index: 1000;
110153
}
154+
155+
.navbar-burger span {
156+
background: var(--medium-grey);
157+
border-radius: 2px;
158+
width: 18px;
159+
}
160+
161+
.navbar {
162+
background: transparent;
163+
height: 4rem;
164+
background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
165+
border-bottom: 1px solid var(--border-primary);
166+
}
167+
168+
.navbar .navbar-item,
169+
.navbar .navbar-link {
170+
font-size: 16px;
171+
color: var(--medium-grey);
172+
}
173+
174+
.navbar-end .navbar-item.has-dropdown:hover .navbar-link,
175+
.navbar-end .navbar-link:hover,
176+
.navbar-end>a.navbar-item:hover {
177+
background: transparent !important;
178+
color: var(--medium-grey) !important;
179+
}
180+
181+
.nav-toggle {
182+
display: none;
183+
}
184+
185+
footer {
186+
background-color: var(--white);
187+
padding: 60px 0
188+
}
189+
190+
footer .footer-link-section {
191+
display: flex;
192+
justify-content: space-between;
193+
align-items: center;
194+
border-bottom: 1px solid var(--border-primary);
195+
padding: 0 36px 12px;
196+
margin: 0 24px 36px
197+
}
198+
199+
@media only screen and (max-width:768px) {
200+
footer .footer-link-section {
201+
display: grid;
202+
grid-template-columns: 1fr 1fr;
203+
grid-template-rows: 1fr 1fr
204+
}
205+
}
206+
207+
footer .footer-link-section .footer-logo {
208+
display: flex;
209+
margin: 0 auto
210+
}
211+
212+
@media only screen and (max-width:768px) {
213+
footer .footer-link-section .footer-logo {
214+
order: -1;
215+
grid-column: 1/3;
216+
margin-bottom: 12px
217+
}
218+
}
219+
220+
footer .footer-link-section ul {
221+
display: flex;
222+
margin: 0;
223+
padding: 0
224+
}
225+
226+
@media only screen and (max-width:768px) {
227+
footer .footer-link-section ul {
228+
flex-direction: column
229+
}
230+
}
231+
232+
footer .footer-link-section ul li {
233+
list-style: none;
234+
margin-right: 60px;
235+
}
236+
237+
238+
footer .footer-link-section ul li a {
239+
color: var(--dark-grey);
240+
font-size: 16px;
241+
}
242+
243+
footer .footer-link-section ul li a:hover {
244+
text-decoration: none;
245+
}
246+
247+
@media only screen and (max-width:768px) {
248+
footer .footer-link-section ul li {
249+
margin: 0 0 12px
250+
}
251+
}
252+
253+
footer .footer-link-section ul li:last-child {
254+
margin-right: 0;
255+
margin-bottom: 0
256+
}
257+
258+
footer .footer-social {
259+
display: flex;
260+
margin: 0 auto 12px;
261+
width: -webkit-fit-content;
262+
width: -moz-fit-content;
263+
width: fit-content
264+
}
265+
266+
footer .footer-social a {
267+
display: flex;
268+
justify-content: center;
269+
align-items: center;
270+
border: 1px solid var(--medium-grey);
271+
border-radius: 1000px;
272+
height: 36px;
273+
width: 36px;
274+
margin-right: 24px
275+
}
276+
277+
footer .footer-social a:last-child {
278+
margin-right: 0
279+
}
280+
281+
footer .footer-practices {
282+
display: flex;
283+
margin: 0 auto 36px;
284+
width: -webkit-fit-content;
285+
width: -moz-fit-content;
286+
width: fit-content
287+
}
288+
289+
footer .footer-copyright {
290+
padding: 0 36px;
291+
text-align: center;
292+
margin: auto
293+
}
294+
295+
footer .footer-copyright h2 {
296+
font-size: 16px;
297+
color: var(--dark-grey)
298+
}
299+
300+
footer .footer-copyright p {
301+
font-size: 14px;
302+
color: var(--light-grey)
303+
}

‎ui-supplemental/img/facebook.svg

+5
Loading

‎ui-supplemental/img/icon/favicon.ico

8.31 KB
Binary file not shown.

‎ui-supplemental/img/linkedin.svg

+5
Loading

‎ui-supplemental/img/logo/brlcad.png

593 Bytes
Loading

‎ui-supplemental/img/twitter.svg

+5
Loading

‎ui-supplemental/img/youtube.svg

+5
Loading

‎ui-supplemental/partials/footer-content.hbs

+84-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,85 @@
1-
{{!-- we don't need any footer for the time being
2-
<footer class="footer">
3-
<p>This page was built using the Antora default UI.</p>
4-
<p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
1+
<footer>
2+
<div class="footer-link-section">
3+
<ul>
4+
<li>
5+
<a href="https://github.com/BRL-CAD/brlcad">Download</a>
6+
</li>
7+
<li>
8+
<a href="https://www.facebook.com/BRL-CAD-387112738872/">News</a>
9+
</li>
10+
<li>
11+
<a href="https://en.wikipedia.org/wiki/BRL-CAD">About</a>
12+
</li>
13+
</ul>
14+
<a class="footer-logo" href="/">
15+
<img
16+
alt="BRL-CAD"
17+
src="{{@root.uiRootPath}}/img/logo/brlcad.png"
18+
height="64"
19+
width="64"
20+
/>
21+
</a>
22+
<ul>
23+
<li>
24+
<a href="https://brlcad.org/wiki/">Docs</a>
25+
</li>
26+
<li>
27+
<a href="https://github.com/BRL-CAD/brlcad/issues">Support</a>
28+
</li>
29+
<li>
30+
<a href="https://brlcad.org/gallery/">Gallery</a>
31+
</li>
32+
</ul>
33+
</div>
34+
<div class="footer-social">
35+
<a href="https://www.facebook.com/pages/BRL-CAD/387112738872">
36+
<img
37+
alt="Facebook"
38+
src="{{@root.uiRootPath}}/img/facebook.svg"
39+
height="18"
40+
width="18"
41+
/>
42+
</a>
43+
<a href="https://twitter.com/brl_cad">
44+
<img
45+
alt="Twitter"
46+
src="{{@root.uiRootPath}}/img/twitter.svg"
47+
height="18"
48+
width="18"
49+
/>
50+
</a>
51+
<a href="https://www.linkedin.com/in/brlcad">
52+
<img
53+
alt="LinkedIn"
54+
src="{{@root.uiRootPath}}/img/linkedin.svg"
55+
height="18"
56+
width="18"
57+
/>
58+
</a>
59+
<a href="https://www.youtube.com/results?search_query=brl+-+cad">
60+
<img
61+
alt="Youtube"
62+
src="{{@root.uiRootPath}}/img/youtube.svg"
63+
height="18"
64+
width="18"
65+
/>
66+
</a>
67+
</div>
68+
<a
69+
class="footer-practices"
70+
href="https://bestpractices.coreinfrastructure.org/projects/66"
71+
>
72+
<img
73+
alt="best practices"
74+
src="https://bestpractices.coreinfrastructure.org/projects/66/badge"
75+
height="20"
76+
width="184"
77+
/>
78+
</a>
79+
<div class="footer-copyright">
80+
<h2>BRL-CAD © 2021</h2>
81+
<p>All trademarks referenced herein are the properties of their respective
82+
owners. This site is not sponsored, endorsed, or run by the U.S.
83+
Government.</p>
84+
</div>
585
</footer>
6-
--}}

‎ui-supplemental/partials/header-content.hbs

+3-5
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</div>
2121
<div id="topbar-nav" class="navbar-menu">
2222
<div class="navbar-end">
23-
<!-- <a class="navbar-item" href="{{site.url}}">Home</a> -->
23+
<a class="navbar-item" href="https://brlcad.org">Home</a>
2424
<a class="navbar-item" href="{{site.url}}/intro/">Introduction</a>
2525
<a class="navbar-item" href="https://brl-cad.github.io/gallery/" target="_blank">Gallery</a>
2626
<a class="navbar-item" href="https://brl-cad.github.io/wiki/" target="_blank">Wiki</a>
@@ -35,8 +35,7 @@
3535
</div>
3636
</div>
3737

38-
{{!-- the header menu needs to be customized
39-
<div class="navbar-item has-dropdown is-hoverable">
38+
{{!-- <div class="navbar-item has-dropdown is-hoverable">
4039
<a class="navbar-link" href="#">Products</a>
4140
<div class="navbar-dropdown">
4241
<a class="navbar-item" href="#">Product A</a>
@@ -56,8 +55,7 @@
5655
<span class="control">
5756
<a class="button is-primary" href="#">Download</a>
5857
</span>
59-
</div>
60-
--}}
58+
</div> --}}
6159
</div>
6260
</div>
6361
</nav>

‎ui-supplemental/partials/nav.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
1+
<div class="nav-container" style="display: none;" {{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
22
<aside class="nav">
33
<div class="panels">
44
{{> nav-menu}}
@@ -8,7 +8,7 @@
88
But if we just remove nav-explore, the right menu (toc) disappears as well.
99
So, we enclose it in another div, and make it invisible.
1010
--}}
11-
<div style="display: none;">
11+
<div>
1212
{{> nav-explore}}
1313
</div>
1414
</div>

0 commit comments

Comments
 (0)