From 0a7a9bbd2fd9aa5685f1aae9ac415c3750c88fd6 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 3 Nov 2017 12:32:00 -0700
Subject: Reorganize landing page for new users

---
 app/assets/stylesheets/framework/blank.scss | 47 ++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 18 deletions(-)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 6bb096fc5bd..9c3df7299b8 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -7,29 +7,43 @@
     width: 100%;
     height: 100%;
     padding-bottom: 25px;
-    border: 1px solid $border-color;
     border-radius: $border-radius-default;
   }
 }
 
-.blank-state {
-  padding-top: 20px;
-  padding-bottom: 20px;
+.blank-state-welcome {
   text-align: center;
+  padding: 20px 0 40px;
 
-  &.blank-state-welcome {
-    .blank-state-welcome-title {
-      font-size: 24px;
-    }
+  .blank-state-welcome-title {
+    font-size: 24px;
+  }
 
-    .blank-state-text {
-      margin-bottom: 0;
-    }
+  .blank-state-text {
+    margin-bottom: 0;
   }
+}
 
-  .blank-state-icon {
-    padding-bottom: 20px;
+.blank-state-link {
+  display: block;
+  color: $gl-text-color;
 
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state {
+  display: flex;
+  align-items: center;
+  padding: 50px 30px;
+  margin-bottom: 30px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .blank-state-icon {
     svg {
       display: block;
       margin: auto;
@@ -38,13 +52,10 @@
 
   .blank-state-title {
     margin-top: 0;
-    margin-bottom: 10px;
     font-size: 18px;
   }
 
-  .blank-state-text {
-    max-width: $container-text-max-width;
-    margin: 0 auto $gl-padding;
-    font-size: 14px;
+  .blank-state-body {
+    padding-left: 20px;
   }
 }
-- 
cgit v1.2.1


From 6377821a7f74ccc6465cdf7ccc85183d61fce481 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Mon, 6 Nov 2017 17:18:25 -0700
Subject: Add mobile styles

---
 app/assets/stylesheets/framework/blank.scss | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 9c3df7299b8..28cece67165 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -36,13 +36,17 @@
 }
 
 .blank-state {
-  display: flex;
-  align-items: center;
-  padding: 50px 30px;
+  padding: 20px;
   margin-bottom: 30px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
+  @media (min-width: $screen-sm-min) {
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+  }
+
   .blank-state-icon {
     svg {
       display: block;
@@ -56,6 +60,13 @@
   }
 
   .blank-state-body {
-    padding-left: 20px;
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      padding-left: 20px;
+    }
   }
 }
-- 
cgit v1.2.1


From 95ab3bf5b14213bf1edb19d1e936bb6548836124 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 8 Nov 2017 16:27:41 -0700
Subject: Use flexbox instead of bootstrap columns

---
 app/assets/stylesheets/framework/blank.scss | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 28cece67165..10f9e9b70b0 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -11,6 +11,13 @@
   }
 }
 
+.blank-state-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  height: 100%;
+}
+
 .blank-state-welcome {
   text-align: center;
   padding: 20px 0 40px;
@@ -27,6 +34,20 @@
 .blank-state-link {
   display: block;
   color: $gl-text-color;
+  flex: 0 0 100%;
+  margin-bottom: 15px;
+
+  @media (min-width: $screen-sm-min) {
+    flex: 0 0 49%;
+
+    &:nth-child(odd) {
+      margin-right: 5px;
+    }
+
+    &:nth-child(even) {
+      margin-left: 5px;
+    }
+  }
 
   &:hover {
     background-color: $gray-light;
@@ -37,7 +58,6 @@
 
 .blank-state {
   padding: 20px;
-  margin-bottom: 30px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
-- 
cgit v1.2.1