Merge branch 'master' into howto-services

themes/grav-theme-howto/css/media-queries.css

@@ -1,12 +1,6 @@
-@media (min-width:1201px) {
-
-}
-
-@media (max-width: 1200px) and (min-width:901px) {
-
-}
-
-@media (max-width: 1040px) {
+/* screenwidth less than 1000px
+------------------------------------*/
+@media only screen and (max-width: 1150px) {
   body {
     font-size: 85%;
   }
@@ -23,7 +17,10 @@
     }
 }
 
-@media only screen and (max-width: 767px) {
+/* mobile wide/smaller tablets
+------------------------------------*/
+
+@media only screen and (max-width: 830px) {
 
   .narrow{
    max-width: 100%;
@@ -56,7 +53,6 @@
     height: 48px;
     text-align: left;
     background: #50162D;
-    position: relative;
     border: none;
     float: right;
     text-shadow: none;
@@ -125,13 +121,88 @@
 
 }
 
-@media (max-width: 900px) and (min-width:601px) {
+   .language-selector {
+       position: fixed;
+       top: -10px;
+       right: 80px;
+       width: 50px;
+   }
+
+   .language-selector .btn {
+       top: 35px;
+       font-size: 1.2rem;
+       padding: 19px 15px;
+   }
+
+   .language-selector ul#langSelectorList {
+       position: absolute;
+       top: 50px;
+       right: 0;
+   }
+
+   .language-selector .btn i {
+       top: 40px;
+       right: 20px;
+   }
+
+   .language-selector .dropdown-menu {
+       right: 150px;
+       top: 200px;
+       color: #b9a2ab;
+       background-color: #50162D;
+       border-color: #50162D;
+       font-size: 1.1rem;
+   }
+
+   .language-selector .dropdown-menu>li>a {
+       padding: 12px 15px;
+   }
 
 }
 
-@media (max-width: 600px) {
+
+/* mobile narrow
+  ------------------------------------*/
+
+@media only screen and (max-width: 600px) {
+
+  /* Language menu*/
+
+  .language-selector {
+      position: fixed;
+      top: -10px;
+      right: 80px;
+      width: 50px;
+  }
+
+  .language-selector .btn {
+      top: 35px;
+      font-size: 1.2rem;
+      padding: 19px 15px;
+  }
+
+  .language-selector ul#langSelectorList {
+      position: absolute;
+      top: 50px;
+      right: 0;
+  }
+
+  .language-selector .btn i {
+      top: 40px;
+      right: 20px;
+  }
+
+  .language-selector .dropdown-menu {
+      right: 150px;
+      top: 200px;
+      color: #b9a2ab;
+      background-color: #50162D;
+      border-color: #50162D;
+      font-size: 1.1rem;
+  }
+
+  .language-selector .dropdown-menu>li>a {
+      padding: 12px 15px;
+  }
 
 }
-
-@media (max-width: 400px) {
-}

themes/grav-theme-howto/css/style.css

@@ -194,6 +194,9 @@ a:hover {
 
 /* Menu Settings */
 
+.main-nav {
+}
+
 .main-nav ul {
     display: flex;
     justify-content: space-between;
@@ -286,8 +289,37 @@ a:hover {
 .language-selector .btn {
     position: relative;
     top: 20px;
+    color: #b9a2ab;
+    background-color: #50162D;
+    border-color: #50162D;
+    font-size: 1.2rem;
 }
 
+.language-selector .btn i {
+    position: absolute;
+    top: 25px;
+    right: 15px;
+}
+
+.language-selector .dropdown-menu {
+  color: #b9a2ab;
+  background-color: #50162D;
+  border-color: #50162D;
+  top: 20px;
+  font-size: 1.1rem;
+}
+
+.language-selector .dropdown-menu li:hover {
+    background-color: #8EB726;
+}
+
+.language-selector .dropdown-menu>li>a {
+  color: #b9a2ab;
+}
+
+ul#nav li a:hover { color: #FFFFFF; opacity: 1;}
+
+
 /* Volor bar */
 .body-top {
   width: 100%;

themes/grav-theme-howto/templates/partials/navigation.html.twig

@@ -23,10 +23,10 @@
 {% endmacro %}
 <a class="mobile-btn" href="#main-nav" title="Show navigation">Show navigation</a>
 <a class="mobile-btn" href="#close" title="Hide navigation">Hide navigation</a>
-{% include 'partials/language-selector.html.twig' %}
 <ul id="nav">
     {% if theme_config.dropdown.enabled %}
         {{ _self.loop(pages) }}
+        {% include 'partials/language-selector.html.twig' %}
     {% else %}
         {% for page in pages.children.visible %}
             {% set current_page = (page.active or page.activeChild) ? 'selected' : '' %}