mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 20:35:13 -05:00
feat: added glow
This commit is contained in:
parent
0d662c56eb
commit
6867defd0a
19 changed files with 156 additions and 51 deletions
|
@ -38,6 +38,7 @@ cardMaker =
|
|||
, centerX
|
||||
, D.color colourTheme.backgroundDarkGrey
|
||||
, D.rounded 32
|
||||
, glow
|
||||
]
|
||||
|
||||
|
||||
|
@ -89,8 +90,8 @@ cardContentSpacing =
|
|||
]
|
||||
|
||||
|
||||
cardImageMaker : { src : String, description : String } -> Element msg
|
||||
cardImageMaker image =
|
||||
cardImageMaker : { src : String, description : String } -> String -> Element msg
|
||||
cardImageMaker image url =
|
||||
column
|
||||
[ E.width <| px 115
|
||||
, E.height <| px 115
|
||||
|
@ -100,26 +101,31 @@ cardImageMaker image =
|
|||
[ column
|
||||
[ D.rounded 100
|
||||
, D.width 5
|
||||
, glow
|
||||
, D.color colourTheme.backgroundDarkGrey
|
||||
, B.color colourTheme.backgroundDarkGrey
|
||||
, mouseOver [ D.color colourTheme.textDarkOrange ]
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
, mouseOver [ D.color colourTheme.textDarkOrange, glowHighlight ]
|
||||
, htmlAttribute <| style "transition" "all 0.3s ease-in-out"
|
||||
]
|
||||
[ E.image
|
||||
[ alignRight
|
||||
, alignTop
|
||||
, D.rounded 100
|
||||
, clip
|
||||
, E.width <| px 90
|
||||
, E.height <| px 90
|
||||
]
|
||||
image
|
||||
[ newTabLink []
|
||||
{ url = url
|
||||
, label =
|
||||
E.image
|
||||
[ alignRight
|
||||
, alignTop
|
||||
, D.rounded 100
|
||||
, clip
|
||||
, E.width <| px 90
|
||||
, E.height <| px 90
|
||||
]
|
||||
image
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
cardImageMakerMobile : { src : String, description : String } -> Element msg
|
||||
cardImageMakerMobile image =
|
||||
cardImageMakerMobile : { src : String, description : String } -> String -> Element msg
|
||||
cardImageMakerMobile image url =
|
||||
column
|
||||
[ alignTop
|
||||
, centerX
|
||||
|
@ -141,14 +147,18 @@ cardImageMakerMobile image =
|
|||
, mouseOver [ D.color colourTheme.textDarkOrange ]
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
]
|
||||
[ E.image
|
||||
[ D.rounded 100
|
||||
, clip
|
||||
, centerX
|
||||
, E.width <| px 45
|
||||
, E.height <| px 45
|
||||
]
|
||||
image
|
||||
[ newTabLink []
|
||||
{ url = url
|
||||
, label =
|
||||
E.image
|
||||
[ D.rounded 100
|
||||
, clip
|
||||
, centerX
|
||||
, E.width <| px 45
|
||||
, E.height <| px 45
|
||||
]
|
||||
image
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
|
|
@ -13,10 +13,11 @@ type alias Theme =
|
|||
, textDarkOrange : Color
|
||||
, textDeepDarkOrange : Color
|
||||
, backgroundLightGrey : Color
|
||||
, debugColour : Color
|
||||
, backgroundDarkGrey : Color
|
||||
, backgroundDeepDarkGrey : Color
|
||||
, barGreen : Color
|
||||
, barRed : Color
|
||||
, debugColour : Color
|
||||
, transparent : Color
|
||||
}
|
||||
|
||||
|
@ -29,9 +30,10 @@ colourTheme =
|
|||
, textDarkOrange = rgb255 120 60 0
|
||||
, textDeepDarkOrange = rgb255 60 30 0
|
||||
, backgroundLightGrey = rgb255 40 40 40
|
||||
, debugColour = rgb255 227 28 121
|
||||
, backgroundDarkGrey = rgb255 30 30 30
|
||||
, backgroundDeepDarkGrey = rgb255 20 20 20
|
||||
, barGreen = rgb255 0 102 0
|
||||
, barRed = rgb255 102 0 0
|
||||
, debugColour = rgb255 227 28 121
|
||||
, transparent = rgba 1 1 1 0
|
||||
}
|
||||
|
|
|
@ -169,3 +169,13 @@ formatName name =
|
|||
|> String.replace "'" ""
|
||||
|> String.replace "." ""
|
||||
|> String.replace "-" ""
|
||||
|
||||
|
||||
glow : Attr decorative msg
|
||||
glow =
|
||||
D.glow colourTheme.backgroundDeepDarkGrey 8
|
||||
|
||||
|
||||
glowHighlight : Attr decorative msg
|
||||
glowHighlight =
|
||||
D.glow colourTheme.textDeepDarkOrange 5
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue