From fe0648a36f2d2594e909d6cfb1ce0a4ca8706720 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Mon, 1 Jan 2018 15:56:35 +0100
Subject: [PATCH] :sparkles: Site > Add support to small screens

---
 site/index.html                   |  29 ++++----
 site/src/style/features.styl      | 105 ++++++++++++++++++++++++++++
 site/src/style/footer.styl        |  10 +++
 site/src/style/get-started.styl   | 109 ++++++++++++++++++++++++++++++
 site/src/style/header.styl        |  93 ++++++++++++++++++++++++-
 site/src/style/main.styl          |   1 +
 site/src/style/variables.styl     |   7 ++
 site/src/style/whos-using-it.styl |  30 ++++++++
 8 files changed, 368 insertions(+), 16 deletions(-)
 create mode 100644 site/src/style/variables.styl

diff --git a/site/index.html b/site/index.html
index 906831f..662fd5f 100644
--- a/site/index.html
+++ b/site/index.html
@@ -201,6 +201,21 @@
         <section class="section get-started" id="get-started">
             <div class="background"></div>
 
+            <div class="illustration">
+                <div class="center">
+                    <div class="circle index-1"></div>
+                    <div class="circle index-2"></div>
+                    <div class="circle index-3"></div>
+                    <div class="circle index-4"></div>
+                    <div class="circle index-5"></div>
+                    <div class="disc index-1"><div class="inner"></div></div>
+                    <div class="disc index-2"><div class="inner"></div></div>
+                    <div class="disc index-3"><div class="inner"></div></div>
+                    <div class="disc index-4"><div class="inner"></div></div>
+                    <div class="disc index-5"><div class="inner"></div></div>
+                </div>
+            </div>
+
             <div class="content">
                 <h3 class="main-title">Get started</h3>
 
@@ -234,20 +249,6 @@
                     <p class="paragraph title">Get coding</p>
                 </div>
             </div>
-            <div class="illustration">
-                <div class="center">
-                    <div class="circle index-1"></div>
-                    <div class="circle index-2"></div>
-                    <div class="circle index-3"></div>
-                    <div class="circle index-4"></div>
-                    <div class="circle index-5"></div>
-                    <div class="disc index-1"><div class="inner"></div></div>
-                    <div class="disc index-2"><div class="inner"></div></div>
-                    <div class="disc index-3"><div class="inner"></div></div>
-                    <div class="disc index-4"><div class="inner"></div></div>
-                    <div class="disc index-5"><div class="inner"></div></div>
-                </div>
-            </div>
         </section>
 
         <!-- Who's using it -->
diff --git a/site/src/style/features.styl b/site/src/style/features.styl
index 9b4a7a0..20ac3fb 100644
--- a/site/src/style/features.styl
+++ b/site/src/style/features.styl
@@ -4,25 +4,69 @@ section.features
     text-align center
     overflow hidden
 
+    @media (max-width: $breakpoints.l)
+        padding-top 90px
+        padding-bottom 60px
+
+    @media (max-width: $breakpoints.m)
+        padding-top 70px
+        padding-bottom 40px
+
     .paragraph
         font-weight 300
         font-size 17px
         line-height 22px
 
+        @media (max-width: $breakpoints.m)
+            font-size 16px
+
+        @media (max-width: $breakpoints.s)
+            font-size 15px
+
     .main-title
         margin-bottom 80px
         font-size 45px
 
+        @media (max-width: $breakpoints.l)
+            margin-bottom 60px
+            font-size 40px
+
+        @media (max-width: $breakpoints.m)
+            margin-bottom 40px
+            font-size 35px
+
+        @media (max-width: $breakpoints.s)
+            margin-bottom 30px
+            font-size 30px
+
     .intro
         width 520px
         margin-left auto
         margin-bottom 20px
         margin-right auto
 
+        @media (max-width: $breakpoints.s)
+            width auto
+            margin-right 20px
+            margin-bottom 30px
+            margin-left 20px
+
         .title
             margin-bottom 30px
             font-size 25px
 
+            @media (max-width: $breakpoints.l)
+                margin-bottom 25px
+                font-size 23px
+
+            @media (max-width: $breakpoints.m)
+                margin-bottom 20px
+                font-size 21px
+
+            @media (max-width: $breakpoints.s)
+                margin-bottom 15px
+                font-size 19px
+
     .info
         position relative
         display flex
