Merge pull request #18 from ccthecode/site-development

Site development

.gitignore

@@ -0,0 +1,2 @@
+resources/
+docs/

README.md

@@ -0,0 +1,16 @@
+# Official Site Documentation 
+
+## FORM CONFIGURATION
+
+- Create and account with [Form Spark](https://formspark.io). 
+- Create a New form
+- Go to "How-to" tab and copy your form's action URL 
+- Replace it within the params section of your site's configuration in `./config.toml`
+
+```toml
+
+<!-- ./config.toml -->
+
+form_submission_redirect = 'https://flaxandteal.co.uk/thank-you/'
+form_action_endpoint = 'https://submit-form.com/xxxxxxxxx'
+```

assets/js/main.js

@@ -0,0 +1,30 @@
+// Menu
+const menuMobile = document.querySelector('.menu-mobile')
+const menuBtn = document.querySelector('.menu-btn')
+const menuClose = document.querySelector('.menu-btn_close')
+menuClose.addEventListener('click', function(){
+  menuMobile.classList.toggle('active')
+})
+menuBtn.addEventListener('click', function(){
+  menuMobile.classList.toggle('active')
+})
+
+
+// open for business
+const circleWrapper = document.querySelector('#circle-wrapper');
+
+window.addEventListener("DOMContentLoaded", function(){
+  circleWrapper?.classList.add('active');
+})
+
+window.addEventListener('scroll', function() {
+  let scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+  if (scrollTop > 300) {
+    circleWrapper?.classList.remove('active');
+  }
+
+  if (scrollTop <= 10) {
+    circleWrapper?.classList.add('active');
+  }
+});

assets/sass/_about.scss

@@ -0,0 +1,140 @@
+// $large-bp: 1260px;
+$large-bp: 1560px;
+
+.about-us-image{
+  max-width: 400px;
+  width: 100%;
+  height: 400px;
+  padding: 1rem;
+  @media screen and (max-width:800px) {
+    height: auto;
+  }
+}
+
+.header_about{
+  p{
+    margin: 0;
+  }
+}
+
+.our-team{
+  h4{
+    font-size: 24px;
+  }
+  .role{
+    font-size: 24px;
+  }
+}
+
+.our-team{
+  .cta{
+    bottom: 20px;
+  }
+}
+
+.team-linkedin{
+  float: right; 
+}
+
+#btn-team-expand{
+  &:hover{
+    transform: translateY(5px);
+    transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+}
+
+.cursor-pointer{
+  cursor: pointer;
+}
+
+.team-profile-img {
+  @media screen and (max-width:800px) {
+    margin-bottom: 1rem;
+  }
+  img{
+    border-radius: 50%;
+    @media screen and (max-width:800px) {
+      width: 150px ;
+      height: 150px ;
+    }
+  }
+}
+
+#stuart-marshall-4{
+  display: flex;
+  grid-column: 1/4;
+  gap: 3rem;
+  @media screen and (max-width:1000px) {
+    display: block;
+  }
+  .team-linkedin{
+    order: 3;
+  }
+}
+
+.team-members{
+  display: grid;
+  grid-template-columns: repeat(3, 438px) ;
+  // grid-template-rows: 572px 347px ;
+  gap: 2rem;
+  padding: 1rem 2rem 1rem 2rem;
+  @media screen and (max-width:1000px) {
+    padding: 0 1rem 0 1rem !important;
+  }
+
+  @media screen and (max-width: $large-bp) {
+    grid-template-columns: repeat(3, 1fr) ;
+    grid-template-rows: repeat(1, 1fr) ;
+    p{
+      font-size: 16px !important;
+    }
+  }
+  @media screen and (max-width:1000px) {
+    display: block;
+    margin-bottom: 2rem;
+  }
+
+  .team-member{
+      padding: 3rem 2rem;
+      line-height: 1.4;
+      .team-member-desc{
+        font-weight: 600;
+      }
+      @media screen and (max-width:1000px) {
+        margin: 0 1rem 2rem 1rem;
+      }
+    &:nth-child(1){
+      grid-column: 1/2;
+      grid-row: 1/3;
+      @media screen and (max-width:$large-bp) {
+        // grid-column: 1/3;
+        // grid-row: 1/1;
+      }
+
+    }
+    &:nth-child(2){
+      grid-column: 2/3;
+      @media screen and (max-width:$large-bp) {
+        // grid-column: 3/5;
+        // grid-row: 1/1;
+      }
+
+    }
+    &:nth-child(3){
+      grid-column: 3/4;
+      @media screen and (max-width:$large-bp) {
+        // grid-column: 1/3;
+        // grid-row: 2/2;
+      }
+    }
+    &:nth-child(4){
+      grid-column: 2/4;
+      grid-row: 2/3;
+      @media screen and (max-width:$large-bp) {
+        // grid-column: 3/5;
+        // grid-row: 2/2;
+        display: block;
+      }
+    }
+  }
+}

