and css

static/css/style.css

@@ -1,7 +1,6 @@
-*, *:after, *:before {
+/********************************************************/
-  box-sizing: border-box;
+/* FONTS */
-  -moz-box-sizing: border-box;
+/********************************************************/
-}
 
 @font-face {
     font-family: 'Compagnon Bold';
@@ -49,14 +48,18 @@ font-weight: normal;
 font-style: roman;
 }
 
-
-
 @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 
+/********************************************************/
+/* ALL PAGES - LAYOUT */
+/********************************************************/
 
+*, *:after, *:before {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
 
 body{
-	/* background: #ffffff; */
 	color:black;
 	font-family: 'Montserrat', sans-serif;
 	top:0;
@@ -64,34 +67,20 @@ body{
   margin: 0;
   width: 100%;
   height: 100%;
-
 }
 
 h2,h3{
   font-family: 'Steps Thin Mono';
 }
+
 a{
   color: black;
 }
 
-div.home > a{
-  border-bottom: 1px dashed black;
-  padding: 0.1em;
-  margin: 0.5em;
-  line-height: 1.5em;
-}
-
-.text a:visited{
-  color: red;
-}
-.text a:hover{
-  background: : red;
-  color: white;
-}
-
 div#wrapper{
    width: 100%;
 }
+
 div#top{
   position: relative;
   background: white;
@@ -103,6 +92,9 @@ div#bottom{
   width: 100%;
 }
 
+div.content-block{
+  padding: 0 5em 0 10em;
+}
 
 /********************************************************/
 /* SELECTION */
@@ -115,21 +107,45 @@ div#bottom{
   background: magenta; /* Gecko Browsers */
 }
 
+/********************************************************/
+/* WORDPATH */
+/********************************************************/
+
+#thewordpath{
+  font-family: 'Compagnon Light';
+  /* font-style: roman; */
+  display: block;
+  width: 100%;
+  top:0;
+  right: 0;
+  left: 0;
+  padding: 0;
+  margin: 0;
+  padding: 10px;
+  width: auto;
+}
+.word{
+  color:black;
+
+}
 
 /********************************************************/
-/* FIRST PAGE */
+/* HOMEPAGE */
 /********************************************************/
 
