From ae2bbe22bb91062a57530d995e948573e4be944f Mon Sep 17 00:00:00 2001
From: suroh <maxefranklin@tuta.io>
Date: Tue, 30 Apr 2019 23:41:43 +0200
Subject: [PATCH] Updated for some mobile responsive-ness

---
 css/master.css | 164 +++++++++++++++++++++++++++++++++++++++----------
 index.html     |   9 +--
 2 files changed, 136 insertions(+), 37 deletions(-)

diff --git a/css/master.css b/css/master.css
index cef054f..c246038 100644
--- a/css/master.css
+++ b/css/master.css
@@ -4,11 +4,7 @@
 /* --> BASE STYLES <-- */
 body {
   font-family: 'fira code', monospace;
-  font-size: 19px;
-  line-height: 24px;
   color: #1e1e3cff;
-  margin: 0;
-  padding: 0;
 }
 
 a, a:visited {
@@ -54,12 +50,7 @@ li:before {
 }
 
 /* --> NAVIGATION <-- */
-nav {
-  margin: 23px 23px 8px;
-}
-
 nav>span {
-  font-size: 1.5em;
   color: #1e1e3c33;
   transition: color ease 0.5s;
 }
@@ -77,7 +68,6 @@ nav>span.active {
 
 nav>span.active::after {
   color: #1e1e3cff;
-  margin-left: 14px;
   content: attr(data-link);
 }
 
@@ -110,7 +100,6 @@ section.content {
 }
 
 section.content.visible {
-  margin: 20px 67px;
   opacity: 1;
   height: inherit;
   overflow: inherit;
@@ -140,36 +129,149 @@ section.content ul.subMenu li:hover {
 
 /* --> SUBCONTENT CONSTRUCTION <-- */
 section.content.page {
-  max-width: 1960px;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(16, 1fr);
-  grid-gap: 24px;
 }
 
 section.page h1 {
-  font-size: 8em;
   margin: 0px;
   padding: 0px;
-  line-height: 0.95em;
 }
 
-section.content.page div.imgFeat {
-  grid-column: span 5;
-  grid-row: 1 / 4:
+@media screen and (width > 800px) {
+  body {
+    font-size: 19px;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* --> NAVIGATION <-- */
+  nav {
+    margin: 23px 23px 8px;
+    font-size: 1.5em;
+  }
+
+  nav>span {
+    margin-right: 8px;
+  }
+
+  nav>span.active::after {
+    margin-left: 8px;
+  }
+
+  /* --> MAINPAGE CONSTRUCTION <-- */
+  section.content.visible {
+    margin: 20px 65px;
+  }
+
+  section.content ul.subMenu {
+    font-size: 1.5em;
+  }
+
+  /* --> SUBCONTENT CONSTRUCTION <-- */
+  section.content.page {
+    max-width: 1960px;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(16, 1fr);
+    grid-gap: 24px;
+  }
+
+  section.page h1 {
+    font-size: 8em;
+    line-height: 0.95em;
+  }
+
+  section.content.page div.imgFeat {
+    grid-column: span 5;
+    grid-row: 1 / 4:
+  }
+
+  section.content.page section.imgs {
+    grid-column: 4 / span 2;
+    grid-row: 2:
+  }
+
+  section.content.page section.imgs>img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  section.content.page section.text {
+    grid-column: 1 / span 3;
+    grid-row: 2;
+  }
 }
 
-section.content.page section.imgs {
-  grid-column: 4 / span 2;
-  grid-row: 2:
-}
+@media screen and (width < 800px) {
+  body {
+    font-size: 20px;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+  }
 
-section.content.page section.imgs>img {
-  max-width: 100%;
-  height: auto;
-}
+  /* --> NAVIGATION <-- */
+  nav {
+    margin: 23px 23px 8px;
+    font-size: 1.75em;
+  }
 
-section.content.page section.text {
-  grid-column: 1 / span 3;
-  grid-row: 2;
+  nav>span {
+    margin-right: 8px;
+  }
+
+  nav>span.active::after {
+    position: relative;
+    top: 2px;
+    margin-left: 8px;
+  }
+
+  /* --> MAINPAGE CONSTRUCTION <-- */
+  section.content.visible {
+    margin: 32px 8px;
+  }
+
+  section.content ul.subMenu {
+    font-size: 1.5em;
+  }
+
+  /* --> SUBCONTENT CONSTRUCTION <-- */
+  section.content.page {
+    display: inherit;
+    max-width: 1960px;
+    grid-gap: 24px;
+  }
+
+  section.page h1 {
+    font-size: 3em;
+    line-height: 0.95em;
+    margin: 24px 0 32px;
+  }
+
+  section#teach h1 {
+    font-size: 3em;
+    line-height: 0.75em;
+    margin: 40px 0 48px;
+  }
+
+  /*
+  section.content.page div.imgFeat {
+    grid-column: span 5;
+    grid-row: 1 / 4:
+  }
+
+  section.content.page section.imgs {
+    grid-column: 4 / span 2;
+    grid-row: 2:
+  }
+
+  section.content.page section.imgs>img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  section.content.page section.text {
+    grid-column: 1 / span 3;
+    grid-row: 2;
+  } */
 }
diff --git a/index.html b/index.html
index 2e37ba7..ab9630b 100755
--- a/index.html
+++ b/index.html
@@ -40,10 +40,7 @@
 <body>
 
   <nav>
-    <span data-link="~"><~</span>
-    <span data-link="works" class="">█</span>
-    <span data-link="audio" class="">█</span>
-    <span data-link="teach" class="">█</span>
+    <span data-link="~"><~</span><span data-link="works" class="">█</span><span data-link="audio" class="">█</span><span data-link="teach" class="">█</span>
   </nav>
 
   <section style="position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; z-index: -100;">
@@ -342,9 +339,9 @@
 
   </section>
 
-  <section id="teach" class="content page">
+  <section id="teach" class="content">
 
-    <h1 style="font-size: 8em;">teaching</h1>
+    <h1>teaching</h1>
     <p>I'm currently engaged in teaching at <a href="https://paris.edu/" target="_blank">Paris College of Art</a> & <a href="https://www.eemi.com/" target="_blank">EEMI (l'école éuropéene des métiers de l'internet)</a> in Paris, FR.</p>
 
     <p>Experimenting in the realms of design, art, the web, interfaces, music and sound, with undergraduate and master's level students. Some links of our research and work can be found below.</p>