Enable RWD for footer

Fix navbar
Merge pull request #16 from bartlomiej-pluta/rwd-news
2018-04-19 11:43:26 +02:00 · 2018-04-19 11:34:25 +02:00 · 2018-04-16 14:44:45 +02:00 · 2018-04-16 14:44:05 +02:00 · 2018-04-16 14:35:53 +02:00 · 2018-04-16 14:34:53 +02:00
9 changed files with 101 additions and 34 deletions
--- a/src/index.html
+++ b/src/index.html
@@ -243,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
@@ -271,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
@@ -279,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
@@ -296,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">
@@ -305,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
@@ -313,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
@@ -329,8 +329,8 @@
    <div class="pricing">
        <p class="pricing__title">Fork Subscription Pricing</p>
        <div class="container">
-            <div class="row">
-                <div class="col-3">
+            <div class="row justify-content-center">
+                <div class="col-8 col-xl-3">
                    <div class="price">
                        <p class="price__title">Students</p>
                        <p class="price__value">$29</p>
@@ -342,7 +342,7 @@
                        </a>
                    </div>
                </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                    <div class="price">
                        <p class="price__title">Professional</p>
                        <p class="price__value">$59</p>
@@ -354,7 +354,7 @@
                        </a>
                    </div>
                </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                    <div class="price">
                        <p class="price__title">Agency</p>
                        <p class="price__value">$99</p>
@@ -366,7 +366,7 @@
                        </a>
                    </div>
                </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                    <div class="price">
                        <p class="price__title">Enterprise</p>
                        <p class="price__value">$159</p>
@@ -396,10 +396,10 @@
    <div class="newsletter">
        <div class="container">
            <div class="row justify-content-between">
-                <div class="col-6 newsletter__title">
+                <div class="col-12 col-xl-6 newsletter__title">
                    Subscribe to our newsletter
                </div>
-                <div class="col-6 oneline__form">
+                <div class="col-12 col-xl-6 oneline__form">
                    <input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
                    <button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
                            type="submit">Subscribe
@@ -411,7 +411,7 @@
    <div class="news">
        <div class="container">
            <div class="row">
-                <div class="col-4">
+                <div class="news__news col-12 col-sm-4">
                    <p class="news__title">
                        New in Release 2.8
                    </p>
@@ -435,7 +435,7 @@
                    </div>
                    <button class="rect-button rect-button--small">Go to Release Log</button>
                </div>
-                <div class="col-4">
+                <div class="news__extensions col-12 col-sm-4">
                    <p class="news__title">
                        Popular Extensions
                    </p>
@@ -466,7 +466,7 @@
                    </div>
                    <button class="rect-button rect-button--small">Go to Marketplace</button>
                </div>
-                <div class="col-4">
+                <div class="news__blog col-12 col-sm-4">
                    <p class="news__title">
                        New From the Blog
                    </p>
@@ -510,7 +510,7 @@
    <div class="footer">
        <div class="container">
            <div class="row">
-                <div class="footer__about col-4">
+                <div class="footer__about col-12 col-md-4">
                    <div class="brand">
                        <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
                        <span class="brand__name">Fork</span>
@@ -520,7 +520,7 @@
                        Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
                    </p>
                </div>
-                <div class="footer__nav col-2">
+                <div class="footer__nav col-12 col-md-2">
                    <p class="footer__nav__title">Navigation</p>
                    <ul class="footer__nav__navbar">
                        <li><a href="#">Home</a></li>
@@ -530,13 +530,13 @@
                        <li><a href="#">Support</a></li>
                    </ul>
                </div>
-                <div class="footer__contact col-3">
+                <div class="footer__contact col-12 col-md-3">
                    <p class="footer__contact__phone">347 567 78 90</p>
                    <p class="footer__contact__availability">Available from 12PM - 18PM</p>
                    <p class="footer__contact__city">New York, NY</p>
                    <p class="footer__contact__address">560 Judah St & 15th Ave, Apt 5<br/>San Francisco, CA, 230903</p>
                </div>
-                <div class="footer__info col-3">
+                <div class="footer__info col-12 col-md-3">
                    <p class="footer__info__title">Info</p>
                    <p class="footer__info__description">
                        Wisia enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
--- a/src/scss/_footer.scss
+++ b/src/scss/_footer.scss
@@ -88,4 +88,13 @@
      color: $regular-text;
    }
  }
