mods in header and menus

asset/scss/_settings.scss

@@ -425,16 +425,16 @@ $dropdown-sizes: (
 // -----------------
 
 $dropdownmenu-arrows: true;
-$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-color: $body-font-color;//$anchor-color;
 $dropdownmenu-arrow-size: 6px;
 $dropdownmenu-arrow-padding: 1.5rem;
-$dropdownmenu-min-width: 200px;
+$dropdownmenu-min-width: 100%;//200px;
 $dropdownmenu-background: null;
-$dropdownmenu-submenu-background: $white;
+$dropdownmenu-submenu-background: $dropdown-background;
 $dropdownmenu-padding: $global-menu-padding;
 $dropdownmenu-nested-margin: 0;
 $dropdownmenu-submenu-padding: $dropdownmenu-padding;
-$dropdownmenu-border: 1px solid $medium-gray;
+$dropdownmenu-border: none; //1px solid $medium-gray;
 $dropdown-menu-item-color-active: get-color(primary);
 $dropdown-menu-item-background-active: transparent;
 

asset/scss/modules/_header.scss

@@ -6,15 +6,13 @@
       @include breakpoint(small){
         @include xy-cell(12);
         @include flex-align(center, middle);
-        text-align: center;
-      }
-      @include breakpoint (medium) {
         padding: $global-padding $global-padding;
+        min-width: 14rem;
+        text-align: center;
       }
       @include breakpoint(large){
         @include xy-cell(shrink);
         @include flex-align(left, middle);
-        // min-width: 14rem;
         text-align: unset;
       }
     }
@@ -32,27 +30,48 @@
         menu {
           margin: 0;
           padding: 0;
-          font-size: 0.8rem;
         }
         .menu {
           justify-content: center;
           a {
             padding: $global-padding*0.7 $global-padding*0.5;
           }
-        }
+          &.dropdown {
-      }
+            justify-content:center;
-      @include breakpoint(medium) {
+            li,.button {
-        menu {
+              min-width: unset;
-          font-size: $global-font-size*1.5;
+              margin:0;
+              padding:0;
+              font-size: $global-font-size*0.9;//$header-menu-font-size;
+            }
+            .button {
+              margin-left: $global-margin;
+              background-color:$input-background;
+            }
+            .is-dropdown-submenu {
+              font-size: $dropdown-font-size * 0.95;
+              min-width: 10rem;
+              box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
+            }
+          }
         }
       }
       @include breakpoint(large) {
         @include xy-cell(auto);
         @include flex;
         @include flex-align(right, middle);
+        padding-bottom: 0;//$global-padding;
         menu {
           margin: inherit;
           padding: inherit;
+          .menu {
+            &.dropdown {
+              justify-content: end;
+              li,.button {
+                font-size: $global-font-size*1.4;//$header-menu-font-size;
+              }
+            }
+          }
         }
       }
     }

index.html

@@ -7,7 +7,7 @@
     <title>Foundation for Sites</title>
     <link rel="stylesheet" href="asset/css/default.css">
   </head>
-    
+
     <content class="">
 
             <header>
@@ -21,7 +21,38 @@
 </main>
 <nav>
   <menu class="">
-      </menu>
+      <ul id="" class="dropdown menu" data-dropdown-menu="dropdown-menu" role="menubar">
+        <li id="" class="" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone">Project</a>
+        </li>
+        <li id="" class="" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone/resources/">Resources</a>
+        </li>
+        <li id="" class="" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone/category/how-to/">How-to</a>
+        </li>
+        <li id="" class="is-dropdown-submenu-parent opens-right" role="none" aria-haspopup="true" aria-label="About" data-is-click="false">
+        <a role="menuitem" href="#">About</a>
+        <ul class="dropdown menu vertical submenu is-dropdown-submenu first-sub" data-toggle="" data-submenu="" role="menubar" style="">
+        <li id="" class="is-submenu-item is-dropdown-submenu-item" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone/arc-hive-presentation/">Presentation</a>
+        </li>
+        <li id="" class="is-submenu-item is-dropdown-submenu-item" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone/partners/">Partners</a>
+        </li>
+        <li id="" class="is-submenu-item is-dropdown-submenu-item" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone/contact/">Contact</a>
+        </li>
+        </ul>
+        </li>
+        <li id="" class="" role="none">
+        <a role="menuitem" href="https://dev.arc-hive.zone/join-us/">Join us</a>
+        </li>
+        <li id="" class="" role="none">
+        <a role="menuitem" href="/login">Login</a>
+        </li>
+    </ul>
+  </menu>
 </nav>
             </header>
 
