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

Just add a main tag and suddenly it's approved?

Browse source
This commit is contained in:
Zed A. Shaw 2025-08-18 21:30:04 -04:00
parent eba11c52ca
commit 3ab3103e84
4 changed files with 20 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
pages/copy/index.html
View file

@ -1,7 +1,7 @@
<style>
@import "/style.css";
</style>
<div class="flex flex-col p-4 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 gap-4! *:text-xl">
<main class="flex flex-col p-4 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 gap-4! *:text-xl">
<h1 class="pb-10!">Copying Popular Websites to Learn Tailwind</h1>
<p>I've advocated for years that copying other websites is the best way to learn web design. Copying is a <b>very</b> common and established way to learn almost any creative discipline including (but not limited to): Painting, Drawing, Writing, Music, Wood Working, Lutherie, Design, and Programming. To demonstrate this I've been doing copies of websites to learn <a class="text-gray-950 bg-gray-300" href="https://tailwindcss.com/">Tailwind</a>.
@ -21,4 +21,4 @@
<p>You can view this code at <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games">my git repository</a>. The copies can be found in <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games/src/branch/main/pages/copy">pages/copy</a> and the tool I use to generate the pages is one I wrote called <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/ssgod">ssgod</a>.
</p>
</div>
</main>

4
pages/layouts/main.html
View file

@ -29,9 +29,9 @@
<a id="login" href="/login/">Login</a>
</header>
<div class="p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50">
<main>
{{embed}}
</div>
</main>
<footer>
<div class="flex-1">

4
static/input_style.css
View file

@ -5,6 +5,10 @@ body {
@apply text-gray-950 dark:text-gray-50;
}
main {
@apply p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
}
header {
@apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
}

30
static/style.css
View file

@ -358,9 +358,6 @@
.gap-10 {
gap: calc(var(--spacing) * 10);
}
.gap-10\! {
gap: calc(var(--spacing) * 10) !important;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@ -492,33 +489,18 @@
.p-6 {
padding: calc(var(--spacing) * 6);
}
.p-40 {
padding: calc(var(--spacing) * 40);
}
.p-40\! {
padding: calc(var(--spacing) * 40) !important;
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pb-0\! {
padding-bottom: calc(var(--spacing) * 0) !important;
}
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-3\! {
padding-bottom: calc(var(--spacing) * 3) !important;
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pb-4\! {
padding-bottom: calc(var(--spacing) * 4) !important;
}
.pb-5 {
padding-bottom: calc(var(--spacing) * 5);
}
@ -648,6 +630,18 @@ body {
color: var(--color-gray-50);
}
}
main {
min-height: 100vh;
background-color: var(--color-gray-100);
padding: calc(var(--spacing) * 0);
color: var(--color-gray-950);
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
@media (prefers-color-scheme: dark) {
color: var(--color-gray-50);
}
}
header {
display: flex;
background-color: var(--color-gray-950);