@@ -33,13 +77,53 @@ section.features
         margin-right auto
         text-align left
 
+        @media (max-width: $breakpoints.xl)
+            width 920px
+
+        @media (max-width: $breakpoints.l)
+            width auto
+            height 350px
+            margin-right 20px
+            margin-left 20px
+
+        @media (max-width: $breakpoints.s)
+            display block
+            height auto
+            margin-bottom 30px
+            padding-top 340px
+            text-align center
+
+        @media (max-width: $breakpoints.xs)
+            padding-top 280px
+
         .text
             width 450px
 
+            @media (max-width: $breakpoints.xl)
+                width 400px
+
+            @media (max-width: $breakpoints.l)
+                width 50%
+
+            @media (max-width: $breakpoints.s)
+                width auto
+
             .title
                 margin-bottom 28px
                 font-size 35px
 
+                @media (max-width: $breakpoints.l)
+                    margin-bottom 24px
+                    font-size 30px
+
+                @media (max-width: $breakpoints.m)
+                    margin-bottom 20px
+                    font-size 25px
+
+                @media (max-width: $breakpoints.s)
+                    margin-bottom 16px
+                    font-size 20px
+
         .illustration
             position absolute
             top 50%
@@ -48,6 +132,17 @@ section.features
             height 10px
             background #ff0000
 
+            @media (max-width: $breakpoints.l)
+                right 20%
+
+            @media (max-width: $breakpoints.s)
+                top 160px
+                left 50%
+
+            @media (max-width: $breakpoints.xs)
+                top 140px
+                transform scale(0.8)
+
             .element
                 position absolute
                 background-repeat no-repeat
@@ -169,6 +264,9 @@ section.features
                     background-image url(../../static/svg/illustrations/astronaut/red-book.svg)
 
             .system
+                @media (max-width: $breakpoints.l)
+                    display none
+
                 .circle
                     position absolute
                     top 0
@@ -249,3 +347,10 @@ section.features
             .illustration
                 right auto
                 left 25%
+
+                @media (max-width: $breakpoints.l)
+                    left 20%
+
+                @media (max-width: $breakpoints.s)
+                    top 160px
+                    left 50%
diff --git a/site/src/style/footer.styl b/site/src/style/footer.styl
index 1d2104d..74c9f8a 100644
--- a/site/src/style/footer.styl
+++ b/site/src/style/footer.styl
@@ -36,6 +36,14 @@ footer.footer
             padding-right 60px
             padding-left 60px
 
+            @media (max-width: $breakpoints.m)
+                padding-right 40px
+                padding-left 40px
+
+            @media (max-width: $breakpoints.s)
+                padding-right 30px
+                padding-left 30px
+
             .title
                 padding-bottom 23px
 
@@ -49,6 +57,8 @@ footer.footer
                         bottom 4px
 
     .text
+        margin-right 20px
+        margin-left 20px
         text-align center
         font-weight 300
 
diff --git a/site/src/style/get-started.styl b/site/src/style/get-started.styl
index 2c806eb..25577e9 100644
--- a/site/src/style/get-started.styl
+++ b/site/src/style/get-started.styl
@@ -5,6 +5,14 @@ section.get-started
     color: #ffffff
     font-size 17px
 
+    @media (max-width: $breakpoints.l)
+        padding-top 90px
+        padding-bottom 60px
+
+    @media (max-width: $breakpoints.m)
+        padding-top 70px
+        padding-bottom 40px
+
     .background
         position absolute
         top 0
@@ -21,17 +29,55 @@ section.get-started
         margin-left auto
         margin-right auto
 
+        @media (max-width: $breakpoints.l)
+            width auto
+            margin-left 120px
+            margin-right 20px
+
+        @media (max-width: $breakpoints.m)
+            width auto
+            margin-left 80px
+
+        @media (max-width: $breakpoints.xs)
+            margin-left 45px
+
     .main-title
         margin-bottom 80px
         font-size 45px
         text-align center
 