@@ -32,7 +63,7 @@
           <img src="asset/img/ARC-HIVE-logo.svg?v=2.0.0" title="an arc-hive project" alt="arc-hive logo" class="logo">
         </figure>
     </section>
-    
+
   </main>
   <aside>
     <h2 class="site-title">
@@ -45,7 +76,7 @@
             <main>
               <article>
                 <section class="omekas-entry-content">
-                  
+
 
 <!-- arc-hive page header-image insert begins -->
   <style>
@@ -55,7 +86,7 @@
   </style>
   <!-- arc-hive page header-image insert ends -->
 
-    
+
 
 <!--
 -->
@@ -63,10 +94,10 @@
 <!-- archive menu -->
 
 
-    
+
 
 <div id="blocks" class="blocks">
-    
+
 
 <div id="site-list">
   <div data-v-abbdcac0=""><nav data-v-abbdcac0=""><form class="search"><div class="input-group"><input type="text" name="fulltext_search" placeholder="Search" aria-label="Search" class="input-group-fieldbutton hollow"> <button type="submit" class="appear button">
@@ -82,11 +113,11 @@
                   <span data-v-abbdcac0="" class="ascToggle activeColumn"><svg data-v-abbdcac0="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="long-arrow-alt-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-long-arrow-alt-up fa-w-8 fa-1x"><path data-v-abbdcac0="" fill="currentColor" d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z" class=""></path></svg></span></li></ul></div></li> <li data-v-abbdcac0="" data-accordion-item="" class="accordion-item"><div data-v-abbdcac0="" role="tab" aria-expanded="false" aria-selected="false" class="accordion-title"><ul data-v-abbdcac0=""><li data-v-abbdcac0="" class="title">
                   Scrimshaws
                 </li> <li data-v-abbdcac0="" class="curator">
-                  
+
                 </li> <li data-v-abbdcac0="" class="collection-name">
-                  
+
                 </li> <li data-v-abbdcac0="" class="date">
-                  
+
                 </li></ul></div> <aside data-v-abbdcac0="" class="accordion-content"><section data-v-abbdcac0=""><figure data-v-abbdcac0=""><img data-v-abbdcac0=""></figure> <p data-v-abbdcac0=""><span data-v-abbdcac0="">Generic scrimshaws</span> <a data-v-abbdcac0="" href="/s/scrimshaws" class="button small">
                   View
                 </a></p></section></aside></li><li data-v-abbdcac0="" data-accordion-item="" class="accordion-item"><div data-v-abbdcac0="" role="tab" aria-expanded="false" aria-selected="false" class="accordion-title"><ul data-v-abbdcac0=""><li data-v-abbdcac0="" class="title">
@@ -96,7 +127,7 @@
                 </li> <li data-v-abbdcac0="" class="collection-name">
                   RBINS
                 </li> <li data-v-abbdcac0="" class="date">
-                  
+
                 </li></ul></div> <aside data-v-abbdcac0="" class="accordion-content"><section data-v-abbdcac0=""><figure data-v-abbdcac0=""><img data-v-abbdcac0=""></figure> <p data-v-abbdcac0=""><span data-v-abbdcac0="">Tortle shell engraved with a whale hunting scene.</span> <a data-v-abbdcac0="" href="/s/sea-adventure" class="button small">
                   View
                 </a></p></section></aside></li><li data-v-abbdcac0="" data-accordion-item="" class="accordion-item"><div data-v-abbdcac0="" role="tab" aria-expanded="false" aria-selected="false" class="accordion-title"><ul data-v-abbdcac0=""><li data-v-abbdcac0="" class="title">
@@ -298,7 +329,7 @@
             </main>
 
             <footer class="">
-              
+
     <section class="subsection">
       <aside class="site-brand arc-hive">
        <a href="/s/collections" rel="home" class="">
@@ -357,9 +388,9 @@
     </section>
   </footer>
 
-                                                                                                
 
-    
+
+