This commit is contained in:
parent
e978d5fa53
commit
c8d209facd
GPG key ID:
B67D7410F33A0F61
12 changed files with 270 additions and 144 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"plugins": {
|
"plugins": {
|
||||||
"posthtml-component": {
|
"posthtml-component": {
|
||||||
"root": "./src"
|
"root": "./src/components"
|
||||||
},
|
},
|
||||||
"posthtml-include": {},
|
"posthtml-include": {},
|
||||||
"posthtml-markdownit": {}
|
"posthtml-markdownit": {}
|
||||||
|
|
|
||||||
73
assets/spinner.svg
Normal file
73
assets/spinner.svg
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
viewBox="0 0 48 48"
|
||||||
|
sodipodi:docname="spinner.svg"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
inkscape:export-filename="icon.png"
|
||||||
|
inkscape:export-xdpi="6"
|
||||||
|
inkscape:export-ydpi="6"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient5"
|
||||||
|
inkscape:collect="always">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#957b09;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop5" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#f8d170;stop-opacity:1;"
|
||||||
|
offset="0.64978778"
|
||||||
|
id="stop6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient5"
|
||||||
|
id="linearGradient6"
|
||||||
|
x1="238.13318"
|
||||||
|
y1="785.09656"
|
||||||
|
x2="784.8255"
|
||||||
|
y2="237.32028"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0.08683148,0,0,0.08683148,-20.412508,-20.388979)" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="4.0936768"
|
||||||
|
inkscape:cx="5.0077231"
|
||||||
|
inkscape:cy="-23.939359"
|
||||||
|
inkscape:window-width="1675"
|
||||||
|
inkscape:window-height="1035"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="g1"
|
||||||
|
showguides="true" />
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Image"
|
||||||
|
id="g1">
|
||||||
|
<path
|
||||||
|
id="path5"
|
||||||
|
style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:4.77576;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 9.723553,9.6764989 40.13035,40.083292 M 24.045209,2.6744899 V 45.462981 M 45.612111,24 A 21.612118,21.612118 0 0 1 23.999996,45.61212 21.612118,21.612118 0 0 1 2.3878822,24 21.612118,21.612118 0 0 1 23.999996,2.3878822 21.612118,21.612118 0 0 1 45.612111,24 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -2,7 +2,7 @@
|
||||||
"name": "thesandwich",
|
"name": "thesandwich",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"source": "src/index.html",
|
"source": "src/*.html",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "parcel",
|
"start": "parcel",
|
||||||
"build": "parcel build"
|
"build": "parcel build"
|
||||||
|
|
|
||||||
16
src/components/tab-content.html
Normal file
16
src/components/tab-content.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script props>
|
||||||
|
module.exports = {
|
||||||
|
selected: Number(props.selected || '0')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<nav class="tab-list" role="tablist" hx-indicator="#indicator">
|
||||||
|
<button hx-get="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||||
|
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
|
||||||
|
Projects</button>
|
||||||
|
<button hx-get="/who_we_are.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||||
|
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Who we are</button>
|
||||||
|
</nav>
|
||||||
|
<hr style="margin: 0">
|
||||||
|
<div id="tab-content" role="tabpanel" class="tab-content">
|
||||||
|
<yield></yield>
|
||||||
|
</div>
|
||||||
161
src/index.html
161
src/index.html
|
|
@ -63,6 +63,20 @@
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#indicator {
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -93,8 +107,8 @@
|
||||||
<div id="audioContainer" style="position: absolute;"></div>
|
<div id="audioContainer" style="position: absolute;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: min(30vw, 150px);"></div>
|
<div style="height: min(30vw, 150px);"></div>
|
||||||
<audio id="player" src="/assets/westside.opus" loop></audio>
|
<audio preload="none" id="player" src="/assets/westside.opus" loop></audio>
|
||||||
<audio id="player-spaghetti" src="/assets/mario.opus"></audio>
|
<audio preload="none" id="player-spaghetti" src="/assets/mario.opus"></audio>
|
||||||
<div id="page-content-content">
|
<div id="page-content-content">
|
||||||
<center style="margin: 16px;">
|
<center style="margin: 16px;">
|
||||||
<h1 class="title">Very professional people making<br>very professional things</h1>
|
<h1 class="title">Very professional people making<br>very professional things</h1>
|
||||||
|
|
@ -114,145 +128,10 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</center>
|
||||||
<x-section-head header="Our projects">
|
<center>
|
||||||
<x-blockquote cite="You, just now">
|
<img id="indicator" class="htmx-indicator" width="64" height="64" src="/assets/spinner.svg">
|
||||||
Wow, such professionalism! What are these guys working on now?
|
</center>
|
||||||
</x-blockquote>
|
<div id="tabs" hx-get="/projects.html" hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>
|
||||||
</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>
|
|
||||||
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" titlestyle="font-family: 'Apex Mk2'" headerstyle="font-family: 'Apex Mk2'">
|
|
||||||
<fill:title># Simulo</fill:title>
|
|
||||||
<fill:subtitle>
|
|
||||||
## Roblox for the real world!
|
|
||||||
#### (what could go wrong?)
|
|
||||||
</fill:subtitle>
|
|
||||||
<fill:description>
|
|
||||||
<div style="font-family: monospace;">
|
|
||||||
<markdown>
|
|
||||||
Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? 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!
|
|
||||||
|
|
||||||
Simulo is the most accessible game engine by a longshot, you just need a $600 laser projector and a
|
|
||||||
MacBook or Linux machine! Anyone can use Simulo.
|
|
||||||
</markdown>
|
|
||||||
</div>
|
|
||||||
</fill:description>
|
|
||||||
</x-project>
|
|
||||||
<x-project svg="assets/c0re.svg" href="https://c0re.com">
|
|
||||||
<fill:title>
|
|
||||||
# c0re
|
|
||||||
#### So shiny!
|
|
||||||
</fill:title>
|
|
||||||
<fill:subtitle>## Git gud scrub!</fill:subtitle>
|
|
||||||
<fill:description>
|
|
||||||
<markdown>
|
|
||||||
Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
|
|
||||||
peers in every possible area and become objectively and quantifiably the _best_ person.
|
|
||||||
</markdown>
|
|
||||||
<p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
|
|
||||||
<script>
|
|
||||||
// Code from https://www.w3schools.com/howto/howto_js_countdown.asp
|
|
||||||
// Set the date we're counting down to
|
|
||||||
var countDownDate = new Date("March 7, 2025").getTime();
|
|
||||||
|
|
||||||
function countup() {
|
|
||||||
// Get today's date and time
|
|
||||||
var now = new Date().getTime();
|
|
||||||
|
|
||||||
// Find the distance between now and the count down date
|
|
||||||
var distance = now - countDownDate;
|
|
||||||
|
|
||||||
// Time calculations for days, hours, minutes and seconds
|
|
||||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
||||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
||||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
||||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
||||||
|
|
||||||
document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
|
|
||||||
+ minutes + "m " + seconds + "s ";
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
countup();
|
|
||||||
// Update the count down every 1 second
|
|
||||||
var x = setInterval(countup, 1000);
|
|
||||||
</script>
|
|
||||||
</fill:description>
|
|
||||||
</x-project>
|
|
||||||
<x-blockquote cite="The Washington Post">
|
|
||||||
Please stop sending your projects to the review department
|
|
||||||
</x-blockquote>
|
|
||||||
<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 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="?" class="project-alt">
|
|
||||||
<fill:title># Mystery</fill:title>
|
|
||||||
<fill:subtitle>## _Oooooooo_</fill:subtitle>
|
|
||||||
<fill:description>
|
|
||||||
<markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
|
|
||||||
<form hx-post="/api/speculate" hx-target="#speculation-result">
|
|
||||||
<label for="speculation">
|
|
||||||
Speculate about the <i>secret</i> project below:
|
|
||||||
</label><br>
|
|
||||||
<textarea name="speculation" id="speculation"></textarea>
|
|
||||||
<input type="submit" value="Speculate!">
|
|
||||||
</form>
|
|
||||||
<div id="speculation-result"></div>
|
|
||||||
</fill:description>
|
|
||||||
</x-project>
|
|
||||||
<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>
|
|
||||||
<fill:description>We'll get to it, trust</fill:description>
|
|
||||||
</x-project>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="background-color: #484848;">
|
<div style="background-color: #484848;">
|
||||||
<p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
|
<p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
|
||||||
|
|
|
||||||
131
src/projects.html
Normal file
131
src/projects.html
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<x-tab-content selected="0">
|
||||||
|
<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>
|
||||||
|
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" titlestyle="font-family: 'Apex Mk2'" headerstyle="font-family: 'Apex Mk2'">
|
||||||
|
<fill:title># Simulo</fill:title>
|
||||||
|
<fill:subtitle>
|
||||||
|
## Roblox for the real world!
|
||||||
|
#### (what could go wrong?)
|
||||||
|
</fill:subtitle>
|
||||||
|
<fill:description>
|
||||||
|
<div style="font-family: monospace;">
|
||||||
|
<markdown>
|
||||||
|
Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? 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!
|
||||||
|
|
||||||
|
Simulo is the most accessible game engine by a longshot, you just need a $600 laser projector and a
|
||||||
|
MacBook or Linux machine! Anyone can use Simulo.
|
||||||
|
</markdown>
|
||||||
|
</div>
|
||||||
|
</fill:description>
|
||||||
|
</x-project>
|
||||||
|
<x-project svg="assets/c0re.svg" href="https://c0re.com">
|
||||||
|
<fill:title>
|
||||||
|
# c0re
|
||||||
|
#### So shiny!
|
||||||
|
</fill:title>
|
||||||
|
<fill:subtitle>## Git gud scrub!</fill:subtitle>
|
||||||
|
<fill:description>
|
||||||
|
<markdown>
|
||||||
|
Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
|
||||||
|
peers in every possible area and become objectively and quantifiably the _best_ person.
|
||||||
|
</markdown>
|
||||||
|
<p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
|
||||||
|
<script>
|
||||||
|
// Code from https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||||
|
// Set the date we're counting down to
|
||||||
|
var countDownDate = new Date("March 7, 2025").getTime();
|
||||||
|
|
||||||
|
function countup() {
|
||||||
|
// Get today's date and time
|
||||||
|
var now = new Date().getTime();
|
||||||
|
|
||||||
|
// Find the distance between now and the count down date
|
||||||
|
var distance = now - countDownDate;
|
||||||
|
|
||||||
|
// Time calculations for days, hours, minutes and seconds
|
||||||
|
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||||
|
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||||
|
|
||||||
|
document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
|
||||||
|
+ minutes + "m " + seconds + "s ";
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
countup();
|
||||||
|
// Update the count down every 1 second
|
||||||
|
var x = setInterval(countup, 1000);
|
||||||
|
</script>
|
||||||
|
</fill:description>
|
||||||
|
</x-project>
|
||||||
|
<x-blockquote cite="The Washington Post">
|
||||||
|
Please stop sending your projects to the review department
|
||||||
|
</x-blockquote>
|
||||||
|
<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 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="?" class="project-alt">
|
||||||
|
<fill:title># Mystery</fill:title>
|
||||||
|
<fill:subtitle>## _Oooooooo_</fill:subtitle>
|
||||||
|
<fill:description>
|
||||||
|
<markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
|
||||||
|
<form hx-post="/api/speculate" hx-target="#speculation-result">
|
||||||
|
<label for="speculation">
|
||||||
|
Speculate about the <i>secret</i> project below:
|
||||||
|
</label><br>
|
||||||
|
<textarea name="speculation" id="speculation"></textarea>
|
||||||
|
<input type="submit" value="Speculate!">
|
||||||
|
</form>
|
||||||
|
<div id="speculation-result"></div>
|
||||||
|
</fill:description>
|
||||||
|
</x-project>
|
||||||
|
</x-tab-content>
|
||||||
|
|
@ -82,7 +82,6 @@ html {
|
||||||
background-color: #484848;
|
background-color: #484848;
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: space-around;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 32px;
|
margin: 32px;
|
||||||
}
|
}
|
||||||
|
|
@ -92,6 +91,22 @@ html {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-list button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: solid 3px transparent;
|
||||||
|
border-bottom: solid 3px #eee;
|
||||||
|
font-size: 16pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-list button.selected {
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: solid 6px #eee;
|
||||||
|
}
|
||||||
|
|
||||||
img.figure,
|
img.figure,
|
||||||
.figure>svg {
|
.figure>svg {
|
||||||
|
|
|
||||||
12
src/who_we_are.html
Normal file
12
src/who_we_are.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<x-tab-content selected="1">
|
||||||
|
<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>
|
||||||
|
<fill:description>We'll get to it, trust</fill:description>
|
||||||
|
</x-project>
|
||||||
|
</x-tab-content>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue