feat: changed colour names to be more intuitive

This commit is contained in:
Nick 2024-11-28 00:58:24 -06:00
parent ed73a38cbe
commit 6019079212
10 changed files with 65 additions and 65 deletions

View file

@ -30,7 +30,7 @@ cardMaker =
column
[ E.width <| px 650
, D.width 5
, D.color colourTheme.cardBackground
, D.color colourTheme.backgroundDarkGrey
, D.roundEach
{ topLeft = 32
, topRight = 32
@ -45,7 +45,7 @@ cardFormatter =
column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, B.color colourTheme.backgroundDarkGrey
, paddingEach
{ top = 10
, bottom = 10
@ -87,8 +87,8 @@ cardImageMaker image =
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
, D.color colourTheme.backgroundDarkGrey
, B.color colourTheme.backgroundDarkGrey
]
[ E.image
[ alignRight
@ -108,7 +108,7 @@ cardTitleMaker title =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, B.color colourTheme.textDarkOrange
, paddingEach
{ top = 6
, bottom = 3

View file

@ -7,13 +7,13 @@ import Html.Attributes as H exposing (style)
type alias Theme =
{ nonHighlightedText : Color
, nonHighlightedDarkText : Color
, highlightText : Color
, highlightTextHover : Color
, backgroundColour : Color
{ textLightGrey : Color
, textDarkGrey : Color
, textLightOrange : Color
, textDarkOrange : Color
, backgroundLightGrey : Color
, debugColour : Color
, cardBackground : Color
, backgroundDarkGrey : Color
, barGreen : Color
, barRed : Color
, transparent : Color
@ -22,13 +22,13 @@ type alias Theme =
colourTheme : Theme
colourTheme =
{ nonHighlightedText = rgb255 212 212 212
, nonHighlightedDarkText = rgb255 126 126 126
, highlightText = rgb255 204 102 0
, highlightTextHover = rgb255 120 60 0
, backgroundColour = rgb255 40 40 40
{ textLightGrey = rgb255 212 212 212
, textDarkGrey = rgb255 126 126 126
, textLightOrange = rgb255 204 102 0
, textDarkOrange = rgb255 120 60 0
, backgroundLightGrey = rgb255 40 40 40
, debugColour = rgb255 227 28 121
, cardBackground = rgb255 30 30 30
, backgroundDarkGrey = rgb255 30 30 30
, barGreen = rgb255 0 102 0
, barRed = rgb255 102 0 0
, transparent = rgba 1 1 1 0

View file

@ -14,7 +14,7 @@ topLevelContainer =
el
[ E.width fill
, height fill
, B.color colourTheme.backgroundColour
, B.color colourTheme.backgroundLightGrey
]
@ -35,7 +35,7 @@ transitionStyle =
transitionHighlightedLinkHover : Element msg -> Element msg
transitionHighlightedLinkHover =
el
[ mouseOver [ F.color colourTheme.highlightTextHover ]
[ mouseOver [ F.color colourTheme.textDarkOrange ]
, transitionStyle
]
@ -43,7 +43,7 @@ transitionHighlightedLinkHover =
transitionNonHighlightedLinkHover : Element msg -> Element msg
transitionNonHighlightedLinkHover =
el
[ mouseOver [ F.color colourTheme.highlightText ]
[ mouseOver [ F.color colourTheme.textLightOrange ]
, transitionStyle
]
@ -57,7 +57,7 @@ transitionNonHighlightedLinkHoverWithMove content =
(el
[ centerX
, centerY
, mouseOver [ F.color colourTheme.highlightText, F.size 25 ]
, mouseOver [ F.color colourTheme.textLightOrange, F.size 25 ]
, transitionStyle
]
content
@ -84,14 +84,14 @@ titleFormat =
nonHighlightedTitleFormat : List (Attr () msg)
nonHighlightedTitleFormat =
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
]
++ titleFormat
highlightedTitleFormat : List (Attr () msg)
highlightedTitleFormat =
[ F.color colourTheme.highlightText
[ F.color colourTheme.textLightOrange
]
++ titleFormat
@ -105,7 +105,7 @@ paragraphLinkFormat : { url : String, label : Element msg } -> Element msg
paragraphLinkFormat =
newTabLink
[ paragraphFontSize
, F.color colourTheme.highlightText
, F.color colourTheme.textLightOrange
]
@ -116,7 +116,7 @@ paragraphSpacing =
paragraphText : List (Attr () msg)
paragraphText =
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
]
@ -124,7 +124,7 @@ paragraphText =
paragraphHightlightedBoldText : List (Attr () msg)
paragraphHightlightedBoldText =
[ F.color colourTheme.highlightText
[ F.color colourTheme.textLightOrange
, F.bold
, paragraphSpacing
, paragraphFontSize

View file

@ -23,7 +23,7 @@ barMaker getTooltip num =
([ E.height <| px 12
, E.width fill
, D.rounded 10
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
, D.width 2
, B.gradient
{ angle = 90

View file

@ -27,10 +27,10 @@ tooltip content =
, F.size 15
, F.center
, F.regular
, B.color colourTheme.backgroundColour
, F.color colourTheme.nonHighlightedText
, B.color colourTheme.backgroundLightGrey
, F.color colourTheme.textLightGrey
, padding 15
, D.color colourTheme.highlightText
, D.color colourTheme.textLightOrange
, D.rounded 5
, D.width 2
, D.shadow

View file

@ -195,7 +195,7 @@ circumstanceMaker dodgeEntry =
VagueGesture ->
"Chose to gesture vaguely instead of engaging"
)
, text "." |> el [ F.color colourTheme.nonHighlightedText ]
, text "." |> el [ F.color colourTheme.textLightGrey ]
, row [ alignTop, alignLeft ]
(List.indexedMap
(\index2 link ->
@ -212,7 +212,7 @@ circumstanceMaker dodgeEntry =
, label =
row []
[ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
, text ", " |> el [ F.color colourTheme.nonHighlightedText ]
, text ", " |> el [ F.color colourTheme.textLightGrey ]
]
}
)

View file

@ -70,7 +70,7 @@ propositionMaker argument =
"A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate."
]
(text "Proposition:")
|> el [ F.color colourTheme.highlightText ]
|> el [ F.color colourTheme.textLightOrange ]
]
]
, column
@ -78,7 +78,7 @@ propositionMaker argument =
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ])
[ text argument.propositionTitle
|> el
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
, F.regular
, F.size 16
]
@ -115,7 +115,7 @@ reductioMaker argument =
"This is the position from which the reductio ad absurdum is derived."
]
(text "Reductio:")
|> el [ F.color colourTheme.highlightText ]
|> el [ F.color colourTheme.textLightOrange ]
]
]
, column [ E.width fill, E.alignLeft ]
@ -148,7 +148,7 @@ summaryMaker argument =
"The following information provides additional context and insight into the reasoning behind the argument."
]
(text "Summary:")
|> el [ F.color colourTheme.highlightText ]
|> el [ F.color colourTheme.textLightOrange ]
]
]
, column
@ -163,7 +163,7 @@ summaryMaker argument =
)
[ text argument.propositionSummary
|> el
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
, F.regular
, F.size 16
]
@ -190,7 +190,7 @@ strengthMaker argument =
"This represents my confidence in the soundness of the argument."
]
(text "Confidence:")
|> el [ F.color colourTheme.highlightText ]
|> el [ F.color colourTheme.textLightOrange ]
]
]
, column
@ -259,7 +259,7 @@ tableMaker argument =
[ spacing 0
, D.rounded 10
, D.width 2
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
, clip
]
{ data = argument.definitionTable
@ -273,17 +273,17 @@ tableMaker argument =
, left = 1
, right = 1
}
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
, padding 8
, E.width fill
]
(text "Definiendum")
|> el [ F.color colourTheme.highlightText ]
|> el [ F.color colourTheme.textLightOrange ]
, width = fill |> maximum 50
, view =
\definition ->
row
[ F.color colourTheme.highlightText
[ F.color colourTheme.textLightOrange
, F.bold
, D.widthEach
{ bottom = 1
@ -291,7 +291,7 @@ tableMaker argument =
, left = 1
, right = 1
}
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
, padding 8
, E.height fill
]
@ -309,17 +309,17 @@ tableMaker argument =
, left = 0
, right = 1
}
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
, padding 8
, E.width fill
]
(text "Definiens")
|> el [ F.color colourTheme.highlightText ]
|> el [ F.color colourTheme.textLightOrange ]
, width = fill
, view =
\definition ->
paragraph
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
, F.regular
, D.widthEach
{ bottom = 1
@ -327,7 +327,7 @@ tableMaker argument =
, left = 0
, right = 1
}
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
, padding 8
, E.height fill
]
@ -376,7 +376,7 @@ formalizationMaker argument =
[ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
, text premiseWithNotation.premise
|> el
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
, F.regular
, paddingEach
{ top = 0
@ -388,7 +388,7 @@ formalizationMaker argument =
]
, paragraph argumentFormatting
[ text ("(" ++ premiseWithNotation.notation ++ ")")
|> el [ F.color colourTheme.highlightText, F.bold ]
|> el [ F.color colourTheme.textLightOrange, F.bold ]
]
]
)
@ -398,7 +398,7 @@ formalizationMaker argument =
[ text "C)"
, text argumentEntry.conclusion
|> el
[ F.color colourTheme.nonHighlightedText
[ F.color colourTheme.textLightGrey
, F.regular
, paddingEach
{ top = 0
@ -411,7 +411,7 @@ formalizationMaker argument =
, paragraph argumentFormatting
[ text ("(" ++ argumentEntry.conclusionNotation ++ ")")
|> el
[ F.color colourTheme.highlightText
[ F.color colourTheme.textLightOrange
, F.bold
]
]
@ -438,8 +438,8 @@ proofTreeMaker argument =
[ newTabLink
(paragraphBoldFormat
++ [ F.size 18
, F.color colourTheme.nonHighlightedText
, B.color colourTheme.highlightTextHover
, F.color colourTheme.textLightGrey
, B.color colourTheme.textDarkOrange
, paddingEach
{ top = 6
, bottom = 2
@ -452,9 +452,9 @@ proofTreeMaker argument =
, E.alignRight
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
[ B.color colourTheme.textDarkOrange
, F.color colourTheme.textLightGrey
, D.color colourTheme.textDarkOrange
]
]
)

View file

@ -142,8 +142,8 @@ episodeMaker appearanceEntry =
]
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|> el
[ F.color colourTheme.highlightText
, mouseOver [ F.color colourTheme.highlightTextHover ]
[ F.color colourTheme.textLightOrange
, mouseOver [ F.color colourTheme.textDarkOrange ]
, transitionStyle
]
]

View file

@ -81,7 +81,7 @@ view { toContentMsg, model, content } =
row
[ E.width fill
, height fill
, B.color colourTheme.cardBackground
, B.color colourTheme.backgroundDarkGrey
]
[ column
[ htmlAttribute (H.style "position" "fixed")
@ -91,12 +91,12 @@ view { toContentMsg, model, content } =
, 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
, D.color colourTheme.textDarkOrange
]
[ column
[ alignLeft
, height fill
, F.color colourTheme.nonHighlightedText
, F.color colourTheme.textLightGrey
]
[ column
[ centerX
@ -138,7 +138,7 @@ view { toContentMsg, model, content } =
, left = 0
, right = 0
}
, D.color colourTheme.nonHighlightedDarkText
, D.color colourTheme.textDarkGrey
]
none
]
@ -146,7 +146,7 @@ view { toContentMsg, model, content } =
[ padding 20, alignTop, alignLeft ]
[ column
[ F.bold
, F.color colourTheme.nonHighlightedText
, F.color colourTheme.textLightGrey
, F.size 17
, spacing 8
]
@ -249,7 +249,7 @@ buttonMaker name =
{ url = localhostUrl ++ String.toLower name
, label =
el
[ mouseOver [ F.color colourTheme.highlightText ]
[ mouseOver [ F.color colourTheme.textLightOrange ]
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
]
<|

View file

@ -76,7 +76,7 @@ rateMaker service =
, alignLeft
]
[ paragraph [ F.regular ]
[ el [ F.color colourTheme.highlightText ] <|
[ el [ F.color colourTheme.textLightOrange ] <|
text service.serviceRate
]
]