furk4ngg/keppler
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Site > Add support to small screens

Browse Source
This commit is contained in:
brunosimon
2018-01-01 15:56:35 +01:00
parent 236e5e88f0
commit fe0648a36f
8 changed files with 368 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/style/features.styl
+105
View File
@@ -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%
site/src/style/footer.styl
+10
View File
@@ -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
site/src/style/get-started.styl
+109
View File
@@ -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
site/src/style/header.styl
+91 -2
View File
@@ -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
site/src/style/main.styl
+1
View File
@@ -1,3 +1,4 @@
@import 'variables.styl'
@import 'reset.styl'
@import 'fonts.styl'
@import 'base.styl'
site/src/style/variables.styl
+7
View File
@@ -0,0 +1,7 @@
$breakpoints = {
xl: 1200px,
l: 960px,
m: 720px,
s: 580px,
xs: 440px,
}
site/src/style/whos-using-it.styl
+30
View File
@@ -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