feat: started working on responsiveness

frontend/elm-land.json

@@ -20,7 +20,7 @@
         }
       ],
       "link": [
-        { "rel": "icon", "type": "png", "href": "/favicon.png" },
+        { "rel": "icon", "type": "png", "href": "/assets/logo_lambda.png" },
         { "rel": "stylesheet", "href": "/styles.css" },
         {
           "rel": "stylesheet",

frontend/src/Debate/Gibberish/Helpers.elm

@@ -49,6 +49,32 @@ gibberishMaker gibberish =
         ]
 
 
+gibberishMakerMobile : Gibberish -> Element msg
+gibberishMakerMobile gibberish =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (gibberishTitle gibberish)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ paragraph
+                            (paragraphFormat
+                                ++ [ F.size 18
+                                   , F.center
+                                   ]
+                            )
+                            [ cardImageMakerMobile (gibberishImage gibberish)
+                            , domainList gibberish
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
 gibberishImage : Gibberish -> { src : String, description : String }
 gibberishImage gibberish =
     { src = "gibberish/" ++ gibberish.gibberishImage ++ ".png"

frontend/src/Home/Helpers.elm

@@ -0,0 +1,80 @@
+module Home.Helpers exposing (..)
+
+import Blog.Helpers exposing (..)
+import Config.Colour as T exposing (..)
+import Config.Format as O exposing (..)
+import Config.Identity as I exposing (..)
+import Config.Response exposing (..)
+import Config.Viewport exposing (..)
+import Effect exposing (Effect)
+import Element as E exposing (..)
+import Element.Background as B exposing (..)
+import Element.Border as D exposing (..)
+import Element.Font as F
+import Html.Attributes as H exposing (style)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared exposing (..)
+import View exposing (View)
+
+
+homePage : { src : String, description : String } -> Element msg
+homePage image =
+    column
+        [ centerX
+        , centerY
+        , spacing 20
+        ]
+        [ row [ centerX ]
+            [ E.image [ E.width fill, height <| px 100 ]
+                image
+            ]
+        , column
+            [ paddingEach
+                { top = 15
+                , bottom = 15
+                , left = 20
+                , right = 20
+                }
+            , B.color colourTheme.backgroundDarkGrey
+            , rounded 10
+            , E.width fill
+            , spacing 8
+            ]
+            [ paragraph (paragraphFormat ++ [ centerX ]) [ text "upRootNutrition is an open source project, created by Nick Hiebert, designed to elevate the quality of nutrition science communication in online discourse. By applying more rigorous systems of reasoning, such as formal logic, upRootNutrition aims to cut through the misinformation and sophistry that are endemic on social media." ]
+            ]
+        ]
+
+
+desktopHomePageImage : { src : String, description : String }
+desktopHomePageImage =
+    { src = "assets/logo_extended.png"
+    , description = ""
+    }
+
+
+desktopHomePage =
+    homePage desktopHomePageImage
+
+
+mobileLargeHomePageImage : { src : String, description : String }
+mobileLargeHomePageImage =
+    { src = "assets/logo.png"
+    , description = ""
+    }
+
+
+mobileLargedesktopHomePage =
+    homePage mobileLargeHomePageImage
+
+
+mobileSmallHomePageImage : { src : String, description : String }
+mobileSmallHomePageImage =
+    { src = "assets/logo_lambda.png"
+    , description = ""
+    }
+
+
+mobileSmallesktopHomePage =
+    homePage mobileSmallHomePageImage

frontend/src/Layouts/Navbar.elm

@@ -157,10 +157,9 @@ view { content, model, toContentMsg, props } =
                             , F.size 17
                             , spacing 8
                             ]
-                          <|
+                            (buttonMaker props.currentRoute pageNames.pageRoot
-                            List.map (buttonMaker props.currentRoute)
+                                :: List.map (buttonMaker props.currentRoute)
-                                [ pageNames.pageRoot
+                                    [ pageNames.pageServices
-                                , pageNames.pageServices
                                     , pageNames.pageHyperBlog
                                     , pageNames.pageDebate
                                     , pageNames.pageGibberish
@@ -170,6 +169,7 @@ view { content, model, toContentMsg, props } =
                                     , pageNames.pageDonate
                                     , pageNames.pageContact
                                     ]
+                            )
                         ]
                     ]
                 , footerIcons

frontend/src/Pages/Arguments.elm

@@ -3,6 +3,7 @@ module Pages.Arguments exposing (Model, Msg, page)
 import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
 import Config.Identity as I exposing (..)
+import Config.Response exposing (..)
 import Config.Viewport exposing (..)
 import Debate.Arguments.Abortion exposing (..)
 import Debate.Arguments.Agnosticism exposing (..)
@@ -72,7 +73,6 @@ import Ports exposing (gotArgHeight)
 import Route exposing (Route)
 import Shared
 import View exposing (View)
-import Config.Response exposing (..)
 
 
 page : Shared.Model -> Route () -> Page Model Msg
@@ -81,7 +81,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -141,29 +141,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = debateName
     , attributes = []
-    , element = debateContainer
+    , element = debateContainer shared.device
     }
 
 
