From 88fe55bf45b5a6b96c9d57b338648ece1e1d2f75 Mon Sep 17 00:00:00 2001 From: efim Date: Mon, 26 Jun 2023 13:58:44 +0000 Subject: [PATCH] feat(11): styling for mobile and desktop --- 11-single-price-grid-component/src/input.css | 8 ++ .../src/main/scala/pricegrid/App.scala | 2 +- .../src/main/scala/pricegrid/Page.scala | 131 +++++++++++++----- .../tailwind.config.js | 11 +- 4 files changed, 115 insertions(+), 37 deletions(-) diff --git a/11-single-price-grid-component/src/input.css b/11-single-price-grid-component/src/input.css index 1c74a55..fab023f 100644 --- a/11-single-price-grid-component/src/input.css +++ b/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; */ +/* } */ diff --git a/11-single-price-grid-component/src/main/scala/pricegrid/App.scala b/11-single-price-grid-component/src/main/scala/pricegrid/App.scala index c8f1d4d..ddcb50a 100644 --- a/11-single-price-grid-component/src/main/scala/pricegrid/App.scala +++ b/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 diff --git a/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala b/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala index 89858d7..35a7965 100644 --- a/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala +++ b/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") + ) ) } diff --git a/11-single-price-grid-component/tailwind.config.js b/11-single-price-grid-component/tailwind.config.js index c284f5b..85e8ab7 100644 --- a/11-single-price-grid-component/tailwind.config.js +++ b/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: [], }