Adding landing page

3 files changed, 61 insertions, 2 deletions

diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
new file mode 100644
index 000000000..df52ec184
--- /dev/null
+++ b/app/assets/stylesheets/about.scss
@@ -0,0 +1,41 @@
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
+@import url(https://fonts.googleapis.com/css?family=Judson);
+
+.about-body {
+  .wrapper {
+    width: 600px;
+    margin: 0 auto;
+    color: #9baec8;
+    padding-top: 200px;
+  }
+
+  h1 {
+    font: 46px/52px 'Roboto', sans-serif;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #2b90d9;
+    padding: 20px 0;
+
+    img {
+      margin-bottom: -5px;
+      margin-right: 5px;
+      width: 46px;
+      height: 46px;
+    }
+  }
+
+  p {
+    font: 20px/28px 'Judson', sans-serif;
+    font-weight: 300;
+    margin-bottom: 26px;
+  }
+
+  em {
+    display: inline-block;
+    padding: 7px 7px 5px 7px;
+    background: #9baec8;
+    color: #282c37;
+    font: 16px/16px 'Montserrat', sans-serif;
+    font-weight: 300;
+  }
+}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 84f15eaca..1bae0b44e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -59,7 +59,7 @@ table {
 
 body {
   font-family: 'Roboto', sans-serif;
-  background: #282c37 image-url('background-photo.jpg');
+  background: #282c37 image-url('background-photo.jpeg');
   background-size: cover;
   background-attachment: fixed;
   font-size: 13px;
@@ -334,4 +334,5 @@ body {
 
 @import 'accounts';
 @import 'stream_entries';
-@import 'components'
+@import 'components';
+@import 'about';
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index cf3dc8397..134d34ccb 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,5 +1,22 @@
 .button {
   background-color: #2b90d9;
+  font-family: 'Roboto';
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  border: 10px none;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  padding: 0 16px;
+  height: 36px;
+  cursor: pointer;
+  line-height: 36px;
+  border-radius: 4px;
+  text-decoration: none;
 
   &:hover {
     background-color: #489fde;