Skip to content

Commit

Permalink
Navbar updates (#2)
Browse files Browse the repository at this point in the history 
* Added hover menus to navbar

* Added nav height offset to table header
  • Loading branch information
@fields37
fields37 authored May 11, 2023
1 parent 0e8723b commit 350e664
Show file tree
Hide file tree
Showing 16 changed files with 225 additions and 129 deletions.
22 changes: 11 additions & 11 deletions _includes/navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,21 @@
<li class="nav-item">
<a class="nav-link page-scroll" href="{{ site.baseurl }}/our-work" data-target="#navbarToggler">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="{{ site.baseurl }}/who-we-are" data-target="#navbarToggler">Who We Are</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="{{ site.baseurl }}/team" data-target="#navbarToggler">Team</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="{{ site.baseurl }}/publications" data-target="#navbarToggler">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="{{ site.baseurl }}/get-involved" data-target="#navbarToggler">Get Involved</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/who-we-are" data-bs-toggle="dropdown">Who We Are</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ site.baseurl }}/team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="{{ site.baseurl }}/membership" data-target="#navbarToggler">Membership</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/get-involved" data-bs-toggle="dropdown">Get Involved</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ site.baseurl }}/membership">Membership</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions _site/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,21 @@
<li class="nav-item">
<a class="nav-link page-scroll" href="/our-work" data-target="#navbarToggler">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/who-we-are" data-target="#navbarToggler">Who We Are</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/team" data-target="#navbarToggler">Team</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/publications" data-target="#navbarToggler">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/get-involved" data-target="#navbarToggler">Get Involved</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/who-we-are" data-bs-toggle="dropdown">Who We Are</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/membership" data-target="#navbarToggler">Membership</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/get-involved" data-bs-toggle="dropdown">Get Involved</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/membership">Membership</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down
76 changes: 62 additions & 14 deletions _site/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ Table Of Contents:
******************************************/


/**************************/
/* Colors */
/**************************/
:root {
/**************************/
/* Colors */
/**************************/
--black: #000000;
--white: #FFFFFF;
--off-white: rgb(233, 231, 231);
Expand All @@ -26,6 +26,12 @@ Table Of Contents:
--link-hover: #093A57;
--link-light: #55DDFF;
--link-light-hover: #40B4D0;

/**************************/
/* Constant */
/**************************/
--nav-height-full: 99px;
--nav-height-min: 83.25px;
}


Expand All @@ -37,7 +43,7 @@ body,
html {
width: 100%;
height: 100%;
padding-top: 50px;
padding-top: calc(var(--nav-height-full) / 2);
}

body, p, li {
Expand Down Expand Up @@ -106,10 +112,6 @@ p {
margin-top: 0.25rem;
}

.table {
margin-top: 2rem;
}

.li-space-lg li {
margin-bottom: 0.5rem;
}
Expand Down Expand Up @@ -151,10 +153,11 @@ p {
background-color: var(--white);
}

a.nav-link {
a.nav-link, a.dropdown-item {
font-weight: 700;
font-size: 1.25rem;
line-height: 0.875rem;
text-decoration: none;
}

.navbar .logo-image img {
Expand Down Expand Up @@ -183,7 +186,8 @@ a.nav-link {
}

.navbar .nav-item.dropdown.show .nav-link,
.navbar .nav-item .nav-link:hover{
.navbar .nav-item .nav-link:hover,
a.dropdown-item:hover {
color: var(--maroon);
}

Expand All @@ -194,7 +198,9 @@ a.nav-link {
background-color: var(--white);
}

/* end of dropdown menu */
.dropdown-item:hover{
background-color: var(--white);
}

.navbar .navbar-toggler {
padding: 0;
Expand Down Expand Up @@ -380,8 +386,19 @@ ul.bullets-special {
font-size: 1.3rem;
}

/* Table style */
.table {
margin-top: 2rem;
}

thead {
position: sticky;
top: var(--nav-height-full);
background-color: var(--white);
}

/**********************/
/* Call to Action Block */
/* Call to Action Block */
/**********************/
.call-to-action {
padding-top: 2rem;
Expand Down Expand Up @@ -479,8 +496,14 @@ ul.bullets-special {
grid-template-columns: repeat(1, 1fr);
}
/* Adjust padding at top of page for decreased nav height */
/* Why does the body have such weird padding math? I have no clue */
body {
padding-top: 34.25px;
padding-top: calc(var(--nav-height-min) / 2 - 8px);
}

/* Table header sticky offset for same reason */
thead {
top: var(--nav-height-min);
}

/* Header type */
Expand Down Expand Up @@ -524,10 +547,17 @@ ul.bullets-special {
}

/* Navigation */
a.nav-link {

a.nav-link, a.dropdown-item {
font-size: 1.1rem;
}

.navbar .dropdown-menu {
margin-top: 0;
margin-bottom: 0;
padding: 0.25rem 0;
}

.navbar .logo-image img {
width: 175px;
height: auto;
Expand All @@ -539,6 +569,10 @@ ul.bullets-special {

.navbar .nav-item .nav-link {
padding-left: 0;
}

.navbar .nav-item .dropdown-menu {
display: block;
}
}
/* End of medium screen width */
Expand Down Expand Up @@ -681,6 +715,20 @@ ul.bullets-special {

/* Large and X-Large */
@media (min-width: 992px) {
/* Navigation bar */
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu {
margin-top:0;
border-bottom: 1px solid var(--off-white);
}
a.dropdown-item {
margin-top: 0.75rem;
margin-bottom: 0.5rem;
padding-left: 1.5rem;
}
/* end of navigation */

/* Footer */
.footer .footer-col {
margin-bottom: 2rem;
Expand Down
22 changes: 11 additions & 11 deletions _site/get-involved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,21 @@
<li class="nav-item">
<a class="nav-link page-scroll" href="/our-work" data-target="#navbarToggler">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/who-we-are" data-target="#navbarToggler">Who We Are</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/team" data-target="#navbarToggler">Team</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/publications" data-target="#navbarToggler">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/get-involved" data-target="#navbarToggler">Get Involved</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/who-we-are" data-bs-toggle="dropdown">Who We Are</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/membership" data-target="#navbarToggler">Membership</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/get-involved" data-bs-toggle="dropdown">Get Involved</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/membership">Membership</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down
Binary file modified _site/images/members/jchartrand.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 11 additions & 11 deletions _site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,21 @@
<li class="nav-item">
<a class="nav-link page-scroll" href="/our-work" data-target="#navbarToggler">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/who-we-are" data-target="#navbarToggler">Who We Are</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/team" data-target="#navbarToggler">Team</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/publications" data-target="#navbarToggler">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/get-involved" data-target="#navbarToggler">Get Involved</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/who-we-are" data-bs-toggle="dropdown">Who We Are</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/membership" data-target="#navbarToggler">Membership</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/get-involved" data-bs-toggle="dropdown">Get Involved</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/membership">Membership</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions _site/membership.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,21 @@
<li class="nav-item">
<a class="nav-link page-scroll" href="/our-work" data-target="#navbarToggler">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/who-we-are" data-target="#navbarToggler">Who We Are</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/team" data-target="#navbarToggler">Team</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/publications" data-target="#navbarToggler">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/get-involved" data-target="#navbarToggler">Get Involved</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/who-we-are" data-bs-toggle="dropdown">Who We Are</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/membership" data-target="#navbarToggler">Membership</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/get-involved" data-bs-toggle="dropdown">Get Involved</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/membership">Membership</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -90,7 +90,7 @@ <h2 id="we-invite-you-to-get-involved">We invite you to get involved!</h2>

<p>Joining the Digital Credentials Consortium begins with a conversation, let’s talk!</p>

<div id="contact" class="call-to-action mini">
<div id="contact" class="call-to-action">
<div class="container-md">
<div class="content">
<a class="btn-solid-lg" href="" target="_blank">
Expand Down
22 changes: 11 additions & 11 deletions _site/our-work.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,21 @@
<li class="nav-item">
<a class="nav-link page-scroll" href="/our-work" data-target="#navbarToggler">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/who-we-are" data-target="#navbarToggler">Who We Are</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/team" data-target="#navbarToggler">Team</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/publications" data-target="#navbarToggler">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/get-involved" data-target="#navbarToggler">Get Involved</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/who-we-are" data-bs-toggle="dropdown">Who We Are</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/membership" data-target="#navbarToggler">Membership</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/get-involved" data-bs-toggle="dropdown">Get Involved</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/membership">Membership</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down
Loading

0 comments on commit 350e664

Please sign in to comment.