Enable RWD for testimonials

Merge pull request #12 from bartlomiej-pluta/rwd-social
Enable RWD for social buttons
2018-04-16 12:18:38 +02:00 · 2018-04-16 12:00:59 +02:00 · 2018-04-16 12:00:17 +02:00 · 2018-04-16 11:21:08 +02:00 · 2018-04-16 11:10:29 +02:00 · 2018-04-12 14:43:57 +02:00
8 changed files with 148 additions and 56 deletions
--- a/src/img/navbar/sandwich.svg
+++ b/src/img/navbar/sandwich.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22" width="27" height="22">
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: #333333 } 
+	</style>
+	<path id="sandwich" class="shp0" d="M0,20.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM0,11.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM6,2.5c0,0.83 0.67,1.5 1.5,1.5h17c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-17c-0.83,0 -1.5,0.67 -1.5,1.5z" />
+</svg>
--- a/src/index.html
+++ b/src/index.html
@@ -28,30 +28,34 @@
 </head>
 <body>
 <div class="wrapper" id="wrapper">
-    <div class="navbar navbar-expand-lg fixed-top">
-        <div class="container">
-            <div class="brand navbar-header">
+    <div class="navbar navbar-light navbar-expand-lg fixed-top">
+        <div class="container navbar__content">
+            <div class="brand navbar__content__brand navbar-header">
                <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
                <span class="brand__name">Fork</span>
                <span class="brand__name brand__name--emph">IO</span>
            </div>
-            <ul class="navbar__body navbar-nav">
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">Overview</a>
-                </li>
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">About fork</a>
-                </li>
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">Buying options</a>
-                </li>
-                <li class="nav-item">
-                    <a class="navbar__link nav-link" href="#">Support</a>
-                </li>
-                <li class="nav-item">
-                    <button class="rounded-button rounded-button--strong">Buy now</button>
-                </li>
-            </ul>
+            <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
+                    aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
+                <img src="img/navbar/sandwich.svg" alt="">
+            </button>
+            <div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
+                <ul class="navbar__content__body navbar-nav mr-0 ml-auto">
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">Overview</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">About fork</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">Buying options</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="navbar__link nav-link" href="#">Support</a>
+                    </li>
+                </ul>
+            </div>
+            <button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
        </div>
    </div>

@@ -109,12 +113,13 @@
    <div class="about">
        <div class="container">
            <div class="row">
-                <div class="about__features col-6">
+                <div class="about__features col-12 col-xl-6">
+                    <p class="about__title about__title--desktop">&lt;Here is what you get&gt;</p>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/1.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Created to Make The Web Better
                            </p>
@@ -126,10 +131,10 @@
                        </div>
                    </div>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/2.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Incredibly Powerful Tool
                            </p>
@@ -141,10 +146,10 @@
                        </div>
                    </div>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/3.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Experimental Stuff
                            </p>
@@ -156,10 +161,10 @@
                        </div>
                    </div>
                    <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                            <img src="img/features/4.png" alt=""/>
                        </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                            <p class="feature__title">
                                Created to Make The Web Better
                            </p>
@@ -171,8 +176,8 @@
                        </div>
                    </div>
                </div>
-                <div class="about__what-you-get col-6">
-                    <p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
+                <div class="about__what-you-get col-12 col-xl-6">
+                    <p class="about__title about__title--no-wrap about__title--desktop-xl">&lt;Here is what you get&gt;</p>
                    <img src="img/features/editor.png" alt="Revolutionary editor">
                </div>
            </div>
@@ -238,21 +243,21 @@
    <div class="social container">
        <div class="row justify-content-center">
            <div class="social__content col-10">
-                <div>
+                <div class="social__github">
                    <button class="rect-button rect-button--github rect-button--fixed-width">
                        <span class="rect-button__icon fab fa-github"></span>
                        GitHub
                    </button>
                    <p class="social__stats">7 352 Followers</p>
                </div>
-                <div>
+                <div class="social__twitter">
                    <button class="rect-button rect-button--twitter rect-button--fixed-width">
                        <span class="rect-button__icon fab fa-twitter"></span>
                        Twitter
                    </button>
                    <p class="social__stats">136 312 Followers</p>
                </div>
-                <div>
+                <div class="social__facebook">
                    <button class="rect-button rect-button--facebook rect-button--fixed-width">
                        <span class="rect-button__icon fab fa-facebook-f"></span>
                        Facebook
@@ -266,7 +271,7 @@
        <p class="testimonials__h1">People are talking about fork</p>
        <div class="testimonials__content container">
            <div class="testimonials__row row">
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                    <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
                    <p class="testimonial__text">
                        Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -274,14 +279,14 @@
                        Sed varius urna et pulvinar venenatis.
                    </p>
                </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                    <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
                    <p class="testimonial__text">
                        Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
                        mollis eleifend nibh.
                    </p>
                </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                    <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
                    <p class="testimonial__text">
                        In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -291,7 +296,7 @@
                </div>
            </div>
            <div class="testimonials__row row">
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                    <img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
                    <img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
                    <p class="testimonial__text">
@@ -300,7 +305,7 @@
                        Sed varius urna et pulvinar venenatis.
                    </p>
                </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                    <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
                    <p class="testimonial__text">
                        Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -308,7 +313,7 @@
                        consequat faucibus.
                    </p>
                </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                    <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
                    <p class="testimonial__text">
                        Fusce pharetra erat id odio blandit, nec
