bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from bartlomiej-pluta/review-1

Browse Source 
Implement code review suggestions
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-03 11:03:33 +02:00
committed by GitHub
parent 8d6893d640 af83bd5384
commit 8239c210bd
8 changed files with 66 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/index.html
View File

@@ -59,9 +59,9 @@
<header class="header"> <header class="header">
<div> <div>
<p class="header__h1">Fork app</p> <p class="header__title">Fork app</p>
<p class="header__h2">A real gamechanger in the world of web development</p> <p class="header__subtitle">A real gamechanger in the world of web development</p>
<p class="header__h3">V. 2.8 for Mac and Windows</p> <p class="header__description">V. 2.8 for Mac and Windows</p>
</div> </div>
</header> </header>
<section class="download"> <section class="download">
@@ -73,9 +73,9 @@
<section class="editor"> <section class="editor">
<div class="container"> <div class="container">
<div class="editor__description"> <div class="editor__description">
<p class="editor__h1">Revolutionary editor</p> <p class="editor__title">Revolutionary editor</p>
<div class="row"> <div class="row">
<p class="editor__h2 col-10"> <p class="editor__subtitle col-10">
Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed
id id
metus id quam auctor molestie eget ut augue. metus id quam auctor molestie eget ut augue.
@@ -112,15 +112,15 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="about__features col-6"> <div class="about__features col-6">
<div class="row about__feature"> <div class="row feature">
<div class="col-3 about__feature-icon"> <div class="col-3 feature__icon">
<img src="img/features/1.png"/> <img src="img/features/1.png"/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="about__feature-title"> <p class="feature__title">
Created to Make The Web Better Created to Make The Web Better
</p> </p>
<p class="about__feature-description"> <p class="feature__description">
Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate
dignissim. dignissim.
Sed id metus id quam auctor molestie eget ut augue. Sed id metus id quam auctor molestie eget ut augue.
@@ -128,14 +128,14 @@
</div> </div>
</div> </div>
<div class="row about__feature"> <div class="row about__feature">
<div class="col-3 about__feature-icon"> <div class="col-3 feature__icon">
<img src="img/features/2.png"/> <img src="img/features/2.png"/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="about__feature-title"> <p class="feature__title">
Incredibly Powerful Tool Incredibly Powerful Tool
</p> </p>
<p class="about__feature-description"> <p class="feature__description">
Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat
massa massa
placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat. placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.
@@ -143,14 +143,14 @@
</div> </div>
</div> </div>
<div class="row about__feature"> <div class="row about__feature">
<div class="col-3 about__feature-icon"> <div class="col-3 feature__icon">
<img src="img/features/3.png"/> <img src="img/features/3.png"/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="about__feature-title"> <p class="feature__title">
Experimental Stuff Experimental Stuff
</p> </p>
<p class="about__feature-description"> <p class="feature__description">
Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat
massa massa
placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat. placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.
@@ -158,14 +158,14 @@
</div> </div>
</div> </div>
<div class="row about__feature"> <div class="row about__feature">
<div class="col-3 about__feature-icon"> <div class="col-3 feature__icon">
<img src="img/features/4.png"/> <img src="img/features/4.png"/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="about__feature-title"> <p class="feature__title">
Created to Make The Web Better Created to Make The Web Better
</p> </p>
<p class="about__feature-description"> <p class="feature__description">
Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat
massa massa
placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat. placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.
@@ -174,7 +174,7 @@
</div> </div>
</div> </div>
<div class="about__what-you-get col-6"> <div class="about__what-you-get col-6">
<p class="about__h1 about__h1--no-wrap">&lt;Here is what you get&gt;</p> <p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
<img src="img/features/editor.png" alt="Revolutionary editor"> <img src="img/features/editor.png" alt="Revolutionary editor">
</div> </div>
</div> </div>
@@ -185,10 +185,10 @@
<div class="reviews__content col-10"> <div class="reviews__content col-10">
<div class="review"> <div class="review">
<div class="author"> <div class="author">
<img class="avatar" src="http://i.pravatar.cc/100&img=1" alt="Steven Strange"> <img class="avatar" src="http://i.pravatar.cc/100&amp;img=1" alt="Steven Strange">
<div class="author__details"> <div class="author__details">
<p class="author__name">Steven Strange</p> <p class="author__name">Steven Strange</p>
<p class="author__nickname nickname">DoctorS</p> <p class="nickname nickname--strong">DoctorS</p>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@@ -203,10 +203,10 @@
</div> </div>
<div class="review"> <div class="review">
<div class="author"> <div class="author">
<img class="avatar" src="http://i.pravatar.cc/100&img=2" alt="Steven Strange"> <img class="avatar" src="http://i.pravatar.cc/100&amp;img=2" alt="Steven Strange">
<div class="author__details"> <div class="author__details">
<p class="author__name">Aemiliana Alejo</p> <p class="author__name">Aemiliana Alejo</p>
<p class="author__nickname nickname">alejo</p> <p class="nickname nickname--strong">alejo</p>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@@ -220,10 +220,10 @@
</div> </div>
<div class="review"> <div class="review">
<div class="author"> <div class="author">
<img class="avatar" src="http://i.pravatar.cc/100&img=3" alt="Steven Strange"> <img class="avatar" src="http://i.pravatar.cc/100&amp;img=3" alt="Steven Strange">
<div class="author__details"> <div class="author__details">
<p class="author__name">Melpomeni Étaín</p> <p class="author__name">Melpomeni Étaín</p>
<p class="author__nickname nickname">etain</p> <p class="nickname nickname--strong">etain</p>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">

