learn-code-the-hard-way
/
zedshaw-games
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

A bit of tweaking of the design to learn more about tailwind.

Browse Source
main
Zed A. Shaw 7 days ago
parent 9729ebc7ac
commit 8906322b6d
5 changed files with 64 additions and 32 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      pages/layouts/main.html
  2. 4
      pages/live/index.html
  3. 20
      static/input_style.css
  4. 62
      static/style.css
  5. 4
      views/layouts/main.html

6
pages/layouts/main.html
Unescape View File

@ -14,7 +14,7 @@
<title>ZedShaw.games</title> <title>ZedShaw.games</title>
</head> </head>
<body data-testid="{{.PageId}}"> <body data-testid="{{.PageId}}">
<header class="flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6"> <header>
<a id="home" href="/">🏡</a> <a id="home" href="/">🏡</a>
<a id="live" href="/live/">Live</a> <a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a> <a id="stream" href="/stream/">Streams</a>
@ -23,11 +23,11 @@
<a id="login" href="/login/">Login</a> <a id="login" href="/login/">Login</a>
</header> </header>
<div class="p-0 min-h-screen"> <div class="p-0 min-h-screen dark:bg-gray-900">
{{embed}} {{embed}}
</div> </div>
<footer class="bg-gray-950 text-gray-50 text-lg flex p-6"> <footer>
<div class="flex-1"> <div class="flex-1">
<shape> <shape>
<img class="size-12 shrink-0" src="/logo.png" /> <img class="size-12 shrink-0" src="/logo.png" />

4
pages/live/index.html
Unescape View File

@ -4,11 +4,11 @@
</script> </script>
<div x-init="Stream = await req.theData()" x-data="{Stream: {}}"> <div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
<div class="flex justify-center items-center w-full bg-gray-900 text-gray-50 text-center aspect-video"> <div class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
<span>Stream Viewer</span> <span>Stream Viewer</span>
</div> </div>
<div class="p-6"> <div class="p-6 flex flex-col justify-center">
<div> <div>
<h2>Links Found in Chat</h2> <h2>Links Found in Chat</h2>
<ul x-init="links = await link_req.theData()" x-data="{links: {}}"> <ul x-init="links = await link_req.theData()" x-data="{links: {}}">

20
static/input_style.css
Unescape View File

@ -1,5 +1,17 @@
@import "tailwindcss"; @import "tailwindcss";
body {
@apply text-gray-950 dark:text-gray-50;
}
header {
@apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
}
footer {
@apply bg-gray-950 text-gray-50 text-lg flex p-6;
}
h1 { h1 {
@apply text-6xl pb-4; @apply text-6xl pb-4;
} }
@ -33,11 +45,15 @@ card > middle {
} }
label { label {
@apply font-bold text-white; @apply font-bold text-950 dark:text-white;
} }
input { input {
@apply shadow-sm outline rounded-sm p-1 bg-gray-200; @apply shadow-sm outline rounded-sm p-1 bg-gray-200 text-gray-950 dark:text-gray-950;
}
input::placeholder {
@apply text-gray-700 dark:text-gray-700;
} }
button { button {

62
static/style.css
Unescape View File

@ -17,6 +17,7 @@
--color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665); --color-gray-900: oklch(21% 0.034 264.665);
--color-gray-950: oklch(13% 0.028 261.692); --color-gray-950: oklch(13% 0.028 261.692);
--color-black: #000;
--color-white: #fff; --color-white: #fff;
--spacing: 0.25rem; --spacing: 0.25rem;
--container-md: 28rem; --container-md: 28rem;
@ -252,11 +253,8 @@
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.bg-gray-900 { .bg-gray-300 {
background-color: var(--color-gray-900); background-color: var(--color-gray-300);
}
.bg-gray-950 {
background-color: var(--color-gray-950);
} }
.p-0 { .p-0 {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
@ -271,16 +269,12 @@
font-size: var(--text-3xl); font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height)); line-height: var(--tw-leading, var(--text-3xl--line-height));
} }
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.font-bold { .font-bold {
--tw-font-weight: var(--font-weight-bold); --tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.text-gray-50 { .text-gray-950 {
color: var(--color-gray-50); color: var(--color-gray-950);
} }
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
@ -290,23 +284,41 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: var(--tw-duration, var(--default-transition-duration));
} }
.\*\:flex-1 { .dark\:bg-gray-900 {
:is(& > *) { @media (prefers-color-scheme: dark) {
flex: 1; background-color: var(--color-gray-900);
} }
} }
.\*\:text-xl { }
:is(& > *) { body {
font-size: var(--text-xl); color: var(--color-gray-950);
line-height: var(--tw-leading, var(--text-xl--line-height)); @media (prefers-color-scheme: dark) {
} color: var(--color-gray-50);
} }
.\*\:text-gray-50 { }
:is(& > *) { header {
color: var(--color-gray-50); display: flex;
} background-color: var(--color-gray-950);
padding: calc(var(--spacing) * 6);
:is(& > *) {
flex: 1;
}
:is(& > *) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
:is(& > *) {
color: var(--color-gray-50);
} }
} }
footer {
display: flex;
background-color: var(--color-gray-950);
padding: calc(var(--spacing) * 6);
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
color: var(--color-gray-50);
}
h1 { h1 {
padding-bottom: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 4);
font-size: var(--text-6xl); font-size: var(--text-6xl);
@ -374,10 +386,14 @@ input {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background-color: var(--color-gray-200); background-color: var(--color-gray-200);
padding: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 1);
color: var(--color-gray-950);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline-style: var(--tw-outline-style); outline-style: var(--tw-outline-style);
outline-width: 1px; outline-width: 1px;
@media (prefers-color-scheme: dark) {
color: var(--color-gray-950);
}
} }
button { button {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);

4
views/layouts/main.html
Unescape View File

@ -14,7 +14,7 @@
<title>ZedShaw.games</title> <title>ZedShaw.games</title>
</head> </head>
<body data-testid="{{.PageId}}"> <body data-testid="{{.PageId}}">
<header class="flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6"> <header>
<a id="home" href="/">🏡</a> <a id="home" href="/">🏡</a>
<a id="live" href="/live/">Live</a> <a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a> <a id="stream" href="/stream/">Streams</a>
@ -27,7 +27,7 @@
{{embed}} {{embed}}
</div> </div>
<footer class="bg-gray-950 text-gray-50 text-lg flex p-6"> <footer>
<div class="flex-1"> <div class="flex-1">
<shape> <shape>
<img class="size-12 shrink-0" src="/logo.png" /> <img class="size-12 shrink-0" src="/logo.png" />

Write Preview
Loading…
Cancel
Save