From 73ba3ad627af7c3c8fa4d2e532548f56727f49b7 Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Sat, 22 Jun 2019 18:03:12 -0700 Subject: [PATCH] Implement initial version of start page. --- elm.json | 4 ++- index.html | 14 ++++++++++ src/Start/Custom.elm | 61 ++++++++++++++++++++++++++++++++++++++++++++ src/Start/Model.elm | 10 +++++++- src/Start/View.elm | 20 ++++++++++++--- style.scss | 54 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 158 insertions(+), 5 deletions(-) create mode 100644 index.html create mode 100644 src/Start/Custom.elm create mode 100644 style.scss diff --git a/elm.json b/elm.json index b8ff8c9..dd15c79 100644 --- a/elm.json +++ b/elm.json @@ -8,10 +8,12 @@ "direct": { "elm/browser": "1.0.1", "elm/core": "1.0.2", - "elm/html": "1.0.0" + "elm/html": "1.0.0", + "feathericons/elm-feather": "1.3.0" }, "indirect": { "elm/json": "1.1.3", + "elm/svg": "1.0.1", "elm/time": "1.0.0", "elm/url": "1.0.0", "elm/virtual-dom": "1.0.2" diff --git a/index.html b/index.html new file mode 100644 index 0000000..091d2ee --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + +
+
+ + + diff --git a/src/Start/Custom.elm b/src/Start/Custom.elm new file mode 100644 index 0000000..01fff24 --- /dev/null +++ b/src/Start/Custom.elm @@ -0,0 +1,61 @@ +module Start.Custom exposing (tabs) +import Start.Model exposing (Tab) +import FeatherIcons + +tabs : List Tab +tabs = + [ + { name = "Gitea" + , color = "#66c485" + , icon = FeatherIcons.gitMerge + , link = "https://dev.danilafe.com" + } + , + { name = "GitHub" + , color = "#b188c9" + , icon = FeatherIcons.github + , link = "https://github.com" + } + , + { name = "Blog" + , color = "#7dbce0" + , icon = FeatherIcons.alignLeft + , link = "https://danilafe.com" + } + , + { name = "Projects" + , color = "#e08fa1" + , icon = FeatherIcons.box + , link = "http://project.danilafe.com" + } + , + { name = "Finance" + , color = "#d7e076" + , icon = FeatherIcons.dollarSign + , link = "http://finance.danilafe.com" + } + , + { name = "Scylla" + , color = "#efb05d" + , icon = FeatherIcons.messageSquare + , link = "https://scylla.danilafe.com" + } + , + { name = "Canvas" + , color = "#ce665c" + , icon = FeatherIcons.bookOpen + , link = "https://oregonstate.instructure.com" + } + , + { name = "MyDegrees" + , color = "#db8cc3" + , icon = FeatherIcons.user + , link = "https://mydegrees.oregonstate.edu" + } + , + { name = "Email" + , color = "#7b77d6" + , icon = FeatherIcons.mail + , link = "https://mail.google.com/mail/u/0" + } + ] diff --git a/src/Start/Model.elm b/src/Start/Model.elm index 360d66e..c2d3c5c 100644 --- a/src/Start/Model.elm +++ b/src/Start/Model.elm @@ -1,5 +1,13 @@ -module Start.Model exposing (Flags, Model, Msg) +module Start.Model exposing (Flags, Model, Msg, Tab) +import FeatherIcons type alias Flags = () type alias Model = () type alias Msg = () + +type alias Tab = + { name : String + , color : String + , icon : FeatherIcons.Icon + , link : String + } diff --git a/src/Start/View.elm b/src/Start/View.elm index f62b84b..3fc1e9b 100644 --- a/src/Start/View.elm +++ b/src/Start/View.elm @@ -1,6 +1,20 @@ module Start.View exposing (view) -import Start.Model exposing (Model, Msg) -import Html exposing (Html, text) +import Start.Model exposing (Model, Msg, Tab) +import Start.Custom exposing (tabs) +import Html exposing (Html, text, div, span, h1, a) +import Html.Attributes exposing (class, style, href) +import Html.Events exposing (onClick) +import FeatherIcons view : Model -> List (Html Msg) -view () = [ text "Hello, world!" ] +view () = + [ div [ class "tab-container" ] <| + h1 [] [ text "Welcome." ] :: List.map viewTab tabs + ] + +viewTab : Tab -> Html Msg +viewTab t = + a [ class "tab", style "border-color" t.color, href t.link ] + [ FeatherIcons.toHtml [] t.icon + , span [ class "tab-title" ] [ text t.name ] + ] diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..957fe91 --- /dev/null +++ b/style.scss @@ -0,0 +1,54 @@ +body { + background-image: url("background.jpg"); + background-size: cover; +} + +.tab-container { + display: flex; + height: 100%; + width: 100%; + margin: auto; + max-width: 800px; + align-content: center; + flex-wrap: wrap; +} + +a { + text-decoration: none; + color: inherit; +} + +h1 { + flex-grow: 1; + flex-basis: 100%; + color: white; + text-align: center; + text-shadow: 0px 0px 5px rgba(0, 0, 0, .45); + font-family: "Source Code Pro"; + text-transform: uppercase; + font-size: 2.5em; +} + +.tab { + font-family: "Source Code Pro"; + padding: 10px; + display: flex; + flex-grow: 1; + flex-basis: 25%; + align-items: center; + background-color: white; + border-bottom: 4px solid; + margin: 10px; + box-shadow: 0px 0 5px rgba(0, 0, 0, .25); + transition: box-shadow .25s; + + &:hover { + box-shadow: 0px 0 15px rgba(0, 0, 0, .45); + } + + .feather { + padding: 10px; + padding-left: 20px; + padding-right: 20px; + } +}