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 , centerX
, D.color colourTheme.backgroundDarkGrey , D.color colourTheme.backgroundDarkGrey
, D.rounded 32 , D.rounded 32
, glow
] ]
@ -89,8 +90,8 @@ cardContentSpacing =
] ]
cardImageMaker : { src : String, description : String } -> Element msg cardImageMaker : { src : String, description : String } -> String -> Element msg
cardImageMaker image = cardImageMaker image url =
column column
[ E.width <| px 115 [ E.width <| px 115
, E.height <| px 115 , E.height <| px 115
@ -100,26 +101,31 @@ cardImageMaker image =
[ column [ column
[ D.rounded 100 [ D.rounded 100
, D.width 5 , D.width 5
, glow
, D.color colourTheme.backgroundDarkGrey , D.color colourTheme.backgroundDarkGrey
, B.color colourTheme.backgroundDarkGrey , B.color colourTheme.backgroundDarkGrey
, mouseOver [ D.color colourTheme.textDarkOrange ] , mouseOver [ D.color colourTheme.textDarkOrange, glowHighlight ]
, htmlAttribute <| style "transition" "all 0.1s ease-in-out" , htmlAttribute <| style "transition" "all 0.3s ease-in-out"
] ]
[ E.image [ newTabLink []
[ alignRight { url = url
, alignTop , label =
, D.rounded 100 E.image
, clip [ alignRight
, E.width <| px 90 , alignTop
, E.height <| px 90 , D.rounded 100
] , clip
image , E.width <| px 90
, E.height <| px 90
]
image
}
] ]
] ]
cardImageMakerMobile : { src : String, description : String } -> Element msg cardImageMakerMobile : { src : String, description : String } -> String -> Element msg
cardImageMakerMobile image = cardImageMakerMobile image url =
column column
[ alignTop [ alignTop
, centerX , centerX
@ -141,14 +147,18 @@ cardImageMakerMobile image =
, mouseOver [ D.color colourTheme.textDarkOrange ] , mouseOver [ D.color colourTheme.textDarkOrange ]
, htmlAttribute <| style "transition" "all 0.1s ease-in-out" , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
] ]
[ E.image [ newTabLink []
[ D.rounded 100 { url = url
, clip , label =
, centerX E.image
, E.width <| px 45 [ D.rounded 100
, E.height <| px 45 , clip
] , centerX
image , E.width <| px 45
, E.height <| px 45
]
image
}
] ]
] ]

View file

@ -13,10 +13,11 @@ type alias Theme =
, textDarkOrange : Color , textDarkOrange : Color
, textDeepDarkOrange : Color , textDeepDarkOrange : Color
, backgroundLightGrey : Color , backgroundLightGrey : Color
, debugColour : Color
, backgroundDarkGrey : Color , backgroundDarkGrey : Color
, backgroundDeepDarkGrey : Color
, barGreen : Color , barGreen : Color
, barRed : Color , barRed : Color
, debugColour : Color
, transparent : Color , transparent : Color
} }
@ -29,9 +30,10 @@ colourTheme =
, textDarkOrange = rgb255 120 60 0 , textDarkOrange = rgb255 120 60 0
, textDeepDarkOrange = rgb255 60 30 0 , textDeepDarkOrange = rgb255 60 30 0
, backgroundLightGrey = rgb255 40 40 40 , backgroundLightGrey = rgb255 40 40 40
, debugColour = rgb255 227 28 121
, backgroundDarkGrey = rgb255 30 30 30 , backgroundDarkGrey = rgb255 30 30 30
, backgroundDeepDarkGrey = rgb255 20 20 20
, barGreen = rgb255 0 102 0 , barGreen = rgb255 0 102 0
, barRed = rgb255 102 0 0 , barRed = rgb255 102 0 0
, debugColour = rgb255 227 28 121
, transparent = rgba 1 1 1 0 , transparent = rgba 1 1 1 0
} }

View file

