Merge pull request #28 from bogdankol/main

Added styles to status page

sass/content-div.sass

@@ -10,7 +10,8 @@
     +resolution(0, 575)
       padding-top: 32px
 
-.contribute-page
+.contribute-page,
+.status-page
 
   .content-section
     +resolution(992)
@@ -41,7 +42,8 @@
 .get-page,
 .contribute-page,
 .nightly-builds-page,
-.contributor-subs-page
+.contributor-subs-page,
+.status-page
 
   .content-section
     display: flex
@@ -127,3 +129,26 @@
       margin-top: 40px !important
     +resolution(0, 575)
       margin-top: 32px !important
+
+.status-page
+
+  .content-div
+    +resolution(992)
+      max-width: 945px
+
+    +resolution(0, 575)
+      padding-bottom: 20px
+      scroll-behavior: smooth
+
+    &::-webkit-scrollbar 
+      +resolution(0, 575)
+        height: 3px
+
+    &::-webkit-scrollbar-track 
+      +resolution(0, 575)
+        margin: 0 20px
+
+    &::-webkit-scrollbar-thumb 
+      +resolution(0, 575)
+        background-color: #99A0A5
+

sass/main.sass

@@ -18,6 +18,7 @@
 @import lists
 @import footnotes
 @import staging
+@import ./status-page/main
 
 body
   font-family: $r

sass/status-page/banner.sass

@@ -0,0 +1,82 @@
+@import ../settings
+
+.status-page
+
+  .banner
+    background-color: $white
+    display: flex
+    justify-content: center
+    position: relative
+    overflow: hidden
+    +resolution(0, 575)
+      height: 232px
+      padding-top: 106px
+    +resolution(576, 991)
+      height: 248px
+      padding-top: 128px
+    +resolution(992)
+      height: 275px
+      padding-top: 128px
+      align-items: center
+
+    h1
+      letter-spacing: $em
+      +resolution(992)
+        font-size: 48px
+      +resolution(0, 991)
+        font-size: 28px
+
+    p
+      letter-spacing: $px
+      font-weight: 600
+      color: $grey-dark
+      margin-top: 16px
+      +resolution(992)
+        font-size: 18px
+      +resolution(0, 991)
+        font-size: 16px
+
+    .containerCustom
+      position: unset
+
+      .banner-div
+        width: 100%
+        border-bottom: 1px solid $grey-light3
+        text-align: center
+        +resolution(0, 575)
+          padding-bottom: 32px
+        +resolution(576, 991)
+          padding-bottom: 54px
+        +resolution(992)
+          padding-bottom: 74px
+
+  .left-shape
+    position: absolute
+    +resolution(992)
+      top: 0
+      left: 0
+    +resolution(576, 991)
+      top: -100px
+      left: -40px
+    +resolution(0, 575)
+      display: none
+
+    img
+      width: 280px
+      height: 280px
+
+  .right-shape
+    position: absolute
+    +resolution(992)
+      top: 0
+      right: 0
+    +resolution(576, 991)
+      top: -100px
+      right: -60px
+    +resolution(0, 575)
+      top: -100px
+      right: -60px
+
+    img
+      width: 385px
+      height: 400px

sass/status-page/main.sass

@@ -0,0 +1,95 @@
+@import ../settings
+@import banner
+
+html 
+  scroll-padding-top: 74px !important
+
+.status-page
+
+  .content-div
+
+    +resolution(0, 575)
+      overflow-x: auto
+
+    h3
+      font-size: 24px
+      letter-spacing: $em
+      color: $black
+      text-decoration: none
+      text-transform: capitalize
+
+    p
+      font-size: 16px
+      font-weight: 600
+      letter-spacing: $px
+      color: $grey-dark
+      margin-top: 5px
+
+    a
+      font-size: 18px
+      font-weight: 600
+      letter-spacing: $px
+      color: $primary
+      text-decoration: none
+      margin-top: 5px
+
+    table 
+      margin-top: 18px
+      border-collapse: collapse
+
+      +resolution(0, 575)
+        width: 640px
+
+      th
+        +resolution(576)
+          max-height: 42px
+          padding: 12px 20px
+        +resolution(0, 575)
+          max-height: 48px
+          padding: 12px
+
+      td
+        +resolution(576)
+          max-height: 64px
+          padding: 20px
+        +resolution(0, 575)
+          max-height: 48px
+          padding: 12px
+
+        &:nth-of-type(1)
+          +resolution(0, 575)
+            width: 118px
+        &:nth-of-type(2)
+          +resolution(0, 575)
+            width: 205px
+        &:nth-of-type(3)
+          +resolution(0, 575)
+            width: 223px
+        &:nth-of-type(4)
+          text-transform: capitalize
+          +resolution(0, 575)
+           width: 57px
+
+      th
+        font-weight: 600
+        font-size: 14px
+        letter-spacing: $em
+        color: $grey-dark
+        text-align: left
+
+      td 
+        font-weight: 400
+        font-size: 14px
+        letter-spacing: $em
+        color: $grey-dark
+        text-align: left
+
+      tr
+
+        &:nth-child(even)
+          background-color: $grey-light2
+        &:nth-child(odd)
+          background-color: transparent
+        &:not(&:nth-last-child(1))
+          border-bottom: 1px solid $grey-light
+

site/status.md

@@ -1,4 +1,4 @@
-<div class='contribute-page'>
+<div class='status-page'>
   <section class='banner'>
     <div class='containerCustom'>
       <div class='left-shape'>