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

feat: desktop styling

This commit is contained in:
efim 2023-10-04 08:28:02 +00:00
parent d7dce88751
commit 2769f5e8dc
2 changed files with 142 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
17-results-summary-component-go/public/out.css
View File

@ -556,6 +556,14 @@ video {
height: 8rem;
}
.h-full {
height: 100%;
}
.h-screen {
height: 100vh;
}
.w-32 {
width: 8rem;
}
@ -564,6 +572,10 @@ video {
width: 100%;
}
.w-screen {
width: 100vw;
}
.flex-1 {
flex: 1 1 0%;
}
@ -754,3 +766,82 @@ html {
font-style: normal;
}
@media (min-width: 768px) {
.md\:h-44 {
height: 11rem;
}
.md\:h-\[500px\] {
height: 500px;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:w-44 {
width: 11rem;
}
.md\:w-\[715px\] {
width: 715px;
}
.md\:flex-row {
flex-direction: row;
}
.md\:justify-around {
justify-content: space-around;
}
.md\:rounded-3xl {
border-radius: 1.5rem;
}
.md\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.md\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.md\:pt-2 {
padding-top: 0.5rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.md\:shadow-light-lavender\/50 {
--tw-shadow-color: hsl(241 100% 89% / 0.5);
--tw-shadow: var(--tw-shadow-colored);
}
}

35
17-results-summary-component-go/templates/summary-component.gohtml
View File

@ -32,27 +32,37 @@
</style>
</head>
<body>
<main>
<main class="grid place-items-center w-screen h-screen">
<article
class="flex flex-col w-full h-full md:flex-row md:bg-white md:rounded-3xl md:shadow-2xl md:shadow-light-lavender/50 md:w-[715px] md:h-[500px]"
>
<section
class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl from-light-royal-blue to-light-slate-blue"
id="results-pane"
class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl md:justify-around md:w-1/2 md:rounded-3xl from-light-royal-blue to-light-slate-blue"
>
<h1 class="font-bold text-pale-blue">Your Result</h1>
<h1 class="font-bold md:pt-2 md:text-xl text-pale-blue">
Your Result
</h1>
<div
class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full from-violet-blue/60 to-persian-blue/75"
class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full md:w-44 md:h-44 from-violet-blue/60 to-persian-blue/75"
>
<span class="text-5xl font-extrabold">76</span>
<span class="text-5xl font-extrabold md:text-6xl">76</span>
<span class="text-pale-blue"> of 100 </span>
</div>
<div class="flex flex-col gap-y-3 items-center">
<h2 class="text-xl font-bold">Great</h2>
<p class="text-sm text-center text-pale-blue">
You scored higher than 65% of the people who have taken these tests.
<h2 class="text-xl font-bold md:text-2xl">Great</h2>
<p class="text-sm text-center md:text-base text-pale-blue">
You scored higher than 65% of the people who have taken these
tests.
</p>
</div>
</section>
<section class="flex flex-col gap-y-4 p-7">
<h2 class="font-bold">Summary</h2>
<section
id="summary-pane"
class="flex flex-col gap-y-4 p-7 md:justify-around md:px-8 md:w-1/2"
>
<h2 class="font-bold md:text-xl">Summary</h2>
<dl class="flex flex-col gap-y-4">
{{ range . }}
<div
@ -69,12 +79,15 @@
{{ end }}
</dl>
<a
href="/"flex flex-row
href="/"
flex
flex-row
class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
>
Continue
</a>
</section>
</article>
</main>
<footer class="fixed inset-x-0 bottom-1 attribution">
Challenge by