+        @media (max-width: $breakpoints.l)
+            margin-bottom 60px
+            font-size 40px
+
+        @media (max-width: $breakpoints.m)
+            margin-bottom 40px
+            font-size 35px
+
+        @media (max-width: $breakpoints.s)
+            margin-bottom 30px
+            font-size 30px
+
     .step
         position relative
         margin-bottom 70px
         font-size 17px
         font-weight 300
 
+        @media (max-width: $breakpoints.l)
+            font-size 16px
+
+        @media (max-width: $breakpoints.m)
+            margin-bottom 60px
+            font-size 15px
+
+        @media (max-width: $breakpoints.s)
+            margin-bottom 50px
+            font-size 14px
+
+        @media (max-width: $breakpoints.xs)
+            margin-bottom 40px
+
         .number
             position absolute
             top -28px
@@ -39,18 +85,66 @@ section.get-started
             font-weight 500
             font-size 60px
 
+            @media (max-width: $breakpoints.l)
+                top -20px
+                right calc(100% + 25px)
+                font-size 50px
+
+            @media (max-width: $breakpoints.m)
+                top -12px
+                right calc(100% + 16px)
+                font-size 40px
+
+            @media (max-width: $breakpoints.s)
+                top -6px
+                right calc(100% + 16px)
+                font-size 30px
+
+            @media (max-width: $breakpoints.xs)
+                top -7px
+                right calc(100% + 8px)
+
         .paragraph
             line-height 1.5em
             padding-left 50px
 
+            @media (max-width: $breakpoints.l)
+                padding-left 45px
+
+            @media (max-width: $breakpoints.m)
+                padding-left 35px
+
+            @media (max-width: $breakpoints.s)
+                padding-left 30px
+
+            @media (max-width: $breakpoints.xs)
+                padding-left 25px
+
             &.title
                 font-size 20px
                 margin-bottom 20px
                 padding-left 0
 
+                @media (max-width: $breakpoints.l)
+                    font-size 19px
+
+                @media (max-width: $breakpoints.m)
+                    font-size 18px
+
+                @media (max-width: $breakpoints.s)
+                    margin-bottom 16px
+                    font-size 17px
+
+                @media (max-width: $breakpoints.xs)
+                    margin-bottom 12px
+                    font-size 16px
+
             &.small
                 font-size 13px
 
+                @media (max-width: $breakpoints.m)
+                    font-size 12px
+
             a
                 text-decoration underline
                 text-decoration-skip ink
@@ -67,6 +161,13 @@ section.get-started
             border-left: 4px solid #D8D8D8
             font-family Courier
 
+            @media (max-width: $breakpoints.s)
+                width 300px
+
+            @media (max-width: $breakpoints.xs)
+                padding-left 12px
+                width 260px
+
     .illustration
         position absolute
         top 0
@@ -75,6 +176,14 @@ section.get-started
         width 100%
         overflow hidden
         pointer-events none
+        transform-origin 100% 50%
+
+        @media (max-width: $breakpoints.l)
+            opacity 0.3
+            transform scale(0.75)
+
+        @media (max-width: $breakpoints.m)
+            transform scale(0.5)
 
         .center
             position absolute
diff --git a/site/src/style/header.styl b/site/src/style/header.styl
index 0b0578f..a4b9c1f 100644
--- a/site/src/style/header.styl
+++ b/site/src/style/header.styl
@@ -7,6 +7,23 @@ section.header
     color: #ffffff
     font-size 17px
 
+    @media (max-width: $breakpoints.xl)
+        height 890px
+
+    @media (max-width: $breakpoints.l)
+        height 810px
+
+    @media (max-width: $breakpoints.m)
+        height 760px
+        font-size 16px
+
+    @media (max-width: $breakpoints.s)
+        height 520px
+        font-size 15px
+
+    @media (max-width: $breakpoints.xs)
+        font-size 14px
+
     .background
         position absolute
         top -10vh
@@ -23,12 +40,32 @@ section.header
         right 65px
         font-weight 300
 
+        @media (max-width: $breakpoints.l)
+            right 45px
+
+        @media (max-width: $breakpoints.m)
+            right 25px
+
+        @media (max-width: $breakpoints.s)
+            right 0
+            left 0
+            text-align center
+
         .item
             display inline-block
             position relative
             vertical-align middle
             padding 10px
