rubycentral · sarmstead · Jun 24, 2025 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
diff --git a/assets/images/gem-logo--badge.svg b/assets/images/gem-logo--badge.svg
diff --git a/assets/images/icon__burger.svg b/assets/images/icon__burger.svg
diff --git a/assets/images/icon__close.svg b/assets/images/icon__close.svg
diff --git a/default.hbs b/default.hbs
@@ -18,10 +18,7 @@
   </head>
 
   <body class="{{body_class}}">
-
-    <div class="grid">
-      {{> "navbar" }}
-    </div>
+    {{> "navigation-top" }}
 
     <main>
       {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}

diff --git a/partials/navbar.hbs b/partials/navbar.hbs
diff --git a/partials/navigation-top.hbs b/partials/navigation-top.hbs
@@ -0,0 +1,20 @@
+<nav class='navigation--top'>
+    <div class='navigation__inner'>
+        <a class='navigation__logo' href='/'>
+            <img src={{asset 'images/gem-logo--badge.svg'}} />
+        </a>
+        <div class='navigation__list__wrapper'>
+            <button
+                aria-controls='navigation__mobile-menu-trigger'
+                aria-haspopup='true'
+                class='navigation__mobile-menu-trigger closed'
+                id='navigation__mobile-menu-trigger'
+            >
+            </button>
+            {{navigation}}
+        </div>
+        <div class='navigation__membership kg-button-card'>
+            <a class='kg-btn' href='#/portal/signup'>Membership</a>
+        </div>
+    </div>
+</nav>
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -1,8 +1,7 @@
-{{#if isSecondary}}{{else}}<a href="/" class="logo-circle"><span class="visually-hidden">Home</span></a>{{/if}}
-<ul class="nav">
-  {{#foreach navigation}}
-    <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
-      <a href="{{url absolute="true"}}"><span>{{label}}</span></a>
-    </li>
-  {{/foreach}}
-</ul>
+<ul class='navigation__list'>
+    {{#foreach navigation}}
+        <li class='navigation__item'>
+            <a href="{{url absolute='true'}}">{{label}}</a>
+        </li>
+    {{/foreach}}
+</ul>
diff --git a/src/css/app.css b/src/css/app.css
@@ -13,10 +13,9 @@
 
 /* Layout */
 @import './layout/reset.css';
-@import './layout/navigation.css';
 @import './layout/dropdown.css';
 @import './layout/container.css';
-/* @import './layout/header.css'; */
+@import './layout/navigation-top.css';
 @import './layout/footer.css';
 
 /* Pages */

diff --git a/src/css/components/button.css b/src/css/components/button.css
@@ -52,7 +52,6 @@
     .kg-button-card .kg-btn,
     .kg-button-card .kg-btn-accent {
         font-size: 1rem;
-        padding: 20px;
         width: fit-content;
     }
 

diff --git a/src/css/components/static-content.css b/src/css/components/static-content.css
@@ -1,6 +1,7 @@
 .static-content {
     width: 50%;
     margin: 0 auto;
+    max-width: var(--layout-inner-max-width);
 }
 
 .static-content.upcoming-conference-container {
@@ -24,6 +25,11 @@
     list-style-type: none;
 }
 
+.pagination {
+    display: flex;
+    justify-content: space-between;
+}
+
 @media screen and (max-width: 900px) and (orientation: portrait),
     (max-width: 823px) and (orientation: landscape) {
     .static-content {

diff --git a/src/css/layout/header.css b/src/css/layout/header.css
diff --git a/src/css/layout/navigation-top.css b/src/css/layout/navigation-top.css
@@ -0,0 +1,148 @@
+.navigation--top {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    .navigation__inner {
+        align-items: center;
+        display: grid;
+        grid-template-areas: 'logo trigger membership';
+        grid-template-columns: 1fr repeat(2, max-content);
+        margin: auto;
+        max-width: var(--layout-inner-max-width);
+        padding: 8px 20px 8px 10px;
+    }
+
+    .navigation__logo {
+        box-shadow: none;
+        display: flex;
+        grid-area: logo;
+        max-width: fit-content;
+
+        img {
+            height: 75px;
+            width: 75px;
+        }
+    }
+
+    .navigation__mobile-menu-trigger {
+        background-color: white;
+        background-repeat: no-repeat;
+        background-size: contain;
+        border: none;
+        cursor: pointer;
+        height: 24px;
+        margin-right: 20px;
+        width: 24px;
+    }
+
+    .navigation__mobile-menu-trigger.closed {
+        background-image: url('/assets/images/icon__burger.svg');
+    }
+
+    .navigation__mobile-menu-trigger.opened {
+        background-image: url('/assets/images/icon__close.svg');
+    }
+
+    .navigation__list__wrapper {
+        grid-area: trigger;
+        position: relative;
+    }
+
+    .navigation__list {
+        background-color: white;
+        border-color: rgba(0, 0, 0, 0.1);
+        border-radius: 0 0 8px 8px;
+        border-style: solid;
+        border-width: 0 1px 1px 1px;
+        box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.04);
+        display: none;
+        flex-direction: column;
+        gap: 20px;
+        left: 25%;
+        list-style: none;
+        margin: 0;
+        min-width: 275px;
+        padding: 16px 30px;
+        position: absolute;
+        top: 61.5px;
+        transform: translateX(-50%);
+        z-index: 1;
+    }
+
+    .navigation__list--mobile-closed {
+        display: none;
+    }
+
+    .navigation__list--mobile-opened {
+        display: flex;
+    }
+
+    .navigation__list--mobile-opened::before {
+        border-top: 4px solid var(--color-yellow);
+        content: '';
+        display: block;
+        position: absolute;
+        right: calc(50% - 37.5px);
+        top: -3px;
+        width: 75px;
+    }
+
+    .navigation__item {
+        a {
+            align-items: center;
+            box-shadow: none;
+            color: var(--color-navy);
+            display: flex;
+            font-family: 'Rubik', sans-serif;
+            font-size: 1rem;
+            line-height: 1.125rem;
+            min-height: 30px;
+            padding: 12px;
+        }
+
+        a:hover {
+            background-color: var(--color-lightblue);
+        }
+    }
+
+    .navigation__membership {
+        grid-area: membership;
+    }
+
+    @media (min-width: 1440px) {
+        .navigation__mobile-menu-trigger {
+            display: none;
+        }
+
+        .navigation__inner {
+            grid-template-columns: max-content 1fr max-content;
+            padding: 0;
+        }
+
+        .navigation__logo {
+            margin-left: -8px;
+        }
+
+        .navigation__mobile-menu-trigger {
+            display: none;
+        }
+
+        .navigation__list {
+            border: none;
+            box-shadow: none;
+            display: flex;
+            flex-direction: row;
+            gap: 0;
+            justify-self: center;
+            left: auto;
+            min-width: unset;
+            padding: 0;
+            position: relative;
+            top: auto;
+            transform: unset;
+        }
+
+        .navigation__list::before {
+            display: none;
+        }
+    }
+}