fix: Support p5 projects on phone (#35)

* remove contact from blog navigation * initial clean-up of flock-chorus project * tweak location of parameters in mobile mode * tweak gui position in mobile * format * add noscript warning to flock * update yellow scream * tune css * default param gui closed * update wonderful-world * update sound ripple to play nice on phone * format * remove contact from most nav bars * refactor navbar to share css * rename blog-navbar to navbar * fix canvas sizing for wonderful world * fix canvas for yellow-scream * update template * fix heading css
hannahilea · Oct 11, 2024 · 1ec874c · 1ec874c
1 parent 3d2072a
commit 1ec874c
Show file tree

Hide file tree

Showing 20 changed files with 406 additions and 268 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -43,18 +43,24 @@ body {
   padding: .8em;
   max-width: 800px;
   align-self: center;
+  line-height: 150%;
 }
 
 .title {
   padding-top: .8em;
   margin-bottom: 1em;
 }
 
+.navbar {
+  color: #03163f;
+  font-family: "Jura Regular";
+}
+
 .nav-link {
   font-family: "Jura Bold";
   text-decoration: underline dotted;
   text-underline-offset: 3px;
-  color:#03163f;
+  color: #03163f;
 }
 
 .posts {
@@ -80,28 +86,25 @@ body {
   font-weight: bolder;
 }
 
-.blog {
-  line-height: 150%;
-}
-
 h1,
-h2, h3 {
+h2,
+h3 {
   font-weight: normal;
   margin: 0;
   font-family: "Jura Bold";
   padding-bottom: 2px;
   margin-bottom: 3px;
 }
 
-.blog > h1 {
+.blog>h1 {
   line-height: 1.2em;
 }
 
 a.footnote-ref {
   text-decoration: none;
 }
 
-a > sup {
+a>sup {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
@@ -114,7 +117,7 @@ a.footnote-back {
   text-underline-offset: .1em;
 }
 
-.footnotes > ol {
+.footnotes>ol {
   font-size: smaller;
 }
 
@@ -124,7 +127,7 @@ img {
 }
 
 a {
-  color:#03163f;
+  color: #03163f;
   text-decoration: underline dotted;
   text-underline-offset: 3px;
 }
@@ -136,17 +139,12 @@ a[href^="https://github.com/hannahilea"] {
   text-underline-offset: 3px;
 }
 
-[href^="#"]:not(.footnote-back, .footnote-ref){
+[href^="#"]:not(.footnote-back, .footnote-ref) {
   text-decoration: none;
   font-weight: bold;
   font-style: italic;
 }
 
-.navbar {
-  color:#03163f;
-  font-family: "Jura Regular";
-}
-
 .badge {
   height: 20%;
   width: auto;
@@ -249,35 +247,78 @@ img.home-img {
 }
 
 /* Project pages */
-.projects-navbar {
-  font-family: "Jura Regular";
-  color:#03163f;
-  padding: 0 0 1em;
-}
+.p5-project {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-flow: column;
+  gap: 0;
+  overflow: hidden;
 
-.projects-details {
-  font-family: "OpenSans Light";
-  font-size:small;
+  #project-header {
+    margin: 1rem;
+    margin-bottom: .5rem;
+  }
+
+  #project-body {
+    flex-grow: 1;
+    height: 100%;
+    display: flex;
+  }
+
+  .project-title {
+    margin-bottom: .5rem
+  }
+
+  .navbar {
+    margin-bottom: .5em;
+  }
+
+  details {
+    font-family: "OpenSans Light";
+    font-size: smaller;
+  }
+
+  summary {
+    font-style: italic;
+  }
+
+  #gui-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+  }
+
+
+
+  /* phones only! */
+  @media (max-width: 550px) {
+    #gui-container {
+      position: fixed;
+      bottom: 0;
+      top: auto;
+    }
+  }
 }
 
 /* Blog pages*/
-.blog-navbar {
-  color:#03163f;
-  font-family: "Jura Regular";
-  margin-bottom: 1.6em;
-}
-
-pre {
-  background: #eeeff1;
-  border: 2px solid #ddd;
-  page-break-inside: avoid;
-  font-family: monospace;
-  font-size: 14px;
-  line-height: 1.6;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1em 1.5em;
-} 
+.blog {
+  pre {
+    background: #eeeff1;
+    border: 2px solid #ddd;
+    page-break-inside: avoid;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    max-width: 100%;
+    overflow: auto;
+    padding: 1em 1.5em;
+  }
+
+  .navbar {
+    margin-bottom: 1.6em;
+  }
+}
 
 .alert {
   border: none;

diff --git a/blog/__template/index.html.template b/blog/__template/index.html.template
@@ -11,12 +11,11 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
         <a class="nav-link" href="../..">home</a> | 
         <a class="nav-link" href="../../projects">projects</a> |
-        <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>$title$</h1>
 $body$

diff --git a/blog/clapping-music-for-flip-disc-displays/index.html b/blog/clapping-music-for-flip-disc-displays/index.html
@@ -11,10 +11,10 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
-        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>
         <strong><em>Clapping Music</em></strong> for two flip-disc displays

diff --git a/blog/cuttle-obsession/index.html b/blog/cuttle-obsession/index.html
@@ -10,10 +10,10 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
-        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</h1>
       <p>

diff --git a/blog/driven-developments/index.html b/blog/driven-developments/index.html
@@ -10,10 +10,10 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
-        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</h1>
       <p>

diff --git a/blog/future-blog-posts/index.html b/blog/future-blog-posts/index.html
@@ -10,10 +10,10 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
-        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>Titles of blog posts I might never write</h1>
       <p>…but maybe I will!</p>

diff --git a/blog/index.html b/blog/index.html
@@ -17,8 +17,7 @@
       @hannahilea:
       <a href=".." class="nav-link">home</a> |
       <a href="../projects" class="nav-link">projects</a> |
-      <a href="../blog" class="nav-link">blog</a> |
-      <a href="mailto:[email protected]" class="nav-link">contact</a>
+      <a href="../blog" class="nav-link">blog</a>
     </nav>
     <h1 class="title">Blog</h1>
 

diff --git a/blog/make-a-list/index.html b/blog/make-a-list/index.html
@@ -10,10 +10,10 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
-        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>First things first: Make a list</h1>
       <p>To-do list:</p>

diff --git a/blog/site-structure/index.html b/blog/site-structure/index.html
@@ -10,10 +10,10 @@
 
   <body>
     <div class="main-container blog">
-      <nav class="blog-navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         @hannahilea:
-        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a class="nav-link" href="..">blog</a> |
-        <a class="nav-link" href="mailto:[email protected]">contact</a>
+        <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
       </nav>
       <h1>This website’s structure: A meta post</h1>
       <p>While doing a batch at the <a href="https://www.recurse.com">Recurse Center</a>, I revived my personal website—the very site you are almost certainly looking at Right Now!</p>

diff --git a/projects/__template/index.html b/projects/__template/index.html
@@ -2,39 +2,49 @@
 <html lang="en">
 
 <head>
+  <link rel="shortcut icon" type="image/png" href="../../assets/img/favicon.png" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
+
+  <!-- Project-specific details -->
   <title>Sketch: {{ PROJECT_NAME }}</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-  <script>
-    var GUI = lil.GUI;
-  </script>
-  <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
-  <style>
-    canvas {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 10;
-    }
-
-  </style>
 </head>
 
-<body>
-  <nav class="projects-navbar" role="navigation">
-    <a href="../.." class="nav-link">@hannahilea</a> >
-    <a href="../../projects" class="nav-link">projects</a> > Sketch: {{ PROJECT_NAME }}
-  </nav>
-  <details class="projects-details">
-    <summary><strong>Details</strong></summary>
-    <p>A creative coding exercise (prompt: <i>TODO</i>), co-created with <a href="https://TODO.github.io/">TODO</a>
-      while at the <a href="www.recurse.com">Recurse Center</a></p>
-    <p><i>Usage:</i> When prompted, grant microphone access, then TODO.</p>
-  </details>
+<body class="p5-project">
+  <div id="project-header">
 
-  <script src="./sketch.js"></script>
+    <nav class="navbar" role="navigation">
+      @hannahilea:
+      <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> | <a
+        class="nav-link" href="..">blog</a>
+    </nav>
+
+    <h3 class="project-title">Sketch: {{ PROJECT_NAME }}</h3>
+    <details class="projects-details">
+      <summary>Details</summary>
+      <p>A creative coding exercise (prompt: <i>TODO</i>), co-created with <a href="https://TODO.github.io/">TODO</a>
+        while at the <a href="www.recurse.com">Recurse Center</a></p>
+      <p><strong>Usage:</strong> When prompted, grant microphone access, then TODO.</p>
+    </details>
 
+    <div id="gui-container"></div>
+    <noscript>
+      <br />
+      <div class="alert">
+        <summary class="alert-heading"> ⚠️ JavaScript required!</summary>
+        <p>If you're seeing this message, JavaScript is likely disabled in your browser; you'll need to enable it to
+          interact with this project.</p>
+      </div>
+    </noscript>
+  </div>
+  <div id="project-body">
+    <canvas id="p5-canvas"></canvas>
+  </div>
+  <script src="./sketch.js"></script>
 </body>
 
 </html>