feat: started working on responsiveness

frontend/src/Config/CardFormat.elm

@@ -17,19 +17,25 @@ import View exposing (View)
 
 
 topLevelBox =
-    [ spacing 20
-    , E.width fill
+    [ E.width fill
     , E.height fill
     , E.alignTop
     , E.alignRight
+    , paddingEach
+        { top = 10
+        , bottom = 10
+        , left = 10
+        , right = 10
+        }
     ]
 
 
 cardMaker : List (Element msg) -> Element msg
 cardMaker =
     column
-        [ E.width <| px 650
+        [ E.width fill
         , D.width 5
+        , centerX
         , D.color colourTheme.backgroundDarkGrey
         , D.rounded 32
         ]
@@ -40,6 +46,7 @@ cardFormatter =
     column
         [ E.height fill
         , E.width fill
+        , centerX
         , B.color colourTheme.backgroundDarkGrey
         , paddingEach
             { top = 10
@@ -57,6 +64,17 @@ cardFormatter =
         ]
 
 
+cardSubTitleMaker : List (Element msg) -> Element msg
+cardSubTitleMaker =
+    paragraph
+        (paragraphFormat
+            ++ [ F.size 18
+               , centerX
+               , F.center
+               ]
+        )
+
+
 cardContentSpacing : List (Element msg) -> Element msg
 cardContentSpacing =
     column
@@ -100,9 +118,44 @@ cardImageMaker image =
         ]
 
 
+cardImageMakerMobile : { src : String, description : String } -> Element msg
+cardImageMakerMobile image =
+    column
+        [ alignTop
+        , centerX
+        , alignLeft
+        , paddingEach
+            { top = 0
+            , bottom = 10
+            , left = 0
+            , right = 0
+            }
+        ]
+        [ column
+            [ D.rounded 100
+            , D.width 5
+            , centerX
+            , alignBottom
+            , D.color colourTheme.backgroundLightGrey
+            , B.color colourTheme.backgroundLightGrey
+            , mouseOver [ D.color colourTheme.textDarkOrange ]
+            , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
+            ]
+            [ E.image
+                [ D.rounded 100
+                , clip
+                , centerX
+                , E.width <| px 45
+                , E.height <| px 45
+                ]
+                image
+            ]
+        ]
+
+
 cardTitleMaker : String -> Element msg
 cardTitleMaker title =
-    row
+    paragraph
         (nonHighlightedTitleFormat
             ++ [ F.size 20
                , B.color colourTheme.textDarkOrange
@@ -114,6 +167,8 @@ cardTitleMaker title =
                     }
                , alignBottom
                , width fill
+               , centerX
+               , F.center
                , D.roundEach
                     { topLeft = 26
                     , topRight = 26