css mobile so far

static/css/main.css

@@ -1,3 +1,7 @@
+/****************************/
+/********* ALL SITE *********/
+/****************************/
+
 @font-face {
   font-family: "ApfelGrotezk";
   src: url("fonts/ApfelGrotezk-Regular.woff") format("woff"),
@@ -47,9 +51,10 @@ sup a {
   background: #a99f8a;
 }
 
+
+/************* LAYOUT COMPUTER *****************/
 /*padding to be moved to the sub stuff */
 .main-column-left {
-  /*padding: 1.7em 0em;*/
   float: left;
   width: 50%;
   background: #ea4f2b;
@@ -58,7 +63,6 @@ sup a {
 }
 
 .main-column-right {
-  /* padding: 2em 1em; */
   float: right;
   width: 50%;
   background: #8048b7;
@@ -137,12 +141,173 @@ span.librarian-names:hover, span.file-names:hover {
   cursor: pointer;
 }
 
+/**************************/
+/* LAYOUT PHONE */
+
+@media  (max-width: 770px) {
+
+
+/*RED ZONE*/
+  .main-column-left {
+  width: 100%;
+  background: #ea4f2b;
+  height: 90vh;
+}
+
+
+div.file-names-container{
+  -ms-transform: rotate(-90deg) translate(-78%, 0%);
+-webkit-transform: rotate(-90deg) translate(-78%, 0%);
+transform: rotate(-90deg) translate(-0%, 0%);
+transform-origin: top left;
+height: 100vw;
+width: 100vw;
+overflow-y: scroll;
+overflow-x: hidden;
+position: absolute;
+left: 0%;
+top: calc(100% - 4em);
+}
+
+div#listofpeople{
+  text-align: center;
+}
+
+/*PURPLE ZONE*/
+.main-column-right {
+  width: 100%;
+  background: #8048b7;
+  overflow-y: scroll;
+  height: 90vh;
+  padding-top: 10%;
+  /* clip-path: ellipse(50% 70% at center center); */
+  /* -webkit-clip-path: ellipse(49% 70% at center center); */
+  }
+
+  /*buttons*/
+
+  button#about, button#showall, button#reset{
+    position: absolute;
+    top: 85%;
+  }
+
+      button#about{
+    left:45%;
+  }
+
+    button#showall{
+    left: 20%;
+  }
+
+      button#reset{
+    left:70%;
+  }
+
+
+  /* DIVS ABOUT */
+  div#intro{
+    z-index: 100;
+    left: 20%;
+    top: 5%;
+    height: 90%;
+  }
+  div#howto{
+    z-index: 100;
+    left: 30%;
+    top: 10%;
+    height: 80%;
+  }
+  div#insert{
+    z-index: 100;
+      left: 10%;
+  top: 0%;
+  height: 100%;
+  }
+
+  #closeintro, #closehowto, #closeinsert{
+    right:1em;
+  }
+  #closeintro{
+    top:2.5em;
+  }
+  #closehowto{
+    top:4.5em;
+  }
+  #closeinsert{
+    top:0.5em;
+  }
+
+}
+
+/****************/
+/* COMPUTER */
+
+@media  (min-width: 770px) {
+
+
+  /*buttons*/
+
+    button#about{
+    position: fixed;
+    top: 45.5%;
+    left: 47.8%;
+  }
+
+    button#showall{
+    position: fixed;
+    bottom: 34.7%;
+    left: 47.85%;
+  }
+
+      button#reset{
+    position: fixed;
+    top: 35%;
+    left: 47.85%;
+  }
+
+  /* DIVS ABOUT */
+  div#intro{
+  left: 21%;
+  top: 10%;
+  width: 29%;
+  height: 80%;
+  z-index: 1;
+  }
+  div#howto{
+  left: 22%;
+  top: 15%;
+  width: 28%;
+  height: 70%;
+  z-index: 2;
+  }
+  div#insert{
+  left: 20%;
+  top: 5%;
+  width: 30%;
+  height: 90%;
+  z-index: 1;
+  }
+
+  div#closehowto {
+    margin-left: 21.3em;
+}
+
+div#closeintro {
+    margin-left: 22.2em;
+}
+
+div#closeinsert {
+    margin-left: 23.1em;
+}
+  
+
+}
+
 /**********************************/
 /* container for names and files */
 /********************************/
 
   #nav-container {
-    /*width: 50%;*/
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: 25% 75%;
@@ -159,16 +324,8 @@ height: inherit;
 /*********************/
 
 #listofpeople{
-  /*border-bottom: #1c1c1c 1px solid;*/
   padding: 1.7em 0em;
   overflow-y: scroll;
-  /* border: lime 1px solid; */
-  /*position: fixed;*/
-  /*width: 50%;*/
-  /*padding: 0em;*/
-  /*top: 25px;*/
-  /*left: 0;*/
-  /*z-index: 1;*/
 }
 /***********************/
 /* Block list of files*/
@@ -187,7 +344,6 @@ height: inherit;
    /*Standard syntax */
   transform: rotate(-90deg) translate(-0%, 0%);
   transform-origin: top left;
-   /*border:blue 1px solid; */
   height: 50vw;
   width: 34vw;
   overflow-y: scroll;
@@ -224,8 +380,7 @@ height: inherit;
 }
 
 
-
-
+/************************/
 
 img.listed-images {
   width: 100%;
@@ -252,6 +407,12 @@ object.listed-pdf {
   color: #8048b7 !important;
 }
 
+/************************/
+/*BUTTONS AND INFO PAGES*/
+/************************/
+
+/*Buttons*/
+
 button {
     border-radius: 0;
     border: 0;
@@ -280,108 +441,54 @@ button#listoffiles:hover {
   background: #f0f0f0 !important;
 }
 
-/* button#about {
-  position: fixed;
-  left: 47.25%;
-  top: 49%;
-  width: 6.4%;
-  transform: rotate(270deg);
-  background: #ea4f2b;
-}
-
-button#about:hover {
-  background: #f0f0f0 !important;
-  cursor: pointer;
-} */
 
 button#about {
-  position: fixed;
-  left: 47.8%;
-  top: 45.5%;
   background: #f0f0f0;
   border-radius: 100%;
   padding: 2em 0.9em;
   z-index: 3;
 }
 
-button#about:hover {
-  background: #ea4f2b;
+button#about:hover, button#reset:hover, button#showall:hover, button.download:hover {
+  background: #ea4f2b !important;
   cursor: pointer;
 }
 
 button#reset {
-  position: fixed;
-  left: 47.85%;
-  top: 35%;
   border-radius: 100%;
   padding: 2em 1em;
 }
 
-button#reset:hover {
-  background: #ea4f2b !important;
-  cursor: pointer;
-}
 
 button#showall {
-  position: fixed;
-  left: 47.85%;
-  bottom: 34.7%;
   border-radius: 100%;
   padding: 2.05em 0.4em;
 }
 
-button#showall:hover {
-  background:  #ea4f2b !important;
-  cursor: pointer;
-}
-
 button.download {
     padding: 0.7em 0.7em;
     border-radius: 5px 21px 5px 21px;
 }
 
-button.download:hover {
-    background: #ea4f2b;
-}
+/*info pages*/
 
 #intro p, #howto p, #insert p {
   line-height: 1.5em;
 }
 
 #intro, #howto, #insert {
-  border-radius: 10px 50px 50px 10px;
   overflow-y: scroll;
   position: fixed;
   display: none;
   padding: 1em 2em 1em 1em;
 }
 
-#insert {
-  left: 20%;
-  top: 5%;
+#insert, #howto {
   background: #f0f0f0;
-  width: 30%;
-  height: 90%;
-  z-index: 1;
 }
 
 #intro {
-  left: 21%;
-  top: 10%;
   background: #8048b7;
-  /* color: white; */
-  width: 29%;
-  height: 80%;
-  z-index: 1;
-}
-
-#howto {
-  left: 22%;
-  top: 15%;
-  background: #f0f0f0;
-  width: 28%;
-  height: 70%;
-  z-index: 2;
 }
 
 #howto audio {
@@ -394,9 +501,6 @@ button.download:hover {
   position: fixed;
   color: #1c1c1c;
   font-weight: bold;
-  /* background: #1c1c1c; */
-  /* padding: 0 0.2em 0.3em 0.2em; */
-  /* border-radius: 5px 25px 5px 25px; */
 }
 
 #closehowto:hover, #closeinsert:hover {
@@ -407,22 +511,6 @@ button.download:hover {
   color: #f0f0f0;;
 }
 
-div#closehowto {
-    margin-left: 21.3em;
-    /* color: #8143b9; */
-}
-
-div#closeintro {
-    margin-left: 22.2em;
-    /* color: #f0f0f0; */
-    /* color: #ec4e1e; */
-}
-
-div#closeinsert {
-    margin-left: 23.1em;
-    /* color: #8143b9; */
-}
-
 span.method-label {
   text-transform: capitalize;
 }
@@ -432,3 +520,5 @@ hr {
     color: #f0f0f0;
     width: 50%;
 }
+
+