mirror of
https://github.com/ryan-haskell/elm-spa.git
synced 2024-09-11 12:35:44 +03:00
make pretty
This commit is contained in:
parent
af5d16f943
commit
b4e002ce4c
@ -318,6 +318,22 @@ hr { border: 0; }
|
||||
transition: border 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.7em 1.2em;
|
||||
background: var(--color--white);
|
||||
border: 1px solid var(--color--grey-300);
|
||||
color: var(--color--green);
|
||||
border-radius: 0.25em;
|
||||
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
|
||||
transform-origin: center;
|
||||
font-weight: var(--weight--bold);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dropdown__link {
|
||||
padding: 1rem;
|
||||
transition: background-color 200ms ease-in-out;
|
||||
@ -511,8 +527,9 @@ hr { border: 0; }
|
||||
text-shadow: 0 0 0.5em rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
.home__section:nth-child(2n) .markdown {
|
||||
margin-left: auto;
|
||||
.home__section > .col {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.home__section-icon {
|
||||
@ -522,6 +539,7 @@ hr { border: 0; }
|
||||
right: calc(50% + 18rem);
|
||||
font-size: 8em;
|
||||
z-index: 2;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.home__section:nth-child(2n + 1) .home__section-icon {
|
||||
|
@ -43,8 +43,6 @@ const main = () =>
|
||||
acc[line.substring(2)] = 1
|
||||
} else if (line.startsWith('## ')) {
|
||||
acc[line.substring(3)] = 2
|
||||
} else if (line.startsWith('### ')) {
|
||||
acc[line.substring(4)] = 3
|
||||
}
|
||||
|
||||
return acc
|
||||
|
@ -1,6 +1,7 @@
|
||||
module Pages.Home_ exposing (Model, Msg, page)
|
||||
|
||||
import Gen.Params.Home_ exposing (Params)
|
||||
import Gen.Route exposing (Route)
|
||||
import Html
|
||||
import Html.Attributes as Attr
|
||||
import Page
|
||||
@ -37,8 +38,9 @@ view =
|
||||
}
|
||||
]
|
||||
, alternatingMarkdownSections
|
||||
[ ( "😌", """
|
||||
## Build reliable single page applications
|
||||
[ ( "🌳"
|
||||
, """
|
||||
## Build reliable applications with Elm
|
||||
|
||||
With __elm-spa__, you can create production-ready applications with one command:
|
||||
|
||||
@ -46,38 +48,61 @@ With __elm-spa__, you can create production-ready applications with one command:
|
||||
npx elm-spa new
|
||||
```
|
||||
|
||||
No need to configure webpack, gulp, or any other NPM dev tools. This single __zero-configuration__ CLI comes with a live-reloading dev server, production-ready build command, and even a few scaffolding commands for new and existing applications.
|
||||
""" )
|
||||
, ( "\u{1FA84}", """
|
||||
No need to configure webpack, gulp, or any other NPM dev tools. This __zero-configuration__ CLI comes with a live-reloading dev server, production-ready build commands, and even a few scaffolding commands for new and existing applications.
|
||||
"""
|
||||
, [ ( "Explore the CLI", Gen.Route.Guide__Section_ { section = "cli" } )
|
||||
]
|
||||
)
|
||||
, ( "\u{1FA84}"
|
||||
, """
|
||||
## Automatic routing
|
||||
|
||||
With __elm-spa__, routing is automatically generated for you based on a standard file-structure convention. This means you'll be able to navigate any project, making it great for onboarding new hires or collaborating with a team!
|
||||
""" )
|
||||
, ( "🔒", """
|
||||
"""
|
||||
, [ ( "Learn how routing works", Gen.Route.Guide__Section_ { section = "routing" } )
|
||||
]
|
||||
)
|
||||
, ( "🔒"
|
||||
, """
|
||||
## User authentication
|
||||
|
||||
The latest release comes with an easy way to setup user authentication. Use the `Page.protected` API to easily guarantee only logged-in users can view certain pages.
|
||||
""" )
|
||||
, ( "🧠", """
|
||||
"""
|
||||
, [ ( "See it in action", Gen.Route.Examples__Section_ { section = "04-authentication" } )
|
||||
]
|
||||
)
|
||||
, ( "🧠"
|
||||
, """
|
||||
## Ready to learn more?
|
||||
|
||||
Awesome! Check out [the official guide](/guide) to learn the concepts, or start by looking at a collection of examples.
|
||||
""" )
|
||||
Awesome! Check out the official guide to learn the concepts, or start by looking at a collection of examples.
|
||||
"""
|
||||
, [ ( "Read the guide", Gen.Route.Guide )
|
||||
, ( "View examples", Gen.Route.Examples )
|
||||
]
|
||||
)
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
alternatingMarkdownSections : List ( String, String ) -> Html msg
|
||||
alternatingMarkdownSections : List ( String, String, List ( String, Route ) ) -> Html msg
|
||||
alternatingMarkdownSections sections =
|
||||
let
|
||||
viewSection ( emoji, str ) =
|
||||
viewSection i ( emoji, str, buttons ) =
|
||||
Html.section [ Attr.class "home__section" ]
|
||||
[ Html.div [ Attr.class "container relative", Attr.style "padding" "8em 1rem" ]
|
||||
[ Html.div [ Attr.class "container relative row", Attr.style "padding" "8em 1rem", Attr.classList [ ( "align-right", modBy 2 i == 1 ) ] ]
|
||||
[ Html.div [ Attr.class "home__section-icon" ] [ Html.text emoji ]
|
||||
, UI.markdown { withHeaderLinks = False } str
|
||||
, Html.div [ Attr.class "col gap-lg" ]
|
||||
[ UI.markdown { withHeaderLinks = False } str
|
||||
, Html.div [ Attr.class "row gap-md" ]
|
||||
(List.map
|
||||
(\( label, route ) -> Html.a [ Attr.class "button", Attr.href (Gen.Route.toHref route) ] [ Html.text label ])
|
||||
buttons
|
||||
)
|
||||
]
|
||||
]
|
||||
]
|
||||
in
|
||||
Html.main_ [ Attr.class "col" ]
|
||||
(List.map viewSection sections)
|
||||
(List.indexedMap viewSection sections)
|
||||
|
Loading…
Reference in New Issue
Block a user