feat(11): styling for mobile and desktop

11-single-price-grid-component/src/input.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+    font-size: 16px;
+}
+
 .attribution {
     font-size: 11px;
     text-align: center;
@@ -10,3 +14,7 @@
 .attribution a {
     color: hsl(228, 45% 44%);
 }
+
+/* div, p, h1, h2 { */
+/*     outline: 1px solid red; */
+/* } */

11-single-price-grid-component/src/main/scala/pricegrid/App.scala

@@ -8,7 +8,7 @@ import scalatags.Text.tags2
 
 object App extends cask.MainRoutes {
   @cask.get("/")
-  def index() = Page.markdown
+  def index() = Page.wholePageMarkup
 
   @cask.staticFiles("/dist") // this is what path gets matched
   def distFiles() = "dist" // this is os path where files are looked up, for the generated files

11-single-price-grid-component/src/main/scala/pricegrid/Page.scala

@@ -4,7 +4,97 @@ import scalatags.Text.all._
 import scalatags.Text.tags2
 
 object Page {
-  lazy val markdown = doctype("html")(
+
+  /**
+   * Page content - grid layout of separate elements
+   * contains grid control styles
+   */
+  lazy val bodyMarkup = body(
+    `class` := "bg-neutral-gray w-screen h-screen px-7 py-16 drop-shadow-2xl",
+    `class` := "md:grid md:place-content-center",
+    div(
+      `class` := "grid md:grid-cols-2 md:auto-rows-min",
+      `class` := "md:h-[475px] md:w-[640px]",
+      joinOurCommunity(
+        `class` := "md:col-span-2 rounded-t-md",
+      ),
+      signup(
+        `class` := "md:rounded-bl-md",
+      ),
+      whyUs(
+        `class` := "rounded-b-md md:rounded-bl-none",
+      )
+    ),
+    footerMarkup
+  )
+
+  lazy val joinOurCommunity = div(
+    `class` := " bg-white flex flex-col gap-y-4 p-6 py-7 ",
+    `class` := "md:px-10 md:gap-y-0",
+    h1(
+      `class` := "text-lg text-primary-cyan font-semibold",
+      `class` := "md:text-xl md:my-3",
+      "Join our community"
+    ),
+    h2(
+      `class` := "text-sm text-primary-yellow font-semibold",
+      `class` := "md:text-base md:my-2",
+      "30-day, hassle-free money back guarantee"
+    ),
+    p(
+      `class` := "text-xs text-grayish-blue leading-loose ",
+      `class` := "md:text-sm md:leading-loose md:mb-2",
+      """
+  Gain access to our full library of tutorials along with expert code reviews.
+  Perfect for any developers who are serious about honing their skills.
+"""
+    )
+  )
+
+  lazy val signup = div(
+    `class` := "bg-bg-subscription text-white p-6 ",
+    `class` := "md:p-10",
+    h2(
+      `class` := "text-md font-semibold mb-4",
+      "Monthly Subscription"
+    ),
+    div(
+      `class` := "flex flex-row items-center mb-2",
+      p(`class` := "text-2xl font-bold md:text-3xl", "$29"),
+      p(`class` := "font-extralight text-sm ml-3", "per month")
+    ),
+    p(`class` := "text-sm", "Full access for less than $1 a day"),
+    button(
+      `class` := "w-full bg-primary-yellow rounded-lg h-12 mt-7 drop-shadow-xl",
+      `class` := "md:text-md",
+      "Sign Up"
+    )
+  )
+
+  lazy val whyUs = div(
+    `class` := "bg-bg-why-us text-white p-6 ",
+    `class` := "md:p-10",
+    h2(
+      `class` := "font-semibold mb-3",
+      "Why Us"),
+    ul(
+      List(
+        "  Tutorials by industry experts ",
+        "  Peer & expert code review ",
+        "  Coding exercises ",
+        "  Access to our GitHub repos ",
+        "  Community forum ",
+        "  Flashcard decks ",
+        "  New videos every week "
+      ).map(linkText =>
+        li(
+          `class` := "text-xs pt-1 md:font-light",
+          linkText)
+      )
+    )
+  )
+
+  lazy val wholePageMarkup = doctype("html")(
     html(
       lang := "en",
       head(
@@ -21,50 +111,21 @@ object Page {
         ),
         link(rel := "stylesheet", href := "/dist/output.css")
       ),
-      body(
-        cls := "bg-blue-100",
-        h1(cls := "text-3xl", "Welcome to the future"),
-        """
-  Join our community
-
-  30-day, hassle-free money back guarantee
-
-  Gain access to our full library of tutorials along with expert code reviews.
-  Perfect for any developers who are serious about honing their skills.
-
-  Monthly Subscription
-
-  $29 per month
-
-  Full access for less than $1 a day
-
-  Sign Up
-
-  Why Us
-
-  Tutorials by industry experts
-  Peer & expert code review
-  Coding exercises
-  Access to our GitHub repos
-  Community forum
-  Flashcard decks
-  New videos every week
-
-""",
-        footerMarkup
-      )
+      bodyMarkup
     )
   )
 
   lazy val footerMarkup = footer(
     p(
-      cls := "attribution",
+      cls := "attribution fixed bottom-0 inset-x-0",
       "Challenge by ",
       a(
         href := "https://www.frontendmentor.io?ref=challenge",
         target := "_blank",
         "Frontend Mentor. "
       ),
-    "Coded by ", a(href := "#", "Your Name Here"))
+      "Coded by ",
+      a(href := "#", "Your Name Here")
+    )
   )
 }

11-single-price-grid-component/tailwind.config.js

@@ -2,7 +2,16 @@
 module.exports = {
   content: ["./src/**/*.scala"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary-cyan': 'hsl(179, 62%, 43%)',
+        'primary-yellow': 'hsl(71, 73%, 54%)',
+        'neutral-gray': 'hsl(204, 43%, 93%)',
+        'grayish-blue': 'hsl(218, 22%, 67%)',
+        'bg-subscription': 'hsl(179, 61%, 44%)',
+        'bg-why-us': 'hsl(179, 47%, 52%)',
+      }
+    },
   },
   plugins: [],
 }