styling the sheet

static/css/style.css

@@ -45,9 +45,14 @@ body{
   margin: 0;
   width: 100%;
   height: 100%;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  background: #e4e4e4;
 }
 
-h2,h3{
+h2, h3{
   font-family: 'Steps Thin Mono';
 }
 
@@ -61,17 +66,18 @@ div#wrapper{
 
 div#top{
   position: relative;
-  background: white;
 }
 
 div#bottom{
   padding-top: 4em;
+  padding-bottom: 4em;
   position: absolute;
   width: 100%;
 }
 
 div.content-block{
-  padding: 0 5em 0 10em;
+  width: 75%;
+  margin: 0 auto;
 }
 
 /********************************************************/
@@ -91,19 +97,12 @@ div.content-block{
 
 #thewordpath{
   font-family: 'Compagnon Light';
-  /* font-style: roman; */
   display: block;
-  width: 100%;
+  width: 75%;
-  top:0;
+  margin: 0 auto;
-  right: 0;
+  margin-top: 0.5em;
-  left: 0;
-  width: auto;
-  margin: 0.5em 5em 0.5em 10em;
 }
-.word{
-  color:black;
 
-}
 
 /********************************************************/
 /* HOMEPAGE */
@@ -114,24 +113,28 @@ div.home {
   text-align: justify;
   font-size: 0.8em;
 }
-
+div.homepage{
+  padding: 0 0 5em 0;
+  width: 75%;
+  margin: 0 auto;
+}
 div.home a{
   border-bottom: 1px dashed black;
   padding: 0.1em;
   margin: 0.5em;
-  line-height: 1.5em;
+  line-height: 1.8em;
   color: white;
 }
 
 
 div.home a:visited{
   color: black;
-  border-bottom: white;
 }
 
 div.home a:hover{
   background: magenta;
   color: white;
+  border-bottom: none;
 }
 
 div.explanation{
@@ -174,6 +177,12 @@ div.explanation{
 }
 #logobox a, #logobox a:visited{
   color: black;
+  text-shadow: 1px 0 black;
+}
+
+#logobox a:hover{
+  color: magenta;
+  text-shadow: 1px 0 magenta;
 }
 
 #logobox h1{
@@ -193,8 +202,8 @@ div.generate-button {
   position: fixed;
   width: 5rem;
   height: 5rem;
-  bottom:5%;
+  bottom:25%;
-  right:5%;
+  right:1.5%;
   margin: auto;
   border-radius: 50%;
   animation: giro 24s infinite linear;
@@ -229,8 +238,8 @@ div.generate-button-index {
   position: fixed;
   width: 5rem;
   height: 5rem;
-  bottom:0;
+  top:10%;
-  right:0;
+  right:10%;
   margin: auto;
   border-radius: 50%;
   animation: giro 7.5s infinite linear;
@@ -264,8 +273,8 @@ div.generate-button-about {
   position: fixed;
   width: 5rem;
   height: 5rem;
-  left: 5%;
+  left: 6%;
-  top: 50%;
+  top: 30%;
   margin: auto;
   border-radius: 50%;
   animation: girominus 10s infinite linear;
@@ -310,10 +319,6 @@ a{
 	text-decoration: none;
 }
 
-div.diverge_list a {
-    color: magenta;
-}
-
 ul{
 	list-style: none;
 }
@@ -339,41 +344,47 @@ li:hover {
 }
 
 img{
-	max-width: 90%;
+	width: 90%;
   height: auto;
 	margin-bottom: 15px;
 }
 video{
-	max-width: 90%;
+	width: 90%;
+  height: auto;
+  margin-bottom: 15px;
+}
+audio{
+  margin-bottom: 15px;
+  width: 90%;
+  margin-bottom: 15px;
+}
+embed#plugin {
+  margin-bottom: 15px;
 }
 
 .description{
-	width: 80%;
+	width: 75%;
 }
 .text{
 	float: right;
 	width: 50%;
+  line-height: 1.45em;
  }
 
 .text a:visited{
   color: magenta;
 }
 .text a:hover{
-  background: : red;
+  background: : magenta;
   color: white;
 }
 
 .item{
 	float: left;
 	width: 50%;
-  padding-top: 7.8%;
+  padding-top: 3%;
  }
 
-.column h2{
-  /* color: pink;
-  border:1px solid pink; */
-}
-
 .column a:hover{
   color: white;
   background-color: magenta;
@@ -442,19 +453,13 @@ li.prev_item, li.next_item, li.no_here {
 /* DIVERGE */
 /********************************************************/
 
-div.diverge_all{
+
-  padding: 1em 6.3em 1em;
-}
 div.diverge_all p{
   font-weight: bold;
   font-size: 1.3em;
   font-family: 'Steps Thin Mono';
 }
-div.diverge_list {
+
-  /* width: 40%; */
-}
-div.diverge_list a{
-}
 span.folder-corner {
 
 	font-size: 0.8em;
@@ -465,20 +470,22 @@ span.folder-corner {
 /********************************************************/
 /* ABOUT PAGE */
 /********************************************************/
-div.about {
+div.aboutpage {
   padding: 0 0 5em 0;
-  width: 70%;
+  width: 75%;
   margin: 0 auto;
 }
 
-
+.about.column, .theindexpage {
+    line-height: 1.45em;
+}
 
 /********************************************************/
 /* THE INDEX */
 /********************************************************/
 div.theindexpage{
   padding: 0 0 5em 0;
-  width: 70%;
+  width: 75%;
   margin: 0 auto;
 }
 .foldersindex{
@@ -489,7 +496,7 @@ div.theindexpage{
 }
 .foldersindex a{
   color: black;
-  width: 80%;
+  width: 75%;
   height: 98%;
   /*display: inline-block;*/
 }
@@ -503,7 +510,7 @@ h1.logo a {
   text-transform: uppercase;
 }
 a.li-index span:hover {
-    background: red;
+    background: magenta;
     color: white;
 }
 a.li-index:hover {
@@ -544,15 +551,11 @@ a.li-index:hover {
     hyphens: auto;
     word-break: break-all;
   }
-  div.content-block {
+
-    padding: 0em 2em 4em 2em; /* The width is 100%, when the viewport is 800px or smaller */
-  }
   #logobox{
     padding: 0em;
   }
-  #thewordpath{
+
-    margin: 0.5em;
-  }
   /*home*/
   div.home{
     padding: 0em;
@@ -564,7 +567,6 @@ a.li-index:hover {
   }
   div.home a{
     color:black;
-    /*border:none;*/
   }
 
   /*diverge*/
@@ -572,6 +574,14 @@ a.li-index:hover {
     padding: 0em;
   }
 
+  div.diverge_list > a:visited {
+    color: magenta;
+  }
+
+  div.diverge_list > a:selection {
+    color: white;
+  }
+
   /*description*/
   div.text{
     width: 100%;
@@ -623,6 +633,9 @@ div#logobox {
     width: 100%;
 
 }
+#logobox h1 {
+  font-size:1.5em;
+}
 #logobox a, #logobox a:visited{
   color: black;
 }