Skip to content

Commit 2aeb589

Browse files
author
Scott Straughan
committed
Add support to nav bar for a drop menu.
1 parent 8ab15cb commit 2aeb589

File tree

2 files changed

+227
-39
lines changed

2 files changed

+227
-39
lines changed

‎_includes/nav-bar.html‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,31 @@
1010
</a>
1111
</div>
1212
<div class="items">
13-
<a href="{{'' | absolute_url}}"
14-
{% if page.url == '/' %} class="selected" {% endif %}> Home</a>
15-
<a href="{{'updates' | absolute_url}}"
16-
{% if page.url contains "updates/" %} class="selected" {% endif %}> Updates</a>
17-
<a href="{{'about' | absolute_url}}"
18-
{% if page.url contains "about.html" %} class="selected" {% endif %}> About</a>
19-
<a href="{{'consortium' | absolute_url}}"
20-
{% if page.url contains "consortium.html" %} class="selected" {% endif %}> Consortium</a>
21-
<a href="{{'deliverables' | absolute_url}}"
22-
{% if page.url contains "deliverables.html" %} class="selected" {% endif %}> Deliverables</a>
23-
<a href="{{'contact' | absolute_url}}"
24-
{% if page.url contains "contact.html" %} class="selected" {% endif %}> Contact</a>
13+
<div {% if page.url == '/' %} class="selected" {% endif %}>
14+
<a href="{{'' | absolute_url}}">Home</a>
15+
</div>
16+
<div {% if page.url contains "about.html" %} class="selected" {% endif %}>
17+
<a href="{{'about' | absolute_url}}">About</a>
18+
<div class="drop">
19+
<a href="{{'about/advisory' | absolute_url}}">Advisory Board</a>
20+
</div>
21+
</div>
22+
<div {% if page.url contains "updates/" %} class="selected" {% endif %}>
23+
<a href="{{'updates' | absolute_url}}">Updates</a>
24+
</div>
25+
<div {% if page.url contains "consortium.html" %} class="selected" {% endif %}>
26+
<a href="{{'consortium' | absolute_url}}">Consortium</a>
27+
</div>
28+
<div {% if page.url contains "results/" %} class="selected" {% endif %}>
29+
<a href="{{'results' | absolute_url}}">Results</a>
30+
<div class="drop">
31+
<a href="{{'results/publications' | absolute_url}}">Publications</a>
32+
<a href="{{'results/deliverables' | absolute_url}}">Deliverables</a>
33+
</div>
34+
</div>
35+
<div {% if page.url contains "contact.html" %} class="selected" {% endif %}>
36+
<a href="{{'contact' | absolute_url}}">Contact</a>
37+
</div>
2538
</div>
2639
<div class="burger">
2740
<label for="navigation-checkbox">

‎static/css/styled.scss‎

Lines changed: 202 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,19 @@ body {
4040
}
4141

4242
table {
43+
border-radius: 12px;
44+
overflow: hidden;
45+
46+
td, th {
47+
padding: 1.5rem;
48+
}
49+
4350
thead {
4451
tr {
4552
background-color: var(--hint-color);
4653
color: white;
47-
48-
th {
49-
padding: 1rem 0;
50-
}
5154
}
5255
}
53-
54-
td {
55-
padding: .5rem;
56-
}
5756
}
5857

