Merge pull request #9 from wswidzinski/structure-section

Add styles for small & big tablet

src/hbs/index.hbs

@@ -27,6 +27,20 @@ hero:
     label: 'Telegram Community'
     icon: 'images/telegram-logo.svg'
   nextSectionLink: 'Scroll Down'
+
+structure:
+  header: 'Structure —'
+  button:
+    label: 'Floor / Elevation Plans'
+    icon: 'images/telegram-logo.svg'
+  content:
+    upper:
+      - 'The starting point to conceptualize the public art structure is the Mobius bridge, a pedestrian bridge over the Avon, designed by Hakes Associates of Bristol, UK. We found this bridge to be remarkably interesting as it explores the structure of the Mobius strip, providing a connection between point A and B while maintaining a single, unified surface.'
+      - 'The Mobius strip leads to the construction of a very interesting solid called the Klein Bottle. Imagine connecting the sides of a paper ring to come up with a donut shape. Similarly, imagine connecting the sides of a Mobius strip, you would end up with a Klein bottle.'
+    lower:
+      - 'The Klein bottle shares the same characteristics as the Mobius strip of having a unified surface. In addition, the Klein bottle provides an enclosed environment perfect for the development of a public programming schedule to take place inside of it. Hence, The public art structure will be a penetrable Klein bottle that symbolizes the bridge between the Dogecoin and Ethereum blockchains, connecting the outer side with the inner surface through the bottleneck pass way.'
+  nextSectionLink: 'Learn more about the team'
+  counter: '04 - 06'
 ---
 
 {{#extend "base"}}
@@ -37,7 +51,9 @@ hero:
     {{> components/introduction introduction=frontMatter.introduction}}
 
     {{> components/project}}
-    {{> components/structure}}
+
+    {{> components/structure structure=frontMatter.structure}}
+
     {{> components/team}}
     {{> components/get-involved}}
 

src/hbs/partials/components/introduction.hbs

@@ -6,12 +6,12 @@
       class="introduction__header"
     }}
 
-    <div class="introduction__subheader">
+    <div class="introduction__subheader text--big">
       {{introduction.subheader}}
     </div>
 
     <div class="introduction__content">
-      <div class="introduction__paragraph">
+      <div class="introduction__paragraph text--small">
         {{#each introduction.content as |paragraph|}}
           <p>{{paragraph}}</p>
         {{/each}}
@@ -24,9 +24,9 @@
 
     <div class="introduction__button">
       {{> components/button
-      label=introduction.button.label
+        label=introduction.button.label
-      outlineColor="#FFF"
+        outlineColor="#FFF"
-      backgroundColor="#000"
+        backgroundColor="#000"
       }}
     </div>
 

src/hbs/partials/components/structure.hbs

@@ -1,3 +1,40 @@
 <section class="section structure">
+  <div class="structure__container">
+    <div class="structure__content">
+      {{> components/heading
+        text=structure.header
+        class="structure__header"
+      }}
 
+      <div class="structure__image"></div>
+
+      <div class="structure__button">
+        {{> components/button
+          label=structure.button.label
+          outlineColor="#ff3a00"
+          backgroundColor="#000"
+        }}
+      </div>
+    </div>
+    <div class="structure__details">
+      <div class="text--small">
+        {{#each structure.content.upper as |paragraph|}}
+          <p>{{paragraph}}</p>
+        {{/each}}
+      </div>
+      <div class="text--medium">
+        {{#each structure.content.lower as |paragraph|}}
+          <p>{{paragraph}}</p>
+        {{/each}}
+      </div>
+
+      <div class="structure__counter">
+        {{ structure.counter }}
+      </div>
+
+      <div class="structure__link">
+        {{ structure.nextSectionLink }}
+      </div>
+    </div>
+  </div>
 </section>

src/styles/base/_common.scss

@@ -0,0 +1,17 @@
+.text {
+  &--small {
+    font-size: 18px;
+
+    @media #{$screen-xlg} {
+      font-size: 20px;
+    }
+  }
+
+  &--medium {
+    font-size: 20px;
+
+    @media #{$screen-xlg} {
+      font-size: 26px;
+    }
+  }
+}

src/styles/components/_introduction.scss

@@ -10,6 +10,10 @@
     position: relative;
   }
 
+  &__content {
+    display: flex;
+  }
+
   &__img {
     display: none;
 
@@ -37,10 +41,6 @@
     }
   }
 
-  &__content {
-    display: flex;
-  }
-
   &__button {
     margin-bottom: 30px;
 
@@ -53,19 +53,6 @@
   &__subheader {
     position: relative;
     z-index: 2;
-    font-size: 22px;
-
-    @media #{$screen-sm} {
-      font-size: 26px;
-    }
-  }
-
-  &__paragraph {
-    font-size: 18px;
-
-    @media #{$screen-sm} {
-      font-size: 20px;
-    }
   }
 
   &__link {
@@ -89,7 +76,6 @@
   &__paragraph,
   &__link {
     margin-bottom: 30px;
-    font-family: $base-font-family;
 
     @media #{$screen-lg} {
       margin-bottom: 45px;

src/styles/components/_structure.scss

@@ -1,3 +1,88 @@
 .structure {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  color: $color-scarlet;
   background-color: $color-white;
+
+  &__container {
+    @include container;
+
+    position: relative;
+
+    @media #{$screen-lg} {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__content {
+    position: relative;
+    height: 100%;
+    margin-top: 30px;
+
+    @media #{$screen-lg} {
+      width: 50%;
+    }
+  }
+
+  &__header {
+    position: absolute;
+    top: -19px;
+    right: -2px;
+
+    @media #{$screen-sm} {
+      top: -38px;
+    }
+
+    @media #{$screen-lg} {
+      top: -44px;
+    }
+  }
+
+  &__details {
+    font-weight: 300;
+    color: $color-black;
+
+    @media #{$screen-sm} {
+      margin-top: 60px;
+    }
+
+    @media #{$screen-lg} {
+      width: 50%;
+      margin-top: 0;
+    }
+  }
+
+  &__counter {
+    font-size: 20px;
+    font-weight: 400;
+    color: $color-scarlet;
+
+    @media #{$screen-sm} {
+      margin: 30px 0;
+      font-size: 24px;
+    }
+  }
+
+  &__image {
+    max-width: 100%;
+    padding-bottom: 95%;
+    background: url('../images/structure.jpg') no-repeat center center / cover;
+  }
+
+  &__button {
+    margin-top: 10px;
+    color: $color-scarlet;
+
+    @media #{$screen-sm} {
+      position: absolute;
+      right: 18%;
+      bottom: -20px;
+    }
+  }
+
+  @media #{$screen-sm} {
+    margin-top: 30px;
+  }
 }

src/styles/main.scss

@@ -12,6 +12,7 @@
 @import './base/core';
 @import './base/typography';
 @import './base/mixins';
+@import './base/common';
 
 @import './components/header';
 @import './components/burger-button';