[SITE] new main menu and logo-icon

assets/css/foundation.css

@@ -2344,7 +2344,4 @@ a.text-danger:hover {
     margin-left: 0;
     margin-right: 0; } }
 
-.bg-inverse {
-  color: #eceeef; }
-
 /*# sourceMappingURL=foundation.css.map */

assets/css/main.css

@@ -76,11 +76,10 @@ main div.container {
     main div.container {
       max-width: 940px; } }
 
-header {
-  margin-bottom: 10px; }
 header img {
   width: 75px;
   height: 75px;
+  margin: 4px 0;
   float: left; }
 
 nav {
@@ -90,7 +89,6 @@ nav {
     padding-left: 0; }
     nav ul.nav a {
       text-decoration: none;
-      background-color: inherit;
       color: inherit; }
     nav ul.nav li {
       list-style-type: none; }
@@ -99,57 +97,33 @@ nav {
 
 @media (min-width: 544px) {
   nav {
-    float: right;
+    float: right; }
-    height: 75px; }
     nav ul.nav a {
       float: left;
       text-align: center;
-      font-size: 16px;
+      font-size: 18px;
-      padding: 45px 0 5px;
+      font-weight: 300;
-      width: 109px; }
+      margin: 30px 9px 1px; }
     nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active {
-      color: #fff;
+      border-bottom: 1px solid #2da301; }
-      background-color: #0060e3; }
+    nav ul.nav a.section {
-    nav ul.nav.home {
+      font-weight: 500; } }
-      color: #fff; }
-      nav ul.nav.home a {
-        background-color: #1779ff;
-        border-right: 1px solid #0055ca; }
-      nav ul.nav.home a:last-child {
-        border-right: 0; }
-      nav ul.nav.home a.active {
-        color: #fff;
-        border-bottom: 4px solid #2da301;
-        padding-bottom: 1px; }
-    nav ul.nav.main, nav ul.nav.second {
-      height: 37.5px; }
-      nav ul.nav.main a, nav ul.nav.second a {
-        padding: 8px 0 5.5px; }
-    nav ul.nav.main {
-      color: #1779ff; }
-      nav ul.nav.main a.active {
-        color: #fff;
-        border-bottom: 4px solid #2da301;
-        padding-bottom: 1.5px; }
-    nav ul.nav.second {
-      color: #fff; }
-      nav ul.nav.second a {
-        background-color: #1779ff; }
-      nav ul.nav.second a.active {
-        border-bottom: 4px solid #2da301;
-        padding-bottom: 1.5px; } }
 
 @media (max-width: 543px) {
   nav button.navbar-toggler {
     float: right;
-    margin-top: 10px;
+    margin-top: 24px;
     font-family: inherit;
     font-weight: 300; }
+  nav ul.mobileNav {
+    color: #fff;
+    background-color: #424242;
+    padding: 1rem 1rem; }
     nav ul.mobileNav a {
-    font-size: 18px;
+      font-size: 20px;
       font-weight: 300; }
     nav ul.mobileNav a.active {
-    color: #4a96ff;
+      color: #2da301;
       font-weight: 700; }
   .navbar-toggler {
     padding: 0.5rem 0.75rem;
@@ -160,7 +134,8 @@ nav {
     border-radius: 0.25rem; }
     .navbar-toggler:focus,
     .navbar-toggler:hover {
-      text-decoration: none; } }
+      text-decoration: none;
+      outline: none; } }
 
 footer {
   margin-top: 20px;

assets/css/templates/photo.css

@@ -14,8 +14,10 @@ main p a:visited {
   color: #cccccc; }
 
 @media (min-width: 544px) {
-  nav ul.nav.main {
+  nav ul.nav {
-    color: #fff; } }
+    color: #fff; }
+    nav ul.nav a.section:hover, nav ul.nav a.section:focus {
+      border: none; } }
 
 @media (max-width: 543px) {
   .navbar-toggler {

assets/scss/_mainvariables.scss

@@ -9,11 +9,7 @@ $link_visited: lighten($color_font, 60%);
 
 $col_xxs_bp: 543px;
 
-$nav_bgColor: $color_base;
-$nav_borderColor: darken($nav_bgColor, 15%);
 $nav_fgColor: #fff;
-$nav_textXsWidth: 80px;
-$nav_textSmWidth: 109px;
 
 $footer_color_bg: #bebebe;
 

assets/scss/foundation.scss

@@ -58,8 +58,3 @@
     margin-right: 0;
   }
 }
-
-// fix change in bootstrap
-.bg-inverse {
-  color: #eceeef;
-}

assets/scss/main.scss

@@ -92,10 +92,10 @@ main div.container {
 $header_logoSize: 75px;
 
 header {
-  margin-bottom: 10px;
   img {
     width: $header_logoSize;
     height: $header_logoSize;
+    margin: 4px 0;
 
     float: left;
   }
@@ -109,7 +109,6 @@ nav {
     padding-left: 0; // reset
     a {
       text-decoration: none;
-      background-color: inherit;
       color: inherit;
     }
     li {
@@ -123,59 +122,19 @@ nav {
 @include media-breakpoint-up(sm) {
   nav {
     float: right;
-    height: $header_logoSize;
     ul.nav {
       a {
         float: left;
         text-align: center;
-        font-size: 16px;
+        font-size: 18px;
-        padding: 45px 0 5px;
+        font-weight: 300;
-        width: $nav_textSmWidth;
+        margin: 30px 9px 1px;
       }
-
       a:hover, a:focus, a.active {
-        color: $nav_fgColor;
+        border-bottom: 1px solid $color_accent;
-        background-color: darken($nav_bgColor, 10%);
       }
-    }
+      a.section {
-    ul.nav.home {
+        font-weight: 500;
-      color: $nav_fgColor;
-      a {
-        background-color: $nav_bgColor;
-        border-right: 1px solid $nav_borderColor;
-      }
-      a:last-child {
-        border-right: 0;
-      }
-
-      a.active {
-        color: $nav_fgColor;
-        border-bottom: 4px solid $color_accent;
-        padding-bottom: 1px;
-      }
-    }
-    ul.nav.main, ul.nav.second {
-      height: $header_logoSize/2;
-      a {
-        padding: 8px 0 5.5px;
-      }
-    }
-    ul.nav.main {
-      color: $nav_bgColor;
-      a.active {
-        color: $nav_fgColor;
-        border-bottom: 4px solid $color_accent;
-        padding-bottom: 1.5px;
-      }
-    }
-    ul.nav.second {
-      color: $nav_fgColor;
-      a {
-        background-color: $nav_bgColor;
-      }
-      a.active {
-        border-bottom: 4px solid $color_accent;
-        padding-bottom: 1.5px;
       }
     }
   }
@@ -184,17 +143,20 @@ nav {
   nav {
     button.navbar-toggler {
       float: right;
-      margin-top: 10px;
+      margin-top: 24px;
       font-family: inherit;
       font-weight: 300;
     }
     ul.mobileNav {
+      color: $color_font_inv;
+      background-color: $color_bg_inv;
+      padding: 1rem 1rem;
       a {
-        font-size: 18px;
+        font-size: 20px;
         font-weight: 300;
       }
       a.active {
-        color: lighten($nav_bgColor, 10%);
+        color: $color_accent;
         font-weight: 700;
       }
     }
@@ -212,6 +174,7 @@ nav {
 
     @include hover-focus {
       text-decoration: none;
+      outline: none;
     }
   }
 }

assets/scss/templates/photo.scss

@@ -25,8 +25,11 @@ main p {
 }
 @include media-breakpoint-up(sm) {
   nav {
-    ul.nav.main {
+    ul.nav {
       color: $nav_fgColor;
+      a.section:hover, a.section:focus {
+        border: none;
+      }
     }
   }
 }

site/snippets/base/cont-header.php

@@ -21,7 +21,6 @@ if ($page->depth() == 1) {
 ?>
 
 <div class="collapse hidden-sm-up" id="exCollapsingNavbar">
-  <div class="bg-inverse p-a-1">
   <nav>
     <ul class="nav mobileNav">
       <li><a href="<?php echo $site->url()?>">Home</a></li>
@@ -38,7 +37,6 @@ if ($page->depth() == 1) {
     </ul>
   </nav>
 </div>
-</div>
 
 <header class="section">
   <div class="container">
@@ -53,19 +51,18 @@ if ($page->depth() == 1) {
         Menü
       </button>
 
-      <ul class="nav hidden-xs-down <?php echo ($subnav)?'main':'home' ?>">
+      <ul class="nav hidden-xs-down">
+<?php if(!$subnav) : ?>
       <?php foreach ($site->children()->visible() as $p) : ?>
         <a href="<?php echo $p->url()?>" <?php echo ($page == $p || $page->parent() == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
       <?php endforeach; ?>
-      </ul>
+<?php else : ?>
-
+        <a href="<?php echo $baseSec->url()?>" class="section <?php echo ($page == $baseSec)?'active':'' ?>"><li><?php echo $baseSec->title() ?>:</li></a>
-<?php if($subnav) : ?>
-      <ul class="nav hidden-xs-down second">
       <?php foreach ($baseSec->children()->visible() as $p) : ?>
         <a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
       <?php endforeach; ?>
-      </ul>
 <?php endif; ?>
+      </ul>
     </nav>
   </div>
 </header>