First try redesign structure

dzpex · Oct 19, 2020 · 040b0e6 · 040b0e6
1 parent 776c479
commit 040b0e6
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 134 deletions.
diff --git a/_data/de/wiki/navigation.yml → _data/de/navigation.yml b/_data/de/wiki/navigation.yml → _data/de/navigation.yml
diff --git a/_data/en/wiki/navigation.yml → _data/en/navigation.yml b/_data/en/wiki/navigation.yml → _data/en/navigation.yml
diff --git a/_data/es/wiki/navigation.yml → _data/es/navigation.yml b/_data/es/wiki/navigation.yml → _data/es/navigation.yml
diff --git a/_includes/README.md b/_includes/README.md
@@ -3,7 +3,7 @@ Holds fragments/files which are included in other sites.
 
 general/languagecode folder: includes translated fragments which are included in every site.
 wiki/languagecode folder: includes translated fragments which are included in the wiki.
-wiki/nav.html file: template for the navigation in the wiki.
+general/nav.html file: template for the navigation in the wiki.
 footer.html file: general template for the footer.
 headtags.html file: holds tags which are included in every sites' <head>. This file can not be translated.
 langselect.html file: holds template to generate a language picker.

diff --git a/_includes/wiki/nav.html → _includes/general/nav.html b/_includes/wiki/nav.html → _includes/general/nav.html
@@ -1,9 +1,9 @@
-<aside id="wikinav" class="fx-col-100-xs fx-col-25-m">
+<aside id="gnav" class="fx-col-100-xs fx-col-25-m">
   {% include langselect.html %}
-  <nav id="wnv">
+  <nav id="mnv">
     <ul>
-      {% if site.data.wiki.navigation.nav[0] %}
-      {% for item in site.data.wiki.navigation.nav %}
+      {% if site.data.navigation.nav[0] %}
+      {% for item in site.data.navigation.nav %}
       {% if item.url %}
       <li>
         <h3><a href="{{ item.url | relative_url }}" class="{% if subentry.url == page.url %}selected{% endif %}">{{ item.title }}</a></h3>

diff --git a/_includes/general/navbtn.html b/_includes/general/navbtn.html
@@ -0,0 +1,10 @@
+<div class="fx-col-center-xs fx-txt-right hide-on-dt" id="navbtn" onclick="showNav()">
+  <svg role="img" width="20" height="20" aria-labelledby="ntitle">
+    <title id="ntitle">{{ site.data.general.nav.btnOpenNavigation }}</title>
+    <g>
+      <rect fill="currentcolor" id="r1" width="100%" height="3" x="0" y="0" />
+      <rect fill="currentcolor" id="r2" width="100%" height="3" x="0" y="8" />
+      <rect fill="currentcolor" id="r3" width="100%" height="3" x="0" y="16" />
+    </g>
+  </svg>
+</div>
diff --git a/_includes/headtags.html b/_includes/headtags.html
@@ -24,6 +24,7 @@
 <meta name="theme-color" content="#ffffff">
 <meta name="color-scheme" content="dark light">
 <link rel="author" href="{{ 'humans.txt' | relative_url }}" />
+<script src="{{ 'assets/js/nav.js' | relative_url }}"></script>
 {% for lng in site.languages %}
     {% if lng == site.default_lang %}
       {% capture langlink %}{{ site.a_rootpage }}/{{ site.baseurl }}{{ page.url }}{% endcapture %}

diff --git a/_layouts/mainhomepage.html b/_layouts/mainhomepage.html
@@ -42,15 +42,14 @@ <h1>Jamulus</h1>
   </header>
   <div>
     <div class="fx-row fx-row-center-xs">
-      <div class="fx-col-100-xs fx-col-50-l">
-        {% include langselect.html %}
+      {% include general/navbtn.html %}
+      <noscript><strong>{{ site.data.general.tNoJSEnabled }}</strong></noscript>
+      {% include general/nav.html %}
+      <div id="maincontainer" class="fx-col-100-xs fx-col-50-m">
+        <main>{{ content }}</main>
       </div>
     </div>
-    <main>
-      {{ content }}
-    </main>
-  </div>
-  {% include footer.html %}
+    {% include footer.html %}
 </body>
 
 </html>