-debateContainer : Element msg
+debateContainer : Device -> Element msg
-debateContainer =
+debateContainer device =
-    topLevelContainer debateList
+    topLevelContainer (debateList device)
 
 
-debateList : Element msg
+debateList : Device -> Element msg
-debateList =
+debateList device =
-    column [ centerX ]
+    column
-        [ column
+        (case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
                 pageListDesktop
+
+            ( Phone, Landscape ) ->
+                pageListDesktop
+
+            ( Tablet, Portrait ) ->
+                pageListDesktop
+
+            ( Tablet, Landscape ) ->
+                pageListDesktop
+
+            ( Desktop, Portrait ) ->
+                pageListDesktop
+
+            ( Desktop, Landscape ) ->
+                pageListDesktop
+
+            ( BigDesktop, Portrait ) ->
+                pageListDesktop
+
+            ( BigDesktop, Landscape ) ->
+                pageListDesktop
+        )
     <|
         List.concat
             [ List.map headerMaker
                 [ argumentHeader ]
-                , List.map argumentMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map argumentMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map argumentMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map argumentMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map argumentMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map argumentMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map argumentMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map argumentMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map argumentMaker
+              )
                 [ argumentApoBCVD
                 , argumentAnabolicKeto
                 , argumentAntagonisticPleiotropy
@@ -215,4 +262,3 @@ debateList =
                 , argumentTruncatedMeta
                 ]
             ]
-        ]

frontend/src/Pages/Gibberish.elm

@@ -3,6 +3,7 @@ module Pages.Gibberish exposing (Model, Msg, page)
 import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
 import Config.Identity as I exposing (..)
+import Config.Response exposing (..)
 import Config.Viewport exposing (..)
 import Debate.Gibberish.Domains.Epistemology exposing (epistemologyGibberish)
 import Debate.Gibberish.Domains.Metaphysics exposing (metaphysicsGibberish)
@@ -29,7 +30,7 @@ import Ports exposing (gotArgHeight)
 import Route exposing (Route)
 import Shared
 import View exposing (View)
-import Config.Response exposing (..)
+
 
 page : Shared.Model -> Route () -> Page Model Msg
 page shared route =
@@ -37,7 +38,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -97,29 +98,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = gibberishName
     , attributes = []
-    , element = gibberishContainer
+    , element = gibberishContainer shared.device
     }
 
 
-gibberishContainer : Element msg
+gibberishContainer : Device -> Element msg
-gibberishContainer =
+gibberishContainer device =
-    topLevelContainer gibberishList
+    topLevelContainer (gibberishList device)
 
 
-gibberishList : Element msg
+gibberishList : Device -> Element msg
-gibberishList =
+gibberishList device =
-    column [ centerX ]
+    column
-        [ column
+        (case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
                 pageListDesktop
+
+            ( Phone, Landscape ) ->
+                pageListDesktop
+
+            ( Tablet, Portrait ) ->
+                pageListDesktop
+
+            ( Tablet, Landscape ) ->
+                pageListDesktop
+
+            ( Desktop, Portrait ) ->
+                pageListDesktop
+
+            ( Desktop, Landscape ) ->
+                pageListDesktop
+
+            ( BigDesktop, Portrait ) ->
+                pageListDesktop
+
+            ( BigDesktop, Landscape ) ->
+                pageListDesktop
+        )
     <|
         List.concat
             [ List.map headerMaker
                 [ gibberishHeader ]
-                , List.map gibberishMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map gibberishMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map gibberishMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map gibberishMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map gibberishMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map gibberishMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map gibberishMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map gibberishMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map gibberishMaker
+              )
                 [ epistemologyGibberish
                 , theologyGibberish
                 , metaphysicsGibberish
@@ -129,4 +177,3 @@ gibberishList =
                 , philOfLanguageGibberish
                 ]
             ]
