Landing page is looking good, now for the live page.
This commit is contained in:
Zed A. Shaw
parent
faaa5df187
commit
29a4957a55
4 changed files with 85 additions and 29 deletions
|
|
@ -1,9 +1,7 @@
|
|||
<h1>Zed's Game Dev Website</h1>
|
||||
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
|
||||
|
||||
<div class="flex flex-col flex-start">
|
||||
<shape id="twitch-player" class="video bg-gray-950! font-bold gap-8">
|
||||
</shape>
|
||||
<div id="twitch-player" class="w-full aspect-video">
|
||||
</div>
|
||||
|
||||
<aside data-testid="clickblock">
|
||||
|
|
@ -13,7 +11,7 @@
|
|||
<block>
|
||||
<grid class="two-panel">
|
||||
<img src="/images/buckaroo_bonzai.png" />
|
||||
<block>
|
||||
<block class="center-vertical">
|
||||
<h3>I stream on Twitch.</h3>
|
||||
|
||||
<p>I stream every day at 10AM/10PM EST time. 60% of the time it's a chill laid back stream with only programming and a bit of talking about programming. 30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.</p>
|
||||
|
|
@ -29,7 +27,7 @@
|
|||
|
||||
<block>
|
||||
<grid class="two-panel">
|
||||
<block>
|
||||
<block class="center-vertical">
|
||||
<h2>Play My Games</h2>
|
||||
<p>Are you a fan of retro styled jank but fun games? Me too, so here's my games I've made with that theme. Think "it's the late 80s and nobody knows how to make a game" when you play these and you'll enjoy every minute of it. Hopefully.</p>
|
||||
|
||||
|
|
@ -47,7 +45,7 @@
|
|||
<block>
|
||||
<grid class="two-panel">
|
||||
<img src="/images/vim_window_clip.jpg" />
|
||||
<block>
|
||||
<block class="center-vertical">
|
||||
<h2>Checkout my Git</h2>
|
||||
<p>If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.</p>
|
||||
|
||||
|
|
@ -64,7 +62,7 @@
|
|||
|
||||
<block>
|
||||
<grid class="two-panel">
|
||||
<block>
|
||||
<block class="center-vertical">
|
||||
<h2>I Like to Paint</h2>
|
||||
<p>All of the art in my games is original paintings that I process with a bunch of jank imagemagick scripts to give it that "80s/90s retro" look. I frequently do paintings live on Twitch, and I post most of the art here as well.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -48,23 +48,23 @@ pre > code {
|
|||
|
||||
|
||||
h1 {
|
||||
@apply text-6xl mb-2 mt-4;
|
||||
@apply text-5xl mb-2 mt-4 sm:text-6xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-5xl mb-2 mt-4;
|
||||
@apply text-4xl mb-2 mt-4 sm:text-5xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-4xl mb-2 mt-4;
|
||||
@apply text-3xl mb-2 mt-4 sm:text-4xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-3xl mb-2 mt-4;
|
||||
@apply text-2xl mb-2 mt-4 sm:text-3xl;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-2xl mb-2 mt-4;
|
||||
@apply text-2xl mb-2 mt-4 sm:text-2xl;
|
||||
}
|
||||
|
||||
details {
|
||||
|
|
@ -191,10 +191,26 @@ block {
|
|||
@apply flex flex-col p-4 gap-4;
|
||||
}
|
||||
|
||||
block.center-horizontal {
|
||||
@apply items-center;
|
||||
}
|
||||
|
||||
block.center-vertical {
|
||||
@apply justify-center;
|
||||
}
|
||||
|
||||
bar {
|
||||
@apply flex flex-row p-4 gap-4;
|
||||
}
|
||||
|
||||
bar.center-horizontal {
|
||||
@apply justify-center;
|
||||
}
|
||||
|
||||
bar.center-vertical {
|
||||
@apply items-center;
|
||||
}
|
||||
|
||||
stack {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
|
|
|
|||
|
|
@ -372,9 +372,6 @@
|
|||
.gap-5 {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.gap-10 {
|
||||
gap: calc(var(--spacing) * 10);
|
||||
}
|
||||
|
|
@ -487,12 +484,15 @@
|
|||
.bg-gray-800 {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
.bg-gray-950\! {
|
||||
background-color: var(--color-gray-950) !important;
|
||||
}
|
||||
.bg-green-400\! {
|
||||
background-color: var(--color-green-400) !important;
|
||||
}
|
||||
.\!p-0 {
|
||||
padding: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.\!p-1 {
|
||||
padding: calc(var(--spacing) * 1) !important;
|
||||
}
|
||||
.\!p-4 {
|
||||
padding: calc(var(--spacing) * 4) !important;
|
||||
}
|
||||
|
|
@ -636,6 +636,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.sm\:\!p-0 {
|
||||
@media (width >= 40rem) {
|
||||
padding: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
}
|
||||
.sm\:p-0 {
|
||||
@media (width >= 40rem) {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.lg\:w-4xl {
|
||||
@media (width >= 64rem) {
|
||||
width: var(--container-4xl);
|
||||
|
|
@ -751,32 +761,52 @@ pre > code {
|
|||
h1 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
}
|
||||
details {
|
||||
border-radius: var(--radius-lg);
|
||||
|
|
@ -987,12 +1017,24 @@ block {
|
|||
gap: calc(var(--spacing) * 4);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
block.center-horizontal {
|
||||
align-items: center;
|
||||
}
|
||||
block.center-vertical {
|
||||
justify-content: center;
|
||||
}
|
||||
bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
bar.center-horizontal {
|
||||
justify-content: center;
|
||||
}
|
||||
bar.center-vertical {
|
||||
align-items: center;
|
||||
}
|
||||
stack {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<div class="lg:w-4xl flex flex-col">
|
||||
{{embed}}
|
||||
</div>
|
||||
<block class="lg:w-4xl center-horizontal !p-1 sm:p-0">
|
||||
{{embed}}
|
||||
</block>
|
||||
</main>
|
||||
|
||||
<footer class="!p-4 !pb-20">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue