better styles organization

kalisjoshua · Sep 20, 2024 · 79d66dd · 79d66dd
1 parent 701907b
commit 79d66dd
Show file tree

Hide file tree

Showing 24 changed files with 414 additions and 468 deletions.
diff --git a/README.md b/README.md
@@ -13,5 +13,7 @@ See `deno.jsonc` for documentation on available commands.
 
 ## TODO
 
+  * [ ] portfolio page including descriptions of big projects
+  * [ ] -
   * [ ] Fix "Quirks Mode" issue with slides styling
   * [ ] Unit test public/js/slides.js
diff --git a/admin/build.sh b/admin/build.sh
@@ -11,13 +11,7 @@ deno run --allow-env --allow-read=./ --allow-write=$PUB_DIR ./sanguine/index.ts
 # copy public content
 cp -r ./public/* $PUB_DIR
 
-# compile css file if running locally and not in a CI environment
-if [ -z $CI ];then
-  npx sass --style=compressed ./styles/kalisjoshua.scss $PUB_DIR/css/kalisjoshua.css
-fi
-
 # create cname file
 echo kalisjoshua.me > $PUB_DIR/CNAME
 
-
 echo "Build complete."
diff --git a/admin/dev-server.ts b/admin/dev-server.ts
@@ -1,4 +1,4 @@
-import { loadSync } from "deno/dotenv/mod.ts";
+import { loadSync } from "../deno.deps.ts";
 
 const PUB_DIR = loadSync()["PUB_DIR"];
 const server = Deno.listen({ port: 8080 });
@@ -52,15 +52,15 @@ async function serveHttp(conn: Deno.Conn) {
         new Response(decoder.decode(data), {
           headers: { ...mime },
           status: 200,
-        }),
+        })
       );
     } catch (error) {
       if (error.name === Deno.errors.NotFound.name) {
         console.log(`[404] File not found: "${filePath}`);
         req.respondWith(new Response("Not found.", { status: 404 }));
       } else {
         req.respondWith(
-          new Response("Sorry, something went wrong.", { status: 500 }),
+          new Response("Sorry, something went wrong.", { status: 500 })
         );
         throw error;
       }

diff --git a/admin/watchDev.ts b/admin/watchDev.ts
@@ -1,13 +1,23 @@
 const DELAY = 300;
 let taskRunning = false;
-const watched = ["admin", "content", "public", "sanguine", "styles"];
+const watched = ["admin", "content", "public", "sanguine"];
 
 for await (const { paths } of Deno.watchFs(watched)) {
   if (!taskRunning) {
     taskRunning = true;
-    console.log("Change detected.", paths);
+    console.log("Change detected.", ...paths);
 
-    await Deno.run({ cmd: ["deno", "task", "build"] }).status();
+    const command = new Deno.Command(Deno.execPath(), {
+      args: ["task", "build"],
+      stdin: "piped",
+    });
+
+    const child = command.spawn();
+
+    // manually close stdin
+    child.stdin.close();
+
+    await child.status;
 
     setTimeout(() => {
       taskRunning = false;

diff --git a/content/contact.md b/content/contact.md
@@ -3,4 +3,4 @@
   * kalisjoshua@gmail.com
   * github.com/[kalisjoshua](https://github.com/kalisjoshua)
   * linkedin.com/in/[kalisjoshua](https://linkedin.com/in/kalisjoshua)
-  * twitter.com/[kalisjoshua](https://twitter.com/kalisjoshua)
+  <!-- * twitter.com/[kalisjoshua](https://twitter.com/kalisjoshua) -->
diff --git a/content/template.html b/content/template.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html />
+<!DOCTYPE html>
 <html class="no-js" lang="en-US" />
 <head>
   <meta charset="utf-8" />
@@ -12,14 +12,25 @@
   <link href="${rel}favicon.ico" rel="icon" />
   <link href="${rel}jk-logo.svg" rel="icon" type="image/svg+xml" />
 
-  <link href="${rel}css/kalisjoshua.css" rel="stylesheet" />
+  <link href="${rel}styles/kalisjoshua.css" rel="stylesheet" />
 
   <body class="section-${section}">
     <p class="sr-only"><a href="#main">Skip navigation</a></p>
 
     <div class="layout">
-      <main class="main" id="main" role="main">
+      <main id="main" role="main">
         <header role="banner">
+          {{?isResume}}
+          <div style="float: right; font-size: 90%; text-align: right">
+            <a
+              href="https://docs.google.com/document/d/16GFGZeztNEwdKGehjKxG0H2y9EbETrOUOW5qHBXa42c/edit?usp=sharing"
+              target="_blank"
+              title="This page also has a print style sheet so ctrl+p will also be printable to PDF"
+              >Google Document</a
+            >
+          </div>
+          {{?/}}
+
           <h1><a href="${rel}index.html">${header}</a></h1>
 
           <p>I build great teams and excellent software.</p>
@@ -33,31 +44,33 @@ <h1><a href="${rel}index.html">${header}</a></h1>
       </main>
 
       <aside role="banner">
-        <nav class="navigation" role="navigation">
+        <nav role="navigation">
           <ul>
-            ${navigation .map(({href, text}) => `
+            ${navigation.map(({href, text}) => `
             <li class="${isActive(href)}">
               <a href="${rel}${href}">${text}</a>
             </li>
             `) .join("")}
-            <li>
-              <a
-                href="https://docs.google.com/document/d/16GFGZeztNEwdKGehjKxG0H2y9EbETrOUOW5qHBXa42c/edit?usp=sharing"
-                target="_blank"
-                >Resume (Google Doc)</a
-              >
-            </li>
           </ul>
         </nav>
 
         <footer role="contentinfo">${contact}</footer>
 
         <div class="projects">${projects}</div>
 
-        <a href="${rel}index.html" id="jk-logo">
-          <img height="138px" src="${rel}images/jk-logo-square.svg"
-          title="Joshua Kalis" logo" width="138px" />
-        </a>
+        <figure id="pride-ally">
+          <a href="https://queerintheworld.com/straight-ally-pride-flag/">
+            <img
+              alt="Pride Ally Flag"
+              height="116px"
+              src="${rel}images/pride-progress.svg"
+              width="221px"
+            />
+          </a>
+          <br />
+          <br />
+          <figcaption>Proud to be a Pride Ally</figcaption>
+        </figure>
 
         <figure class="dev-icons" title="Common web technologies I use.">
           <img
@@ -110,25 +123,35 @@ <h1><a href="${rel}index.html">${header}</a></h1>
           />
         </figure>
 
-        <figure id="pride-ally">
-          <a href="https://queerintheworld.com/straight-ally-pride-flag/">
-            <img
-              alt="Pride Ally Flag"
-              height="116px"
-              src="${rel}images/pride-progress.svg"
-              width="221px"
-            />
-          </a>
-          <br />
-          <br />
-          <figcaption>Proud to be a Pride Ally</figcaption>
-        </figure>
+        <a href="${rel}index.html" id="jk-logo">
+          <figure>
+            <img height="138px" src="${rel}images/jk-logo-square.svg"
+            title="Joshua Kalis" logo" width="138px" />
+          </figure>
+        </a>
       </aside>
     </div>
 
     <div class="cicada"></div>
 
     <script defer src="${rel}js/highlighter.js"></script>
     <script defer src="${rel}js/slides.js"></script>
+
+    <script>
+      addEventListener("click", (event) => {
+        const isContactLink = /^contact$/.test(
+          event.target.parentElement.parentElement.previousElementSibling?.id
+        );
+
+        if (isContactLink && event.altKey) {
+          event.preventDefault();
+
+          navigator.clipboard
+            .writeText(event.target.href)
+            .catch(() => "Failed to copy link href.")
+            .then((str = event.target.href) => alert(str));
+        }
+      });
+    </script>
   </body>
 </head>
diff --git a/deno.jsonc b/deno.jsonc
@@ -2,9 +2,7 @@
   "fmt": {
     "files": {
       "include": [],
-      "exclude": [
-        "."
-      ]
+      "exclude": ["."]
     }
   },
   "tasks": {
@@ -13,7 +11,7 @@
     // run test coverage report
     "cover": "./admin/cover.sh",
     // watch files for changes and run build after files have been changed
-    "dev": "deno run --allow-read=./ --allow-run ./admin/watchDev.ts",
+    "dev": "deno run --allow-read --allow-run ./admin/watchDev.ts",
     // host published files at http://localhost:8080
     "serve": "deno run --allow-env --allow-net --allow-read ./admin/dev-server.ts",
     // run unit tests

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "kalisjoshua.me",
   "description": "Personal website and resume for Joshua Kalis.",
-  "version": "11.2.1",
+  "version": "11.2.2",
   "homepage": "https://kalisjoshua.me",
   "repository": {
     "type": "git",

diff --git a/public/styles/cicada.css b/public/styles/cicada.css
@@ -0,0 +1,53 @@
+.cicada {
+  position: absolute;
+  z-index: -1;
+
+  &:after {
+    --grad: linear-gradient(
+      90deg,
+      var(--teal) 0%,
+      var(--teal) 10%,
+      transparent 10%,
+      transparent 20%,
+      var(--magenta) 20%,
+      var(--magenta) 30%,
+      transparent 30%,
+      transparent 40%,
+      var(--gold) 40%,
+      var(--gold) 50%,
+      transparent 50%,
+      transparent 60%,
+      var(--green) 60%,
+      var(--green) 70%,
+      var(--pink) 70%,
+      var(--pink) 80%,
+      var(--purple) 80%,
+      var(--purple) 90%,
+      transparent 90%
+    );
+
+    background-color: var(--bg);
+    background-image: var(--grad), var(--grad), var(--grad), var(--grad);
+    background-blend-mode: darken, color-burn, multiply;
+    background-size: 17%, 19%, 33%, 33%;
+    content: "";
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+  }
+
+  &:before {
+    background-image: linear-gradient(180deg, transparent, var(--bg) 30%);
+    box-shadow: inset 0 3em 3em 0 rgba(0, 0, 0, 0.2);
+    content: "";
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}