3
src/js/script.js
View File

@@ -2,11 +2,12 @@
'use strict'; 'use strict';
var scrollTop = 0; var scrollTop = 0;
var scrollThreshold = $(window).height() / 2;
$(window).scroll(function () { $(window).scroll(function () {
scrollTop = $(window).scrollTop(); scrollTop = $(window).scrollTop();
if (scrollTop >= $(window).height() / 2) { if (scrollTop >= scrollThreshold) {
$('.navbar').addClass('navbar--shrink'); $('.navbar').addClass('navbar--shrink');
} else { } else {
$('.navbar').removeClass('navbar--shrink'); $('.navbar').removeClass('navbar--shrink');

29
src/scss/_about.scss
View File

@@ -4,36 +4,13 @@
height: 710px; height: 710px;
} }
.about__feature { .about__title {
margin: 20px 0 0 10px;
}
.about__feature-icon {
text-align: center;
}
.about__feature-title {
margin-bottom: 10px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $dark-text;
}
.about__feature-description {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}
.about__h1 {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-weight: bold; font-weight: bold;
font-size: 48px; font-size: 48px;
color: $primary; color: $primary;
}
.about__h1--no-wrap { &--no-wrap {
white-space: nowrap; white-space: nowrap;
} }
}

16
src/scss/_author.scss
View File

@@ -24,18 +24,18 @@
color: $primary-dark; color: $primary-dark;
} }
.author__nickname {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 16px;
}
.nickname { .nickname {
color: $primary; color: $primary;
&:before { &:before {
content: '@'; content: '@';
} }
&--strong {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 16px;
}
} }

4
src/scss/_editor.scss
View File

@@ -2,7 +2,7 @@
text-align: center; text-align: center;
} }
.editor__h1 { .editor__title {
margin-top: 60px; margin-top: 60px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 54px; font-size: 54px;
@@ -11,7 +11,7 @@
color: $primary-dark; color: $primary-dark;
} }
.editor__h2 { .editor__subtitle {
margin: 0 auto; margin: 0 auto;
font-family: Source Sans Pro, sans-serif; font-family: Source Sans Pro, sans-serif;
font-size: 21px; font-size: 21px;

21
src/scss/_feature.scss Normal file
View File

@@ -0,0 +1,21 @@
.feature {
margin: 20px 0 0 10px;
}
.feature__icon {
text-align: center;
}
.feature__title {
margin-bottom: 10px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $dark-text;
}
.feature__description {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}

6
src/scss/_header.scss
View File

@@ -4,7 +4,7 @@
padding-top: 110px; padding-top: 110px;
} }
.header__h1 { .header__title {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 82px; font-size: 82px;
font-weight: bold; font-weight: bold;
@@ -13,7 +13,7 @@
text-align: center; text-align: center;
} }
.header__h2 { .header__subtitle {
font-family: Lato, sans-serif; font-family: Lato, sans-serif;
font-size: 30px; font-size: 30px;
color: $primary; color: $primary;
@@ -21,7 +21,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.header__h3 { .header__description {
margin-top: 20px; margin-top: 20px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 16px; font-size: 16px;

1
src/scss/style.scss
View File

@@ -7,5 +7,6 @@
@import "download"; @import "download";
@import "editor"; @import "editor";
@import "about"; @import "about";
@import "feature";
@import "reviews"; @import "reviews";
@import "social"; @import "social";