-        ]

frontend/src/Pages/Home_.elm

@@ -4,19 +4,21 @@ import Blog.Helpers exposing (..)
 import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
 import Config.Identity as I exposing (..)
+import Config.Response exposing (..)
 import Config.Viewport exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
 import Element.Background as B exposing (..)
 import Element.Border as D exposing (..)
 import Element.Font as F
+import Home.Helpers exposing (..)
 import Html.Attributes as H exposing (style)
 import Layouts
 import Page exposing (Page)
 import Route exposing (Route)
 import Shared exposing (..)
 import View exposing (View)
-import Config.Response exposing (..)
+
 
 page : Shared.Model -> Route () -> Page Model Msg
 page shared route =
@@ -24,7 +26,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -81,46 +83,44 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = ""
     , attributes = []
-    , element = homeContainer
+    , element = homeContainer shared.device
     }
 
 
-homeContainer : Element msg
+homeContainer : Device -> Element msg
-homeContainer =
+homeContainer device =
-    topLevelContainer homeList
+    topLevelContainer (homeList device)
 
 
-homeList : Element msg
+homeList : Device -> Element msg
-homeList =
+homeList device =
     column pageListDesktop
-        [ column
+        (case ( device.class, device.orientation ) of
-            [ centerX
+            ( Phone, Portrait ) ->
-            , centerY
+                [mobileSmallesktopHomePage]
-            , spacing 20
+
-            ]
+            ( Phone, Landscape ) ->
-            [ row [ centerX ]
+                [mobileSmallesktopHomePage]
-                [ E.image [ E.width <| px 785 ]
+
-                    { src = "assets/logo_extended.png"
+            ( Tablet, Portrait ) ->
-                    , description = ""
+                [mobileLargedesktopHomePage]
-                    }
+
-                ]
+            ( Tablet, Landscape ) ->
-            , column
+                [mobileLargedesktopHomePage]
-                [ paddingEach
+
-                    { top = 15
+            ( Desktop, Portrait ) ->
-                    , bottom = 15
+                [ desktopHomePage ]
-                    , left = 20
+
-                    , right = 20
+            ( Desktop, Landscape ) ->
-                    }
+                [ desktopHomePage ]
-                , B.color colourTheme.backgroundDarkGrey
+
-                , rounded 10
+            ( BigDesktop, Portrait ) ->
-                , E.width fill
+                [ desktopHomePage ]
-                , spacing 8
+
-                ]
+            ( BigDesktop, Landscape ) ->
-                [ paragraph (paragraphFormat ++ [ centerX ]) [ text "upRootNutrition is an open source project, created by Nick Hiebert, designed to elevate the quality of nutrition science communication in online discourse. By applying more rigorous systems of reasoning, such as formal logic, upRootNutrition aims to cut through the misinformation and sophistry that are endemic on social media." ]
+                [ desktopHomePage ]
-                ]
+        )
-            ]
-        ]

frontend/src/Products/Helpers.elm

@@ -35,7 +35,6 @@ nutriDexMaker nutridex =
                         fieldSpacer
                         [ cardSubTitleMaker
                             [ featureList nutridex
-                            , nutriDexTitleMaker
                             , nutriDexBodyMaker
                             , nutriDexAdjustments
                             , column [ spacing 10 ]
@@ -66,7 +65,6 @@ nutriDexMakerMobile nutridex =
                         fieldSpacer
                         [ cardSubTitleMaker
                             [ featureListMobile nutridex
-                            , nutriDexTitleMaker
                             , nutriDexBodyMaker
                             , nutriDexAdjustments
                             , column [ spacing 10 ]
@@ -272,8 +270,8 @@ featureListMobile nutridex =
         ]
 
 
-nutriDexTitleMaker : Element msg
+nutriDexTitleMaker : String -> Element msg
-nutriDexTitleMaker =
+nutriDexTitleMaker title =
     column
         [ width fill
         , height fill
@@ -300,7 +298,7 @@ nutriDexTitleMaker =
                         }
                    ]
             )
-            [ text "Backstory" ]
+            [ text title ]
         ]
 
 
