about page

static/about.css

@@ -0,0 +1,62 @@
+body {
+    background-color: #F4EBE8;
+    
+}
+
+.projtextcont{
+	display: block;
+	/*align-items: center;
+  justify-content: center*/
+  margin-left:200px;
+  font-family: Roboto Mono;
+
+}
+
+.projtext{
+	width: 50%;
+	height: 50%;
+	display: block;
+
+}
+
+h1{
+	display: block;
+}
+
+.pagelink{
+  position: fixed;
+  display: inline;
+  left:0px;
+  width:20px;
+  height:20px;
+  padding:10px;
+  background-color: white;
+  z-index: 10;
+  font-size: 18px;
+  text-align: center;
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  /*border-style: solid;*/
+  border-width: 1px;
+  border-color: #371F10;
+  
+}
+
+.pagelink:hover{
+  background-color: #0BEFEB;
+}
+.pagelink a{
+  text-decoration: none;
+}
+
+.pagelink .pagename{
+  display: inline;
+  position: absolute;
+  width: auto;
+  padding: 5px;
+  margin-left: 25px;
+  font-size: 13px;
+  background-color: white;
+  visibility: hidden;
+}s

static/index.css

@@ -5,7 +5,7 @@ body {
     display: inline-table;
     font-family: Roboto Mono;
     bottom: 20px;
-
+    scrollbar-width: thin;
 }
 
 /*.img {
@@ -64,27 +64,40 @@ display: inline-block;
 
 .pagelink{
   position: fixed;
-  display: inline-block;
+  display: inline;
   left:0px;
   width:20px;
+  height:20px;
   padding:10px;
   background-color: white;
   z-index: 10;
-  font-size: 15px;
+  font-size: 18px;
-  border-style: solid;
+  text-align: center;
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  /*border-style: solid;*/
   border-width: 1px;
-  border-color: #371F10
+  border-color: #371F10;
+  
+}
+
+.pagelink:hover{
+  background-color: #0BEFEB;
+}
+.pagelink a{
+  text-decoration: none;
 }
 
 .pagelink .pagename{
-  display: block;
+  display: inline;
   position: absolute;
   width: auto;
   padding: 5px;
-  font-size: 10px;
+  margin-left: 25px;
+  font-size: 13px;
   background-color: white;
   visibility: hidden;
-  font-size: 15px;
 }
 
 .pagelink:hover .pagename{
@@ -112,11 +125,11 @@ display: inline-block;
   padding: 10px;
   /*border-radius: 6px;*/
 /*  font-family: CothamSans;*/
-  font-size: 18px; 
+  font-size: 16px; 
   position: absolute;
   /*top: 0px;*/
   z-index: 1;
-  margin-top: 0px;
+  margin-top:-10px;
   /*vertical-align: top;*/
   line-height: 1.3;
   word-wrap:break-word
@@ -126,12 +139,12 @@ display: inline-block;
   visibility: visible;
 }
 
-ul#nav li{
+/*ul#nav li{
     display: inline;
     list-style: none;
     margin-left: 10px;
 /*    margin-left: 10%
-    margin-right: 10%;*/
+    margin-right: 10%;
     align-content: initial;
     font-size: 20px; 
 
@@ -147,13 +160,13 @@ ul#nav{
     padding-left: 0px;
     border: none;
     width: 80vw;
-    /*display: inline;*/
+    /*display: inline;
     height:20px;
-    /*overflow-x: scroll;*/
+    /*overflow-x: scroll;
     left:0px;
     position: fixed;
     z-index: 1;
-}
+}*/
 
 ul#menu li{
     display: inline;
@@ -165,31 +178,29 @@ ul#menu li{
 }
 
 ul#menu{
-    margin-left: 10px;
+    margin-left: 45px;
     margin-right: 10px;
-    top:0px;
+    top:-15px;
     bottom: 10px;
     padding-left: 0px;
     border: none;
-    width: 85vw;
+    width: 80vw;
-    /*display: inline;*/
     height:100%;
-    /*overflow-x: scroll;*/
     left:0px;
     margin-bottom: 20px;
     padding-bottom: 20px;
     position: absolute;
-    /*z-index: -1;   */
+    scrollbar-width: thin;
 }
 
 
 div#myBtnContainer{
- /* background-color: white;*/
+ /*background-color: #F4EBE8;*/
    /*margin-top: 20px;*/
    margin-left: 30px;
    margin-bottom: 30px;
     border: none;
-    width: 15vw;
+    max-width: 15vw;
     display: inline;
    /* visibility: hidden;*/
     height:100%;
@@ -197,19 +208,24 @@ div#myBtnContainer{
     top:0px;
     position: fixed;
     padding:10px;
-    overflow-y: scroll;
+    overflow-y: hidden;
     /*z-index: -1;*/
-
+overflow-y: scroll;
+  scrollbar-width: thin;
    /* overflow-y: hidden;*/
 }
 
-div#bigbtncontainer{
+div#myBtnContainer:hover{
+  
+}
+
+/*div#bigbtncontainer{
   overflow-y: hidden;
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  -ms-overflow-style: none;   Internet Explorer 10+ 
   scrollbar-width: thin;
-  /*overflow-y: scroll;*/
+  /*overflow-y: scroll;
   
-}
+}*/
 /*div#myBtnContainer:hover{
   background-color: white;
   z-index: 1;

templates/about.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/about.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body>
+  {{ body|safe }}
+</body>
+</html>