@ -169,3 +169,13 @@ formatName name =
|> String.replace "'" "" |> String.replace "'" ""
|> String.replace "." "" |> 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

View file

@ -76,7 +76,7 @@ argumentMaker : Argument -> Element msg
argumentMaker argument = argumentMaker argument =
row row
topLevelBox topLevelBox
[ cardImageMaker (argumentImage argument) [ cardImageMaker (argumentImage argument) ""
, cardMaker , cardMaker
[ cardTitleMaker argument.argumentTitle [ cardTitleMaker argument.argumentTitle
, cardFormatter , cardFormatter
@ -108,7 +108,7 @@ argumentMakerMobile argument =
[ cardContentSpacing [ cardContentSpacing
[ column [ column
fieldSpacer fieldSpacer
[ cardImageMakerMobile (argumentImage argument) [ cardImageMakerMobile (argumentImage argument) ""
, propositionMakerMobile argument , propositionMakerMobile argument
, reductioMakerMobile argument , reductioMakerMobile argument
, summaryMakerMobile argument , summaryMakerMobile argument
@ -706,6 +706,7 @@ proofTreeMaker argument =
, F.center , F.center
, E.alignRight , E.alignRight
, transitionStyle , transitionStyle
, O.glow
, mouseOver , mouseOver
[ B.color colourTheme.textDeepDarkOrange [ B.color colourTheme.textDeepDarkOrange
, F.color colourTheme.textDarkGrey , F.color colourTheme.textDarkGrey

View file

@ -87,7 +87,7 @@ cuckMaker : Cuck -> Element msg
cuckMaker cuck = cuckMaker cuck =
row row
topLevelBox topLevelBox
[ cardImageMaker (cuckImage cuck) [ cardImageMaker (cuckImage cuck) (cuckSocial cuck)
, cardMaker , cardMaker
[ cardTitleMaker (cuckTitle cuck) [ cardTitleMaker (cuckTitle cuck)
, cardFormatter , cardFormatter
@ -121,7 +121,7 @@ cuckMakerMobile cuck =
, alignLeft , alignLeft
, spacing 3 , spacing 3
] ]
[ cardImageMakerMobile (cuckImage cuck) [ cardImageMakerMobile (cuckImage cuck) (cuckSocial cuck)
, socialMaker cuck , socialMaker cuck
, dodgeTitle cuck , dodgeTitle cuck
, dodgeMaker cuck , dodgeMaker cuck
@ -150,6 +150,11 @@ cuckTitle cuck =
cuck.cuckName cuck.cuckName
cuckSocial : Cuck -> String
cuckSocial cuck =
cuck.cuckSocial
dodgeMaker : Cuck -> Element msg dodgeMaker : Cuck -> Element msg
dodgeMaker cuck = dodgeMaker cuck =
column column

View file

@ -35,7 +35,7 @@ gibberishMaker : Gibberish -> Element msg
gibberishMaker gibberish = gibberishMaker gibberish =
row row
topLevelBox topLevelBox
[ cardImageMaker (gibberishImage gibberish) [ cardImageMaker (gibberishImage gibberish) ""
, cardMaker , cardMaker
[ cardTitleMaker (gibberishTitle gibberish) [ cardTitleMaker (gibberishTitle gibberish)
, cardFormatter , cardFormatter
@ -72,7 +72,7 @@ gibberishMakerMobile gibberish =
, F.center , F.center
] ]
) )
[ cardImageMakerMobile (gibberishImage gibberish) [ cardImageMakerMobile (gibberishImage gibberish) ""
, mobileDomainList gibberish , mobileDomainList gibberish
] ]
] ]
@ -82,6 +82,7 @@ gibberishMakerMobile gibberish =
] ]
gibberishImage : Gibberish -> { src : String, description : String } gibberishImage : Gibberish -> { src : String, description : String }
gibberishImage gibberish = gibberishImage gibberish =
{ src = "gibberish/" ++ gibberish.gibberishImage ++ ".png" { src = "gibberish/" ++ gibberish.gibberishImage ++ ".png"
@ -140,7 +141,7 @@ desktopMakeTerms terms index =
] ]
[ paragraph [ paragraph
[] []
[ text (String.fromInt index ++ ". ") ] [ text <| String.fromInt index ++ ". " ]
] ]
, column , column
[ E.width fill [ E.width fill
@ -154,7 +155,12 @@ desktopMakeTerms terms index =
[ paragraph [ paragraph
[] []
[ el [ F.color colourTheme.textLightOrange ] <| [ el [ F.color colourTheme.textLightOrange ] <|
text terms.term text <|
String.toLower
("\""
++ terms.term
++ "\""
)
] ]
, desktopBar terms , desktopBar terms
, paragraph , paragraph
@ -213,7 +219,10 @@ mobileMakeTerms terms index =
[ paragraph [ paragraph
[] []
[ el [ F.color colourTheme.textLightOrange ] <| [ el [ F.color colourTheme.textLightOrange ] <|
text terms.term text <|
String.toLower "\""
++ terms.term
++ "\""
] ]
, mobileBar terms , mobileBar terms
, paragraph , paragraph

View file

@ -30,7 +30,7 @@ donateMaker : Donate -> Element msg
donateMaker donate = donateMaker donate =
row row
topLevelBox topLevelBox
[ cardImageMaker (donateImage donate) [ cardImageMaker (donateImage donate) (donateLink donate)
, cardMaker , cardMaker
[ cardTitleMaker (donateTitle donate) [ cardTitleMaker (donateTitle donate)
, cardFormatter , cardFormatter
@ -63,6 +63,7 @@ donateMakerMobile donate =
[ column [ column
fieldSpacer fieldSpacer
[ cardImageMakerMobile (donateImage donate) [ cardImageMakerMobile (donateImage donate)
(donateLink donate)
, feeMaker donate , feeMaker donate
, preferenceMaker donate , preferenceMaker donate
, tableMakerMobile donate , tableMakerMobile donate
@ -94,6 +95,11 @@ donateTitle donate =
donate.donateName donate.donateName
donateLink : Donate -> String
donateLink donate =
donate.donateLink
donateWidth = donateWidth =
width <| px 45 width <| px 45

View file

@ -11,7 +11,7 @@ donateKoFi =
"Ko-Fi" "Ko-Fi"
in in
{ donateImage = formatName name { donateImage = formatName name
, donateLink = "https://ko-fi.com/thenutrivore" , donateLink = "https://ko-fi.com/uprootnutrition"
, donateName = name , donateName = name
, donateFees = "5%" , donateFees = "5%"
, donatePreference = 5 , donatePreference = 5

View file

@ -11,9 +11,9 @@ donatePatreon =
"Patreon" "Patreon"
in in
{ donateImage = formatName name { donateImage = formatName name
, donateLink = "https://www.patreon.com/thenutrivore" , donateLink = "https://www.patreon.com/c/upRootNutrition"
, donateName = name , donateName = name
, donateFees = "5%" , donateFees = "8%"
, donatePreference = 6 , donatePreference = 6
, donateFeatures = , donateFeatures =
[ { free = Just False [ { free = Just False

View file

@ -0,0 +1,46 @@
module Donate.Methods.Stripe exposing (..)
import Donate.Types exposing (..)
donateStripe : Donate
donateStripe =
let
name : String
name =
"Stripe"
in
{ donateImage = formatName name
, donateLink = "https://donate.stripe.com/aEUaFT3Vd9ta1oI144"
, donateName = name
, donateFees = "3%"
, donatePreference = 8
, donateFeatures =
[ { free = Just False
, subscriptions = Just True
, openSource = Just False
, fastPayments = Just True
, userFriendly = Just True
, anonymous = Just True
, rewardTiers = Just False
}
]
, donatePros =
[ { pro = "Widely used and recognized globally."
}
, { pro = "Lower 3% transaction fee."
}
, { pro = "Offers buyer and seller protections."
}
, { pro = "Easy to use for one-time donations."
}
, { pro = "Familiar to most internet users."
}
]
, donateCons =
[ { con = "Can have complicated international transaction rules."
}
, { con = "Potential account limitations or freezes."
}
]
}

View file

@ -11,7 +11,7 @@ donateYouTube =
"YouTube" "YouTube"
in in
{ donateImage = formatName name { donateImage = formatName name
, donateLink = "https://www.youtube.com/@TheNutrivore/membership" , donateLink = "https://www.youtube.com/@upRootNutrition/membership"
, donateName = name , donateName = name
, donateFees = "45%" , donateFees = "45%"
, donatePreference = 3 , donatePreference = 3

View file

@ -36,6 +36,7 @@ headerMaker header =
, bottomRight = 32 , bottomRight = 32
, bottomLeft = 32 , bottomLeft = 32
} }
, glow
] ]
[ paragraph [ paragraph
(nonHighlightedTitleFormat (nonHighlightedTitleFormat

View file

@ -38,6 +38,7 @@ homePage image =
, left = 20 , left = 20
, right = 20 , right = 20
} }
, O.glow
, B.color colourTheme.backgroundDarkGrey , B.color colourTheme.backgroundDarkGrey
, rounded 10 , rounded 10
, E.width fill , E.width fill

View file

@ -23,7 +23,7 @@ interviewMaker : Interview -> Element msg
interviewMaker interview = interviewMaker interview =
row row
topLevelBox topLevelBox
[ cardImageMaker (interviewImage interview) [ cardImageMaker (interviewImage interview) (interviewSocial interview)
, cardMaker , cardMaker
[ cardTitleMaker (interviewTitle interview) [ cardTitleMaker (interviewTitle interview)
, cardFormatter , cardFormatter
@ -51,7 +51,7 @@ interviewMakerMobile interview =
[ cardContentSpacing [ cardContentSpacing
[ column [ column
fieldSpacer fieldSpacer
[ cardImageMakerMobile (interviewImage interview) [ cardImageMakerMobile (interviewImage interview) (interviewSocial interview)
, socialMaker interview , socialMaker interview
, appearanceTitle interview , appearanceTitle interview
, appearanceMaker interview , appearanceMaker interview
@ -74,6 +74,11 @@ interviewTitle interview =
interview.interviewName interview.interviewName
interviewSocial : Interview -> String
interviewSocial interview =
interview.interviewSocial
socialMaker : Interview -> Element msg socialMaker : Interview -> Element msg
socialMaker interview = socialMaker interview =
paragraph paragraph

View file

@ -115,6 +115,7 @@ navbarContainer device content =
, D.widthEach { top = 0, bottom = 0, left = 0, right = 3 } , D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
, D.color colourTheme.textDarkOrange , D.color colourTheme.textDarkOrange
, B.color colourTheme.backgroundDarkGrey , B.color colourTheme.backgroundDarkGrey
, O.glow
] ]
(case ( device.class, device.orientation ) of (case ( device.class, device.orientation ) of
( Phone, Portrait ) -> ( Phone, Portrait ) ->
@ -353,7 +354,7 @@ desktopButtonMaker name icon =
, column , column
[ mouseOver [ F.color colourTheme.textLightOrange ] [ mouseOver [ F.color colourTheme.textLightOrange ]
, F.color colourTheme.textLightGrey , F.color colourTheme.textLightGrey
, htmlAttribute <| style "transition" "all 0.1s ease-in-out" , htmlAttribute <| style "transition" "all 0.2s ease-in-out"
, alignBottom , alignBottom
] ]
[ text (String.toUpper name) [ text (String.toUpper name)

View file

@ -13,6 +13,7 @@ import Donate.Methods.LiberaPay exposing (donateLiberaPay)
import Donate.Methods.Merch exposing (donateMerch) import Donate.Methods.Merch exposing (donateMerch)
import Donate.Methods.Patreon exposing (donatePatreon) import Donate.Methods.Patreon exposing (donatePatreon)
import Donate.Methods.PayPal exposing (donatePayPal) import Donate.Methods.PayPal exposing (donatePayPal)
import Donate.Methods.Stripe exposing (donateStripe)
import Donate.Methods.YouTube exposing (donateYouTube) import Donate.Methods.YouTube exposing (donateYouTube)
import Donate.Types exposing (..) import Donate.Types exposing (..)
import Effect exposing (Effect) import Effect exposing (Effect)
@ -129,7 +130,7 @@ donateList device =
List.map donateMaker List.map donateMaker
) )
[ donateLiberaPay [ donateLiberaPay
, donatePayPal , donateStripe
, donatePatreon , donatePatreon
, donateCardano , donateCardano
, donateKoFi , donateKoFi

View file

@ -1,5 +1,6 @@
module Services.Helpers exposing (..) module Services.Helpers exposing (..)
import Browser
import Config.CardFormat exposing (..) import Config.CardFormat exposing (..)
import Config.Colour exposing (..) import Config.Colour exposing (..)
import Config.Format exposing (..) import Config.Format exposing (..)
@ -8,7 +9,8 @@ import Element as E exposing (..)
import Element.Background as B exposing (..) import Element.Background as B exposing (..)
import Element.Border as D import Element.Border as D
import Element.Font as F import Element.Font as F
import Html.Attributes as H exposing (style) import Html exposing (Html, a, text)
import Html.Attributes as H exposing (href, style)
import Layouts import Layouts
import Page exposing (Page) import Page exposing (Page)
import Route exposing (Route) import Route exposing (Route)
@ -21,7 +23,7 @@ serviceMaker : Service -> Element msg
serviceMaker service = serviceMaker service =
row row
topLevelBox topLevelBox
[ cardImageMaker (serviceImage service) [ cardImageMaker (serviceImage service) ""
, cardMaker , cardMaker
[ cardTitleMaker (serviceTitle service) [ cardTitleMaker (serviceTitle service)
, cardFormatter , cardFormatter
@ -49,7 +51,7 @@ serviceMakerMobile service =
[ cardContentSpacing [ cardContentSpacing
[ column [ column
fieldSpacer fieldSpacer
[ cardImageMakerMobile (serviceImage service) [ cardImageMakerMobile (serviceImage service) ""
, rateMaker service , rateMaker service
, descriptionMaker service , descriptionMaker service
, offeringMaker service , offeringMaker service
@ -60,6 +62,11 @@ serviceMakerMobile service =
] ]
emailLink : List (Html msg) -> Html msg
emailLink =
a [ href "mailto:nick@upRootNutrition.com?subject=Hello&body=%20" ]
serviceImage : Service -> { src : String, description : String } serviceImage : Service -> { src : String, description : String }
serviceImage service = serviceImage service =
{ src = "services/" ++ service.serviceImage ++ ".png" { src = "services/" ++ service.serviceImage ++ ".png"
@ -88,7 +95,7 @@ rateMaker service =
[ alignTop [ alignTop
, serviceWidth , serviceWidth
] ]
[ text "Rate:" [ E.text "Rate:"
] ]
, column , column
[ E.width fill [ E.width fill
@ -96,7 +103,7 @@ rateMaker service =
] ]
[ paragraph [ F.regular ] [ paragraph [ F.regular ]
[ el [ F.color colourTheme.textLightOrange ] <| [ el [ F.color colourTheme.textLightOrange ] <|
text service.serviceRate E.text service.serviceRate
] ]
] ]
] ]
@ -109,7 +116,7 @@ descriptionMaker service =
[ alignTop [ alignTop
, width <| px 80 , width <| px 80
] ]
[ text "Offerings:" [ E.text "Offerings:"
] ]
] ]
@ -141,5 +148,5 @@ makeDescription description =
] ]
) )
[ paragraph [ F.regular ] [ paragraph [ F.regular ]
[ text (" " ++ description.point) ] [ E.text (" " ++ description.point) ]
] ]

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB