Merge pull request #6 from efergus/dev

Dev

package.json

@@ -37,6 +37,7 @@
 	"dependencies": {
 		"clsx": "^2.1.1",
 		"highlight.js": "^11.9.0",
+		"svelte-highlight": "^7.6.1",
 		"svelte-markdown": "^0.4.1"
 	}
 }

src/app.css

@@ -29,13 +29,11 @@
     @apply light stroke-2;
   }
 
-  div.theme-reset:has(:not(.theme-reset) > label > input.dark-mode-toggle) {
+  div:has(> .theme-focus > label > input.dark-mode-toggle) {
     @apply light;
   }
 
-  div.theme-reset:has(
-      :not(.theme-reset) > label > input.dark-mode-toggle:checked
-    ) {
+  div:has(> .theme-focus > label > input.dark-mode-toggle:checked) {
     @apply dark;
   }
 
@@ -44,7 +42,11 @@
       @apply dark;
     }
 
-    div.theme-node:has(label > input.dark-mode-toggle:checked) {
+    div:has(> .theme-focus > label > input.dark-mode-toggle) {
+      @apply dark;
+    }
+
+    div:has(> .theme-focus > label > input.dark-mode-toggle:checked) {
       @apply light;
     }
   }

src/lib/components/Code.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
-  export let source = "";
-  export let lang = "";
+  import Highlight from "svelte-highlight";
+  import atom from "svelte-highlight/styles/atom-one-dark";
+
+  export let source: string;
+  export let lang: any;
 </script>
 
-<pre><code class={lang ? `language-${lang}` : ""}>{source}</code></pre>
+<svelte:head>
+  {@html atom}
+</svelte:head>
+
+<Highlight language={lang} code={source} />

src/lib/components/PageMenu.svelte

@@ -25,8 +25,6 @@
       document.addEventListener("touchmove", listener);
     };
   });
-
-  $: console.log({ open });
 </script>
 
 <label bind:this={label} class={clsx("hover:cursor-pointer", { adaptive })}>
@@ -54,14 +52,16 @@
     </svg>
   </div>
 
-  <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-  <div
-    class={clsx("clip", {
-      adaptive,
-    })}
-  >
-    <div class="menu">
-      <slot />
+  <div class="relative">
+    <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+    <div
+      class={clsx("clip", {
+        adaptive,
+      })}
+    >
+      <div class="menu">
+        <slot />
+      </div>
     </div>
   </div>
 </label>
@@ -71,22 +71,19 @@
   label {
     @apply w-full relative;
   }
-  label input:checked ~ div > div.menu {
+  label input:checked ~ div div.menu {
     transform: translateY(0);
   }
-  input.menu:checked ~ .title {
-    opacity: 0;
-  }
 
   /* position/style */
-  div.title {
-    @apply transition-opacity opacity-100 flex items-center grow;
-  }
   div.menu {
     @apply transition-transform -translate-y-full overflow-auto pointer-events-auto w-full max-h-screen;
   }
+  div.title {
+    @apply transition-opacity opacity-100 flex items-center grow;
+  }
   div.bar {
-    @apply flex justify-stretch items-center p-2 w-full;
+    @apply flex justify-stretch items-center p-2 w-full relative;
   }
   div.clip {
     @apply absolute top-0 overflow-hidden pointer-events-none w-full;

src/lib/markdown/markdown.css

@@ -21,7 +21,3 @@
 .markdown p > code {
   @apply bg-secondary/30 rounded px-1 py-0.5;
 }
-
-.markdown pre:has(code) {
-  @apply bg-secondary/30 rounded-lg px-4 py-2 my-1 overflow-x-auto;
-}

src/lib/markdown/svelte-pages.md

@@ -1,5 +1,7 @@
 # SvelteKit
 
+Initialize a directory with `SvelteKit`
+
 ```sh
 npm create svelte@latest
 ```
@@ -8,12 +10,16 @@ Also ensure `.svelte-kit` is added to `.gitignore`
 
 ## Static Adapter
 
+Also install the staic adapter, which enables building the static site GitHub pages needs
+
 ```sh
 npm i -D @sveltejs/adapter-static
 ```
 
 ## Modify svelte.config.js
 
+Add the static adapter to `svelte.config.js` and set the options for the adapter
+
 ```js
 import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
@@ -38,12 +44,16 @@ export default config;
 
 ## Add +layout.js
 
+This is necessary to get the static site generation to work properly:
+
 ```js
 export const prerender = true;
 ```
 
 # If using tailwind:
 
+I like using tailwind, and the steps to get it set up can be non-obvious:
+
 ## Install tailwind & friends
 
 ```sh
@@ -89,36 +99,6 @@ export default {
 <style lang="postcss">
 ```
 
-# Using colors w/ tailwind
-
-## tailwind.config.js
-
-```js
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./src/**/*.{html,js,ts,svelte}"],
-  theme: {
-    extend: {
-      strokeWidth: {
-        3: "3px",
-      },
-    },
-
-    colors: {
-      primary: "rgb(var(--color-primary) / <alpha-value>)",
-      secondary: "rgb(var(--color-secondary) / <alpha-value>)",
-      contrast: "rgb(var(--color-contrast) / <alpha-value>)",
-      "contrast-secondary":
-        "rgb(var(--color-contrast-secondary) / <alpha-value>)",
-      theme: "rgb(var(--color-theme) / <alpha-value>)",
-      white: "#ffffff",
-      black: "#000000",
-    },
-  },
-  plugins: [],
-};
-```
-
 # Add .github/workflows/deploy.yml
 
 ```

src/routes/+layout.svelte

@@ -13,12 +13,14 @@
   <title>Ethan Ferguson</title>
 </svelte:head>
 
-<div class="theme-reset w-full h-screen flex flex-col overflow-auto absolute">
-  <header class="bg-primary p-1 z-50 hidden md:flex justify-between">
+<div class="w-full h-screen flex flex-col overflow-auto absolute">
+  <header
+    class="theme-focus bg-primary p-1 z-50 hidden md:flex justify-between"
+  >
     <h1 class="p-3">Ethan Ferguson</h1>
     <DarkModeButton bind:checked={invert} />
   </header>
-  <div class="sticky top-0 bg-secondary w-full z-40">
+  <div class="theme-focus sticky top-0 bg-secondary w-full z-40">
     <PageMenu>
       <h2 slot="title">Ethan Ferguson</h2>
       <div

src/routes/+page.svelte

@@ -6,7 +6,9 @@
 <div class="flex flex-col gap-2 h-full max-w-4xl text-lg">
   <div class="flex justify-between items-center emphasize pb-1">
     <h1>About Me</h1>
-    <img src={personality} alt="Me" class="w-12 h-12 rounded-full" />
+    <a href="https://www.linkedin.com/in/ethan-ferguson-112011193/">
+      <img src={personality} alt="Me" class="w-12 h-12 rounded-full" />
+    </a>
   </div>
   <p>
     I'm a Software Engineer at Jahnel Group. I studied CS and Cybersecurity at

src/routes/projects/+page.svelte

@@ -83,6 +83,7 @@
         How many Empire State Buildings would it take to reach the altitude of
         the ISS?
       </p>
+      <p>Try to guess the order of magnitude of absurd physics problems!</p>
     </div>
   </Project>
   <Project