diff --git a/_layouts/wiki.html b/_layouts/wiki.html
@@ -6,29 +6,19 @@
   <title>{{ page.title }} {{ site.data.general.wiki.titleAdd }}</title>
   {% include headtags.html %}
   <link rel="stylesheet" href="{{ 'assets/css/wiki.css' | relative_url }}">
-  <script src="{{ 'assets/js/nav.js' | relative_url }}"></script>
   <meta name="description" content="{{ page.metadescription }}">
 </head>
 
 <body class="wikisite">
   <header class="fx-row fx-row-between-xs fx-text-center">
-    <div class="fx-col fx-text-center"><a href="/{{ site.baseurl }}/{% if site.active_lang != site.default_lang %}{{ site.active_lang }}/{% endif %}wiki">
+    <div class="fx-col fx-text-center"><a href="/{{ site.baseurl }}/{% if site.active_lang != site.default_lang %}{{ site.active_lang }}/{% endif %}">
         <img alt="{{ site.data.general.nav.altJamulusIcon }}" width="40" height="40" src="{{ 'assets/img/jamulus-icon-2020.svg'| relative_url }}" /></a>
     </div>
-    <div class="fx-col-center-xs fx-txt-right hide-on-dt" id="navbtn" onclick="showNav()">
-      <svg role="img" width="20" height="20" aria-labelledby="ntitle">
-        <title id="ntitle">{{ site.data.general.nav.btnOpenNavigation }}</title>
-        <g>
-          <rect fill="currentcolor" id="r1" width="100%" height="3" x="0" y="0" />
-          <rect fill="currentcolor" id="r2" width="100%" height="3" x="0" y="8" />
-          <rect fill="currentcolor" id="r3" width="100%" height="3" x="0" y="16" />
-        </g>
-      </svg>
-    </div>
+    {% include general/navbtn.html %}
   </header>
   <div class="fx-row fx-row-center-xs">
     <noscript><strong>{{ site.data.general.tNoJSEnabled }}</strong></noscript>
-    {% include wiki/nav.html %}
+    {% include general/nav.html %}
     <div id="maincontainer" class="fx-col-100-xs fx-col-50-m">
       <div id="editsitecontent">
         <a href="{{ site.githubrepoeditbase }}/{{ page.path }}">

diff --git a/assets/css/fw.css b/assets/css/fw.css
@@ -76,12 +76,59 @@ main li {
   padding: 0;
 }
 
-#langselect .selected, #wikinav .selected {
+#langselect .selected, #gnav .selected {
   font-weight: bold;
   text-decoration: underline;
   color: #2b7288;
 }
 
+header #navbtn svg {
+  color: #ffffff;
+}
+
+#gnav nav h3 {
+  margin: 0.5em 0 0.5em 0;
+}
+
+#gnav a .selected {
+  font-weight: bold;
+  text-decoration: underline;
+  color: #2b7288;
+}
+
+#gnav nav ul {
+  padding: 0;
+  margin: 0;
+}
+
+#gnav nav ul li>a {
+  margin-left: 0.5em;
+}
+
+#gnav nav>ul>li>ul>li>ul>li>a {
+  margin-left: 0.9em;
+}
+
+nav {
+  background-color: #EAF8FD;
+  color: #ffffff;
+  margin: 10px auto 0 auto;
+  padding: 10px 10px 10px 10px;
+}
+
+#navbtn svg {
+  cursor: pointer;
+  margin: 0;
+}
+
+#mnv {
+  display: none;
+}
+
+#mnv ul {
+  list-style-type: none;
+}
+
 #footer {
   background-color: #1181a4;
   color: #ffffff;
@@ -111,6 +158,11 @@ body>div {
   padding: 0;
 }
 
+main>div {
+  padding-top: 0;
+  margin-top: 0;
+}
+
 #footer img {
   height: 2em;
   color: #ffffff;
@@ -168,6 +220,35 @@ body>div {
   #langselect ul li {
     margin: 0 0.3em 0 0;
   }