-div.homecontent{
+div.homepage{
   /* padding-top: 4em; */
 }
 
+div.home > a{
+  border-bottom: 1px dashed black;
+  padding: 0.1em;
+  margin: 0.5em;
+  line-height: 1.5em;
+}
+
 div.home{
-  /* padding: 1em 5em 1em 7.5em; */
+  padding: 5em 5em 1em 7.5em; 
-	padding-left: 15em;
-	padding-top: 2em;
-	padding-bottom: 3em;
-	padding-right: 5em;
   text-align: justify;
   font-size: 0.8em;
 }
@@ -139,7 +155,6 @@ div.home a:hover{
   color: white;
   }
 
-
 div.explanation{
 	font-size: 0.75em;
 	float: right;
@@ -152,10 +167,11 @@ div.explanation{
 /********************************************************/
 /* NAVIGATION */
 /********************************************************/
+
 header{
   margin-top: 7em;
   margin-right: 10em;
-  position: fixed;
+  position: absolute;
   top:17em;
   -webkit-transform-origin: 0 50%;
 		 -moz-transform-origin: 0 50%;
@@ -173,20 +189,14 @@ header{
   display: inline-block;
   background: none;
   padding-top: 0.5em;
+  padding-left: 5em;
 }
 #logobox a, #logobox a:visited{
   color: black;
 }
-/*#logobox a:hover{
-  animation: blinker 0.05s linear infinite;
-}
-*/
-/*@keyframes blinker {
-  50% { opacity: 0; }
-}*/
 
 #logobox h1{
-  font-size: 5em;
+  font-size: 5vw;
   font-family: 'Steps Thin Mono';
   margin-top: 0;
 }
@@ -207,10 +217,11 @@ nav ul.menu {
   margin-top: 0.6em;
 }
 
+/********************************************************/
+/* BUTTONS */
+/********************************************************/
 
-
+/*generate the score*/
-/* here we are testing the button*/
-
 
 div.generate-button {
   position: fixed;
@@ -222,6 +233,7 @@ div.generate-button {
   border-radius: 50%;
   animation: giro 24s infinite linear;
   background:red;
+  position: fixed;
 }
 
 div.generate-button > span:first-child {
@@ -245,6 +257,7 @@ div.generate-button span {
 }
 
 /*index*/
+
 div.generate-button-index {
   position: fixed;
   width: 5rem;
@@ -255,6 +268,7 @@ div.generate-button-index {
   border-radius: 50%;
   animation: giro 7.5s infinite linear;
   background: magenta;
+  position: fixed;
 }
 
 div.generate-button-index > span:first-child {
@@ -276,7 +290,6 @@ div.generate-button-index span {
   text-transform: uppercase;
 }
 
-
 /*about*/
 
 div.generate-button-about {
@@ -289,6 +302,7 @@ div.generate-button-about {
   border-radius: 50%;
   animation: girominus 10s infinite linear;
   background:yellow;
+  position: fixed;
 
 }
 div.generate-button-about > span:first-child {
@@ -314,21 +328,13 @@ div.generate-button-about span {
   100% {transform: rotate(-1turn)}
 }
 
-
-
-
-
-
 @keyframes giro {
   100% {transform: rotate(1turn)}
 }
 
 
-
-
-
 /********************************************************/
-/* TEXT */
+/* DESCRIPTION PAGE */
 /********************************************************/
 
 a{
@@ -342,6 +348,7 @@ a:visited {
 ul{
 	list-style: none;
 }
+
 li a{
 	text-decoration: none;
 	color: #0000FF
@@ -364,39 +371,13 @@ li:hover {
 
 img{
 	max-width: 90%;
+  height: auto;
 	margin-bottom: 15px;
 }
 video{
 	max-width: 90%;
 }
 
-
-/********************************************************/
-/* THE CLICKED WORDS DISPLAYED */
-/********************************************************/
-
-#thewordpath{
-	font-family: 'Compagnon Light';
-	/* font-style: roman; */
-	display: block;
-	width: 100%;
-	top:0;
-	right: 0;
-	left: 0;
-	padding: 0;
-	margin: 0;
-	padding: 10px;
-	width: auto;
-}
-.word{
-	color:black;
-
-}
-
-/********************************************************/
-/* THE CONTENT IN TWO COLUMNS */
-/********************************************************/
-
 .description{
 	width: 80%;
 }
@@ -404,6 +385,15 @@ video{
 	float: right;
 	width: 50%;
  }
+
+.text a:visited{
+  color: red;
+}
+.text a:hover{
+  background: : red;
+  color: white;
+}
+
 .item{
 	float: left;
 	width: 50%;
@@ -441,7 +431,7 @@ nav.nav_bottom {
   height: auto;
   bottom: 0px;
   text-transform: uppercase;
-  font-size: 15px;
+  /*font-size: 15vw;*/
   line-height: 18px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -501,6 +491,7 @@ span.folder-corner {
 	font-style: italic;
 }
 
+
 /********************************************************/
 /* ABOUT PAGE */
 /********************************************************/
@@ -513,9 +504,9 @@ div.about {
 
 
 /********************************************************/
-/* INDEX OF FOLDERS */
+/* THE INDEX */
 /********************************************************/
-div.allcontentindex{
+div.theindexpage{
   padding: 0 0 5em 0;
   width: 70%;
   margin: 0 auto;
@@ -549,3 +540,44 @@ a.li-index:hover {
     background: transparent;
     color: black;
 }
+
+
+/********************************************************/
+/* OTHER DISPLAYS */
+/********************************************************/
+/* Use a media query to add a breakpoint at 800px: */
+@media screen and (max-width: 600px) {
+  /*all pages*/
+  div.content-block {
+    padding: 0em 2em 0em 2.5em; /* The width is 100%, when the viewport is 800px or smaller */
+  }
+  #logobox{
+    padding: 0em;
+  }
+  /*home*/
+  div.home{
+    padding: 0em;
+  }
+  /*diverge*/
+  div.diverge_all{
+    padding: 0em;
+  }
+  /*description*/
+  div.text{
+    width: 100%;
+  }
+  div.item{
+    width: 100%;
+  }
+  div.about{
+    width: 100%;
+  }
+  div.descriptionpage{
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  /*index*/
+  div.theindexpage{
+    width: 100%;
+  }
+}