--- a/src/scss/_about.scss
+++ b/src/scss/_about.scss
@@ -1,7 +1,12 @@
 .about {
  background-color: $background-light;
-  padding: 75px 0 0 30px;
-  height: 710px;
+
+  @media all and (max-width: $desktop-xl) {
+    .about {
+      padding: 75px 0 0 30px;
+      height: 710px;
+    }
+  }
 }

 .about__title {
@@ -13,4 +18,23 @@
  &--no-wrap {
    white-space: nowrap;
  }
+
+  &--desktop-xl {
+    display: block;
+  }
+
+  &--desktop {
+    display: none;
+    text-align: center;
+  }
+
+  @media all and (max-width: $desktop-xl) {
+    &--desktop-xl {
+      display: none;
+    }
+
+    &--desktop {
+      display: block;
+    }
+  }
 }
--- a/src/scss/_feature.scss
+++ b/src/scss/_feature.scss
@@ -3,7 +3,7 @@
 }

 .feature__icon {
-  text-align: center;
+  text-align: left;
 }

 .feature__title {
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@@ -1,5 +1,5 @@
 .header {
-  background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
+  background: black url(../img/header/img.png) no-repeat center 120px/ cover;
  height: 100vh;
  padding-top: 110px;
 }
@@ -21,6 +21,13 @@
  margin-bottom: 0;
 }

+@media all and (max-width: $phone) {
+  .header__subtitle {
+    font-size: 24px;
+    text-transform: capitalize;
+  }
+}
+
 .header__description {
  margin-top: 20px;
  font-family: Montserrat, sans-serif;
--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -1,16 +1,42 @@
 $shrinking-duration: 0.4s;

-.navbar {
-  margin: 0 0;
-  padding: 0 90px;
-  height: 100px;
-  background-color: white;
-  transition: height $shrinking-duration;
+@media all and (min-width: $desktop) {
+  .navbar {
+    margin: 0 0;
+    padding: 0 90px;
+    height: 100px;
+    transition: height $shrinking-duration;
+  }
+
+  .navbar--shrink {
+    height: 50px;
+    transition: height $shrinking-duration;
+  }
 }

-.navbar--shrink {
-  height: 50px;
-  transition: height $shrinking-duration;
+.navbar {
+  background-color: white;
+}
+
+.navbar__content {
+  display: flex;
+}
+
+.navbar__content__header {
+  order: 1;
+}
+
+.navbar__content__toggler {
+  order: 4;
+  border: none;
+}
+
+.navbar__content__body {
+  order: 2;
+}
+
+.navbar__content__button {
+  order: 3;
 }

 .navbar__link {
--- a/src/scss/_social.scss
+++ b/src/scss/_social.scss
@@ -4,6 +4,10 @@
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
+
+  @media all and (max-width: $tablet) {
+    flex-direction: column;
+  }
 }

 .social__stats {
@@ -13,4 +17,13 @@
  font-size: 14px;
  color: $regular-text;
  text-align: center;
+}
+
+.social__github,
+.social__twitter,
+.social__facebook {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
--- a/src/scss/_testimonials.scss
+++ b/src/scss/_testimonials.scss
@@ -1,6 +1,6 @@
 .testimonials {
  position: relative;
-  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
+  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 0;
 }

 .testimonials__h1 {
@@ -15,12 +15,20 @@

 .testimonials__row {
  padding-bottom: 100px;
+  @media all and (max-width: $desktop) {
+    padding: 0 10px;
+    margin: 0;
+  }
 }

 .testimonial {
  position: relative;
  text-align: center;
  min-height: 170px;
+
+  @media all and (max-width: $desktop) {
+    margin-bottom: 50px;
+  }
 }

 .testimonial__logo {
@@ -28,8 +36,10 @@
 }

 .testimonial__text {
-  position: absolute;
-  bottom: 0;
+  @media all and (min-width: $desktop-xl) {
+    position: absolute;
+    bottom: 0;
+  }
  font-family: Source Sans Pro, sans-serif;
  font-size: 16px;
  font-weight: bold;
Author	SHA1	Message	Date
Bartłomiej Pluta	39f6316897	Enable RWD for testimonials	2018-04-16 12:18:38 +02:00
Bartłomiej Przemysław Pluta	eb04cb6a08	Merge pull request #12 from bartlomiej-pluta/rwd-social Enable RWD for social buttons	2018-04-16 12:00:59 +02:00
Bartłomiej Pluta	719906d227	Enable RWD for social buttons	2018-04-16 12:00:17 +02:00
Bartłomiej Przemysław Pluta	4b5d2198d2	Merge pull request #11 from bartlomiej-pluta/rwd-about Enable RWD for about section	2018-04-16 11:21:08 +02:00
Bartłomiej Pluta	a290809750	Enable RWD for about section	2018-04-16 11:10:29 +02:00
Bartlomiej Pluta (PGS Software)	a02b17a51b	Fix header subtitle	2018-04-12 14:43:57 +02:00
Bartłomiej Przemysław Pluta	b60fe45d49	Merge pull request #10 from bartlomiej-pluta/rwd-navbar Enable RWD for navbar and header	2018-04-12 13:44:22 +02:00
Bartlomiej Pluta (PGS Software)	83763013b8	Enable RWD for navbar and header	2018-04-12 13:27:14 +02:00
Bartłomiej Przemysław Pluta	1661de16a9	Merge pull request #9 from bartlomiej-pluta/rwd Create RWD breakpoints	2018-04-12 09:40:39 +02:00