Styles

Style.elm

module Components.Navbar.Style exposing (..)

import Css exposing (..)
import Css.Elements exposing (..)
import Css.Namespace exposing (namespace)
import Html.CssHelpers exposing (withNamespace)

type CssIds
  = NavbarContainer
  | Header

navbarNamespace: Html.CssHelpers.Namespace String a b c
navbarNamespace =
  withNamespace "navbar"

css : Stylesheet
css =
  (stylesheet << namespace navbarNamespace.name)
  [ (#) Header
    [
      backgroundColor (rgb 255 255 255),
      fontWeight (int 400),
      fontFamilies ["Roboto","Verdana","Arial", .value sansSerif],
      fontSize (px 14)
    ]
  , (#) NavbarContainer
    [
      backgroundColor (rgb 255 255 255),
      children
      [
        a [
          paddingLeft (px 5),
          display block,
          textDecoration none,
          backgroundColor transparent
        ],
        img [
          marginTop (px 5),
          height (px 40),
          maxWidth (px 100),
          border (px 0)
        ]
      ]
    ]

  ]

StyleSheet.elm

port module Stylesheets exposing (..)
import Css.File exposing (..)
import Components.Navbar.Style as Style
import Html exposing (div)
import Html.App as Html

port files : CssFileStructure -> Cmd msg

cssFiles : CssFileStructure
cssFiles =
  toFileStructure [ ( "navbar.css", compile Style.css )]

main : Program Never
main =
  Html.program
  { init = ( (), files cssFiles)
  , view = \_ -> (div [] [] )
  , update = \_ _ -> ( (), Cmd.none )
  , subscriptions = \_ -> Sub.none
  }

View.elm

module Components.Navbar.View exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)

-- Css
import Components.Navbar.Style exposing (..)

{ id, class, classList } = navbarNamespace


navbar : Html a
navbar =
  header [id Header] [
    div [ id NavbarContainer] [
      a [ href "http://mozio.com"] [
        img [ src "https://static.mozio.com/assets/logo.png", alt "Mozio Inc."] []
      ]
    ]
    ,nav [] [
      ul [] [
        li [] [
          text ("SIGN IN")
        ],
        li [] [
          text "REGISTER"
        ]
      ]
    ]
  ]