[feature] nightTab details added to menu

Author: zombieFox

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:2em0;
 z-index:2;
@@ -171,11 +179,17 @@
  .menu-item{
 grid-template-columns:1fr2fr;
  }
+
+ .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.5em0;
+}
+
 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 @@
 <buttonclass="menu-nav-button button" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
 <buttonclass="menu-nav-button button" data-target=".menu-content-area-background" tabindex="1">Background</button>
 <buttonclass="menu-nav-button button" data-target=".menu-content-area-data" tabindex="1">Data</button>
+<buttonclass="menu-nav-button button" data-target=".menu-content-area-nightTab" tabindex="1">nightTab</button>
 </div>
 <divclass="menu-nav-area">
 <buttonclass="menu-close button button-block mb-0" tabindex="1"><spanclass="icon-close"></span></button>
@@ -1042,6 +1043,19 @@ <h1 class="menu-item-header-text">Clear</h1>
 </div>
 </div>
 
+<divclass="menu-content-area menu-content-area-nightTab is-hidden">
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">nightTab</h1>
+</div>
+<divclass="menu-item-form">
+<pclass="p-wrap">Version <strongclass="display-version"></strong></p>
+<hr>
+<pclass="p-wrap">For feedback and support, submit an <ahref="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 @@
 varversion=(function(){
 
-varcurrent="3.22.0";
+varcurrent="3.23.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");
@@ -29,10 +29,20 @@ var version = (function(){
 returncurrent;
 };
 
+varrender=function(){
+helper.e(".display-version").textContent=get();
+};
+
+varinit=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"