feat: standardized formatting conventions across pages

This commit is contained in:
Nick 2024-11-27 18:53:53 -06:00
parent f2c6f1ce26
commit d5e7cfe814
12 changed files with 831 additions and 536 deletions

View file

@ -3,6 +3,7 @@ module Config.Identity exposing (..)
type alias PageInput =
{ pageHome : String
, pageRoot : String
, pageContact : String
, pageDebate : String
, pageDodgers : String
@ -17,7 +18,8 @@ type alias PageInput =
pageNames : PageInput
pageNames =
{ pageHome = "home"
{ pageRoot = "home"
, pageHome = "upRootHealth"
, pagePlatforms = "platforms"
, pageServices = "services"
, pageDodgers = "cuckList"
@ -35,6 +37,11 @@ createPageName pageName =
pageNames.pageHome ++ " :: " ++ pageName
rootName : String
rootName =
createPageName pageNames.pageRoot
homeName : String
homeName =
createPageName pageNames.pageHome

View file

@ -16,207 +16,6 @@ import Shared
import View exposing (View)
makeDodge : Dodge -> Int -> Element msg
makeDodge dodgeEntry index =
let
formatProposition : String -> String
formatProposition proposition =
if proposition == "N/A" then
proposition
else
"\"" ++ proposition ++ "\""
maybeFallacyField : Element msg
maybeFallacyField =
case dodgeEntry.dodgeFallacy of
Nothing ->
none
Just fallacy ->
case fallacy of
SpecificFallacy str ->
if String.isEmpty str then
none
else
displayFallacy str
AppealToNature ->
displayFallacy "Appeal to Nature"
AppealToTradition ->
displayFallacy "Appeal to Tradition"
AppealToIgnorance ->
displayFallacy "Appeal to Ignorance"
AppealFromIncredulity ->
displayFallacy "Appeal from Incredulity"
RedHerring ->
displayFallacy "Red Herring"
BeggingTheQuestion ->
displayFallacy "Begging the Question"
Strawman ->
displayFallacy "Strawman"
Equivocation ->
displayFallacy "Equivocation"
GeneticFallacy ->
displayFallacy "Genetic Fallacy"
MotteAndBailey ->
displayFallacy "Motte and Bailey"
displayFallacy : String -> Element msg
displayFallacy fallacyText =
row paragraphBoldFormat
[ column [ alignTop, width (px 165) ]
[ text "Fallacy:"
|> el
[ paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 70
}
]
]
, column [ E.width fill, alignLeft ]
[ paragraph [ F.regular ]
[ text fallacyText ]
]
]
in
column
(paragraphAlignLeft
++ [ spacing 3
, width fill
]
)
[ row
(paragraphFormat
++ [ F.size 18
, paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, E.width fill
]
)
[ text " "
, text (String.fromInt index ++ ". ")
, paragraphLinkFormat
{ url = dodgeEntry.dodgeLink
, label =
row [ F.size 18 ]
[ transitionHighlightedLinkHover <|
text
(case dodgeEntry.dodgeDescription of
NoReply ->
"Debate invitation extended with no response"
RanAway ->
"Engaged in written debate and ran away when cornered"
GhostedMe ->
"Debate invitation accepted with no follow-up"
OutrightNo ->
"Debate invitation declined"
InTooDeep ->
"Debate invitation accepted and subsequently retracted"
KillScreen ->
"All further debate invitations preemptively declined"
VagueGesture ->
"Chose to gesture vaguely instead of engaging"
)
, text "." |> el [ F.color colourTheme.nonHighlightedText ]
, row [ alignTop, alignLeft ]
(List.indexedMap
(\index2 link ->
newTabLink
[ paddingEach { top = 0, right = 15, bottom = 0, left = 5 }, F.size 13 ]
{ url = link
, label =
row []
[ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
, text ", " |> el [ F.color colourTheme.nonHighlightedText ]
]
}
)
dodgeEntry.dodgeReceipts
)
]
}
]
, row paragraphBoldFormat
[ column [ alignTop, width <| px 165 ]
[ text "Proposition:" |> el [ paddingEach { top = 0, right = 15, bottom = 0, left = 70 } ]
]
, column [ E.width fill, alignLeft, paddingEach { top = 0, right = 15, bottom = 0, left = 0 } ]
[ paragraph [ F.regular ] [ text (formatProposition dodgeEntry.dodgeProposition) ]
]
]
, maybeFallacyField
, row (paragraphBoldFormat ++ [ width fill ])
[ column [ alignTop, width <| px 165 ]
[ text "Attitude:" |> el [ paddingEach { top = 0, right = 15, bottom = 0, left = 70 } ]
]
, column [ E.width fill, alignLeft, paddingEach { top = 0, right = 15, bottom = 0, left = 0 } ]
[ case dodgeEntry.dodgeNicksDoxasticState of
Nothing ->
paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
Just Belief ->
paragraph [ F.regular ]
[ text "I lean more toward "
, el [ F.bold ] (text "TRUE")
, text " than false."
]
Just Disbelief ->
paragraph [ F.regular ]
[ text "I lean more toward "
, text "FALSE" |> el [ F.bold ]
, text " than true."
]
Just Agnostic ->
el [ F.regular ] (text "I don't form beliefs about this proposition.")
]
]
, row (paragraphBoldFormat ++ [ width fill ])
[ column [ alignTop, width <| px 165 ]
[ text "Reason:" |> el [ paddingEach { top = 0, right = 0, bottom = 0, left = 70 } ]
]
, column [ E.width fill, alignLeft, paddingEach { top = 0, right = 15, bottom = 0, left = 0 } ]
[ paragraph [ F.regular ]
[ text <|
case dodgeEntry.dodgeNicksDoxasticReason of
NoProp ->
"There is no proposition to evaluate."
VagueProp ->
"The proposition is too vague to evaluate."
SpecificPropReason str ->
str
]
]
]
]
cuckMaker : Cuck -> Element msg
cuckMaker cuck =
row
@ -226,95 +25,382 @@ cuckMaker cuck =
, alignTop
, alignRight
]
[ column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
, description = cuck.cuckName
}
]
]
[ imageMaker cuck
, column
[ E.width <| px 600 ]
[ row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
, alignBottom
, width fill
, D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
-- , B.gradient
-- { angle = 1.5708
-- , steps =
-- [ colourTheme.highlightTextHover
-- , colourTheme.highlightTextHover
-- , colourTheme.transparent
-- , colourTheme.transparent
-- ]
-- }
]
)
[ text cuck.cuckName ]
[ E.width <| px 650 ]
[ cuckTitle cuck
, column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach { top = 10, bottom = 10, left = 10, right = 10 }
, D.roundEach { topLeft = 0, topRight = 0, bottomRight = 26, bottomLeft = 26 }
, spacing 3
-- , B.gradient
-- { angle = 1.5708
-- , steps =
-- [ colourTheme.cardBackground
-- , colourTheme.cardBackground
-- , colourTheme.transparent
-- , colourTheme.transparent
-- ]
-- }
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
, D.roundEach
{ topLeft = 0
, topRight = 0
, bottomRight = 26
, bottomLeft = 26
}
, spacing 8
]
[ row
(paragraphBoldFormat
++ [ F.size 18
, paddingEach { top = 0, bottom = 0, left = 15, right = 15 }
, spacing 5
]
)
[ text "Social:"
, paragraphLinkFormat
{ url = cuck.cuckSocial
, label = transitionHighlightedLinkHover <| text (formatCuckSocial cuck.cuckSocial)
[ column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, spacing 8
]
[ socialMaker cuck
, dodgeTitle cuck
, dodgeMaker cuck
]
, row
(paragraphBoldFormat
++ [ F.size 18
, paddingEach { top = 0, bottom = 0, left = 15, right = 15 }
]
)
[ text "Dodges:" ]
, column [ spacing 8, width fill ] <|
List.map2 (\x y -> makeDodge x y)
cuck.cuckDodges
(List.range 1 (List.length cuck.cuckDodges))
]
]
]
imageMaker : Cuck -> Element msg
imageMaker cuck =
column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
, description = cuck.cuckName
}
]
]
cuckTitle : Cuck -> Element msg
cuckTitle cuck =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
, alignBottom
, width fill
, D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
]
)
[ text cuck.cuckName ]
dodgeMaker : Cuck -> Element msg
dodgeMaker cuck =
column [ spacing 15, width fill ] <|
List.map2 (\x y -> makeDodge x y)
cuck.cuckDodges
(List.range 1 (List.length cuck.cuckDodges))
dodgeTitle : Cuck -> Element msg
dodgeTitle cuck =
row
(paragraphBoldFormat
++ [ F.size 18
]
)
[ text "Dodges:" ]
socialMaker : Cuck -> Element msg
socialMaker cuck =
row
(paragraphBoldFormat
++ [ F.size 18
, spacing 8
]
)
[ text "Social:"
, paragraphLinkFormat
{ url = cuck.cuckSocial
, label = transitionHighlightedLinkHover <| text (formatCuckSocial cuck.cuckSocial)
}
]
makeDodge : Dodge -> Int -> Element msg
makeDodge dodgeEntry index =
column
(paragraphAlignLeft
++ [ spacing 8
, width fill
]
)
[ row
[ width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 35
}
]
[ column
(paragraphFormat
++ [ F.size 18
, alignTop
, alignRight
, F.alignRight
]
)
[ text (String.fromInt index ++ ". ") ]
, column
[ spacing 8
, width fill
]
[ circumstanceMaker dodgeEntry
, column
[ spacing 8
, width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 35
}
]
[ propositionMaker dodgeEntry
, reductioMaker dodgeEntry
, attitudeMaker dodgeEntry
, reasonMaker dodgeEntry
]
]
]
]
dodgeWidth =
width <| px 93
formatProposition : String -> String
formatProposition proposition =
if proposition == "N/A" then
proposition
else
"\"" ++ proposition ++ "\""
dodgeCounter : Int -> Element msg
dodgeCounter index =
column
(paragraphFormat
++ [ F.size 18
]
)
[ text (String.fromInt index ++ ". ") ]
circumstanceMaker : Dodge -> Element msg
circumstanceMaker dodgeEntry =
column
[ width fill
]
[ paragraphLinkFormat
{ url = dodgeEntry.dodgeLink
, label =
row [ F.size 18 ]
[ transitionHighlightedLinkHover <|
text
(case dodgeEntry.dodgeDescription of
NoReply ->
"Debate invitation extended with no response"
RanAway ->
"Engaged in written debate and ran away when cornered"
GhostedMe ->
"Debate invitation accepted with no follow-up"
OutrightNo ->
"Debate invitation declined"
InTooDeep ->
"Debate invitation accepted and subsequently retracted"
KillScreen ->
"All further debate invitations preemptively declined"
VagueGesture ->
"Chose to gesture vaguely instead of engaging"
)
, text "." |> el [ F.color colourTheme.nonHighlightedText ]
, row [ alignTop, alignLeft ]
(List.indexedMap
(\index2 link ->
newTabLink
[ paddingEach
{ top = 0
, right = 15
, bottom = 0
, left = 5
}
, F.size 13
]
{ url = link
, label =
row []
[ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
, text ", " |> el [ F.color colourTheme.nonHighlightedText ]
]
}
)
dodgeEntry.dodgeReceipts
)
]
}
]
propositionMaker : Dodge -> Element msg
propositionMaker dodgeEntry =
row paragraphBoldFormat
[ column [ alignTop, dodgeWidth ]
[ text "Proposition:"
]
, column
[ E.width fill
, alignLeft
]
[ paragraph [ F.regular ] [ text (formatProposition dodgeEntry.dodgeProposition) ]
]
]
attitudeMaker : Dodge -> Element msg
attitudeMaker dodgeEntry =
row (paragraphBoldFormat ++ [ width fill ])
[ column [ alignTop, dodgeWidth ]
[ text "Attitude:"
]
, column [ E.width fill, alignLeft ]
[ case dodgeEntry.dodgeNicksDoxasticState of
Nothing ->
paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
Just Belief ->
paragraph [ F.regular ]
[ text "I lean more toward "
, el [ F.bold ] (text "TRUE")
, text " than false."
]
Just Disbelief ->
paragraph [ F.regular ]
[ text "I lean more toward "
, text "FALSE" |> el [ F.bold ]
, text " than true."
]
Just Agnostic ->
el [ F.regular ] (text "I don't form beliefs about this proposition.")
]
]
reductioMaker : Dodge -> Element msg
reductioMaker dodgeEntry =
case dodgeEntry.dodgeFallacy of
Nothing ->
none
Just fallacy ->
case fallacy of
SpecificFallacy str ->
if String.isEmpty str then
none
else
displayFallacy str
AppealToNature ->
displayFallacy "Appeal to Nature"
AppealToTradition ->
displayFallacy "Appeal to Tradition"
AppealToIgnorance ->
displayFallacy "Appeal to Ignorance"
AppealFromIncredulity ->
displayFallacy "Appeal from Incredulity"
RedHerring ->
displayFallacy "Red Herring"
BeggingTheQuestion ->
displayFallacy "Begging the Question"
Strawman ->
displayFallacy "Strawman"
Equivocation ->
displayFallacy "Equivocation"
GeneticFallacy ->
displayFallacy "Genetic Fallacy"
MotteAndBailey ->
displayFallacy "Motte and Bailey"
reasonMaker : Dodge -> Element msg
reasonMaker dodgeEntry =
row (paragraphBoldFormat ++ [ width fill ])
[ column [ alignTop, dodgeWidth ]
[ text "Reason:"
]
, column [ E.width fill, alignLeft ]
[ paragraph [ F.regular ]
[ text <|
case dodgeEntry.dodgeNicksDoxasticReason of
NoProp ->
"There is no proposition to evaluate."
VagueProp ->
"The proposition is too vague to evaluate."
SpecificPropReason str ->
str
]
]
]
displayFallacy : String -> Element msg
displayFallacy fallacyText =
row paragraphBoldFormat
[ column [ alignTop, dodgeWidth ]
[ text "Fallacy:"
]
, column [ E.width fill, alignLeft ]
[ paragraph [ F.regular ]
[ text fallacyText ]
]
]

View file

@ -27,37 +27,13 @@ argumentMaker argument =
, E.alignTop
, E.alignRight
]
[ column
[ E.width <| px 115
, E.height <| px 115
, E.alignTop
, E.alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
]
[ E.image
[ E.alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "arguments/" ++ argument.argumentImage ++ ".png"
, description = argument.argumentTitle
}
]
]
[ imageMaker argument
, column
[ E.width <| px 600
[ E.width <| px 650
, alignTop
]
[ column
[ B.color colourTheme.cardBackground
, htmlAttribute <| style "transition" "all .7s ease-in-out"
, rounded 26
]
[ titleMaker argument
@ -74,13 +50,42 @@ argumentMaker argument =
]
imageMaker : Argument -> Element msg
imageMaker argument =
column
[ E.width <| px 115
, E.height <| px 115
, E.alignTop
, E.alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ E.alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "arguments/" ++ argument.argumentImage ++ ".png"
, description = argument.argumentTitle
}
]
]
titleMaker : Argument -> Element msg
titleMaker argument =
paragraph
(paragraphBoldFormat
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach { top = 6, bottom = 3, left = 30, right = 30 }
, paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
, alignBottom
, E.width fill
, D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
@ -331,10 +336,9 @@ proofTreeMaker argument =
[ newTabLink
(paragraphBoldFormat
++ [ F.size 18
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, F.color colourTheme.nonHighlightedText
, B.color colourTheme.highlightTextHover
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 10
, E.width <| px 105
, F.center

View file

@ -17,75 +17,6 @@ import Shared
import View exposing (View)
makeSubject : Subjects -> Element msg
makeSubject subjects =
column [ E.width fill, alignLeft ]
[ paragraph [ F.regular ]
[ text (" " ++ subjects.subject) ]
]
makeAppearance : Appearance -> Int -> Element msg
makeAppearance appearanceEntry index =
column
(paragraphAlignLeft
++ [ spacing 3
, width fill
]
)
[ row
(paragraphFormat
++ [ F.size 18
, paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, E.width fill
]
)
[ text " "
, text (String.fromInt index ++ ". ")
, paragraphLinkFormat
{ url = appearanceEntry.appearanceLink
, label =
row
[ F.size 18
]
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|> el
[ F.color colourTheme.highlightText
, mouseOver [ F.color colourTheme.highlightTextHover ]
, transitionStyle
]
]
}
]
, row paragraphBoldFormat
[ column [ alignTop, width <| px 125 ]
[ text "Subjects:"
|> el
[ paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 55
}
]
]
, column
[ spacing 8
, width fill
]
<|
List.map2 (\x y -> makeSubject x)
appearanceEntry.appearanceSubjects
(List.range 1 (List.length appearanceEntry.appearanceSubjects))
]
]
interviewMaker : Interview -> Element msg
interviewMaker interview =
row
@ -95,67 +26,13 @@ interviewMaker interview =
, alignTop
, alignRight
]
[ column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "interviews/" ++ interview.interviewImage ++ ".png"
, description = interview.interviewImage
}
]
]
[ imageMaker interview
, column
[ E.width <| px 600 ]
[ row
(nonHighlightedTitleFormat
++ [ F.size 20
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, width fill
, B.color colourTheme.highlightTextHover
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
-- , B.gradient
-- { angle = 1.5708
-- , steps =
-- [ colourTheme.highlightTextHover
-- , colourTheme.highlightTextHover
-- , colourTheme.transparent
-- , colourTheme.transparent
-- ]
-- }
]
)
[ text interview.interviewName ]
[ E.width <| px 650 ]
[ nameMaker interview
, column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach
{ top = 10
@ -170,50 +47,209 @@ interviewMaker interview =
, bottomLeft = 26
}
, spacing 3
-- , B.gradient
-- { angle = 1.5708
-- , steps =
-- [ colourTheme.cardBackground
-- , colourTheme.cardBackground
-- , colourTheme.transparent
-- , colourTheme.transparent
-- ]
-- }
]
[ row
(paragraphBoldFormat
++ [ F.size 18
, paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, spacing 5
]
)
[ text "Social:"
, paragraphLinkFormat
{ url = interview.interviewSocial
, label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
[ column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
]
, row
(paragraphBoldFormat
++ [ F.size 18
, paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
]
)
[ text "Appearances:" ]
, column [ spacing 8, width fill ] <|
List.map2 (\x y -> makeAppearance x y)
interview.interviewAppearances
(List.range 1 (List.length interview.interviewAppearances))
[ column
[ spacing 8
]
[ socialMaker interview
, appearanceTitle interview
, appearanceMaker interview
]
]
]
]
]
imageMaker : Interview -> Element msg
imageMaker interview =
column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "interviews/" ++ interview.interviewImage ++ ".png"
, description = interview.interviewImage
}
]
]
nameMaker : Interview -> Element msg
nameMaker interview =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, width fill
, B.color colourTheme.highlightTextHover
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
]
)
[ text interview.interviewName ]
socialMaker : Interview -> Element msg
socialMaker interview =
row
(paragraphBoldFormat
++ [ F.size 18
, spacing 5
]
)
[ text "Social:"
, paragraphLinkFormat
{ url = interview.interviewSocial
, label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
}
]
appearanceTitle : Interview -> Element msg
appearanceTitle interview =
row
(paragraphBoldFormat
++ [ F.size 18
]
)
[ text "Appearances:" ]
appearanceMaker : Interview -> Element msg
appearanceMaker interview =
column [ spacing 15, width fill ] <|
List.map2 (\x y -> makeAppearance x y)
interview.interviewAppearances
(List.range 1 (List.length interview.interviewAppearances))
makeAppearance : Appearance -> Int -> Element msg
makeAppearance appearanceEntry index =
column
(paragraphAlignLeft
++ [ spacing 8
, width fill
]
)
[ appearanceEpisode appearanceEntry index
, subjectMaker appearanceEntry index
, subjectList appearanceEntry
]
appearanceEpisode : Appearance -> Int -> Element msg
appearanceEpisode appearanceEntry index =
row
(paragraphFormat
++ [ F.size 18
, E.width fill
, paddingEach
{ top = 0
, bottom = 0
, left = 35
, right = 0
}
]
)
[ text (String.fromInt index ++ ". ")
, paragraphLinkFormat
{ url = appearanceEntry.appearanceLink
, label =
row
[ F.size 18
]
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|> el
[ F.color colourTheme.highlightText
, mouseOver [ F.color colourTheme.highlightTextHover ]
, transitionStyle
]
]
}
]
subjectMaker : Appearance -> Int -> Element msg
subjectMaker appearanceEntry index =
row paragraphBoldFormat
[ column
[ alignTop
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 55
}
]
[ text "Subjects:"
]
]
subjectList : Appearance -> Element msg
subjectList appearanceEntry =
column
[ spacing 8
, width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 75
}
]
<|
List.map2 (\x y -> makeSubject x)
appearanceEntry.appearanceSubjects
(List.range 1 (List.length appearanceEntry.appearanceSubjects))
makeSubject : Subjects -> Element msg
makeSubject subjects =
column
[ E.width fill
, alignLeft
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 8
}
]
[ paragraph [ F.regular ]
[ text (" " ++ subjects.subject) ]
]

View file

@ -152,7 +152,7 @@ view { toContentMsg, model, content } =
]
<|
List.map buttonMaker
[ pageNames.pageHome
[ pageNames.pageRoot
, pageNames.pageServices
, pageNames.pageHyperBlog
, pageNames.pageDebate

View file

@ -4,6 +4,7 @@ import Config.Colour exposing (..)
import Config.Format exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
@ -18,24 +19,176 @@ import View exposing (View)
serviceMaker : Service -> Element msg
serviceMaker service =
row [ spacing 20 ]
[ column [ alignTop, alignRight, width <| px 100 ]
[ image
[ width <| px 100, alignTop, alignRight ]
{ src = "services/" ++ service.logoImage ++ ".png"
, description = service.logoDescription
}
]
, column [ width <| px 500, spacing 3 ]
[ row [ spacing 10 ]
[ newTabLink highlightedTitleFormat
{ url = service.servicesLink
, label =
transitionHighlightedLinkHover <|
text service.servicesTitle
row
[ spacing 20
, E.width fill
, E.height fill
, E.alignTop
, E.alignRight
]
[ imageMaker service
, column
[ E.width <| px 650 ]
[ titleMaker service
, column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
, paragraph [ F.color colourTheme.nonHighlightedText ] [ text service.servicesRate ]
, D.roundEach
{ topLeft = 0
, topRight = 0
, bottomRight = 26
, bottomLeft = 26
}
, spacing 3
]
[ column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, spacing 8
]
[ rateMaker service
, descriptionMaker service
, offeringMaker service
]
]
, paragraph paragraphFormat [ text service.servicesDescription ]
]
]
imageMaker : Service -> Element msg
imageMaker service =
column
[ E.width <| px 115
, E.height <| px 115
, E.alignTop
, E.alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ E.alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "services/" ++ service.serviceImage ++ ".png"
, description = service.serviceName
}
]
]
titleMaker : Service -> Element msg
titleMaker service =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, E.width fill
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
]
)
[ text service.serviceName
]
serviceWidth =
width <| px 80
rateMaker : Service -> Element msg
rateMaker service =
row
(paragraphBoldFormat
++ [ F.size 18
, E.width fill
]
)
[ column
[ alignTop
, serviceWidth
]
[ text "Rate:"
]
, column
[ E.width fill
, alignLeft
]
[ paragraph [ F.regular ]
[ el [ F.color colourTheme.highlightText ] <|
text service.serviceRate
]
]
]
descriptionMaker : Service -> Element msg
descriptionMaker service =
row paragraphBoldFormat
[ column
[ alignTop
, width <| px 80
]
[ text "Offerings:"
]
]
offeringMaker : Service -> Element msg
offeringMaker service =
column
[ spacing 8
, width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 35
}
]
<|
List.map2 (\x y -> makeDescription x)
service.serviceDescription
(List.range 1 (List.length service.serviceDescription))
makeDescription : Description -> Element msg
makeDescription description =
column
(paragraphAlignLeft
++ [ spacing 8
, width fill
]
)
[ paragraph [ F.regular ]
[ text (" " ++ description.point) ]
]

