feat: standardized formatting conventions across pages

frontend/src/Config/Format.elm

@@ -169,14 +169,19 @@ myTooltip str =
         , D.rounded 5
         , D.width 2
         , F.center
+        , clip
         , E.width <| px 300
         , D.color colourTheme.highlightText
         , F.size 15
         , D.shadow
             { offset = ( 0, 3 ), blur = 6, size = 0, color = rgba 0 0 0 0.32 }
+        , E.htmlAttribute (H.style "position" "fixed")
+        , E.htmlAttribute (H.style "z-index" "9999")
+        , F.color colourTheme.nonHighlightedText
+        , F.regular
+        , F.size 14
         ]
         (text str)
-        |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 14 ]
 
 
 tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg

frontend/src/Cuckery/Helpers.elm

@@ -119,12 +119,6 @@ makeDodge dodgeEntry index =
                 , column
                     [ spacing 8
                     , width fill
-                    , paddingEach
-                        { top = 0
-                        , right = 0
-                        , bottom = 0
-                        , left = 35
-                        }
                     ]
                     [ propositionMaker dodgeEntry
                     , reductioMaker dodgeEntry

frontend/src/Interviews/Helpers.elm

@@ -96,43 +96,39 @@ makeAppearance appearanceEntry index =
                , width fill
                ]
         )
-        [ appearanceEpisode appearanceEntry index
+        [ row
-        , experienceMaker appearanceEntry
+            [ width fill
-        , dateMaker appearanceEntry
+            , paddingEach
-        , subjectMaker appearanceEntry
+                { top = 0
-        , subjectList appearanceEntry
+                , right = 0
-        ]
+                , bottom = 0
-
+                , left = 35
-
+                }
-appearanceEpisode : Appearance -> Int -> Element msg
+            ]
-appearanceEpisode appearanceEntry index =
+            [ column
-    row
+                (paragraphFormat
-        (paragraphFormat
+                    ++ [ F.size 18
-            ++ [ F.size 18
+                       , alignTop
-               , E.width fill
+                       , alignRight
-               , paddingEach
+                       , F.alignRight
-                    { top = 0
+                       ]
-                    , bottom = 0
+                )
-                    , left = 35
+                [ text (String.fromInt index ++ ". ") ]
-                    , right = 0
+            , column
-                    }
+                [ spacing 8
-               ]
+                , width fill
-        )
+                ]
-        [ text (String.fromInt index ++ ". ")
+                [ column
-        , paragraphLinkFormat
+                    [ spacing 8
-            { url = appearanceEntry.appearanceLink
+                    , width fill
-            , label =
-                row
-                    [ F.size 18
                     ]
-                    [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
+                    [ experienceMaker appearanceEntry
-                        |> el
+                    , dateMaker appearanceEntry
-                            [ F.color colourTheme.highlightText
+                    , subjectMaker appearanceEntry
-                            , mouseOver [ F.color colourTheme.highlightTextHover ]
+                    , subjectList appearanceEntry
-                            , transitionStyle
-                            ]
                     ]
-            }
+                ]
+            ]
         ]
 
 
@@ -141,12 +137,6 @@ experienceMaker appearanceEntry =
     row
         [ width fill
         , height fill
-        , paddingEach
-            { top = 0
-            , bottom = 0
-            , left = 55
-            , right = 0
-            }
         ]
         [ column
             [ E.alignTop, E.alignLeft ]
@@ -154,7 +144,7 @@ experienceMaker appearanceEntry =
                 [ el [ tooltip below (myTooltip "This represents how pleasant it was to interact with the host(s).") ] (text "Pleasantness:") ]
             ]
         , column
-            [ E.width fill, E.alignLeft, centerY, height fill ]
+            [ E.width fill, E.alignLeft ]
             [ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
         ]
 
@@ -204,12 +194,6 @@ dateMaker appearanceEntry =
     row paragraphBoldFormat
         [ column
             [ alignTop
-            , paddingEach
-                { top = 0
-                , right = 0
-                , bottom = 0
-                , left = 55
-                }
             ]
             [ text "Published:"
             ]
@@ -236,12 +220,6 @@ subjectMaker appearanceEntry =
     row paragraphBoldFormat
         [ column
             [ alignTop
-            , paddingEach
-                { top = 0
-                , right = 0
-                , bottom = 0
-                , left = 55
-                }
             ]
             [ text "Subjects:"
             ]
@@ -257,7 +235,7 @@ subjectList appearanceEntry =
             { top = 0
             , right = 0
             , bottom = 0
-            , left = 75
+            , left = 25
             }
         ]
     <|