mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: crushed it like I crushed your mom
This commit is contained in:
Nick
parent
27b69e5d33
commit
7d22f82b12
30 changed files with 500 additions and 288 deletions
|
|
@ -4,8 +4,9 @@ import Config.Colour as T exposing (..)
|
|||
import Config.Format as O exposing (..)
|
||||
import Config.Identity as I exposing (..)
|
||||
import Effect exposing (Effect)
|
||||
import Element exposing (..)
|
||||
import Element.Background as B
|
||||
import Element as E exposing (..)
|
||||
import Element.Background as B exposing (..)
|
||||
import Element.Border as D exposing (..)
|
||||
import Element.Font as F
|
||||
import Element.Region exposing (description)
|
||||
import Html exposing (Html)
|
||||
|
|
@ -77,51 +78,413 @@ view { toContentMsg, model, content } =
|
|||
{ title = content.title
|
||||
, attributes = [ F.family [ spartanFont ] ]
|
||||
, element =
|
||||
let
|
||||
localhostUrl =
|
||||
"http://localhost:1234/"
|
||||
in
|
||||
row
|
||||
[ width fill
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, B.color colourTheme.backgroundColour
|
||||
, B.color colourTheme.cardBackground
|
||||
]
|
||||
[ column
|
||||
[ width <| px 200
|
||||
, alignLeft
|
||||
, alignTop
|
||||
, paddingEach { top = 20, bottom = 0, left = 10, right = 0 }
|
||||
, htmlAttribute (H.style "position" "fixed")
|
||||
[ htmlAttribute (H.style "position" "fixed")
|
||||
, htmlAttribute (H.style "left" "0")
|
||||
, htmlAttribute (H.style "top" "0")
|
||||
, htmlAttribute (H.style "height" "100vh")
|
||||
, htmlAttribute (H.style "z-index" "10") -- Ensure navbar stays on top
|
||||
, htmlAttribute (H.style "transform-style" "preserve-3d")
|
||||
, D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
|
||||
, D.color colourTheme.highlightTextHover
|
||||
]
|
||||
[ column
|
||||
[ spacing 10
|
||||
, centerX
|
||||
[ alignLeft
|
||||
, height fill
|
||||
, F.color colourTheme.nonHighlightedText
|
||||
]
|
||||
[ image [ spacing 2, width <| px 80, centerX ] { src = "navbar/nutrivorelogo.png", description = "" }
|
||||
, link nonHighlightedTitleFormat { url = localhostUrl ++ pageNames.pageHome, label = transitionNonHighlightedLinkHover <| text "THE NUTRIVORE" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "platforms", label = transitionNonHighlightedLinkHoverWithMove <| text "PLATFORMS" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "services", label = transitionNonHighlightedLinkHoverWithMove <| text "SERVICES" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "arguments", label = transitionNonHighlightedLinkHoverWithMove <| text "ARGUMENTS" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "blog", label = transitionNonHighlightedLinkHoverWithMove <| text "BLOG" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "nutridex", label = transitionNonHighlightedLinkHoverWithMove <| text "NUTRI-DEX" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "support", label = transitionNonHighlightedLinkHoverWithMove <| text "SUPPORT" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "interviews", label = transitionNonHighlightedLinkHoverWithMove <| text "INTERVIEWS" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "contact", label = transitionNonHighlightedLinkHoverWithMove <| text "CONTACT" }
|
||||
, link navBarLinkFormat { url = localhostUrl ++ "dodgers", label = transitionNonHighlightedLinkHoverWithMove <| text "DODGERS" }
|
||||
[ column
|
||||
[ centerX
|
||||
, E.width <| px 200
|
||||
]
|
||||
[ row
|
||||
(nonHighlightedTitleFormat
|
||||
++ [ centerX
|
||||
, spacing 10
|
||||
, padding 20
|
||||
]
|
||||
)
|
||||
[ E.image
|
||||
[ spacing 2
|
||||
, E.width <| px 80
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/nutrivorelogo.png"
|
||||
, description = ""
|
||||
}
|
||||
, column []
|
||||
[ link [ centerX ]
|
||||
{ url = localhostUrl ++ pageNames.pageHome
|
||||
, label = text "upRoot"
|
||||
}
|
||||
, link [ centerX ]
|
||||
{ url = localhostUrl ++ pageNames.pageHome
|
||||
, label = text "Health"
|
||||
}
|
||||
]
|
||||
]
|
||||
, el
|
||||
[ E.width <| px 140
|
||||
, alignTop
|
||||
, centerX
|
||||
, D.widthEach
|
||||
{ bottom = 1
|
||||
, top = 0
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
, D.color colourTheme.nonHighlightedDarkText
|
||||
]
|
||||
none
|
||||
]
|
||||
, column
|
||||
[ padding 20, alignTop, alignLeft ]
|
||||
[ column
|
||||
[ F.bold
|
||||
, F.color colourTheme.nonHighlightedText
|
||||
, F.size 17
|
||||
, spacing 8
|
||||
]
|
||||
[ homeButton
|
||||
, servicesButton
|
||||
, hyperbolgButton
|
||||
, argumentsButton
|
||||
, cucklistButton
|
||||
, communityButton
|
||||
, nutridexButton
|
||||
, donateButton
|
||||
, interviewButton
|
||||
, contactButton
|
||||
]
|
||||
]
|
||||
]
|
||||
, row
|
||||
[ alignBottom
|
||||
, E.width fill
|
||||
, E.height <| px 100
|
||||
]
|
||||
[ row
|
||||
[ centerX
|
||||
, centerY
|
||||
, E.width fill
|
||||
, E.height fill
|
||||
, spacing 10
|
||||
, paddingEach { top = 40, bottom = 10, left = 20, right = 20 }
|
||||
]
|
||||
[ E.image
|
||||
[ E.width <| px 30
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/gitlab-light.png"
|
||||
, description = ""
|
||||
}
|
||||
, E.image
|
||||
[ E.width <| px 30
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/twitter-light.png"
|
||||
, description = ""
|
||||
}
|
||||
, E.image
|
||||
[ E.width <| px 30
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/mastodon-light.png"
|
||||
, description = ""
|
||||
}
|
||||
, E.image
|
||||
[ E.width <| px 33
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/discord-light.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
]
|
||||
]
|
||||
, el
|
||||
[ width fill
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, paddingEach { top = 0, right = 0, bottom = 0, left = 200 }
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 200
|
||||
}
|
||||
]
|
||||
content.element
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
localhostUrl =
|
||||
"http://localhost:1234/"
|
||||
|
||||
|
||||
linkFormat =
|
||||
el
|
||||
[ mouseOver [ F.color colourTheme.highlightText ]
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
]
|
||||
|
||||
|
||||
iconDistance =
|
||||
E.width <| px 36
|
||||
|
||||
|
||||
homeButton : Element msg
|
||||
homeButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/home.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "home"
|
||||
, label = linkFormat <| text "HOME"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
servicesButton : Element msg
|
||||
servicesButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/services.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "services"
|
||||
, label = linkFormat <| text "SERVICES"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
hyperbolgButton : Element msg
|
||||
hyperbolgButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/hyperblog2.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "hyperblog"
|
||||
, label = linkFormat <| text "HYPERBLOG"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
argumentsButton : Element msg
|
||||
argumentsButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/arguments.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "arguments"
|
||||
, label = linkFormat <| text "ARGUMENTS"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
cucklistButton : Element msg
|
||||
cucklistButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/cucklist.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "cucklist"
|
||||
, label = linkFormat <| text "CUCKLIST"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
communityButton : Element msg
|
||||
communityButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/community.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "community"
|
||||
, label = linkFormat <| text "COMMUNITY"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
nutridexButton : Element msg
|
||||
nutridexButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/nutridex.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "nutridex"
|
||||
, label = linkFormat <| text "NUTRIDEX"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
donateButton : Element msg
|
||||
donateButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/donate.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "donate"
|
||||
, label = linkFormat <| text "DONATE"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
interviewButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/interviews.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "interviews"
|
||||
, label = linkFormat <| text "INTERVIEWS"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
contactButton : Element msg
|
||||
contactButton =
|
||||
row
|
||||
[]
|
||||
[ column [ iconDistance ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/contact.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = localhostUrl ++ "contact"
|
||||
, label = linkFormat <| text "CONTACT"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue