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

fix(11): style & sizes

This commit is contained in:
efim 2023-06-26 14:14:48 +00:00
parent 57e0347c53
commit e5210fb26f
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,18 +32,18 @@ object Page {
`class` := "bg-white flex flex-col gap-y-4 p-6 py-7 ", `class` := "bg-white flex flex-col gap-y-4 p-6 py-7 ",
`class` := "md:px-10 md:gap-y-0", `class` := "md:px-10 md:gap-y-0",
h1( h1(
`class` := "text-lg text-primary-cyan font-semibold", `class` := "text-xl text-primary-cyan font-bold",
`class` := "md:text-xl md:my-3", `class` := "md:text-2xl md:my-3",
"Join our community" "Join our community"
), ),
h2( h2(
`class` := "text-sm text-primary-yellow font-semibold", `class` := "text-sm text-primary-yellow font-bold",
`class` := "md:text-base md:my-2", `class` := "md:text-lg md:my-2",
"30-day, hassle-free money back guarantee" "30-day, hassle-free money back guarantee"
), ),
p( p(
`class` := "text-xs text-grayish-blue leading-loose ", `class` := "text-xs text-grayish-blue leading-loose ",
`class` := "md:text-sm md:leading-loose md:mb-2", `class` := "md:text-base md:leading-relaxed md:mb-2",
""" """
Gain access to our full library of tutorials along with expert code reviews. Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills. Perfect for any developers who are serious about honing their skills.
@ -55,32 +55,32 @@ object Page {
`class` := "bg-bg-subscription text-white p-6 ", `class` := "bg-bg-subscription text-white p-6 ",
`class` := "md:p-10", `class` := "md:p-10",
h2( h2(
`class` := "text-md font-semibold mb-4", `class` := "text-md font-bold mb-4 md:text-lg",
"Monthly Subscription" "Monthly Subscription"
), ),
div( div(
`class` := "flex flex-row items-center mb-2", `class` := "flex flex-row items-center mb-2",
p(`class` := "text-2xl font-bold md:text-3xl", "$29"), p(`class` := "text-3xl font-bold md:text-3xl", "$29"),
p(`class` := "font-extralight text-sm ml-3", "per month") p(`class` := "font-extralight text-sm ml-3 text-neutral-gray", "per month")
), ),
p(`class` := "text-sm", "Full access for less than $1 a day"), p(`class` := "text-sm", "Full access for less than $1 a day"),
button( button(
`class` := "w-full bg-primary-yellow rounded-lg h-12 mt-7 drop-shadow-xl", `class` := "w-full bg-primary-yellow rounded-lg h-12 mt-7 drop-shadow-xl font-bold",
`class` := "md:text-md", `class` := "md:text-md",
"Sign Up" "Sign Up"
) )
) )
lazy val whyUs = div( lazy val whyUs = div(
`class` := "bg-bg-why-us text-white p-6 ", `class` := "bg-bg-why-us text-white p-6 md:text-lg",
`class` := "md:p-10", `class` := "md:p-10",
h2( h2(
`class` := "font-semibold mb-3", `class` := "font-bold mb-3",
"Why Us"), "Why Us"),
ul( ul(
List( List(
" Tutorials by industry experts ", " Tutorials by industry experts ",
" Peer & expert code review ", " Peer & expert code review ",
" Coding exercises ", " Coding exercises ",
" Access to our GitHub repos ", " Access to our GitHub repos ",
" Community forum ", " Community forum ",
@ -88,7 +88,7 @@ object Page {
" New videos every week " " New videos every week "
).map(linkText => ).map(linkText =>
li( li(
`class` := "text-xs pt-1 md:font-light", `class` := "text-xs text-neutral-gray pt-1 md:font-light md:text-sm md:leading-tight",
linkText) linkText)
) )
) )

4
11-single-price-grid-component/tailwind.config.js
View File

@ -6,6 +6,10 @@ module.exports = {
fontFamily: { fontFamily: {
'sans': ['Karla', 'sans-serif'] 'sans': ['Karla', 'sans-serif']
}, },
fontWeight: {
'normal': 400,
'bold': 700,
},
colors: { colors: {
'primary-cyan': 'hsl(179, 62%, 43%)', 'primary-cyan': 'hsl(179, 62%, 43%)',
'primary-yellow': 'hsl(71, 73%, 54%)', 'primary-yellow': 'hsl(71, 73%, 54%)',