feat: desktop styling
This commit is contained in:
efim
parent
d7dce88751
commit
2769f5e8dc
|
|
@ -556,6 +556,14 @@ video {
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-full {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-screen {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.w-32 {
|
.w-32 {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
}
|
}
|
||||||
|
|
@ -564,6 +572,10 @@ video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-screen {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-1 {
|
.flex-1 {
|
||||||
flex: 1 1 0%;
|
flex: 1 1 0%;
|
||||||
}
|
}
|
||||||
|
|
@ -754,3 +766,82 @@ html {
|
||||||
|
|
||||||
font-style: normal;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,49 +32,62 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main class="grid place-items-center w-screen h-screen">
|
||||||
<section
|
<article
|
||||||
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"
|
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]"
|
||||||
>
|
>
|
||||||
<h1 class="font-bold text-pale-blue">Your Result</h1>
|
<section
|
||||||
<div
|
id="results-pane"
|
||||||
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 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"
|
||||||
>
|
>
|
||||||
<span class="text-5xl font-extrabold">76</span>
|
<h1 class="font-bold md:pt-2 md:text-xl text-pale-blue">
|
||||||
<span class="text-pale-blue"> of 100 </span>
|
Your Result
|
||||||
</div>
|
</h1>
|
||||||
<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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="flex flex-col gap-y-4 p-7">
|
|
||||||
<h2 class="font-bold">Summary</h2>
|
|
||||||
<dl class="flex flex-col gap-y-4">
|
|
||||||
{{ range . }}
|
|
||||||
<div
|
<div
|
||||||
class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
|
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"
|
||||||
style="--summary-item-color-var: {{ .ColorHsl }}"
|
>
|
||||||
>
|
<span class="text-5xl font-extrabold md:text-6xl">76</span>
|
||||||
<img src="{{ .IconPath }}" alt="" class="pr-2" />
|
<span class="text-pale-blue"> of 100 </span>
|
||||||
<dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
|
|
||||||
<dd class="flex flex-row">
|
|
||||||
<strong class="pr-2" >{{ .Score }}</strong>
|
|
||||||
<span class="text-dark-gray-blue">/ 100</span>
|
|
||||||
</dd>
|
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
<div class="flex flex-col gap-y-3 items-center">
|
||||||
</dl>
|
<h2 class="text-xl font-bold md:text-2xl">Great</h2>
|
||||||
<a
|
<p class="text-sm text-center md:text-base text-pale-blue">
|
||||||
href="/"flex flex-row
|
You scored higher than 65% of the people who have taken these
|
||||||
class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
|
tests.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="summary-pane"
|
||||||
|
class="flex flex-col gap-y-4 p-7 md:justify-around md:px-8 md:w-1/2"
|
||||||
>
|
>
|
||||||
Continue
|
<h2 class="font-bold md:text-xl">Summary</h2>
|
||||||
</a>
|
<dl class="flex flex-col gap-y-4">
|
||||||
</section>
|
{{ range . }}
|
||||||
|
<div
|
||||||
|
class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
|
||||||
|
style="--summary-item-color-var: {{ .ColorHsl }}"
|
||||||
|
>
|
||||||
|
<img src="{{ .IconPath }}" alt="" class="pr-2" />
|
||||||
|
<dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
|
||||||
|
<dd class="flex flex-row">
|
||||||
|
<strong class="pr-2">{{ .Score }}</strong>
|
||||||
|
<span class="text-dark-gray-blue">/ 100</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</dl>
|
||||||
|
<a
|
||||||
|
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>
|
</main>
|
||||||
<footer class="fixed inset-x-0 bottom-1 attribution">
|
<footer class="fixed inset-x-0 bottom-1 attribution">
|
||||||
Challenge by
|
Challenge by
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue