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

✨ Site > Add all content CSS

Browse Source
This commit is contained in:
brunosimon
2017-12-31 00:05:25 +01:00
parent 21d04f38d4
commit 831129192a
9 changed files with 430 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/style/base.styl
+22 -1
View File
@@ -6,4 +6,25 @@ body
-moz-osx-font-smoothing grayscale
a
text-decoration none
text-decoration none
.underline
position relative
&::after
content ''
position absolute
display block
right 0
bottom 0
left 0
height 1px
background #ffffff
transform scaleX(0)
transform-origin 0 0
transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1)
will-change transform
&:hover
&::after
transform scaleX(1)
site/src/style/features.styl
+39
View File
@@ -0,0 +1,39 @@
section.features
padding-top 120px
text-align center
.paragraph
font-weight 300
font-size 17px
line-height 22px
.main-title
margin-bottom 80px
font-size 45px
.intro
width 520px
margin 0 auto
.title
margin-bottom 30px
font-size 25px
.info
display flex
align-items center
width 1024px
height 550px
margin-left auto
margin-right auto
text-align left
.text
width 450px
.title
margin-bottom 28px
font-size 35px
&.right
justify-content flex-end
site/src/style/footer.styl
+56
View File
@@ -0,0 +1,56 @@
footer.footer
position relative
padding-top 90px
padding-bottom 60px
color: #ffffff
font-size 14px
.background
position absolute
top 0
left 0
width 100%
height 60%
background linear-gradient(to right, #330867 0%,#31a7bb 100%)
transform skewY(-5deg)
box-shadow 0px 0px 50px rgba(60, 117, 162, 0.4)
.background-2
position absolute
top 30%
left 0
width 100%
height 70%
background linear-gradient(to right, #330867 0%,#31a7bb 100%)
.content
position relative
.lists
display flex
justify-content center
align-items flex-start
padding-bottom 50px
.list
padding-right 60px
padding-left 60px
.title
padding-bottom 23px
.item
padding-top 7px
padding-bottom 7px
font-weight 300
&.underline
&::after
bottom 4px
.text
text-align center
font-weight 300
a
text-decoration underline
site/src/style/get-started.styl
+186
View File
@@ -0,0 +1,186 @@
section.get-started
position relative
padding-top 120px
padding-bottom 60px
color: #ffffff
font-size 17px
.background
position absolute
top 0
left 0
width 100%
height 100%
background linear-gradient(135deg, #330867 0%,#31a7bb 100%)
transform skewY(-5deg)
box-shadow 0px 0px 50px rgba(60, 117, 162, 0.4)
.content
position relative
width 600px
margin-left auto
margin-right auto
.main-title
margin-bottom 80px
font-size 45px
text-align center
.step
position relative
margin-bottom 70px
font-size 17px
font-weight 300
.number
position absolute
top -28px
right calc(100% + 45px)
font-weight 500
font-size 60px
.paragraph
line-height 1.5em
padding-left 50px
&.title
font-size 20px
margin-bottom 20px
padding-left 0
&.small
font-size 13px
a
text-decoration underline
text-decoration-skip ink
.code
width 340px
margin-top 6px
margin-bottom 6px
padding-top 12px
padding-right 12px
padding-bottom 12px
padding-left 24px
background: rgba(10, 10, 10, 0.8)
border-left: 4px solid #D8D8D8
.illustration
position absolute
top 0
right 0
bottom 0
width 100%
overflow hidden
.center
position absolute
top 50%
right 0
.circle
position absolute
top 0
left 0
border-radius 999px
border 1px solid #fff
&.index-1
width 250px
height 250px
margin-top -125px
margin-left -125px
&.index-2
width 400px
height 400px
margin-top -200px
margin-left -200px
&.index-3
width 550px
height 550px
margin-top -275px
margin-left -275px
&.index-4
width 700px
height 700px
margin-top -350px
margin-left -350px
&.index-5
width 850px
height 850px
margin-top -425px
margin-left -425px
.disc
position absolute
top 0
left 0
animation get-started-disc-rotation 2s infinite linear
will-change transform
.inner
position absolute
top 0
border-radius 999px
background #ffffff
&.index-1
animation-duration 6.1s
.inner
top -125px
width 10px
height 10px
margin-top -5px
margin-left -5px
&.index-2
animation-duration 11.2s
.inner
top -200px
width 20px
height 20px
margin-top -10px
margin-left -10px
&.index-3
animation-duration 16.3s
.inner
top -275px
width 30px
height 30px
margin-top -15px
margin-left -15px
&.index-4
animation-duration 21.4s
.inner
top -350px
width 40px
height 40px
margin-top -20px
margin-left -20px
&.index-5
animation-duration 26.5s
.inner
top -425px
width 50px
height 50px
margin-top -25px
margin-left -25px
@keyframes get-started-disc-rotation
0%
transform rotate(140deg)
100%
transform rotate(380deg)
site/src/style/header.styl
+4 -16
View File
@@ -34,23 +34,11 @@ section.header
width 40px
height 40px
&::after
content ''
position absolute
display block
right 10px
bottom 2px
left 10px
height 1px
background #ffffff
transform scaleX(0)
transform-origin 0 0
transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1)
will-change transform
&:hover
&.underline
&::after
transform scaleX(1)
right 10px
bottom 2px
left 10px
.title
position absolute
site/src/style/main.styl
+5 -1
View File
@@ -1,4 +1,8 @@
@import 'reset.styl'
@import 'fonts.styl'
@import 'base.styl'
@import 'header.styl'
@import 'header.styl'
@import 'features.styl'
@import 'whos-using-it.styl'
@import 'get-started.styl'
@import 'footer.styl'
site/src/style/whos-using-it.styl
+29
View File
@@ -0,0 +1,29 @@
section.whos-using-it
padding-top 120px
padding-bottom 90px
text-align center
.main-title
margin-bottom 60px
font-size 45px
.text
margin-bottom 40px
.paragraph
font-weight 300
font-size 17px
line-height 22px
.items
width 50%
margin-right auto
margin-left auto
.item
display inline-block
&.hetic
width 100px
height 120px
background-image url(../../static/svg/whos-using-hetic.svg)