feat: upper part styled

2023-10-03 18:13:16 +00:00 · 2023-10-03 18:13:16 +00:00 · 58ca4ecafa
parent 843e55841b
commit 58ca4ecafa
5 changed files with 189 additions and 22 deletions
--- a/17-results-summary-component-go/input.css
+++ b/17-results-summary-component-go/input.css
@ -8,21 +8,21 @@ html {

@font-face {
  font-family: 'HankenGrotesk';
-  src: url('public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
 }

@font-face {
  font-family: 'HankenGrotesk';
-  src: url('public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
 }

@font-face {
  font-family: 'HankenGrotesk';
-  src: url('public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
  font-weight: 800; /* ExtraBold */
  font-style: normal;
 }
--- a/17-results-summary-component-go/public/out.css
+++ b/17-results-summary-component-go/public/out.css
@ -44,7 +44,7 @@ html {
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: HankenGrotesk, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
@ -535,6 +535,137 @@ video {
  bottom: 0.25rem;
 }

+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-b-3xl {
+  border-bottom-right-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.from-light-royal-blue {
+  --tw-gradient-from: hsl(241, 81%, 54%) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(241 81% 54% / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-violet-blue\/60 {
+  --tw-gradient-from: hsla(256, 72%, 46%, 0.6) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsla(256, 72%, 46%, 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-light-slate-blue {
+  --tw-gradient-to: hsl(252, 100%, 67%) var(--tw-gradient-to-position);
+}
+
+.to-persian-blue\/75 {
+  --tw-gradient-to: hsla(241, 72%, 46%, 0.75) var(--tw-gradient-to-position);
+}
+
+.p-7 {
+  padding: 1.75rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.text-pale-blue {
+  --tw-text-opacity: 1;
+  color: hsl(221 100% 96% / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 html {
  font-size: 18px;
 }
@ -542,7 +673,7 @@ html {
@font-face {
  font-family: 'HankenGrotesk';

-  src: url('public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');

  font-weight: 400;

@ -554,7 +685,7 @@ html {
@font-face {
  font-family: 'HankenGrotesk';

-  src: url('public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');

  font-weight: 700;

@ -566,7 +697,7 @@ html {
@font-face {
  font-family: 'HankenGrotesk';

-  src: url('public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');

  font-weight: 800;

--- a/17-results-summary-component-go/results-summary-component-go
+++ b/17-results-summary-component-go/results-summary-component-go
--- a/17-results-summary-component-go/templates/summary-component.gohtml
+++ b/17-results-summary-component-go/templates/summary-component.gohtml
@ -31,20 +31,54 @@
      }
    </style>
  </head>
-  <body class="">
+  <body>
    <main>
-      <section>
-        Your Result 76 of 100 Great! You scored higher than 65% of the people who
-        have taken these tests.
+      <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"
+      >
+        <h1 class="font-bold 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"
+        >
+          <span class="text-5xl font-extrabold">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.
+          </p>
+        </div>
      </section>

-      <section>
-        Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61
-        / 100 Visual 72 / 100 Continue
+      <section class="flex flex-col gap-y-4 p-7">
+        <h2 class="font-bold">Summary</h2>
+        <dl class="grid grid-cols-2">
+          <dt>Reaction</dt>
+          <dd class="flex flex-row">
+            <strong>80</strong>
+            / 100
+          </dd>
+          <dt>Memory</dt>
+          <dd class="flex flex-row">
+            <strong>92</strong>
+            / 100
+          </dd>
+          <dt>Verbal</dt>
+          <dd class="flex flex-row">
+            <strong>61</strong>
+            / 100
+          </dd>
+          <dt>Visual</dt>
+          <dd class="flex flex-row">
+            <strong>72</strong>
+            / 100
+          </dd>
+        </dl>
+        Continue
      </section>
-
    </main>
-  <footer class="attribution fixed inset-x-0 bottom-1">
+    <footer class="fixed inset-x-0 bottom-1 attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
--- a/flake.nix
+++ b/flake.nix
@ -42,9 +42,11 @@
            pkgs.scala-cli
            pkgs.sbt
            pkgs.scalafmt
+            pkgs.jdk
+
            pkgs.nodePackages.tailwindcss
            pkgs.nodePackages.prettier
-            pkgs.jdk
+            pkgs.rustywind

            pkgs.go
            pkgs.wgo