DanilaFe/Start
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement initial version of start page.

Browse Source
This commit is contained in:
Danila Fedorin 2019-06-22 18:03:12 -07:00
parent 5b0e9df4f9
commit 73ba3ad627
6 changed files with 158 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
elm.json
View File

@ -8,10 +8,12 @@
"direct": { "direct": {
"elm/browser": "1.0.1", "elm/browser": "1.0.1",
"elm/core": "1.0.2", "elm/core": "1.0.2",
"elm/html": "1.0.0" "elm/html": "1.0.0",
"feathericons/elm-feather": "1.3.0"
}, },
"indirect": { "indirect": {
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/svg": "1.0.1",
"elm/time": "1.0.0", "elm/time": "1.0.0",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2" "elm/virtual-dom": "1.0.2"

14
index.html Normal file
View File

@ -0,0 +1,14 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="elm.js"></script>
</head>
<body>
<div id="elm">
</div>
<script>
var elmDiv = document.getElementById("elm");
var app = Elm.Main.init(elmDiv)
</script>
</body>
</html>

61
src/Start/Custom.elm Normal file
View File

@ -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"
}
]

10
src/Start/Model.elm
View File

@ -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 Flags = ()
type alias Model = () type alias Model = ()
type alias Msg = () type alias Msg = ()
type alias Tab =
{ name : String
, color : String
, icon : FeatherIcons.Icon
, link : String
}

20
src/Start/View.elm
View File

@ -1,6 +1,20 @@
module Start.View exposing (view) module Start.View exposing (view)
import Start.Model exposing (Model, Msg) import Start.Model exposing (Model, Msg, Tab)
import Html exposing (Html, text) 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 : 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 ]
]

54
style.scss Normal file
View File

@ -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;
}
}