feat: added glow

This commit is contained in:
Nick 2024-12-09 03:06:20 -06:00
parent 0d662c56eb
commit 6867defd0a
19 changed files with 156 additions and 51 deletions

View file

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

View file

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

View file

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