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

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