View file

@ -5,10 +5,11 @@ import Services.Types exposing (..)
servicesDebateAnalysis : Service
servicesDebateAnalysis =
{ logoImage = "analysis"
, logoDescription = "analysis logo"
, servicesLink = "https://the-nutrivore.social/"
, servicesTitle = "DEBATE ANALYSIS"
, servicesRate = "$80/hr"
, servicesDescription = "Participate in focused one-hour sessions wherein your own recorded debates are analyzed for constructive feedback and advice to help you improve as a debater. You may also participate in mock debates, staged debates, and other exercises to help you get more comfortable with debate and verbal confrontation."
{ serviceImage = "analysis"
, serviceLink = "https://the-nutrivore.social/"
, serviceName = "Debate Analysis"
, serviceRate = "$80/hr"
, serviceDescription =
[ { point = "Participate in focused one-hour sessions wherein your own recorded debates are analyzed for constructive feedback and advice to help you improve as a debater. You may also participate in mock debates, staged debates, and other exercises to help you get more comfortable with debate and verbal confrontation." }
]
}

View file

@ -5,10 +5,11 @@ import Services.Types exposing (..)
servicesDebateTutoring : Service
servicesDebateTutoring =
{ logoImage = "debate"
, logoDescription = "debate logo"
, servicesLink = "https://the-nutrivore.social/"
, servicesTitle = "DEBATE COACHING"
, servicesRate = "$60/hr"
, servicesDescription = "Participate in a structured course consisting of five one-hour modules, covering critical thinking, debate strategy, propositional logic, and more. Throughout the course you will receive both personalized and generalizable advice on how to improve your debate performance and critical thinking skills."
{ serviceImage = "debate"
, serviceLink = "https://the-nutrivore.social/"
, serviceName = "Debate Coaching"
, serviceRate = "$60/hr"
, serviceDescription =
[ { point = "Participate in a structured course consisting of five one-hour modules, covering critical thinking, debate strategy, propositional logic, and more. Throughout the course you will receive both personalized and generalizable advice on how to improve your debate performance and critical thinking skills." }
]
}

View file

@ -5,10 +5,11 @@ import Services.Types exposing (..)
servicesNutritionScience : Service
servicesNutritionScience =
{ logoImage = "nutrition"
, logoDescription = "nutrition logo"
, servicesLink = "https://the-nutrivore.social/"
, servicesTitle = "NUTRITION SCIENCE"
, servicesRate = "$50/hr"
, servicesDescription = "Participate in a one-hour Q&A session specifically to inquire about nutrition science. Ask questions about research design, methodology, epistemology, and study interpretation. Also, by participating you will also gain access to nutrition science interpretation cheat-sheets that will streamline and simplify the research appraisal process."
{ serviceImage = "nutrition"
, serviceLink = "https://the-nutrivore.social/"
, serviceName = "Nutrition Science"
, serviceRate = "$50/hr"
, serviceDescription =
[ { point = "Participate in a one-hour Q&A session specifically to inquire about nutrition science. Ask questions about research design, methodology, epistemology, and study interpretation. Also, by participating you will also gain access to nutrition science interpretation cheat-sheets that will streamline and simplify the research appraisal process." }
]
}

View file

@ -6,10 +6,11 @@ import Services.Types exposing (..)
servicesElmBuilds : Service
servicesElmBuilds =
{ logoImage = "elm"
, logoDescription = "elm logo"
, servicesLink = ""
, servicesTitle = "CUSTOM ELM SITES"
, servicesRate = "$20/hr"
, servicesDescription = "The site you're looking at right now was designed and written by me in Elm, using Elm-Land and Elm-UI. Elm is a purely functional programming language that compiles to JavaScript. It can also handle HTML and CSS in a purely functional paradigm, resulting in highly reproducible sites that require minimal maintenance."
{ serviceImage = "elm"
, serviceLink = ""
, serviceName = "Custom Elm Sites"
, serviceRate = "$20/hr"
, serviceDescription =
[ { point = "The site you're looking at right now was designed and written by me in Elm, using Elm-Land and Elm-UI. Elm is a purely functional programming language that compiles to JavaScript. It can also handle HTML and CSS in a purely functional paradigm, resulting in highly reproducible sites that require minimal maintenance." }
]
}

View file

@ -5,10 +5,11 @@ import Services.Types exposing (..)
servicesNixBuilds : Service
servicesNixBuilds =
{ logoImage = "nixos"
, logoDescription = "nixos logo"
, servicesLink = "https://the-nutrivore.social/"
, servicesTitle = "CUSTOM NIX CONFIGS"
, servicesRate = "$40/hr"
, servicesDescription = "NixOS has gained popularity in my community, with many switching from Windows, macOS, and other Linux distros. As a result, I often get requests for help with NixOS and the Nix programming language. To streamline the process and make things easier for both of us, I'm offering custom NixOS configurations for clients."
{ serviceImage = "nixos"
, serviceLink = "https://the-nutrivore.social/"
, serviceName = "Custom Nix Configs"
, serviceRate = "$40/hr"
, serviceDescription =
[ { point = "NixOS has gained popularity in my community, with many switching from Windows, macOS, and other Linux distros. As a result, I often get requests for help with NixOS and the Nix programming language. To streamline the process and make things easier for both of us, I'm offering custom NixOS configurations for clients." }
]
}

View file

@ -2,10 +2,14 @@ module Services.Types exposing (..)
type alias Service =
{ logoImage : String
, logoDescription : String
, servicesLink : String
, servicesTitle : String
, servicesRate : String
, servicesDescription : String
{ serviceImage : String
, serviceLink : String
, serviceName : String
, serviceRate : String
, serviceDescription : List Description
}
type alias Description =
{ point : String
}