efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(14): initial static styling of showdown

Browse Source
This commit is contained in:
efim
2023-07-01 07:25:20 +00:00
parent bed0387575
commit 9fc2e959fa
4 changed files with 174 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
14-rock-paper-scissors/src/main/resources/templates/index.html
View File

@@ -62,13 +62,15 @@
>
<div
id="paper"
class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
style="
--diameter: 8rem;
--bg-dark: hsl(230, 89%, 62%);
--bg-bright: hsl(230, 89%, 65%);
--top-offset: 6rem;
--left-offset: 6rem;
--translation: 50%;
position: absolute;
"
>
<div
@@ -82,13 +84,15 @@
<div
id="scissors"
class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
style="
--diameter: 8rem;
--bg-dark: hsl(39, 89%, 49%);
--bg-bright: hsl(40, 84%, 53%);
--top-offset: 6rem;
--left-offset: 17rem;
--translation: 50%;
position: absolute;
"
>
<div
@@ -102,13 +106,15 @@
<div
id="rock"
class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
style="
--diameter: 8rem;
--bg-dark: hsl(349, 71%, 52%);
--bg-bright: hsl(349, 70%, 56%);
--top-offset: 15rem;
--left-offset: 11.5rem;
--translation: 50%;
position: absolute;
"
>
<div