assets/sass/_clients.scss

@@ -0,0 +1,21 @@
+.hero_clients {
+  padding: 5rem 1rem;
+  background-color: #F6F4EB;
+  text-align: center;
+  h1{
+    padding: 0 0 3rem 0;
+    margin: 0;
+    @media screen and (max-width:760px) {
+      font-size: 40px;
+    }
+  }
+  p{
+    font-size: 22px;
+    margin: 0 auto;
+    max-width: 730px;
+    text-align: center;
+    @media screen and (max-width:760px) {
+      font-size: 16px;
+    }
+  }
+}

assets/sass/_contact.scss

@@ -0,0 +1,114 @@
+section{
+  &.contact{
+    a{
+      color: inherit;
+    }
+    .contact-wrapper{
+      margin: auto;
+      display: flex;
+      gap: 2rem;
+      padding-top: 3rem;
+      @media screen and (max-width:600px) {
+        flex-direction: column;
+        gap: unset;
+      }
+      .left{
+        width: 50%;
+        margin-left: auto;
+        margin-right: auto;
+        p{
+          font-size: 18px;
+          @media screen and (max-width:920px) {
+            font-size: 18px;
+          }
+        }
+        @media screen and (max-width:600px) {
+          margin-left: unset;
+          margin-right: unset;
+          width: 100%;
+        }
+        @media screen and (max-width:1280px) {
+          padding-left: 2rem;
+        }
+      }
+      form{
+        padding: 3rem 2rem;
+        &.right{
+          .form-control{
+            display: flex;
+            gap: 10px;
+            margin-bottom: 1.3rem;
+            @media screen and (max-width:600px) {
+              display: block;
+            }
+            .form-input-wrapper{
+              width: 50%;
+              &:nth-child(1){
+                margin-bottom: 1rem;
+              }
+              @media screen and (max-width:600px) {
+                width: 100%;
+              }
+            }            
+            input{
+              background-color: transparent;
+              border: 1px solid #000;
+              border-radius: 8px;
+              height: 44px;
+              width: 100%;
+              text-indent: 10px;
+              font-family: inherit;
+            }
+          }
+          .contact-form_sign-up_prompt{
+            position: relative;
+            label{
+              cursor: pointer;
+            }
+            input{
+              transform: translateY(-4px);
+              @media screen and (max-width:1080px) {
+                transform: translateY(-1.5px);
+              }
+              cursor: pointer;
+              appearance: none;
+              border: 1px solid #000;
+              background-color: transparent;
+              width: 18px;
+              height: 18px;
+              margin-right: 10px;
+              border-radius: 3px;
+              &:checked ~ ::after {
+                content: "\2713";
+                position: absolute;
+                left: 7px;
+                top: -2px;
+                @media screen and (max-width:1080px) {
+                  top: -3px;
+                }
+              }
+            }
+          }
+          textarea{
+            width: 100%;
+            background-color: transparent;
+            border: 1px solid #000;
+            border-radius: 8px;
+            height: 150px;
+            padding: 10px;
+            font-family: inherit;
+          }
+          button{
+            &#contact-form_btn-submit{
+              border: 0;
+              color: #fff;
+              border-radius: 50px;
+              padding: 1rem 2.5rem;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/sass/_generic.scss

@@ -0,0 +1,60 @@
+.lrx2{
+  .container{
+    display: flex; 
+    margin: auto;   
+    @media screen and (max-width:800px) {
+      display: block;
+    }
+    .left{
+      width: 50%;
+      min-height: 140px;
+      display: flex;
+      margin: auto;
+      justify-content: center;
+      @media screen and (max-width:800px) {
+        width: 100%;
+      }
+    }
+    .right{
+      width: 50%;
+      min-height: 140px;
+      padding: 1rem 1.5rem;
+      @media screen and (max-width:800px) {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.lrx2_swapped{
+  .container{
+    display: flex; 
+    margin: auto;   
+    @media screen and (max-width:800px) {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+    .left{
+      width: 50%;
+      min-height: 140px;
+      padding: 1rem 1.5rem;
+      @media screen and (max-width:800px) {
+        width: 100%;
+      }
+    }
+    .right{
+      width: 50%;
+      min-height: 140px;
+      display: flex;
+      margin: auto;
+      justify-content: center;
+      padding: 0 1.5rem 2rem 1.5rem;
+      img{
+        width: 100%;
+      }
+      @media screen and (max-width:800px) {
+        width: 100%;
+      }
+    }
+  }
+}