feat: lots of work

frontend/src/Layouts/Navbar.elm

@@ -116,16 +116,16 @@ navbarContainer device content =
             ]
             (case ( device.class, device.orientation ) of
                 ( Phone, Portrait ) ->
-                    [ mobileNavbar, mobileFooterIcons ]
+                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
 
                 ( Phone, Landscape ) ->
-                    [ mobileNavbar, mobileFooterIcons ]
+                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
 
                 ( Tablet, Portrait ) ->
-                    [ mobileNavbar, mobileFooterIcons ]
+                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
 
                 _ ->
-                    [ desktopNavbar, desktopFooterIcons ]
+                    [ desktopIconMaker, desktopNavbar, desktopFooterIcons ]
             )
         , el
             [ E.width fill
@@ -171,8 +171,34 @@ desktopNavbar =
         [ alignLeft
         , height fill
         , F.color colourTheme.textLightGrey
+        , scrollbarY
         ]
         [ column
+            [ padding 20, alignTop, alignLeft ]
+            [ column
+                [ F.bold
+                , F.color colourTheme.textLightGrey
+                , F.size 17
+                , spacing 8
+                ]
+                (desktopHomeButtonMaker
+                    :: List.map desktopPagesButtonMaker
+                        [ pageNames.pageServices
+                        , pageNames.pageHyperBlog
+                        , pageNames.pageDebate
+                        , pageNames.pageNutriDex
+                        , pageNames.pageInterviews
+                        , pageNames.pageDonate
+                        , pageNames.pageContact
+                        ]
+                )
+            ]
+        ]
+
+
+desktopIconMaker : Element msg
+desktopIconMaker =
+    column
         [ centerX
         , E.width <| px desktopBarWidth
         ]
@@ -210,38 +236,11 @@ desktopNavbar =
             ]
             none
         ]
-        , column
-            [ padding 20, alignTop, alignLeft ]
-            [ column
-                [ F.bold
-                , F.color colourTheme.textLightGrey
-                , F.size 17
-                , spacing 8
-                ]
-                (desktopHomeButtonMaker
-                    :: List.map desktopPagesButtonMaker
-                        [ pageNames.pageServices
-                        , pageNames.pageHyperBlog
-                        , pageNames.pageDebate
-                        , pageNames.pageNutriDex
-                        , pageNames.pageInterviews
-                        , pageNames.pageDonate
-                        , pageNames.pageContact
-                        ]
-                )
-            ]
-        ]
 
 
-mobileNavbar : Element msg
-mobileNavbar =
+mobileIconMaker : Element msg
+mobileIconMaker =
     column
-        [ height fill
-        , E.width fill
-        , F.color colourTheme.textLightGrey
-        , scrollbarY
-        ]
-        [ column
         [ centerX
         , E.width <| px mobileBarWidth
         ]
@@ -279,7 +278,17 @@ mobileNavbar =
             ]
             none
         ]
-        , column
+
+
+mobileNavbar : Element msg
+mobileNavbar =
+    column
+        [ height fill
+        , E.width fill
+        , F.color colourTheme.textLightGrey
+        , scrollbarY
+        ]
+        [ column
             [ padding 5
             , centerY
             , centerX
@@ -406,9 +415,22 @@ mobilePagesButtonMaker name =
 
 desktopFooterIcons : Element msg
 desktopFooterIcons =
-    row
+    column
+        [ E.width <| px 140
+        , alignTop
+        , centerX
+        , D.widthEach
+            { bottom = 0
+            , top = 1
+            , left = 0
+            , right = 0
+            }
+        , D.color colourTheme.textDarkGrey
+        ]
+        [ row
             [ alignBottom
             , E.width fill
+            , centerX
             ]
             [ row
                 [ centerX
@@ -417,13 +439,12 @@ desktopFooterIcons =
                 , E.height fill
                 , spacing 20
                 , paddingEach
-                { top = 10
+                    { top = 25
                     , bottom = 10
                     , left = 0
                     , right = 0
                     }
                 ]
-            -- Use the list of social media details here
                 (List.map
                     footerImageMaker
                     [ gitlabDetails
@@ -433,11 +454,24 @@ desktopFooterIcons =
                     ]
                 )
             ]
+        ]
 
 
 mobileFooterIcons : Element msg
 mobileFooterIcons =
     column
+        [ E.width <| px 20
+        , alignTop
+        , centerX
+        , D.widthEach
+            { bottom = 0
+            , top = 1
+            , left = 0
+            , right = 0
+            }
+        , D.color colourTheme.textDarkGrey
+        ]
+        [ column
             [ alignBottom
             , E.width fill
             ]
@@ -463,6 +497,7 @@ mobileFooterIcons =
                     ]
                 )
             ]
+        ]
 
 
 footerImageMaker :