+
+  @media all and (max-width: $phone) {
+    &__about,
+    &__nav,
+    &__contact,
+    &__info {
+      padding: 0 30px;
+    }
+  }
 }
--- a/src/scss/_form.scss
+++ b/src/scss/_form.scss
@@ -5,6 +5,7 @@
  background-color: white;
  color: $regular-text;

+
  &::placeholder {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
@@ -21,9 +22,11 @@

 .oneline__form__component--growing {
  width: 100%;
-  margin: 0 20px;
+  min-width: 100px;
+  margin: 0 10px;
 }

 .oneline__form__component--fixed {
  white-space: nowrap;
+  margin: 0 10px;
 }
--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -44,9 +44,13 @@ $shrinking-duration: 0.4s;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: bolder;
-  margin: 0 20px;
  color: $primary-dark;
  transition: $hover-duration;
+  margin: 0 20px;
+
+  @media all and (max-width: $desktop-xl) {
+    margin: 0 5px;
+  }
 }

 .navbar__link:hover {
--- a/src/scss/_news.scss
+++ b/src/scss/_news.scss
@@ -41,4 +41,17 @@
  font-size: 13px;
  color: $regular-text;
  font-weight: 500;
+}
+
+@media all and (max-width: $phone) {
+  .news__news,
+  .news__extensions,
+  .news__blog {
+    padding: 0 30px;
+  }
+
+  .news__extensions,
+  .news__blog {
+    margin-top: 50px;
+  }
 }
--- a/src/scss/_newsletter.scss
+++ b/src/scss/_newsletter.scss
@@ -4,12 +4,15 @@
 }

 .newsletter__title {
-  display: flex;
-  align-items: center;
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: $primary-dark;
  text-transform: capitalize;
+  text-align: center;
+
+  @media all and (max-width: $desktop-xl) {
+    margin-bottom: 50px;
+  }
 }

--- a/src/scss/_pricing.scss
+++ b/src/scss/_pricing.scss
@@ -21,12 +21,19 @@
  height: 450px;
  transition: $hover-duration;

+  @media all and (max-width: $desktop-xl) {
+    margin-top: 7px;
+    margin-bottom: 7px;
+  }
+
  &:hover {
-    margin-top: 70px;
-    margin-bottom: 75px;
+    @media all and (min-width: $desktop-xl) {
+      margin-top: 70px;
+      margin-bottom: 75px;
+      height: 530px;
+    }
    background-color: rgba(0, 0, 0, 0.06);
    transition: $hover-duration;
-    height: 530px;

    & > .price__title {
      background-color: rgba(0, 0, 0, 0.06);
@@ -88,8 +95,13 @@
  padding-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.15);
  position: absolute;
+  left: 0;
+  text-align: center;
+  right: 0;
  bottom: 35px;
-  left: 20%;
+  margin: auto;
+  display: block;
+  width: 80%;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 16px;
--- 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
Bartlomiej Pluta (PGS Software)	5a0c860c75	Enable RWD for footer	2018-04-19 11:43:26 +02:00
Bartlomiej Pluta (PGS Software)	658886fe22	Fix navbar	2018-04-19 11:34:25 +02:00
Bartłomiej Przemysław Pluta	5e00e803bd	Merge pull request #16 from bartlomiej-pluta/rwd-news Enable RWD in news section	2018-04-16 14:44:45 +02:00
Bartłomiej Pluta	39532aacf7	Enable RWD in news section	2018-04-16 14:44:05 +02:00
Bartłomiej Przemysław Pluta	abb149b383	Merge pull request #15 from bartlomiej-pluta/rwd-newsletter Enable RWD in Newsletter section	2018-04-16 14:35:53 +02:00
Bartłomiej Pluta	325a0b5e3e	Enable RWD in Newsletter section	2018-04-16 14:34:53 +02:00
Bartłomiej Przemysław Pluta	494bf4d2c3	Merge pull request #14 from bartlomiej-pluta/rwd-pricing Enable RWD on pricing section	2018-04-16 14:21:35 +02:00
Bartłomiej Pluta	59dd5095b1	Enable RWD on pricing section	2018-04-16 14:20:29 +02:00
Bartłomiej Przemysław Pluta	d2f03f2ca6	Merge pull request #13 from bartlomiej-pluta/rwd-testimonials Enable RWD for testimonials	2018-04-16 12:19:25 +02:00
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