+
+  #mnv {
+    display: block !important;
+  }
+
+  .hide-on-dt {
+    display: none;
+  }
+
+  header {
+    margin-bottom: 2em;
+  }
+
+  #gnav {
+    order: 2;
+  }
+
+  nav {
+    position: sticky;
+    top: 2px;
+  }
+
+  #maincontainer {
+    order: 1;
+  }
+
+  #gnav nav ul li {
+    display: block;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -179,6 +260,10 @@ body>div {
     color: #1da3cc;
   }
 
+  header #navbtn svg {
+    color: #dbdbdb;
+  }
+
   #footer {
     background-color: #0a5067;
     color: #dbdbdb;
@@ -188,10 +273,18 @@ body>div {
     color: #dbdbdb;
   }
 
-  #wnv {
+  #mnv {
     background-color: #262a2b;
   }
 
+  #mnv h2, #mnv a {
+    color: #10b0e2;
+  }
+
+  #mnv ul li a.selected {
+    color: #52bada;
+  }
+
   body {
     background-color: #242323;
     color: #dbdbdb;

diff --git a/assets/css/noscript.css b/assets/css/noscript.css
@@ -1,4 +1,4 @@
-.wikisite #wnv {
+.wikisite #mnv {
   display: block !important;
 }
 

diff --git a/assets/css/wiki.css b/assets/css/wiki.css
@@ -10,54 +10,6 @@
   font-style: italic;
 }
 
-.wikisite main>div {
-  padding-top: 0;
-  margin-top: 0;
-}
-
-.wikisite #wikinav nav h3 {
-  margin: 0.5em 0 0.5em 0;
-}
-
-.wikisite #wikinav a .selected {
-  font-weight: bold;
-  text-decoration: underline;
-  color: #2b7288;
-}
-
-.wikisite #wikinav nav ul {
-  padding: 0;
-  margin: 0;
-}
-
-.wikisite #wikinav nav ul li>a {
-  margin-left: 0.5em;
-}
-
-.wikisite #wikinav nav>ul>li>ul>li>ul>li>a {
-  margin-left: 0.9em;
-}
-
-.wikisite nav {
-  background-color: #EAF8FD;
-  color: #ffffff;
-  margin: 10px auto 0 auto;
-  padding: 10px 10px 10px 10px;
-}
-
-.wikisite #navbtn svg {
-  cursor: pointer;
-  margin: 0;
-}
-
-.wikisite #wnv {
-  display: none;
-}
-
-.wikisite #wnv ul {
-  list-style-type: none;
-}
-
 .wikisite #editsitecontent svg {
   color: #1181a4;
 }
@@ -66,41 +18,6 @@
   float: right;
 }
 
-.wikisite #navbtn svg {
-  color: #ffffff;
-}
-
-@media (min-width:940px) {
-  .wikisite #wnv {
-    display: block !important;
-  }
-
-  .wikisite .hide-on-dt {
-    display: none;
-  }
-
-  .wikisite header {
-    margin-bottom: 2em;
-  }
-
-  .wikisite #wikinav {
-    order: 2;
-  }
-
-  .wikisite nav {
-    position: sticky;
-    top: 2px;
-  }
-
-  .wikisite #maincontainer {
-    order: 1;
-  }
-
-  .wikisite #wikinav nav ul li {
-    display: block;
-  }
-}
-
 .wikisite main h1 {
   margin-top: 0;
 }
@@ -123,19 +40,7 @@
     border-top-color: #0a5067;
   }
 
-  .wikisite #navbtn svg {
-    color: #dbdbdb;
-  }
-
   .wikisite #editsitecontent svg {
     color: #1b90b5;
   }
-
-  .wikisite #wnv h2, #wnv a {
-    color: #10b0e2;
-  }
-
-  .wikisite #wnv ul li a.selected {
-    color: #52bada;
-  }
 }
diff --git a/assets/js/nav.js b/assets/js/nav.js
@@ -1,5 +1,5 @@
 function showNav() {
-  var x = document.getElementById("wnv");
+  var x = document.getElementById("mnv");
   if (x.style.display === "block") {
     x.style.display = "none";
   } else {

diff --git a/browserconfig.xml b/browserconfig.xml
@@ -1,2 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
+<browserconfig>
+  <msapplication>
+    <tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/>
+      <TileColor>#ffffff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>