feat: started working on responsiveness

frontend/elm-land.json

@@ -14,10 +14,18 @@
       "meta": [
         { "charset": "UTF-8" },
         { "http-equiv": "X-UA-Compatible", "content": "IE=edge" },
-        { "name": "viewport", "content": "width=device-width, initial-scale=1.0" }
+        {
+          "name": "viewport",
+          "content": "width=device-width, initial-scale=1.0"
+        }
       ],
       "link": [
-        { "rel": "stylesheet", "href": "https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap" }
+        { "rel": "icon", "type": "png", "href": "/favicon.png" },
+        { "rel": "stylesheet", "href": "/styles.css" },
+        {
+          "rel": "stylesheet",
+          "href": "https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap"
+        }
       ],
       "script": []
     },

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,16 +14,8 @@ topLevelContainer =
     el
         [ E.width fill
         , height fill
-        , B.color colourTheme.backgroundLightGrey
-        ]
-
-
-pageList : List (Attribute msg)
-pageList =
-    [ spacing 30
         , centerX
-    , alignTop
+        , B.color colourTheme.backgroundLightGrey
-    , paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
         ]
 
 
@@ -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)
+    ]

frontend/src/Contact/Helpers.elm

@@ -29,8 +29,7 @@ contactMaker : Contact -> Element msg
 contactMaker contact =
     row
         topLevelBox
-        [ cardImageMaker (contactImage contact)
+        [ cardMaker
-        , cardMaker
             [ cardTitleMaker (contactTitle contact)
             , cardFormatter
                 [ cardContentSpacing
@@ -109,49 +108,13 @@ instructionMaker : Element msg
 instructionMaker =
     row
         topLevelBox
-        [ column
+        [ cardMaker
-            [ E.width <| px 785
+            [ cardTitleMaker "CONTACT"
-            , D.width 5
-            , D.color colourTheme.backgroundDarkGrey
-            , D.roundEach
-                { topLeft = 32
-                , topRight = 32
-                , bottomRight = 32
-                , bottomLeft = 32
-                }
-            ]
-            [ paragraph
-                (nonHighlightedTitleFormat
-                    ++ [ F.size 20
-                       , B.color colourTheme.textDarkOrange
-                       , paddingEach
-                            { top = 6
-                            , bottom = 3
-                            , left = 25
-                            , right = 15
-                            }
-                       , alignBottom
-                       , width fill
-                       , F.center
-                       , D.roundEach
-                            { topLeft = 26
-                            , topRight = 26
-                            , bottomRight = 0
-                            , bottomLeft = 0
-                            }
-                       ]
-                )
-                [ text "CONTACT" ]
             , cardFormatter
                 [ cardContentSpacing
                     [ column
                         fieldSpacer
-                        [ paragraph
+                        [ cardSubTitleMaker
-                            (paragraphFormat
-                                ++ [ F.size 18
-                                   , F.center
-                                   ]
-                            )
                             [ instructionBody ]
                         ]
                     ]
@@ -222,6 +185,7 @@ instructionBody =
                             [ paragraph
                                 [ width fill
                                 , F.size 16
+                                , F.alignLeft
                                 ]
                                 term
                             ]

frontend/src/Cuckery/Helpers.elm

@@ -38,6 +38,34 @@ cuckMaker cuck =
         ]
 
 
+cuckMakerMobile : Cuck -> Element msg
+cuckMakerMobile cuck =
+    column
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker (cuckTitle cuck)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ column
+                            [ alignTop
+                            , centerX
+                            , alignLeft
+                            ]
+                            [ cardImageMakerMobile (cuckImage cuck)
+                            , socialMaker cuck
+                            , dodgeTitle cuck
+                            , dodgeMaker cuck
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
 cuckImage :
     Cuck
     ->
@@ -231,7 +259,7 @@ propositionMaker dodgeEntry =
             ]
             [ text "Proposition:"
             ]
-        , column
+        , paragraph
             [ E.width fill
             , alignLeft
             ]
@@ -249,7 +277,7 @@ attitudeMaker dodgeEntry =
             ]
             [ text "Attitude:"
             ]
-        , column
+        , paragraph
             [ E.width fill
             , alignLeft
             ]
@@ -332,11 +360,7 @@ reasonMaker dodgeEntry =
             ]
             [ text "Reason:"
             ]
-        , column
+        , paragraph [ F.regular ]
-            [ E.width fill
-            , alignLeft
-            ]
-            [ paragraph [ F.regular ]
             [ text <|
                 case dodgeEntry.dodgeNicksDoxasticReason of
                     NoProp ->
@@ -349,7 +373,6 @@ reasonMaker dodgeEntry =
                         str
             ]
         ]
-        ]
 
 
 displayFallacy : String -> Element msg
@@ -361,7 +384,7 @@ displayFallacy fallacyText =
             ]
             [ text "Fallacy:"
             ]
-        , column
+        , paragraph
             [ E.width fill
             , alignLeft
             ]

frontend/src/Debate/Helpers.elm

@@ -28,7 +28,7 @@ argumentMaker argument =
         topLevelBox
         [ cardImageMaker (argumentImage argument)
         , cardMaker
-            [ cardTitleMaker (argumentTitle argument)
+            [ cardTitleMaker argument.argumentTitle
             , cardFormatter
                 [ cardContentSpacing
                     [ column
@@ -46,6 +46,31 @@ argumentMaker argument =
         ]
 
 
+argumentMakerMobile : Argument -> Element msg
+argumentMakerMobile argument =
+    row
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker argument.argumentTitle
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardImageMakerMobile (argumentImage argument)
+                        , propositionMaker argument
+                        , reductioMaker argument
+                        , summaryMaker argument
+                        , strengthMaker argument
+                        , tableMaker argument
+                        , proofTreeMaker argument
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
 argumentImage : Argument -> { src : String, description : String }
 argumentImage argument =
     { src = "arguments/" ++ argument.argumentImage ++ ".png"
@@ -53,9 +78,8 @@ argumentImage argument =
     }
 
 
-argumentTitle : Argument -> String
+infoSpacing =
-argumentTitle argument =
+    E.width <| px 100
-    argument.argumentTitle
 
 
 propositionMaker : Argument -> Element msg
@@ -66,7 +90,7 @@ propositionMaker argument =
             [ paragraph
                 (paragraphBoldFormat
                     ++ [ F.size 18
-                       , E.width <| px 100
+                       , infoSpacing
                        ]
                 )
                 [ el
@@ -111,7 +135,7 @@ reductioMaker argument =
                     [ paragraph
                         (paragraphBoldFormat
                             ++ [ F.size 18
-                               , E.width <| px 100
+                               , infoSpacing
                                ]
                         )
                         [ el
@@ -144,7 +168,7 @@ summaryMaker argument =
             [ paragraph
                 (paragraphBoldFormat
                     ++ [ F.size 18
-                       , E.width <| px 100
+                       , infoSpacing
                        ]
                 )
                 [ el
@@ -360,12 +384,12 @@ formalizationMaker argument =
                 (paragraphFormat
                     ++ [ spacing 3
                        , centerX
-                       , E.width <| px 500
+                       , E.width fill
                        , paddingEach
                             { top = 10
-                            , right = 0
+                            , right = 35
                             , bottom = 0
-                            , left = 0
+                            , left = 35
                             }
                        ]
                 )
@@ -447,7 +471,6 @@ proofTreeMaker argument =
                             , right = 12
                             }
                        , D.rounded 10
-                       , E.width <| px 105
                        , F.center
                        , E.alignRight
                        , transitionStyle

frontend/src/Donate/Helpers.elm

@@ -51,6 +51,32 @@ donateMaker donate =
         ]
 
 
+donateMakerMobile : Donate -> Element msg
+donateMakerMobile donate =
+    row
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker (donateTitle donate)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardImageMakerMobile (donateImage donate)
+                        , feeMaker donate
+                        , preferenceMaker donate
+                        , tableMaker donate
+                        , proTitleMaker donate
+                        , proMaker donate
+                        , conTitleMaker donate
+                        , conMaker donate
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
 donateImage :
     Donate
     ->

frontend/src/Headers/Helpers.elm

@@ -25,7 +25,9 @@ headerMaker header =
     row
         topLevelBox
         [ column
-            [ E.width <| px 785
+            [ E.width fill
+
+            -- E.width <| px 785
             , D.width 5
             , D.color colourTheme.backgroundDarkGrey
             , D.roundEach

frontend/src/Interviews/Helpers.elm

@@ -40,6 +40,28 @@ interviewMaker interview =
         ]
 
 
+interviewMakerMobile : Interview -> Element msg
+interviewMakerMobile interview =
+    row
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker (interviewTitle interview)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardImageMakerMobile (interviewImage interview)
+                        , socialMaker interview
+                        , appearanceTitle interview
+                        , appearanceMaker interview
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
 interviewImage : Interview -> { src : String, description : String }
 interviewImage interview =
     { src = "interviews/" ++ interview.interviewImage ++ ".png"

frontend/src/Layouts/Navbar.elm

@@ -26,7 +26,14 @@ layout props shared route =
     Layout.new
         { init = init
         , update = update
-        , view = \layoutArgs -> view { props = props, content = layoutArgs.content, model = layoutArgs.model, toContentMsg = layoutArgs.toContentMsg }
+        , view =
+            \layoutArgs ->
+                view
+                    { props = props
+                    , content = layoutArgs.content
+                    , model = layoutArgs.model
+                    , toContentMsg = layoutArgs.toContentMsg
+                    }
         , subscriptions = subscriptions
         }
 
@@ -115,23 +122,18 @@ view { content, model, toContentMsg, props } =
                             )
                             [ E.image
                                 [ spacing 2
-                                , E.width <| px 180
+                                , E.width <| px 140
                                 , centerX
+                                , paddingEach
+                                    { top = 20
+                                    , right = 0
+                                    , bottom = 20
+                                    , left = 0
+                                    }
                                 ]
-                                { src = "navbar/uprootnutrition.png"
+                                { src = "assets/logo.png"
                                 , description = ""
                                 }
-
-                            -- , column []
-                            --     [ link [ centerX ]
-                            --         { url = localhostUrl ++ pageNames.pageHome
-                            --         , label = text "upRoot"
-                            --         }
-                            --     , link [ centerX ]
-                            --         { url = localhostUrl ++ pageNames.pageHome
-                            --         , label = text "Nutrition"
-                            --         }
-                            --     ]
                             ]
                         , el
                             [ E.width <| px 140

frontend/src/Pages/Arguments.elm

@@ -72,6 +72,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
@@ -157,7 +158,7 @@ debateList : Element msg
 debateList =
     column [ centerX ]
         [ column
-            pageList
+            pageListDesktop
           <|
             List.concat
                 [ List.map headerMaker

frontend/src/Pages/Contact.elm

@@ -3,6 +3,7 @@ module Pages.Contact 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 Contact.Helpers exposing (..)
 import Contact.Methods.Discord exposing (contactDiscord)
@@ -27,7 +28,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -84,22 +85,45 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = contactName
     , attributes = []
-    , element = contactContainer
+    , element = contactContainer shared.device
     }
 
 
-contactContainer : Element msg
+contactContainer : Device -> Element msg
-contactContainer =
+contactContainer device =
-    topLevelContainer contactList
+    topLevelContainer (contactList device)
 
 
-contactList : Element msg
+contactList : Device -> Element msg
-contactList =
+contactList device =
-    column pageList <|
+    column pageListDesktop <|
         List.concat
-            [ [ instructionMaker ]
+            (case ( device.class, device.orientation ) of
-            ]
+                ( Phone, Portrait ) ->
+                    [ [] ]
+
+                ( Phone, Landscape ) ->
+                    [ [instructionMaker] ]
+
+                ( Tablet, Portrait ) ->
+                    [ [instructionMaker] ]
+
+                ( Tablet, Landscape ) ->
+                    [ [instructionMaker] ]
+
+                ( Desktop, Portrait ) ->
+                    [ [instructionMaker] ]
+
+                ( Desktop, Landscape ) ->
+                    [ [instructionMaker] ]
+
+                ( BigDesktop, Portrait ) ->
+                    [ [instructionMaker] ]
+
+                ( BigDesktop, Landscape ) ->
+                    [ [ instructionMaker ] ]
+            )

frontend/src/Pages/Cucklist.elm

@@ -3,6 +3,7 @@ module Pages.Cucklist 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 Cuckery.CuckList.AdamSinger.AdamSinger exposing (cuckAdamSinger)
 import Cuckery.CuckList.AmberOHearn.AmberOHearn exposing (cuckAmberOHearn)
@@ -91,7 +92,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -148,28 +149,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = dodgersName
     , attributes = []
-    , element = dodgersContainer
+    , element = dodgersContainer shared.device
     }
 
 
-dodgersContainer : Element msg
+dodgersContainer : Device -> Element msg
-dodgersContainer =
+dodgersContainer device =
-    topLevelContainer dodgersList
+    topLevelContainer (dodgersList device)
 
 
-dodgersList : Element msg
+dodgersList : Device -> Element msg
-dodgersList =
+dodgersList device =
     column
-        pageList
+        (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
                 [ cuckListHeader ]
-            , List.map cuckMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map cuckMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map cuckMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map cuckMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map cuckMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map cuckMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map cuckMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map cuckMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map cuckMaker
+              )
                 [ cuckAdamSinger
                 , cuckAmberOHearn
                 , cuckAnnChilders

frontend/src/Pages/Donate.elm

@@ -4,6 +4,7 @@ import Browser.Dom as Dom
 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 Donate.Helpers exposing (..)
 import Donate.Methods.Cardano exposing (donateCardano)
@@ -36,7 +37,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -93,26 +94,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = donateName
     , attributes = []
-    , element = donateContainer
+    , element = donateContainer shared.device
     }
 
 
-donateContainer : Element msg
+donateContainer : Device -> Element msg
-donateContainer =
+donateContainer device =
-    topLevelContainer donateList
+    topLevelContainer (donateList device)
 
 
-donateList : Element msg
+donateList : Device -> Element msg
-donateList =
+donateList device =
-    column pageList <|
+    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
                 [ donateHeader ]
-            , List.map donateMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map donateMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map donateMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map donateMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map donateMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map donateMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map donateMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map donateMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map donateMaker
+              )
                 [ donateLiberaPay
                 , donatePayPal
                 , donatePatreon

frontend/src/Pages/Gibberish.elm

@@ -29,7 +29,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 =
@@ -114,7 +114,7 @@ gibberishList : Element msg
 gibberishList =
     column [ centerX ]
         [ column
-            pageList
+            pageListDesktop
           <|
             List.concat
                 [ List.map headerMaker

frontend/src/Pages/Home_.elm

@@ -6,7 +6,9 @@ import Config.Format as O exposing (..)
 import Config.Identity as I exposing (..)
 import Config.Viewport exposing (..)
 import Effect exposing (Effect)
-import Element exposing (..)
+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
@@ -14,7 +16,7 @@ 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 =
@@ -94,12 +96,31 @@ homeContainer =
 
 homeList : Element msg
 homeList =
-    none
+    column pageListDesktop
-
+        [ column
-
+            [ centerX
-
+            , centerY
--- column
+            , spacing 20
---     pageList
+            ]
--- <|
+            [ row [ centerX ]
---     List.map homeMaker
+                [ E.image [ E.width <| px 785 ]
---         []
+                    { src = "assets/logo_extended.png"
+                    , description = ""
+                    }
+                ]
+            , 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." ]
+                ]
+            ]
+        ]

frontend/src/Pages/Hyperblog.elm

@@ -16,7 +16,7 @@ import Route exposing (Route)
 import Shared exposing (..)
 import View exposing (View)
 import Config.Viewport exposing (..)
-
+import Config.Response exposing (..)
 page : Shared.Model -> Route () -> Page Model Msg
 page shared route =
     Page.new

frontend/src/Pages/Interviews.elm

@@ -3,6 +3,7 @@ module Pages.Interviews 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 Effect exposing (Effect)
 import Element exposing (..)
@@ -36,7 +37,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -93,28 +94,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = interviewsName
     , attributes = []
-    , element = interviewContainer
+    , element = interviewContainer shared.device
     }
 
 
-interviewContainer : Element msg
+interviewContainer : Device -> Element msg
-interviewContainer =
+interviewContainer device =
-    topLevelContainer interviewList
+    topLevelContainer (interviewList device)
 
 
-interviewList : Element msg
+interviewList : Device -> Element msg
-interviewList =
+interviewList device =
     column
-        pageList
+        (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
                 [ interviewHeader ]
-            , List.map interviewMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map interviewMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map interviewMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map interviewMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map interviewMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map interviewMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map interviewMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map interviewMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map interviewMaker
+              )
                 [ sigmaNutritionRadio
                 , markBellsPowerProject
                 , foolproofMastery

frontend/src/Pages/NotFound_.elm

@@ -7,7 +7,7 @@ import Route exposing (Route)
 import Route.Path
 import Shared
 import View exposing (View)
-
+import Config.Response exposing (..)
 
 page : Shared.Model -> Route () -> Page Model Msg
 page shared route =

frontend/src/Pages/Nutridex.elm

@@ -3,6 +3,7 @@ module Pages.Nutridex 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 Donate.Types exposing (..)
 import Effect exposing (Effect)
@@ -31,7 +32,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -58,6 +59,7 @@ init () =
     )
 
 
+
 -- UPDATE
 
 
@@ -87,23 +89,73 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = nutriDexName
     , attributes = []
-    , element = nutriDexContainer
+    , element = nutriDexContainer shared.device
     }
 
 
-nutriDexContainer : Element msg
+nutriDexContainer : Device -> Element msg
-nutriDexContainer =
+nutriDexContainer device =
-    topLevelContainer nutriDexList
+    topLevelContainer (nutriDexList device)
 
 
-nutriDexList : Element msg
+nutriDexList : Device -> Element msg
-nutriDexList =
+nutriDexList device =
-    column pageList <|
+    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 nutriDexMaker
+            [ (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map nutriDexMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map nutriDexMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map nutriDexMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map nutriDexMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map nutriDexMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map nutriDexMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map nutriDexMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map nutriDexMaker
+              )
                 [ productNutriDex ]
             ]

frontend/src/Pages/Services.elm

@@ -3,6 +3,7 @@ module Pages.Services 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 Effect exposing (Effect)
 import Element exposing (..)
@@ -29,7 +30,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -86,28 +87,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
     { title = servicesName
     , attributes = []
-    , element = servicesContainer
+    , element = servicesContainer shared.device
     }
 
 
-servicesContainer : Element msg
+servicesContainer : Device -> Element msg
-servicesContainer =
+servicesContainer device =
-    topLevelContainer servicesList
+    topLevelContainer (servicesList device)
 
 
-servicesList : Element msg
+servicesList : Device -> Element msg
-servicesList =
+servicesList device =
     column
-        pageList
+        (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
                 [ servicesHeader ]
-            , List.map serviceMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map serviceMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map serviceMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map serviceMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map serviceMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map serviceMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map serviceMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map serviceMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map serviceMaker
+              )
                 [ servicesDebateAnalysis
                 , servicesDebateTutoring
                 , servicesNutritionScience

frontend/src/Products/Helpers.elm

@@ -27,49 +27,13 @@ nutriDexMaker : NutriDex -> Element msg
 nutriDexMaker nutridex =
     row
         topLevelBox
-        [ column
+        [ cardMaker
-            [ E.width <| px 785
+            [ cardTitleMaker (nutriDexTitle nutridex)
-            , D.width 5
-            , D.color colourTheme.backgroundDarkGrey
-            , D.roundEach
-                { topLeft = 32
-                , topRight = 32
-                , bottomRight = 32
-                , bottomLeft = 32
-                }
-            ]
-            [ paragraph
-                (nonHighlightedTitleFormat
-                    ++ [ F.size 20
-                       , B.color colourTheme.textDarkOrange
-                       , paddingEach
-                            { top = 6
-                            , bottom = 3
-                            , left = 25
-                            , right = 15
-                            }
-                       , alignBottom
-                       , width fill
-                       , F.center
-                       , D.roundEach
-                            { topLeft = 26
-                            , topRight = 26
-                            , bottomRight = 0
-                            , bottomLeft = 0
-                            }
-                       ]
-                )
-                [ text (String.toUpper nutridex.nutriDexTitle) ]
             , cardFormatter
                 [ cardContentSpacing
                     [ column
                         fieldSpacer
-                        [ paragraph
+                        [ cardSubTitleMaker
-                            (paragraphFormat
-                                ++ [ F.size 18
-                                   , F.center
-                                   ]
-                            )
                             [ featureList nutridex
                             , nutriDexTitleMaker
                             , nutriDexBodyMaker
@@ -90,6 +54,42 @@ nutriDexMaker nutridex =
         ]
 
 
+nutriDexMakerMobile : NutriDex -> Element msg
+nutriDexMakerMobile nutridex =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (nutriDexTitle nutridex)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ featureListMobile nutridex
+                            , nutriDexTitleMaker
+                            , nutriDexBodyMaker
+                            , nutriDexAdjustments
+                            , column [ spacing 10 ]
+                                [ nutriDexVitamins
+                                , nutriDexFattyAcids
+                                , nutriDexMinerals
+                                , nutriDexAminoAcids
+                                ]
+                            , nutriDexReferenceTitleMaker
+                            , nutriDexReferences nutridex
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+nutriDexTitle : NutriDex -> String
+nutriDexTitle nutridex =
+    String.toUpper nutridex.nutriDexTitle
+
+
 makeFeature : Features -> Element msg
 makeFeature features =
     column
@@ -133,19 +133,14 @@ featureList nutridex =
                 [ spacing 20
                 ]
                 [ row
-                    [ D.rounded 25
+                    [ centerX
-                    , D.width 5
-                    , centerX
-                    , D.color colourTheme.backgroundLightGrey
-                    , B.color colourTheme.backgroundLightGrey
                     ]
                     [ E.image
                         [ D.rounded 20
                         , clip
-                        , E.width <| px 305
+                        , E.width <| px 250
-                        , E.height <| px 231
                         ]
-                        { src = "nutridex/nutridex.png", description = "" }
+                        { src = "assets/nutridex.png", description = "" }
                     ]
                 , row
                     [ D.width 5
@@ -199,10 +194,88 @@ featureList nutridex =
         ]
 
 
+featureListMobile : NutriDex -> Element msg
+featureListMobile nutridex =
+    column
+        [ spacing 8
+        , width fill
+        , height fill
+        , paddingEach
+            { top = 10
+            , bottom = 0
+            , left = 0
+            , right = 0
+            }
+        ]
+        [ column
+            [ spacing 20
+            , centerX
+            ]
+            [ row
+                [ centerX
+                ]
+                [ E.image
+                    [ D.rounded 20
+                    , clip
+                    , E.width <| px 150
+                    ]
+                    { src = "assets/nutridex.png", description = "" }
+                ]
+            , row
+                [ D.width 5
+                , D.rounded 25
+                , centerX
+                , D.color colourTheme.backgroundLightGrey
+                , B.color colourTheme.backgroundLightGrey
+                ]
+                [ row
+                    [ B.color colourTheme.textDarkOrange
+                    , D.rounded 30
+                    , F.size 25
+                    , F.bold
+                    , paddingEach
+                        { top = 10
+                        , right = 25
+                        , bottom = 10
+                        , left = 25
+                        }
+                    ]
+                    [ newTabLink []
+                        { url = "https://the-nutrivore.myshopify.com/cart/31192710807615:1?channel=buy_button"
+                        , label = row [ F.center ] [ text "$19.99" ]
+                        }
+                    ]
+                ]
+            , column
+                [ centerX ]
+                [ column
+                    [ F.size 18
+                    , F.bold
+                    , F.color colourTheme.textLightOrange
+                    ]
+                    [ newTabLink []
+                        { url = "https://drive.google.com/file/d/1sk7VgjuL2rEqQdnBRdZjr2_Ab9vwrbmo/view?usp=sharing"
+                        , label =
+                            paragraph
+                                [ centerX
+                                , centerY
+                                ]
+                                [ text "Free Cost Efficiency Score!" ]
+                        }
+                    ]
+                ]
+            ]
+        , column [ width fill, F.size 12, spacing 3 ] <|
+            List.map2 (\x y -> makeFeature x)
+                nutridex.nutriDexFeatures
+                (List.range 1 (List.length nutridex.nutriDexFeatures))
+        ]
+
+
 nutriDexTitleMaker : Element msg
 nutriDexTitleMaker =
     column
-        [ width <| px 725
+        [ width fill
         , height fill
         , spacing 20
         ]
@@ -321,7 +394,7 @@ nutriDexAdjustments =
         , height fill
         ]
         [ column
-            [ width <| px 725
+            [ width fill
             , height fill
             , spacing 20
             ]
@@ -774,7 +847,7 @@ nutriDexAminoAcids =
 nutriDexReferenceTitleMaker : Element msg
 nutriDexReferenceTitleMaker =
     column
-        [ width <| px 725
+        [ width fill
         , height fill
         , spacing 20
         ]

frontend/src/Services/Helpers.elm

@@ -38,6 +38,28 @@ serviceMaker service =
         ]
 
 
+serviceMakerMobile : Service -> Element msg
+serviceMakerMobile service =
+    row
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker (serviceTitle service)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardImageMakerMobile (serviceImage service)
+                        , rateMaker service
+                        , descriptionMaker service
+                        , offeringMaker service
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
 serviceImage : Service -> { src : String, description : String }
 serviceImage service =
     { src = "services/" ++ service.serviceImage ++ ".png"

frontend/src/Shared.elm

@@ -12,6 +12,7 @@ module Shared exposing
 
 -}
 
+import Browser.Events as BR exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
 import Json.Decode exposing (..)
@@ -89,8 +90,16 @@ type alias Msg =
 update : Route () -> Msg -> Model -> ( Model, Effect Msg )
 update route msg model =
     case msg of
-        Shared.Msg.NoOp ->
+        Shared.Msg.Resize width height ->
-            ( model
+            ( { model
+                | device =
+                    { height = height
+                    , width = width
+                    }
+                        |> E.classifyDevice
+                , height = height
+                , width = width
+              }
             , Effect.none
             )
 
@@ -101,4 +110,4 @@ update route msg model =
 
 subscriptions : Route () -> Model -> Sub Msg
 subscriptions route model =
-    Sub.none
+    BR.onResize Shared.Msg.Resize

frontend/src/Shared/Msg.elm

@@ -11,4 +11,4 @@ own file, so they can be imported by `Effect.elm`
 
 -}
 type Msg
-    = NoOp
+    = Resize Int Int

frontend/static/styles.css

@@ -0,0 +1,8 @@
+* {
+	scrollbar-width: none;
+  }
+  
+  *::-webkit-scrollbar {
+	display: none;
+  }
+