4377f0b · rowtype-yoga/purescript-next-website

git.iko.soy/rowtype-yoga/purescript-next-website

Add getting started card and use water color theme

commit4377f0b92492b63e5a48d9daa6ad1950cf1389b9 authorsigma-andex <77549848+sigma-andex@users.noreply.github.com> dateTue 30 Aug 2022, 21:40 (4 years ago) parentb47c078

3 files changed+68−23

compare with main

unifiedsplit

src/Components/Navigation.purs+4−4 src/Pages/Home.purs+32−14 src/Themes.purs+32−5

src/Components/Navigation.purs+4−4

@@ -35,13 +35,13 @@ mkBackgroundImage :: Boolean -> String

3535mkBackgroundImage isDark =

3636 if isDark then

3737 """

38− radial-gradient(25rem 25rem at left 15rem top 20rem, rgba(30, 144, 255,0.55) 0% 10%,#0000 90% 90%),

39− radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(0, 0, 139, 0.75) 0% 10%, #0000 70% 80%);

38+ radial-gradient(20rem 20rem at left 15rem top 20rem, rgba(37,246,255, 0.5) 5%,#0000 50%),

39+ radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(24, 15, 102, 1) 5%, #0000 50%);

4040 """

4141 else

4242 """

43− radial-gradient(25rem 25rem at left 15rem top 20rem, rgba(30, 144, 255, 0.30) 0% 10%,#fff0 90% 90%),

44− radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(32, 178, 170, 0.35) 0% 10%,#fff0 70% 80%);

43+ radial-gradient(20rem 20rem at left 15rem top 20rem, rgba(51,138, 255, 0.75) 5%, rgba(255,255,255,0) 50%),

44+ radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(33,170,231, 0.75) 5%, rgba(255,255,255,0) 50%);

4545 """

4646

4747foreign import isDarkDefault_ :: Effect Boolean

src/Pages/Home.purs+32−14

@@ -6,13 +6,13 @@ import Components.Page as Page

66import Control.Promise (Promise, fromAff)

77import Effect.Aff (Aff)

88import Effect.Uncurried (EffectFn1, mkEffectFn1)

9+import Next.Router as Router

910import NextUI.NextUI as NextUI

1011import React.Basic.DOM (css)

12+import React.Basic.Hooks as React

1113import React.Icons (icon)

1214import React.Icons.Si (siPurescript)

1315import React.Util (el)

14−import Themes (getColorValue)

15−import React.Basic.Hooks as React

1616

1717type Props =

