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

frontend/src/Config/Format.elm

@@ -14,19 +14,11 @@ topLevelContainer =
     el
         [ E.width fill
         , height fill
+        , centerX
         , B.color colourTheme.backgroundLightGrey
         ]
 
 
-pageList : List (Attribute msg)
-pageList =
-    [ spacing 30
-    , centerX
-    , alignTop
-    , paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
-    ]
-
-
 transitionStyle : Attribute msg
 transitionStyle =
     htmlAttribute <| style "transition" "all 0.3s ease-in-out"
@@ -143,20 +135,15 @@ paragraphBoldFormat =
         ++ paragraphText
 
 
-paragraphWidth : Attribute msg
-paragraphWidth =
-    E.width <| px 700
-
-
 paragraphAlignLeft : List (Attr () msg)
 paragraphAlignLeft =
-    [ alignLeft, paragraphWidth ]
+    [ alignLeft ]
         ++ paragraphText
 
 
 paragraphAlignCenter : List (Attr () msg)
 paragraphAlignCenter =
-    [ centerX, paragraphWidth ]
+    [ centerX ]
         ++ paragraphText
 
 

frontend/src/Config/Response.elm

@@ -0,0 +1,21 @@
+module Config.Response exposing (..)
+
+import Config.Colour exposing (..)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D exposing (..)
+import Element.Font as F
+import Html exposing (col)
+import Html.Attributes as H exposing (style)
+
+
+pageListDesktop : List (Attribute msg)
+pageListDesktop =
+    [ spacing 30
+    , centerX
+    , alignTop
+    , height fill
+    , paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
+    , E.width (fill |> minimum 100)
+    , E.width (fill |> maximum 875)
+    ]