Merge branch 'leo-dev'

astro/src/pages/3dgallery.astro

@@ -0,0 +1,15 @@
+
+<style>
+  html, body {
+    margin: 0px;
+    overflow: hidden;
+  }
+  iframe {
+    width: 100vw;
+    height: 100vh;
+    border: none;
+  }
+</style>
+
+<iframe src="https://haxidraw-3dgallery.hackclub.dev/
+"></iframe>

astro/src/pages/editor.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Editor from '../Editor.tsx';
+---
+
+<Layout title="Haxidraw">
+	<main>
+		<Editor client:load />
+	</main>
+</Layout>

astro/src/pages/index.astro

@@ -1,10 +1,232 @@
----
-import Layout from '../layouts/Layout.astro';
-import Editor from '../Editor.tsx';
----
-
-<Layout title="Haxidraw">
-	<main>
-		<Editor client:load />
-	</main>
-</Layout>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap');
+
+  :root {
+    --primary: #33e;
+    --primary-rgb: 51, 51, 238;
+    --text: #000;
+    --text-rgb: 0, 0, 0;
+    --background: #fff;
+    --background-rgb: 255, 255, 255;
+    --muted: #e5e5e5;
+    --muted-rgb: 229, 229, 229;
+    --accent: #f0f;
+    --accent-rgb: 255, 0, 255;
+    --accent-dark: #900090;
+    --accent-dark-rgb: 144, 0, 144;
+    --font-body: "Atkinson Hyperlegible", sans-serif;
+    --font-mono: "JetBrains Mono", monospace;
+    --font-0: 1rem;
+    --font-1: 1.125rem;
+    --font-2: 1.25rem;
+    --font-3: 1.5rem;
+    --font-4: 2rem;
+    --font-5: 3rem;
+    --font-6: 4rem;
+    --font-7: 6rem;
+  }
+
+  html, body {
+    margin: 0px;
+    font-family: var(--font-body);
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    background: var(--primary);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    min-height: 2.5rem;
+  }
+
+  .toolbar-right {
+    display: flex;
+  }
+
+  .toolbar-item {
+    all: unset;
+    cursor: pointer;
+    padding-left: .5rem;
+    padding-right: .5rem;
+    height: 100%;
+    width: fit-content;
+    border-radius: .2rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .toolbar-item:hover {
+    background: rgba(255,255,255,0.2); 
+  }
+
+  .toolbar-item:visited {
+    all: unset;
+  }
+
+  .blot {
+    display: flex;
+    align-items: center;
+    padding-left: .5rem;
+  }
+
+  .footer {
+    height: 2rem;
+    display: flex;
+    justify-content: flex-end;
+    background: #c5c5c5;
+  }
+
+  .footer-item:hover {
+    background: rgba(0,0,0,0.2); 
+  }
+
+  .banner {
+    flex: 1;
+    background: #f2f2f1;
+/*    background: #ffbb1d5c;*/
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    justify-content: space-around;
+  }
+
+  .banner-upper {
+
+  }
+
+  .banner-lower {
+    display: flex;
+    align-items: center;
+  }
+
+  .blot-bot {
+    width: 70%;
+  }
+
+  .blot-title {
+/*    position: absolute;*/
+/*    left: 0px;*/
+/*    top: 1rem;*/
+    font-size: 4rem;
+    font-family: "Tilt Prism",cursive;
+/*    width: 100%;*/
+    text-align: center;
+  }
+
+  .banner-text {
+    font-family: "Phantom Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+    font-size: 1.2rem;
+    padding-right: 5rem;
+    font-weight: 400;
+    letter-spacing: 0.009em;
+    line-height: 1.25;
+    align-self: baseline;
+    padding-top: 5rem;
+  }
+
+  .banner-text a {
+    box-sizing: border-box;
+    margin: 0;
+    min-width: 0;
+    color: #ec3750;
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    text-underline-position: under;
+  }
+
+  .banner-text a:hover {
+    text-decoration-style: wavy;
+  }
+
+</style>
+
+
+<main>
+  <div class="toolbar">
+    <div class="blot">
+      <i class="fa-solid fa-splotch" style="padding-right: 10px"></i>
+      Blot
+    </div>
+    <div class="toolbar-right">
+      <a class="toolbar-item" href="/editor">
+        <i class="fa-solid fa-pen-nib" style="padding-right: .5rem"></i>
+        editor
+      </a>
+
+      <a class="toolbar-item">
+        <i class="fa-solid fa-laptop-file" style="padding-right: .5rem"></i>
+        workshops
+      </a>
+
+      <a class="toolbar-item">
+        <i class="fa-solid fa-palette" style="padding-right: .5rem"></i>
+        gallery
+      </a>
+
+      <a class="toolbar-item">
+        <i class="fa-solid fa-arrows-to-dot" style="padding-right: .5rem"></i>
+        assembly
+      </a>
+    </div>
+  </div>
+
+  <div class="banner">
+
+    <div class="banner-upper">
+      <div class="blot-title">Blot, a plotter bot from Hack Club</div>
+    </div>
+
+    <div class="banner-lower">
+      <img class="blot-bot" style="min-width: 60%" src="/blot-bot-clear.png"/>
+      <div class="banner-text">
+        <div>
+          Blot is a <a href="youshipweship.com">"You Ship, We Ship"</a> project from Hack Club. It is a robot, but it is also an art project
+        </div>
+
+        <br/>
+
+        <div>
+          We're creating an <a href="3dmaze">art gallery</a>. It's an endlessly explorable space filled with <a href="2dgallery">your art programs</a>. When you <a href="howtosubmit">submit your art</a> to the gallery we will send you a <a href="resourcesonmachine">drawing machine</a> to turn that art into a real physical piece.
+        </div>
+
+        <br/>
+
+        <div>
+          Together we'll practice the art of programming, dive into digital fabrication, and <a href="linktomuseumexhibit">build something amazing together</a>.
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="footer">
+    <a class="toolbar-item footer-item" href="https://hackclub.com">
+      <img 
+        src="/hackclub.png"
+        style="height: 51%;
+    padding-right: 7px;
+    filter: grayscale(1) contrast(200%);"/>
+      Hack Club
+    </a>
+    <a class="toolbar-item footer-item" href="https://github.com/hackclub/haxidraw/tree/main">
+      <i class="fa-brands fa-github" style="padding-right: .5rem"></i>
+      GitHub
+    </a>
+  </div>
+</main>
+
+
+
+