1818 { header :: String

@@ -20,18 +20,36 @@ type Props =

2020

2121mkHome :: Page.Component Props

2222mkHome = do

23− Page.component "Home" \env props -> React.do

24− { theme } <- NextUI.useTheme

25− pure $ el NextUI.container { fluid: true, css: css { height: "100%" } }

26− $ el NextUI.row { justify: "center", align: "center", css: css { height: "100%" } }

27− [ icon siPurescript { style: css { color: getColorValue theme "primarySolidContrast", minWidth: "5rem" }, size: "5rem" }

28− , el NextUI.spacer {} React.empty

29− , el NextUI.text

30− { h1: true

31− , size: "4rem"

32− }

33− "PureScript "

34− ]

23+ Page.component "Home" \env props ->

24+ React.do

25+ { theme } <- NextUI.useTheme

26+ router <- Router.useRouter

27+ let

28+ dispatchRoute = Router.push router

29+ pure $ el NextUI.container { fluid: true, css: css { } }

30+ $ el NextUI.card

31+ { css: css { height: "100%", background: "$transparentBackground" }

32+ }

33+ [ el NextUI.cardBody {}

34+ $ el NextUI.container {}

35+ $ el NextUI.row { css: css { height: "100%" } }

36+ [ el NextUI.col { }

37+ [ el NextUI.row {}

38+ [ icon siPurescript { style: css { color: "$primarySolidContrast", minWidth: "5rem" }, size: "5rem" }

39+ , el NextUI.spacer {} React.empty

40+ , el NextUI.text

41+ { h1: true

42+ }

43+ "PureScript "

44+ ]

45+ , el NextUI.row {} $ el NextUI.text { size: "$xl" } "A fast, powerful functional language"

46+ ]

47+ , el NextUI.col { align: "center", content: "center", css: css { height: "100%"}}

48+ $ el NextUI.button { shadow: false, color: "primary", css: css { minHeight: "5rem", minWidth: "50%" }, onClick: dispatchRoute "/getting-started" }

49+ $ el NextUI.text { size: "$3xl", color: "secondary", css: css { fontWeight: "$bold" } } "Get started"

50+ ]

51+

52+ ]

3553

3654fetchData :: forall ctx. ctx -> Aff Props

3755fetchData _ = do

src/Themes.purs+32−5

@@ -9,6 +9,27 @@ foreign import data ThemeValue :: Type

1010foreign import getColorValue :: Theme -> String -> ThemeValue

1111

12+-- /* Color Theme Swatches in Hex */

13+-- .Adjacent-Water-1-hex { color: #180F66; }

14+-- .Adjacent-Water-2-hex { color: #1A33B2; }

15+-- .Adjacent-Water-3-hex { color: #328AFF; }

16+-- .Adjacent-Water-4-hex { color: #22ABE8; }

17+-- .Adjacent-Water-5-hex { color: #25F5FF; }

18+

19+-- /* Color Theme Swatches in RGBA */

20+-- .Adjacent-Water-1-rgba { color: rgba(23, 14, 102, 1); }

21+-- .Adjacent-Water-2-rgba { color: rgba(25, 51, 177, 1); }

22+-- .Adjacent-Water-3-rgba { color: rgba(49, 137, 255, 1); }

23+-- .Adjacent-Water-4-rgba { color: rgba(33, 170, 232, 1); }

24+-- .Adjacent-Water-5-rgba { color: rgba(36, 244, 255, 1); }

25+

26+-- /* Color Theme Swatches in HSLA */

27+-- .Adjacent-Water-1-hsla { color: hsla(245, 74, 22, 1); }

28+-- .Adjacent-Water-2-hsla { color: hsla(229, 74, 39, 1); }

29+-- .Adjacent-Water-3-hsla { color: hsla(214, 100, 59, 1); }

30+-- .Adjacent-Water-4-hsla { color: hsla(198, 81, 52, 1); }

31+-- .Adjacent-Water-5-hsla { color: hsla(182, 100, 57, 1); }

32+

1233mkDark :: Effect Theme

1334mkDark = createTheme

1435 { "type": "dark"

@@ -18,15 +39,18 @@ mkDark = createTheme

1839 , primaryLightHover: "$blue300"

1940 , primaryLightActive: "$blue400"

2041 , primaryLightContrast: "$blue600"

21− , primary: "$blue700"

42+ , primary: "rgb(26 51 178)"

2243 , primaryBorder: "$blue500"

2344 , primaryBorderHover: "$blue600"

2445 , primarySolidHover: "$blue700"

2546 , primarySolidContrast: "$white"

26− , primaryShadow: "$blue500"

47+ , primaryShadow: "$cyan200"

48+ , selection: "rgb(138, 43, 226)"

2749 , gradient: "linear-gradient(112deg, $blue100 -25%, $pink500 -10%, $blue500 80%)"

2850 , link: "$blue700"

2951 , neutral: "$white300"

52+ , secondary: "$white300"

53+ , transparentBackground: "rgba(0,0,0,0.25);"

3054 }

3155 , space: {}

3256 , fonts:

@@ -42,18 +66,21 @@ mkLight = createTheme

4266 , theme:

4367 { colors:

4468 { primaryLight: "$blue200"

45− , primaryLightHover: "$purple300"

69+ , primaryLightHover: "$blue300"

4670 , primaryLightActive: "$blue400"

4771 , primaryLightContrast: "$blue600"

48− , primary: "$black200"

72+ , primary: "rgb(24,15,102)"

4973 , primaryBorder: "$blue300"

5074 , primaryBorderHover: "$blue600"

5175 , primarySolidHover: "$blue400"

5276 , primarySolidContrast: "$black100"

53− , primaryShadow: "$blue500"

77+ , primaryShadow: "$blue800"

78+ , selection: "$red200"

5479 , gradient: "linear-gradient(112deg, $blue100 -25%, $pink500 -10%, $purple500 80%)"

5580 , link: "$black100"

5681 , neutral: "$blue900"

82+ , secondary: "#E9E9F2"

83+ , transparentBackground: "rgba(255,255,255,0.25);"

5784 }

5885 , space: {}

5986 , fonts: