lang-section-responsive.patch

diff --git a/src/Contents.elm b/src/Contents.elm
index 82ac772..f856fe4 100644
--- a/src/Contents.elm
+++ b/src/Contents.elm
@@ -34,52 +34,59 @@ githubLinkData =
 
 
 languages =
-    [ { label = "OCaml"
-      , rot = 15
-      , scale = 1
-      , translate = ( 0, -25 )
-      }
-    , { label = "SML"
-      , rot = -15
-      , scale = 0.95
-      , translate = ( -50, 0 )
-      }
-    , { label = "Erlang"
-      , rot = -5
-      , scale = 1.2
-      , translate = ( -30, 0 )
-      }
-    , { label = "F#"
-      , rot = -2
-      , scale = 1.4
-      , translate = ( -10, -20 )
-      }
-    , { label = "Clojure"
-      , rot = -7
-      , scale = 1.18
-      , translate = ( -20, 0 )
-      }
-    , { label = "Elm Lang"
-      , rot = 15
-      , scale = 1.4
-      , translate = ( 0, -10 )
-      }
-    , { label = "Scala"
-      , rot = -20
-      , scale = 1.2
-      , translate = ( 0, -30 )
-      }
-    , { label = "Lisp"
-      , rot = -4
-      , scale = 1.3
-      , translate = ( -40, 20 )
-      }
-    , { label = "Haskell"
-      , rot = 10
-      , scale = 1.5
-      , translate = ( -30, 0 )
-      }
-    ]
+    ( [ { label = "OCaml"
+        , rot = 15
+        , scale = 1
+        , translate = ( 0, -5 )
+        }
+      , { label = "SML"
+        , rot = -15
+        , scale = 1.3
+        , translate = ( -30, 15 )
+        }
+      , { label = "Erlang"
+        , rot = -5
+        , scale = 1.2
+        , translate = ( -30, 15 )
+        }
+      , { label = "F#"
+        , rot = -2
+        , scale = 1.4
+        , translate = ( -20, -5 )
+        }
+      , { label = "Elixir"
+        , rot = 10
+        , scale = 1.3
+        , translate = ( -20, 20 )
+        }
+      ]
+    , [ { label = "Clojure"
+        , rot = -7
+        , scale = 1.18
+        , translate = ( 10, 0 )
+        }
+      , { label = "Elm"
+        , rot = 15
+        , scale = 1.4
+        , translate = ( 10, 10 )
+        }
+      , { label = "Scala"
+        , rot = -20
+        , scale = 1.2
+        , translate = ( 10, 0 )
+        }
+      , { label = "Scheme"
+        , rot = -4
+        , scale = 1.3
+        , translate = ( -30, 20 )
+        }
+      , { label = "Haskell"
+        , rot = 10
+        , scale = 1.5
+        , translate = ( -20, 15 )
+        }
+      ]
+    )
 
 
 projects =
diff --git a/src/Elements.elm b/src/Elements.elm
index 41e4bf2..93c1bdf 100644
--- a/src/Elements.elm
+++ b/src/Elements.elm
@@ -1,7 +1,7 @@
 module Elements exposing (..)
 
 import Css exposing (..)
-import Css.Animations as Anim
+import Css.Animations as Anima
 import Css.Media as Media exposing (only, screen, withMedia)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attrs exposing (..)
@@ -28,11 +28,11 @@ import Svg.Styled.Attributes as SAttr
 
 
 animFill =
-    Anim.property "fill"
+    Anima.property "fill"
 
 
 animStrokeDash =
-    Anim.property "stroke-dashoffset"
+    Anima.property "stroke-dashoffset"
 
 
 lambdaPath =
@@ -66,7 +66,7 @@ lambdaPath =
         , SAttr.fill "#D872E9"
         , SAttr.css
             [ animationName
-                (Anim.keyframes
+                (Anima.keyframes
                     [ ( 0, [ animFill "none", animStrokeDash "1000" ] )
                     , ( 80, [ animFill "black" ] )
                     , ( 100, [ animFill "#D872E9", animStrokeDash "0" ] )
@@ -323,8 +323,13 @@ languageWrapper ({ label, rot } as lang) =
                 , scale lang.scale
                 , translate2 (px tx) (px ty)
                 ]
+            , Css.property "transform-origin" "center center"
             , textLarge
             , Styles.font
+            , Css.height (rem 2.5)
+            , withMedia
+                [ only screen [ Media.maxWidth (px 800) ] ]
+                [ fontSize (rem 1.5) ]
             ]
         ]
         [ text label ]
diff --git a/src/Main.elm b/src/Main.elm
index 88dc6d3..9fc5f2d 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -127,30 +127,59 @@ homeSection model =
         ]
 
 
+languageContainer languages =
+    div
+        [ css
+            [ minWidth (px 700)
+            , maxWidth (px 1440)
+            , displayFlex
+            , flex (int 1)
+            , justifyContent spaceBetween
+            ]
+        ]
+        (List.map languageWrapper languages)
+
+
 languagesSection =
     section
         [ css
-            [ Css.height (rem 10)
-            , displayFlex
+            [ displayFlex
             , padding2 (rem 12) (rem 2)
             , maxWidth (px 1440)
             , overflow Css.hidden
+            , flexWrap Css.wrap
             , Css.width (pct 100)
             , withMedia [ only screen [ Media.maxWidth (px 800) ] ]
-                [ padding2 (rem 8) (rem 1.5) ]
+                [ padding2 (rem 2) (rem 1) ]
             ]
         ]
         [ div [ css [ padding4 (rem 0) (rem 3) (rem 0) (rem 1) ] ] [ lambdaLogoSmall ]
         , div
             [ css
-                [ minWidth (px 700)
-                , maxWidth (px 1440)
+                [ minWidth (px 240)
+                , maxWidth (px 720)
+                , minHeight (rem 8)
+                , displayFlex
+                , withMedia [ only screen [ Media.maxWidth (px 800) ] ]
+                    [ minHeight (rem 6) ]
+                , flex (int 1)
+                , justifyContent spaceBetween
+                ]
+            ]
+            (List.map languageWrapper (Tuple.first Contents.languages))
+        , div
+            [ css
+                [ minWidth (px 240)
+                , maxWidth (px 720)
+                , minHeight (rem 8)
+                , withMedia [ only screen [ Media.maxWidth (px 800) ] ]
+                    [ minHeight (rem 6) ]
                 , displayFlex
                 , flex (int 1)
                 , justifyContent spaceBetween
                 ]
             ]
-            (List.map languageWrapper Contents.languages)
+            (List.map languageWrapper (Tuple.second Contents.languages))
         ]