5958
.wrapper {
@@ -506,7 +505,6 @@ body {
506505
align-items: center;
507506
justify-content: center;
508507
cursor: pointer;
509-
510508
}
511509

512510
.logo {
@@ -516,21 +514,29 @@ body {
516514
}
517515

518516
input:checked {
517+
~ .items,
518+
~ .burger {
519+
background-color: rgba(0, 0, 0, .95);
520+
backdrop-filter: blur(10px);
521+
-webkit-backdrop-filter: blur(10px);
522+
}
523+
519524
~ .items {
520-
background-color: rgba(0, 0, 0, .92);
521525
display: block;
522526
position: fixed;
523527
left: 0;
524528
top: 120px;
525529
width: 100%;
526-
height: 100%;
530+
height: calc(100% - 120px);
531+
overflow: auto;
527532
z-index: 9999999;
528-
padding: 4rem;
533+
padding: 4rem 2rem;
529534
}
530535

531536
~ .items a {
532537
height: auto;
533-
padding: 3rem 0;
538+
padding: 3rem 2rem;
539+
border-radius: 12px;
534540
}
535541
}
536542

@@ -547,20 +553,90 @@ body {
547553
flex: 1;
548554
justify-content: flex-end;
549555

550-
a {
551-
height: 100%;
556+
> div {
552557
display: flex;
558+
flex-direction: column;
553559
align-items: center;
554-
padding: 0 2rem;
555-
border-bottom: transparent 6px solid;
556560
opacity: .7;
557561
transition: .1s all;
558-
}
562+
z-index: 999999999;
563+
border-bottom: transparent 6px solid;
564+
position: relative;
559565

560-
a.selected,
561-
a:hover {
562-
border-bottom: var(--hint-color) 6px solid;
563-
opacity: 1;
566+
@media screen and (min-width: 1090px) {
567+
height: 100%;
568+
}
569+
570+
a {
571+
display: flex;
572+
height: 100%;
573+
align-items: center;
574+
padding: 0 1.5rem;
575+
576+
@media screen and (max-width: 1090px) {
577+
width: 100%;
578+
579+
&:hover {
580+
background-color: rgba(255, 255, 255, .1);
581+
}
582+
}
583+
}
584+
585+
@media screen and (min-width: 1090px) {
586+
.drop {
587+
display: none;
588+
position: absolute;
589+
top: 110px;
590+
right: 0;
591+
background-color: var(--hint-color);
592+
border-radius: 0 0 12px 12px;
593+
z-index: 999;
594+
min-width: 250px;
595+
596+
&:before {
597+
content:"\A";
598+
border-style: solid;
599+
border-width: 15px 20px 15px 0;
600+
border-color: transparent var(--hint-color) transparent transparent;
601+
position: absolute;
602+
transform: rotate(90deg);
603+
top: -25px;
604+
right: 2rem;
605+
z-index: 99;
606+
}
607+
608+
a {
609+
display: block;
610+
padding: 2rem 3rem;
611+
cursor: pointer;
612+
613+
&:hover {
614+
background-color: rgba(255, 255, 255, .1);
615+
}
616+
}
617+
618+
}
619+
}
620+
621+
@media screen and (max-width: 1090px) {
622+
.drop {
623+
width: 100%;
624+
}
625+
}
626+
627+
&.selected,
628+
&:hover {
629+
@media screen and (min-width: 1090px) {
630+
opacity: 1;
631+
border-bottom: var(--hint-color) 6px solid;
632+
}
633+
}
634+
635+
&:hover {
636+
.drop {
637+
display: block;
638+
}
639+
}
564640
}
565641
}
566642
}
@@ -685,6 +761,48 @@ body {
685761
}
686762
}
687763

764+
/**
765+
* Section: Advisory Board
766+
*/
767+
section#advisory-board {
768+
--avatar-size: 120px;
769+
770+
.board {
771+
display: flex;
772+
gap: 1rem;
773+
774+
> div {
775+
padding: 2rem;
776+
border: #ccc 1px solid;
777+
border-radius: 12px;
778+
text-align: center;
779+
display: flex;
780+
justify-content: center;
781+
align-items: center;
782+
flex: 1;
783+
}
784+
785+
.avatar {
786+
display: inline-flex;
787+
height: var(--avatar-size);
788+
width: var(--avatar-size);
789+
border-radius: var(--avatar-size);
790+
background-color: var(--hint-color);
791+
color: #fff;
792+
align-items: center;
793+
justify-content: center;
794+
795+
span {
796+
font-size: 5rem;
797+
}
798+
}
799+
800+
h1 {
801+
font-size: 1.4rem;
802+
}
803+
}
804+
}
805+
688806
/**
689807
* Section: Contact
690808
*/
@@ -752,21 +870,78 @@ body {
752870
}
753871

754872
/**
755-
* Section: Deliverables
873+
* Section: Results
756874
*/
757-
section#deliverables {
875+
section#results {
876+
.items {
877+
display: flex;
878+
gap: 2rem;
879+
880+
> a {
881+
flex: 1;
882+
display: flex;
883+
align-items: center;
884+
justify-content: center;
885+
text-align: center;
886+
padding: 2rem;
887+
border: #ccc 1px solid;
888+
border-radius: 12px;
889+
transition: .2s all;
890+
891+
span {
892+
font-size: 100px;
893+
}
894+
895+
h2 {
896+
font-weight: normal;
897+
opacity: .5;
898+
}
899+
900+
&:hover {
901+
background-color: #dfdfdf;
902+
}
903+
}
904+
}
905+
}
906+
907+
/**
908+
* Section: Publications
909+
*/
910+
section#publications {
758911
table {
759-
width: 100%;
912+
a {
913+
font-weight: bold;
760914

761-
td, th {
762-
padding: 1rem;
915+
&:hover {
916+
text-decoration: underline;
917+
}
918+
}
919+
920+
tr > td:nth-of-type(1) {
921+
background-color: #e3e5ed;
922+
}
763923

924+
tr > td:nth-of-type(4) {
925+
text-align: center;
764926
}
927+
}
928+
}
929+
930+
/**
931+
* Section: Deliverables
932+
*/
933+
section#deliverables {
934+
table {
935+
width: 100%;
765936

766937
td:nth-of-type(1) {
767938
text-align: center;
768939
}
769940

941+
td:nth-of-type(3) {
942+
min-width: 250px;
943+
}
944+
770945
tbody tr:nth-of-type(odd) td {
771946
background-color: #dcdcdc;
772947
}

0 commit comments

Comments
 (0)