@@ -318,7 +316,8 @@ nutriDexBodyMaker =
         , height fill
         ]
         [ column [ spacing 10 ]
-            [ row []
+            [ nutriDexTitleMaker "Backstory"
+            , row []
                 [ paragraph
                     (paragraphFormat
                         ++ [ F.alignLeft
@@ -390,42 +389,11 @@ referenceFormat =
 nutriDexAdjustments : Element msg
 nutriDexAdjustments =
     column
-        [ width fill
-        , height fill
-        ]
-        [ column
         [ width fill
         , height fill
         , spacing 20
         ]
-            [ row
+        [ nutriDexTitleMaker "Nutrient Density Score Adjustments"
-                [ width fill
-                , centerX
-                , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
-                , D.color (rgb255 200 200 200)
-                , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
-                ]
-                []
-            , column [ spacing 10 ]
-                [ row
-                    [ centerX
-                    , paddingEach
-                        { top = 10
-                        , right = 0
-                        , bottom = 10
-                        , left = 0
-                        }
-                    ]
-                    [ paragraph
-                        (paragraphBoldFormat
-                            ++ [ F.alignLeft
-                               , width fill
-                               , F.size 18
-                               , F.color colourTheme.textLightOrange
-                               ]
-                        )
-                        [ text "Nutrient Density Score Adjustments" ]
-                    ]
         , row []
             [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
                 [ text "• "
@@ -469,8 +437,19 @@ nutriDexAdjustments =
                 ]
             ]
         ]
+
+
+nutridexSubTitleMaker : String -> Element msg
+nutridexSubTitleMaker title =
+    paragraph
+        (paragraphBoldFormat
+            ++ [ F.alignLeft
+               , width fill
+               , F.size 18
+               , F.color colourTheme.textLightOrange
                ]
-        ]
+        )
+        [ text title ]
 
 
 nutriDexVitamins : Element msg
@@ -489,15 +468,7 @@ nutriDexVitamins =
                     , left = 0
                     }
                 ]
-                [ paragraph
+                [ nutridexSubTitleMaker "Vitamins"
-                    (paragraphBoldFormat
-                        ++ [ F.alignLeft
-                           , width fill
-                           , F.size 18
-                           , F.color colourTheme.textLightOrange
-                           ]
-                    )
-                    [ text "Vitamins" ]
                 ]
             , row []
                 [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
@@ -627,15 +598,7 @@ nutriDexFattyAcids =
                     , left = 0
                     }
                 ]
-                [ paragraph
+                [ nutridexSubTitleMaker "Fatty Acids"
-                    (paragraphBoldFormat
-                        ++ [ F.alignLeft
-                           , width fill
-                           , F.size 18
-                           , F.color colourTheme.textLightOrange
-                           ]
-                    )
-                    [ text "Fatty Acids" ]
                 ]
             , row []
                 [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
@@ -698,15 +661,7 @@ nutriDexMinerals =
                     , left = 0
                     }
                 ]
-                [ paragraph
+                [ nutridexSubTitleMaker "Minerals"
-                    (paragraphBoldFormat
-                        ++ [ F.alignLeft
-                           , width fill
-                           , F.size 18
-                           , F.color colourTheme.textLightOrange
-                           ]
-                    )
-                    [ text "Minerals" ]
                 ]
             , row []
                 [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
@@ -806,15 +761,7 @@ nutriDexAminoAcids =
                     , left = 0
                     }
                 ]
-                [ paragraph
+                [ nutridexSubTitleMaker "Amino Acids"
-                    (paragraphBoldFormat
-                        ++ [ F.alignLeft
-                           , width fill
-                           , F.size 18
-                           , F.color colourTheme.textLightOrange
-                           ]
-                    )
-                    [ text "Amino Acids" ]
                 ]
             , row []
                 [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])