navigation style

static/archive.css

@@ -47,7 +47,7 @@ body {
 
 .linkscont{
   margin-top: 10%;
-  height: auto;
+  height: 100vh;
   width: auto;
   position: fixed;
   left:0%;
@@ -55,21 +55,20 @@ body {
 }
 
 .pagelink{
-/*  display:table-cell;
   text-align:center;
-  vertical-align:middle;*/
+  vertical-align:middle;
-  display: inline-flex;
+  display: block;
-  justify-content: center;
+  /*justify-content: center;*/
   align-items: center;
   position: fixed;
+  /*text-align: left;*/
   /*display: block;*/
   left:0px;
-  width:25px;
+  width:36px;
-  height:25px;
+  height:36px;
-  padding:10px;
+  padding-top: 2px;
   background-color: white;
-  z-index: 2;
+  z-index: 2; 
-  font-size: 24px;
   /*text-align: justify;*/
   border-top-style: solid;
   border-right-style: solid;
@@ -80,7 +79,19 @@ body {
   
 }
 
-.pagelink:hover{
+.icon{
+  text-align:center;
+  vertical-align:middle;
+ /* display: block;*/
+  /*justify-content: center;*/
+  align-items: center; 
+font-size: 24px;
+width: 40%;
+height: 40%;
+vertical-align:middle;
+}
+
+.active, .pagelink:hover{
   background-color: #0BEFEB;
 }
 
@@ -100,18 +111,13 @@ body {
   background-color: #0BEFEB;
 }*/
 
-.pagename{
-align-items: center;
-width:auto;
-text-align: left;
-}
 
 .pagelink .pagename{
-  display: inline;
+  display: inline-block;
-  position: absolute;
+  position: relative;
   width: auto;
   padding: 5px;
-  margin-left: 160px;
+  margin-left: 20px;
   font-size: 12px;
   background-color: white;
   visibility: hidden;

static/index.css

@@ -1,11 +1,6 @@
 body {
     background: white;
-    max-width: 100%;
+    height: 100vh;
-    height:100%;
-    display: inline-table;
-    font-family: Roboto Mono;
-    bottom: 20px;
-    scrollbar-width: thin;
 }
 
 /*.img {
@@ -38,6 +33,9 @@ display: inline-block;
     line-height: 1.3;
 }
     
+.linkscont{
+position-top:0px;
+}
 
 /*.pagelink{
   position: fixed;