site/zedshaw.games
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Now it works. Thanks to Twitch chat for helping me realize that flex-col changes how justify works because that's so fun.

Browse source
This commit is contained in:
Zed A. Shaw 2025-09-16 01:18:53 -04:00
parent 4b18e24f1b
commit 931dbe3f9e
3 changed files with 37 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/input_style.css
View file

@ -6,15 +6,15 @@ body {
}
main {
@apply flex flex-col gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
@apply flex flex-col items-center gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
}
header {
@apply flex flex-col justify-stretch;
@apply flex flex-col justify-stretch items-center bg-gray-950;
}
footer {
@apply bg-gray-950 text-gray-50 text-lg flex p-1;
@apply bg-gray-950 text-gray-50 text-lg flex justify-center p-1;
}
@utility sticky-bottom {
@ -22,7 +22,7 @@ footer {
}
nav {
@apply flex justify-center items-center bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
@apply flex lg:w-4xl justify-center items-center *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
}
a {

25
static/style.css
View file

@ -290,9 +290,6 @@
.min-h-screen {
min-height: 100vh;
}
.w-4xl {
width: var(--container-4xl);
}
.w-fit {
width: fit-content;
}
@ -342,9 +339,6 @@
.items-center {
align-items: center;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
@ -384,9 +378,6 @@
.gap-10 {
gap: calc(var(--spacing) * 10);
}
.justify-self-center {
justify-self: center;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@ -511,6 +502,9 @@
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\! {
padding: calc(var(--spacing) * 2) !important;
}
@ -642,6 +636,11 @@
}
}
}
.lg\:w-4xl {
@media (width >= 64rem) {
width: var(--container-4xl);
}
}
.dark\:bg-gray-300 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-300);
@ -674,6 +673,7 @@ main {
display: flex;
min-height: 100vh;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing) * 4);
background-color: var(--color-gray-200);
padding: calc(var(--spacing) * 0);
@ -688,10 +688,13 @@ main {
header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: stretch;
background-color: var(--color-gray-950);
}
footer {
display: flex;
justify-content: center;
background-color: var(--color-gray-950);
padding: calc(var(--spacing) * 1);
font-size: var(--text-lg);
@ -704,7 +707,6 @@ nav {
align-items: center;
justify-content: center;
justify-content: space-evenly;
background-color: var(--color-gray-950);
:is(& > *) {
flex: 1;
}
@ -715,6 +717,9 @@ nav {
:is(& > *) {
color: var(--color-gray-50);
}
@media (width >= 64rem) {
width: var(--container-4xl);
}
}
a {
text-decoration-line: underline;

32
views/layouts/main.html
View file

@ -35,25 +35,29 @@
</header>
<main>
<div class="lg:w-4xl flex flex-col">
{{embed}}
</div>
</main>
<footer class="!p-4 !pb-20">
<div class="flex-1">
<img class="size-12 shrink-0" src="/logo.png" />
<div>
<p>I'm the author of many programming education books, a
semi-professional oil painter, and new game developer.</p>
<div class="flex lg:w-4xl">
<div class="flex-1 p-2">
<img class="size-12 shrink-0" src="/logo.png" />
<div>
<p>I'm the author of many programming education books, a
semi-professional oil painter, and new game developer.</p>
</div>
</div>
<div class="flex-1 p-2">
<h3 class="text-3xl">Other Projects</h3>
<ul>
<li><a href="https://learncodethehardway.com/">Learn Code the Hard Way</a></li>
<li><a href="https://lcthw.dev/go/">Go Web Dev</a></li>
<li><a href="https://lcthw.dev/learn-code-the-hard-way/">Code Projects for Beginners</a></li>
<li><a href="https://zedshaw.com/blog/">Personal Essays</a></li>
</ul>
</div>
</div>
<div class="flex-1">
<h3 class="text-3xl">Other Projects</h3>
<ul>
<li><a href="https://learncodethehardway.com/">Learn Code the Hard Way</a></li>
<li><a href="https://lcthw.dev/go/">Go Web Dev</a></li>
<li><a href="https://lcthw.dev/learn-code-the-hard-way/">Code Projects for Beginners</a></li>
<li><a href="https://zedshaw.com/blog/">Personal Essays</a></li>
</ul>
</div>
</footer>
</body>