Working on mobile friendly website.

css/resets.css

@@ -0,0 +1,52 @@
+@import url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira code.css');
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: 'fira code', monospace;
+  font-weight: 100;
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: 100;
+  margin: 0;
+}
+
+/* -~ NAV ~- */
+a#mobileButt {
+  visibility: hidden;
+  height: 0px;
+  font-size: 5em;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav ul li {
+  display: inline-block;
+}
+
+nav ul li.spacer {
+  color: #FF670F;
+}
+
+/* -~ WORK ~- */
+.work ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.work ul li {
+}
+
+.work ul li h3 {
+  margin: 0;
+}
+
+.work ul li p {
+  margin: 0;
+}

css/styles.css

@@ -1,213 +1,72 @@
-@import url('https://fontlibrary.org/face/hk-grotesk');
+/* Portables ----------- */
-@import url('https://fontlibrary.org/face/glacial-indifference');
+@media only screen
+and (max-device-width : 1024px) {
+  /* Styles */
 
-body {
+  body {
-  display: grid;
+    width: 100vw;
-  width: 100%;
+    height: 100vh;
-  grid-template-columns: repeat(9, 1fr);
+  }
-  grid-template-rows: repeat(9);
-  grid-gap: 15px;
-  margin: 0;
-  padding: 0;
-  font-family: 'HankenGroteskLight', sans-serif;
-  font-weight: 400;
-  font-size: 1.2em;
-  color: #000;
-}
 
-h1, h2, h3, h4 {
+  /* -~ HEADER ~- */
-  font-weight: 100;
-}
 
-header {
+  header {
     position: relative;
-  grid-column: 8 / span 2;
+  }
-  grid-row: 2;
-}
 
-header h1 {
+  /* -~ NAV ~- */
+  a#mobileButt {
     position: absolute;
-  top:95px;
-  left:-60px;
-  font-size: 5em;
-  line-height: 0.85em;
-  margin: 0;
-  transform: rotate(90deg);
-}
-
-nav {
-  grid-column: 2 / 8;
-  grid-row: 1;
-  height: 60px;
-  padding: 20px 0;
-  align-self: center;
-}
-
-nav ul {
-  list-style: none;
-  font-size: 2em;
-  margin: 0;
-  padding: 0;
-  text-indent: none;
-}
-
-nav ul li {
-  display: inline;
-  padding: 0 10px;
-}
-
-nav a {
-  text-decoration: none;
-  color: #000;
-  border-bottom: thin solid rgba(0,0,0,0);
-  transition: all 0.3s ease;
-}
-
-nav a:hover {
-  text-decoration: none;
-  color: #333;
-  border-bottom: thin solid rgba(0,0,0,1);
-  transition: all 0.3s ease; 
-}
-
-img {
-  max-width: 100%;
-}
-
-/* WORK SECTIONS */
-
-section img {
-  max-width: 100%;
-  height: auto;
-}
-
-section#audioSection {
-  grid-column: 2 / 8;
-  grid-row: 2 / 10;
-  display: none;
-  visibility: hidden;
-}
-
-
-section#otherSection {
-  grid-column: 2 / 8;
-  grid-row: 2 / 10;  
-  display: none;
-  visibility: hidden;
-}
-
-.work {
-  position: relative;
-  z-index: 100;
-}
-
-.work > h1 {
-  position: absolute;
-  left: -400px;
-  top: 200px;
-  font-family: 'GlacialIndifferenceRegular';
-  font-size: 12em;
-  font-weight: bold;
-  text-transform: uppercase;
-  transform: rotate(-90deg);
-  z-index: 1;
-  color: #FF670F;
-}
-
-.work ul {
-  list-style: none;
-  text-indent: none;
-  padding: 0;
-  margin: 0;
-}
-
-.work ul li {
-  position: relative;
-  display: block;
-  height: 600px;
-  overflow: hidden;
-  border: solid thick white;
-  background-position: center !important;
-  background-size: cover !important;
-  background-color: #BFBFBF;
-}
-
-.work ul a {
-  z-index: 5000;
-}
-
-.work ul li:hover {
-  cursor: pointer;
-}
-
-.work ul li > h3, .work ul li > p {
-  position: absolute;
-  font-weight: bold;
-  color: #FCFCFC;
-  z-index: 10;
-}
-
-.work ul li > h3 {
-  font-family: 'GlacialIndifferenceRegular';
-  text-transform: uppercase;
     bottom: 0px;
-  right: 30px;
+    right: 0px;
-  margin: 0;
+    visibility: visible;
-  padding: 0;
+  }
-  font-size: 7em;
+
-  font-weight: bold;
+  nav.navigation {
-  text-align: right;
+    position: fixed;
+    display: block;
+    width: 100%;
+    max-height: 0px;
+    overflow: hidden;
+    background: #FFF;
+    transition: all 0.25s ease;
+  }
+
+  nav.navigation.open {
+    max-height: 100vh;
+    transition: all 1s ease;
+  }
+
+  nav.navigation ul {
+    list-style: none;
+    margin: 10% 0 0 0;
+    font-size: 2em;
+  }
+
+  nav.navigation ul li {
+    display: block;
+    text-align: center;
+    padding: 5px 0 7px;
+  }
+
+
+  nav.navigation ul li.spacer {
+    color: #FF670F;
+  }
+
 }
 
-.work ul li > p {
+/* Desktops and laptops ----------- */
-  top: 10px;
+@media only screen
-  left: 20px;
+and (min-width : 1224px) {
-  font-style: italic;
+  /* Styles */
-  max-width: 50%;
+
+
 }
 
-/* WORK INPAGE */
+/* Large screens ----------- */
+@media only screen
+and (min-width : 1824px) {
+  /* Styles */
 
-a#home {
-  grid-column: 2;
-  grid-row: 2;
-  align-self: center;
-  color: #000;
-  text-decoration: none;
-  font-size: 1em;
-  height: 300px;
-}
-
-a#home:hover {
-  color: #000;
-  text-decoration: underline;
-}
-
-.work.text {
-  grid-column: 2 / span 3;
-  grid-row: 3 / 9;
-}
-
-.work.text > h1 {
-  transform: rotate(0);
-  font-size: 4em;
-  left: -75px;
-  top: -100px;
-  margin: 0;
-  padding: 0;
-}
-
-.work.imgs {
-  grid-column: 5 / 8;
-  grid-row: 3 / 9;
-}
-
-div.imgFeat {
-  position: relative;
-  grid-column: 3 / 8;
-  grid-row: 2;
-}
-
-.imgFeat > img {
-  max-width: 100%;
 }

index.html

@@ -4,28 +4,33 @@
    <title>wkflw</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
+   <link rel="stylesheet" type="text/css" href="css/resets.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
 </head>
 <body>
 
    <header>
       <h1>max<br>franklin</h1>
+      <a id="mobileButt">menu</a>
    </header>
 
-   <nav>
+
+   <nav class="navigation">
       <ul>
-         <li style="color: #FF670F;">wrk : </li>
+         <li class="spacer">wrk : </li>
          <a href="#" id="audioButton"><li>audio</li></a>
          <a href="#" id="otherButton"><li>other</li></a>
          <a href="https://git.suroh.tk/" target="_blank"><li>code</li></a>
-         <li style="color: #FF670F;">rsch : </li>
+         <li class="spacer">rsch : </li>
          <a href="https://ied.suroh.tk/"><li>IED</li></a>
          <a href="https://work.suroh.tk/research/"><li>wiki</li></a>
+         <li class="spacer">cv : </li>
+         <a href="cv.html"><li>me</li></a>
       </ul>
    </nav>
 
    <section class="work" id="audioSection">
-      <h1>AUDIO</h1>
+      <h1>=> audio</h1>
 
       <ul>
          <a href="work/soloWork.html"><li id="soloWork" style="background:url('assets/audio/solo/thumb-_DSC5654.jpg');">
@@ -40,7 +45,7 @@
    </section>
 
    <section class="work" id="otherSection">
-      <h1>OTHER</h1>
+      <h1>=> other</h1>
 
       <ul>
          <a href="work/fragileMasteryWork.html"><li id="fragileMasteryWork" style="background:url('assets/other/fragileMastery/thumb-gradInstallation.jpg');">

js/menu.js

@@ -29,3 +29,17 @@ otherBut.addEventListener("click", () => {
       console.log('No section')
    }
 })
+
+// MOBILE menu
+
+var menuButton = document.querySelector("#mobileButt");
+
+ menuButton.addEventListener("click", function(event) {
+   event.preventDefault();
+   var parent = document.querySelector(".navigation");
+   if (parent.classList.contains("open")) {
+     parent.classList.remove("open");
+   } else {
+     parent.classList.add("open");
+   }
+});