Merge pull request #227 from activebridge/feature/organize_scss

Improve organization of styles: add base for basic styles move other to

_sass/base.scss

@@ -0,0 +1,232 @@
+@font-face {
+  font-family: 'Cera Regular';
+  src: url(/assets/fonts/Cera.woff2);
+  font-weight: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Cera-Bold';
+  src: url(/assets/fonts/Cera-Bold.woff2);
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Cera-Medium';
+  src: url(/assets/fonts/Cera-Medium.woff2);
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inria Bold';
+  src: url(/assets/fonts/InriaSerif-Bold.woff2);
+  font-weight: bold;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inria Regular';
+  src: url(/assets/fonts/InriaSerif-Regular.woff2);
+  font-display: swap;
+}
+
+body {
+  color: $black;
+  font-family: 'Cera Regular', serif;
+  -webkit-tap-highlight-color: transparent;
+}
+p { margin: 0; }
+a:hover { text-decoration: none !important; }
+a:visited { color: $black; }
+ul, ol { margin-left: 0; }
+
+.wrapper {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 990px;
+  text-align: center;
+  padding: 0 30px;
+}
+
+.page-title {
+  position: inherit;
+  margin-bottom: 50px;
+  font-size: 45px;
+  z-index: 1;
+  letter-spacing: 0.5em;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.block-cera-title {
+  font-family: "Cera Regular", serif;
+  font-size: 30px;
+  letter-spacing: 0.4em;
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 40px;
+}
+
+.block-inria-title {
+  font-family: "Inria Bold", serif;
+  font-size: 30px;
+  font-weight: 700;
+  margin-bottom: 40px;
+}
+
+.block-sub-title {
+  font-family: "Cera Regular", serif;
+  font-size: 22px;
+  letter-spacing: 0.4em;
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 40px;
+}
+
+.message {
+  font-size: 22px;
+  line-height: 35px;
+  margin-bottom: 40px;
+}
+
+.description {
+  text-align: left;
+  font-size: 18px;
+  line-height: 1.8em;
+}
+
+.description {
+  text-align: left;
+  font-size: 18px;
+  line-height: 1.8em;
+}
+
+.body-content {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.body-content__main-section { padding-top: 60px; }
+
+.card {
+  padding: 40px 30px;
+  border-radius: 30px;
+  background: $white;
+  box-shadow: $main-shadow;
+
+  &__title {
+    color: $white;
+
+    &-1 {
+      font-size: 1.6em;
+      letter-spacing: 0.3em;
+      line-height: 1.7em;
+      text-transform: uppercase;
+    }
+
+    &-2 {
+      font-family: 'Inria Bold', serif;
+      font-size: 1.8em;
+      line-height: 1.6em;
+      &.purple-heart { color: $purple-heart }
+    }
+  }
+  &__icon { margin-top: 25px; }
+
+  &__description {
+    margin-top: 3vh;
+    text-align: justify;
+    font-size: 1.2em;
+    line-height: 2em;
+  }
+}
+
+.cards {
+  &-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 5vh 0;
+    .card { margin: 0 2vw 25px; }
+  }
+}
+
+.desktop-only {
+  @media (max-width: 767px){
+    display: none!important;
+  }
+}
+
+.mobile-only {
+  @media (min-width: 768px){
+    display: none!important;
+  }
+}
+
+@media (max-width: 767px) {
+  .body-content__main-section { padding-top: 0;}
+
+  .body-content {
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    &::-webkit-scrollbar { display: none; }
+
+    &__main-section {
+      overflow-y: auto;
+      overflow-x: auto;
+      width: 100%;
+      flex: 0 0 auto;
+      position: relative;
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+      scrollbar-width: none;
+      &::-webkit-scrollbar { display: none; }
+    }
+
+    &__navigation {
+      position: relative;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__navigation-links {
+      position: sticky;
+      box-sizing: border-box;
+      background: linear-gradient(#aa30be, #5723B5);
+      top: 0;
+      height: 100%;
+      width: 70vw;
+      padding: 5vw 0 0 10vw;
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+      z-index: 3;
+    }
+  }
+
+  .description {
+    font-size: 14px;
+    color: $black;
+  }
+
+  .page-title {
+    font-size: 25px;
+    margin-bottom: 30px;
+  }
+
+  .block-inria-title,.block-cera-title {
+    font-size: 18px;
+    line-height: 23px;
+  }
+  .block-cera-title,.block-cera-title,.message { margin-bottom: 25px; }
+
+  .message, .block-sub-title{
+    font-size: 15px;
+    line-height: 25px;
+  }
+}

_sass/index.scss

@@ -43,6 +43,27 @@
   }
 }
 
+.top-section {
+  animation: fill 1s ease-out;
+  left: -10%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+  top: 6vh;
+  width: 100%;
+  svg { width: 140vw; }
+}
+
+@keyframes fill {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
 .index {
   &-home {
     position: relative;
@@ -147,6 +168,15 @@
   }
 }
 
+@media (max-width: 1200px) {
+  .top-section {
+    left: -5%;
+    svg { width: 140vw; }
+  }
+}
+
+@media (max-width: 930px) { .main-svg { display: none;} }
+
 @media (max-width: 767px) {
   .home-page-container {
     display: flex;

_sass/utility.scss

@@ -21,6 +21,19 @@
 .text-upcase { text-transform: uppercase; }
 .text-left { text-align: left !important; }
 .text-right { text-align: right !important; }
+.purple-text { color: $purple-heart; }
+.text-justify { text-align: justify; }
+.text-center { text-align: center; }
+.info-container { background: $main-gradient !important; }
+.alabaster { background-color: $alabaster; }
+.white-text { color: $white !important; }
+b { font-family: "Cera-Bold", serif; }
+
+.flex-columns-center {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
 
 @media (max-width: 767px) {
   .mb-4 { margin-bottom: 25px; }