[feature] nightTab details added to menu

src/css/menu.css

@@ -96,11 +96,9 @@
 .menu-nav-button {
   background-color: transparent;
   margin: 0;
-  padding-top: 1em;
-  padding-bottom: 1em;
+  padding: 1em;
   border-radius: 0;
   flex-grow: 1;
-  flex-basis: 33%;
 }
 
 .menu-nav-button:first-child {
@@ -118,6 +116,11 @@
   .menu {
     width: 80vw;
   }
+
+  .menu-nav-button {
+    flex-basis: 33%;
+    max-width: 33%;
+  }
 }
 
 @media (min-width: 700px) {
@@ -157,6 +160,11 @@
     z-index: 3;
   }
 
+  .menu-nav-button {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
   .menu-item-form {
     padding: 2em 0;
     z-index: 2;
@@ -171,11 +179,17 @@
   .menu-item {
     grid-template-columns: 1fr 2fr;
   }
+
+  .menu-nav-button {
+    flex-basis: 33%;
+    max-width: 33%;
+  }
 }
 
 @media (min-width: 1100px) {
   .menu-nav-button {
     flex-basis: 0;
+    max-width: inherit;
   }
 }
 

src/css/typography.css

@@ -45,7 +45,7 @@ h6 {
 }
 
 p {
-  color: rgb(var(--theme-style-text));
+  color: rgb(var(--theme-gray-16));
   margin: 0;
   line-height: 1.5;
 }
@@ -54,6 +54,10 @@ p:not(:last-child) {
   margin-bottom: 0.5em;
 }
 
+.p-wrap {
+  padding: 0.5em 0;
+}
+
 hr {
   border: 0;
   border-top: 1px solid rgb(var(--theme-gray-02));
@@ -65,6 +69,7 @@ hr {
 b,
 caption,
 strong {
+  color: rgb(var(--theme-style-text));
   font-family: var(--font-bold);
 }
 
@@ -75,7 +80,7 @@ a {
 
 a:link,
 a:visited {
-  color: rgb(var(--theme-gray-16));
+  color: rgb(var(--theme-gray-18));
 }
 
 a:focus {
@@ -92,6 +97,19 @@ a:active {
   color: rgb(var(--theme-style-text));
 }
 
+.a-underline {
+  padding-bottom: var(--layout-line-width);
+  border-bottom-width: calc(var(--layout-line-width) / 2);
+  border-bottom-style: solid;
+  border-bottom-color: rgb(var(--theme-gray-06));
+  transition: color var(--layout-animation-speed-fast), border-color var(--layout-animation-speed-fast);
+}
+
+.a-underline:hover {
+  text-decoration: none;
+  border-bottom-color: rgb(var(--theme-accent));
+}
+
 ol,
 ul {
   margin: 0;

src/index.html

@@ -114,6 +114,7 @@
           <button class="menu-nav-button button" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
           <button class="menu-nav-button button" data-target=".menu-content-area-background" tabindex="1">Background</button>
           <button class="menu-nav-button button" data-target=".menu-content-area-data" tabindex="1">Data</button>
+          <button class="menu-nav-button button" data-target=".menu-content-area-nightTab" tabindex="1">nightTab</button>
         </div>
         <div class="menu-nav-area">
           <button class="menu-close button button-block mb-0" tabindex="1"><span class="icon-close"></span></button>
@@ -1042,6 +1043,19 @@
           </div>
         </div>
 
+        <div class="menu-content-area menu-content-area-nightTab is-hidden">
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">nightTab</h1>
+            </div>
+            <div class="menu-item-form">
+              <p class="p-wrap">Version <strong class="display-version"></strong></p>
+              <hr>
+              <p class="p-wrap">For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" class="a-underline" target="_blank">Issues.</a></p>
+            </div>
+          </div>
+        </div>
+
       </div>
 
     </div>

src/js/init.js

@@ -18,3 +18,4 @@ search.init();
 title.init();
 header.init();
 theme.init();
+version.init();

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.22.0";
+  var current = "3.23.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");
@@ -29,10 +29,20 @@ var version = (function() {
     return current;
   };
 
+  var render = function() {
+    helper.e(".display-version").textContent = get();
+  };
+
+  var init = function() {
+    render();
+  };
+
   // exposed methods
   return {
+    init: init,
     get: get,
-    compare: compare
+    compare: compare,
+    render: render
   };
 
 })();

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"