Various changes

assets/braindance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fb64b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M19.938 10.5a4 4 0 0 1 .585.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M19.967 17.484A4 4 0 0 1 18 18"></path></svg>

src/apex.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Apex Mk2';
+  src: url('/assets/ApexMk2-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Apex Mk2';
+  src: url('/assets/ApexMk2-LightCondensed.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Apex Mk2';
+  src: url('/assets/ApexMk2-BoldExtended.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}

src/blockquote.html

@@ -9,5 +9,7 @@
       <yield></yield>
     </markdown>
   </blockquote>
-  <p>—{{cite}}</p>
+  <if condition="cite != ''">
+    <p>—{{cite}}</p>
+  </if>
 </center>

src/index.html

@@ -7,6 +7,10 @@
   <meta name="color-scheme" content="dark">
   <title>The SANDWICH</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="apex.css">
+  <link rel="preload" href="/assets/ApexMk2-Regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/assets/ApexMk2-LightCondensed.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/assets/ApexMk2-BoldExtended.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
   <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
@@ -110,36 +114,36 @@
           </ul>
         </div>
       </center>
-      <x-blockquote cite="You, just now">
-        Wow, such professionalism! What are these guys working on now?
-      </x-blockquote>
-      <x-project img="/assets/tysoncloud.svg">
+      <x-section-head header="Our projects">
+        <x-blockquote cite="You, just now">
+          Wow, such professionalism! What are these guys working on now?
+        </x-blockquote>
+      </x-section-head>
+      <x-project img="/assets/tysoncloud.svg" href="https://github.com/timmyjinks/TYSONCLOUD">
         <fill:title># TYSONCLOUD</fill:title>
         <fill:subtitle>## When she compute your serve 'till you edge</fill:subtitle>
         <fill:description>
           <markdown>
-            You're really gonna give up your web baby to big cloud? _Non-sense!_ Slap that baby
-            into
-            the loving arms of Tyson Jenkins at **TYSONCLOUD**! Don't worry, he personally makes sure that every
-            web baby gets exactly one pat on the head each day. That's more than AWS can say about it's web services!
+            Have you ever just gone to a cloud service interface like Google Cloud Console, Microsoft Azure Portal, or
+            AWS Console, and just gone "...what? What am I even looking at? *Huh*?"
+
+            No more will you have to scrunkle your brain in these confusing interfaces to get access to fast, reliable
+            cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!
           </markdown>
         </fill:description>
       </x-project>
       <x-project img="/assets/simulo.svg" href="https://github.com/richgrov/simulo" onclick="spaghetti()"
-        class="project-alt">
+        class="project-alt" style="font-family: 'Apex Mk2'">
         <fill:title># Simulo</fill:title>
-        <fill:subtitle>## Super Mario in real life</fill:subtitle>
+        <fill:subtitle>
+          ## Roblox for the real world!
+          #### (what could go wrong?)
+        </fill:subtitle>
         <fill:description>
           <markdown>
-            Imagine Ready Player One, but with minimum dystopia. **Simulo** allows you to use the _Earth_ as
-            your
-            game
-            engine!
-            We've all been in that sticky situation where you wanna play soccer with the boys but you forgot to bring
-            a
-            soccer ball, _however_ you happen to have a $600 laser projector on you. Now with Simulo, no more will
-            your
-            soccer seshes be ruined by your idiotic forgetfulness.
+            Bring your IRL game ideas to life with **Simulo**! It's like using the *Earth* as your game engine! You
+            don't even need to learn Lua to get started, instead, just describe your game to the engine and watch it
+            come to life!
           </markdown>
         </fill:description>
       </x-project>
@@ -173,7 +177,6 @@
               var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
               var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
-              // Output the result in an element with id="demo"
               document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
                 + minutes + "m " + seconds + "s ";
 
@@ -188,19 +191,37 @@
       <x-blockquote cite="The Washington Post">
         Please stop sending your projects to the review department
       </x-blockquote>
-      <x-project text="e" href="https://github.com/StratusFearMe21/grezi-next" class="project-alt">
+      <x-project svg="assets/braindance.svg" href="https://braindance.live" class="project-alt"
+        titlestyle="background-image: linear-gradient(to right, oklch(0.714 0.203 305.504) 0px, oklch(0.718 0.202 349.761) 100%); background-clip: text; color: transparent">
+        <fill:title># Braindance</fill:title>
+        <fill:subtitle>## Bringing the Coachella to you!</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Ever wanted to vibe to some skibidicore with the boys, but without actually being *with* the boys? Now
+            you can with Braindance! No better way exists to transmit concert vibes directly into your home
+
+            (Braindance
+            is not responsible for destruction of property due to moshpits materializing in your home).
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project text="e" href="https://github.com/StratusFearMe21/grezi-next">
         <fill:title># Grezi</fill:title>
         <fill:subtitle>## When the power is point</fill:subtitle>
         <fill:description>
           <markdown>
             Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
-            presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a markup
-            language! Instead of dragging things around on a slide, you can open notepad and make your silly text move
-            around on the screen that way. What an incredible innovation!
+            presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a bespoke
+            markup
+            language!
+
+            Instead of dragging elements around on your slides, you can open your notepad and make silly
+            text move
+            on the screen with plain text. What an incredible innovation!
           </markdown>
         </fill:description>
       </x-project>
-      <x-project text="?">
+      <x-project text="?" class="project-alt">
         <fill:title># Mystery</fill:title>
         <fill:subtitle>## _Oooooooo_</fill:subtitle>
         <fill:description>
@@ -215,9 +236,11 @@
           <div id="speculation-result"></div>
         </fill:description>
       </x-project>
-      <x-blockquote cite="Your mom, last night">
-        OMG these projects are so skibidi! I must know the rizzlers behind them!
-      </x-blockquote>
+      <x-section-head header="Who are these guys?">
+        <x-blockquote cite="Your mom, last night">
+          OMG these projects are so skibidi! I must know the rizzlers behind them!
+        </x-blockquote>
+      </x-section-head>
       <x-project text="?">
         <fill:title># Coming soon to theaters</fill:title>
         <fill:subtitle>## This website is under construction</fill:subtitle>

src/project.html

@@ -4,11 +4,12 @@
     svg: props.svg || '',
     text: props.text || '',
     href: props.href || '/',
-    onclick: props.onclick || ''
+    onclick: props.onclick || '',
+    titlestyle: 'min-width: 275px;' + (props.titlestyle || '')
   }
 </script>
 <div class="project">
-  <div class="project-title" style="min-width: 275px;">
+  <div class="project-title" style={{titlestyle}}>
     <a href="{{href}}" target="_blank">
       <if condition="img != ''">
         <img class="figure" src="{{img}}">

src/section-head.html

@@ -0,0 +1,14 @@
+<script props>
+  module.exports = {
+    header: props.header || ''
+  }
+</script>
+<div class="section-header">
+  <div>
+    <h1>{{header}}</h1>
+  </div>
+  <div>
+    <yield></yield>
+  </div>
+</div>
+<hr>

src/style.css

@@ -1,5 +1,6 @@
 :root {
   --energy: 0px;
+  --page-width: min(100%, 1024px);
   color: white;
 }
 
@@ -8,6 +9,31 @@
   margin-bottom: 48px;
 }
 
+.section-header {
+
+  display: flex;
+  text-align: left;
+
+  justify-content: space-between;
+  /* flex-flow: wrap; */
+  /* flex-wrap: wrap; */
+
+  /* height: 100%; */
+  /* padding: 15px; */
+  /* gap: 5px; */
+
+}
+
+.section-header h1 {
+  font-size: 48pt;
+}
+
+/* .section-header>div { */
+/* background: #ffecb3; */
+/* border: 3px solid #ffcc80; */
+/* border-radius: 5px; */
+/* padding: 8px; */
+/* } */
 
 center:has(> blockquote) {
   margin: 10px auto;
@@ -33,7 +59,7 @@ blockquote+p {
 }
 
 html {
-  color-scheme: light dark;
+  color-scheme: dark;
   font-family: system-ui;
 }
 
@@ -43,7 +69,7 @@ html {
 }
 
 #page-content-content {
-  width: min(100%, 1024px);
+  width: var(--page-width);
 }
 
 #page-content,
@@ -93,6 +119,11 @@ h1 {
   /* margin: 0; */
 }
 
+hr {
+  border: 0;
+  border-top: 2px solid rgb(128, 128, 128);
+}
+
 input[type="checkbox"] {
   transform: scale(1.5);
   margin: 10px;
@@ -118,6 +149,15 @@ a {
   text-decoration: none;
 }
 
+
+@media only screen and (max-width: 1200px) {
+  .section-header {
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
+
 @media only screen and (max-width: 700px) {
   .project {
     flex-direction: column;