From 831129192aedf8bdc0faec7a123be69b75764b53 Mon Sep 17 00:00:00 2001 From: brunosimon Date: Sun, 31 Dec 2017 00:05:25 +0100 Subject: [PATCH] :sparkles: Site > Add all content CSS --- site/index.html | 128 ++++++++++-------- site/src/style/base.styl | 23 +++- site/src/style/features.styl | 39 ++++++ site/src/style/footer.styl | 56 ++++++++ site/src/style/get-started.styl | 186 +++++++++++++++++++++++++++ site/src/style/header.styl | 20 +-- site/src/style/main.styl | 6 +- site/src/style/whos-using-it.styl | 29 +++++ site/static/svg/whos-using-hetic.svg | 14 ++ 9 files changed, 430 insertions(+), 71 deletions(-) create mode 100644 site/src/style/features.styl create mode 100644 site/src/style/footer.styl create mode 100644 site/src/style/get-started.styl create mode 100644 site/src/style/whos-using-it.styl create mode 100644 site/static/svg/whos-using-hetic.svg diff --git a/site/index.html b/site/index.html index 4069ea9..9b83dce 100644 --- a/site/index.html +++ b/site/index.html @@ -13,10 +13,10 @@
- Features - Get started - Who's using it? - + Features + Get started + Who's using it? +

@@ -55,29 +55,29 @@

Your audience will thank you

-

Let your audience browse the code of any file in your project or catch up with your most recent changes during your code presentation. With Keppler, your audience will now aloway be up-to-date with what you’re doing, and have the bigger picture in mind.

+

Let your audience browse the code of any file in your project or catch up with your most recent changes during your code presentation. With Keppler, your audience will now aloway be up-to-date with what you’re doing, and have the bigger picture in mind.

No setup for your audience

-

It all happens on their web browser! All they have to do is visit a URL.

+

It all happens on their web browser! All they have to do is visit a URL.

-
+

Transparent for you

-

Once Keppler is launched, you can forget about it. Just code as you would normally do,and your changes will automatically be pushed to your audience, on LAN.

+

Once Keppler is launched, you can forget about it. Just code as you would normally do,and your changes will automatically be pushed to your audience, on LAN.

Resource sharing made easy

-

Your audience can download the resources used in the project directly on Keppler. No need to host your files anywhere!

+

Your audience can download the resources used in the project directly on Keppler. No need to host your files anywhere!

@@ -86,39 +86,55 @@
-

Get started

+
-
-
1.
-

Install Keppler globally

-

You must have node and npm already installed.

-

In your console, run:

- 
npm install -g keppler
-

Didn’t work? Report a bug.

+
+

Get started

+ +
+
1.
+

Install Keppler globally

+

You must have node and npm already installed.

+

In your console, run:

+ 
npm install -g keppler
+

Didn’t work? Report a bug.

+
+ +
+
2.
+

Launch Keppler inside your project folder

+

Navigate to your project folder.

+

In your console, run:

+ 
keppler "My awesome project"
+

This will launch Keppler and automatically open your browser at the URL for viewing your code.

+
+ +
+
3.
+

Share the URL with your audience!

+

Make sure you’re on the same local network.

+

Your audience will now be able to see the contents of the files in project folder, updated in real-time.

+
+ +
+
4.
+

Get coding

+
- -
-
2.
-

Launch Keppler inside your project folder

-

Navigate to your project folder.

-

In your console, run:

- 
keppler "My awesome project"
-

This will launch Keppler and automatically open your browser at the URL for viewing your code.

+
+
+
+
+
+
+
+
+
+
+
+
+
- -
-
3.
-

Share the URL with your audience!

-

Make sure you’re on the same local network.

-

Your audience will now be able to see the contents of the files in project folder, updated in real-time.

-
- -
-
4.
-

Get coding

-
- -
@@ -126,7 +142,7 @@

Who’s using Keppler?

-

Keppler is already being used with hundreds of students learning web development.

+

Keppler is already being used with hundreds of students learning web development.

@@ -137,22 +153,28 @@ diff --git a/site/src/style/base.styl b/site/src/style/base.styl index 129befd..0bc5337 100644 --- a/site/src/style/base.styl +++ b/site/src/style/base.styl @@ -6,4 +6,25 @@ body -moz-osx-font-smoothing grayscale a - text-decoration none \ No newline at end of file + 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) \ No newline at end of file diff --git a/site/src/style/features.styl b/site/src/style/features.styl new file mode 100644 index 0000000..6fc508a --- /dev/null +++ b/site/src/style/features.styl @@ -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 \ No newline at end of file diff --git a/site/src/style/footer.styl b/site/src/style/footer.styl new file mode 100644 index 0000000..1d2104d --- /dev/null +++ b/site/src/style/footer.styl @@ -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 \ No newline at end of file diff --git a/site/src/style/get-started.styl b/site/src/style/get-started.styl new file mode 100644 index 0000000..b853131 --- /dev/null +++ b/site/src/style/get-started.styl @@ -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) diff --git a/site/src/style/header.styl b/site/src/style/header.styl index 3ed2af7..8b06b5c 100644 --- a/site/src/style/header.styl +++ b/site/src/style/header.styl @@ -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 diff --git a/site/src/style/main.styl b/site/src/style/main.styl index 9924622..490c490 100644 --- a/site/src/style/main.styl +++ b/site/src/style/main.styl @@ -1,4 +1,8 @@ @import 'reset.styl' @import 'fonts.styl' @import 'base.styl' -@import 'header.styl' \ No newline at end of file +@import 'header.styl' +@import 'features.styl' +@import 'whos-using-it.styl' +@import 'get-started.styl' +@import 'footer.styl' \ No newline at end of file diff --git a/site/src/style/whos-using-it.styl b/site/src/style/whos-using-it.styl new file mode 100644 index 0000000..cbb2262 --- /dev/null +++ b/site/src/style/whos-using-it.styl @@ -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) \ No newline at end of file diff --git a/site/static/svg/whos-using-hetic.svg b/site/static/svg/whos-using-hetic.svg new file mode 100644 index 0000000..9dd9126 --- /dev/null +++ b/site/static/svg/whos-using-hetic.svg @@ -0,0 +1,14 @@ + + + + Fichier 1@2x + Created with Sketch. + + + + + + + + + \ No newline at end of file