-            margin 0 7px
+            margin-left 7px
+            margin-right 7px
+
+            @media (max-width: $breakpoints.s)
+                margin-left 0
+                margin-right 0
+
+            @media (max-width: $breakpoints.xs)
+                padding-right 4px
+                padding-left 4px
 
             &.github
                 background-image url(../../static/svg/github.svg)
@@ -43,11 +80,30 @@ section.header
                     bottom 2px
                     left 10px
 
+                    @media (max-width: $breakpoints.xs)
+                        right 4px
+                        left 4px
+
     .title
         position absolute
         top 190px
         left 50%
 
+        @media (max-width: $breakpoints.l)
+            top 180px
+            transform scale(0.9)
+
+        @media (max-width: $breakpoints.m)
+            top 175px
+            transform scale(0.8)
+
+        @media (max-width: $breakpoints.s)
+            top 170px
+            transform scale(0.7)
+
+        @media (max-width: $breakpoints.xs)
+            top 165px
+
         .keppler
             position absolute
             left -60px
@@ -85,16 +141,49 @@ section.header
         top 250px
         left 0
         right 0
+        padding-left 20px
+        padding-right 20px
         text-align center
-        line-height 35px
+        line-height 1.5em
         font-size 25px
         font-weight 300
 
+        @media (max-width: $breakpoints.l)
+            top 240px
+            font-size 23px
+
+        @media (max-width: $breakpoints.m)
+            top 235px
+            font-size 21px
+
+        @media (max-width: $breakpoints.s)
+            top 230px
+            font-size 19px
+
+        @media (max-width: $breakpoints.xs)
+            top 225px
+            font-size 17px
+
     .demo
         position absolute
         top 505px
         left 50%
 
+        @media (max-width: $breakpoints.xl)
+            top 485px
+            transform scale(0.8)
+
+        @media (max-width: $breakpoints.l)
+            top 455px
+            transform scale(0.6)
+
+        @media (max-width: $breakpoints.m)
+            top 435px
+            transform scale(0.5)
+
+        @media (max-width: $breakpoints.s)
+            display none
+
         .speaker
             position absolute
             top -150px
diff --git a/site/src/style/main.styl b/site/src/style/main.styl
index 490c490..4bea44e 100644
--- a/site/src/style/main.styl
+++ b/site/src/style/main.styl
@@ -1,3 +1,4 @@
+@import 'variables.styl'
 @import 'reset.styl'
 @import 'fonts.styl'
 @import 'base.styl'
diff --git a/site/src/style/variables.styl b/site/src/style/variables.styl
new file mode 100644
index 0000000..ea150e6
--- /dev/null
+++ b/site/src/style/variables.styl
@@ -0,0 +1,7 @@
+$breakpoints = {
+    xl: 1200px,
+    l: 960px,
+    m: 720px,
+    s: 580px,
+    xs: 440px,
+}
\ No newline at end of file
diff --git a/site/src/style/whos-using-it.styl b/site/src/style/whos-using-it.styl
index cbb2262..f3a63fa 100644
--- a/site/src/style/whos-using-it.styl
+++ b/site/src/style/whos-using-it.styl
@@ -3,18 +3,48 @@ section.whos-using-it
     padding-bottom 90px
     text-align center
 
+    @media (max-width: $breakpoints.l)
+        padding-top 90px
+        padding-bottom 60px
+
+    @media (max-width: $breakpoints.m)
+        padding-top 70px
+        padding-bottom 40px
+
     .main-title
+        margin-right 20px
         margin-bottom 60px
+        margin-left 20px
         font-size 45px
 
+        @media (max-width: $breakpoints.l)
+            margin-bottom 60px
+            font-size 40px
+
+        @media (max-width: $breakpoints.m)
+            margin-bottom 40px
+            font-size 35px
+
+        @media (max-width: $breakpoints.s)
+            margin-bottom 30px
+            font-size 30px
+
     .text
         margin-bottom 40px
+        margin-right 20px
+        margin-left 20px
 
         .paragraph
             font-weight 300
             font-size 17px
             line-height 22px
 
+            @media (max-width: $breakpoints.m)
+                font-size 16px
+
+            @media (max-width: $breakpoints.s)
+                font-size 15px
+
     .items
         width 50%
         margin-right auto