Refactoring home and base styles

app/javascript/styles/contrast/variables.scss

@@ -4,7 +4,7 @@ $black: #000000;
 $classic-base-color: #282c37;
 $classic-primary-color: #9baec8;
 $classic-secondary-color: #d9e1e8;
-$classic-highlight-color: #2b90d9;
+$classic-highlight-color: #f73699;
 
 $ui-base-color: $classic-base-color !default;
 $ui-primary-color: $classic-primary-color !default;

app/javascript/styles/mastodon-light/diff.scss

@@ -14,6 +14,12 @@ html {
   }
 }
 
+.button.left { margin-right: .5em }
+.button.right {
+  filter: opacity(70%);
+  margin-left: .5em;
+}
+
 .status-card__actions button,
 .status-card__actions a {
   color: rgba($white, 0.8);
@@ -510,7 +516,7 @@ html {
 .landing .hero-widget__text,
 .landing-page__information.contact-widget {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-left: 0;

app/javascript/styles/mastodon-light/variables.scss

@@ -5,7 +5,7 @@ $white: #ffffff;
 $classic-base-color: #282c37;
 $classic-primary-color: #9baec8;
 $classic-secondary-color: #d9e1e8;
-$classic-highlight-color: #2b90d9;
+$classic-highlight-color: #f73699;
 
 // Differences
 $success-green: lighten(#3c754d, 8%);
@@ -17,7 +17,7 @@ $ui-base-color: $classic-secondary-color !default;
 $ui-base-lighter-color: #b0c0cf;
 $ui-primary-color: #9bcbed;
 $ui-secondary-color: $classic-base-color !default;
-$ui-highlight-color: #2b90d9;
+$ui-highlight-color: #f73699;
 
 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;

app/javascript/styles/mastodon/about.scss

@@ -316,6 +316,10 @@ $small-breakpoint: 960px;
   }
 }
 
+.landing__grid {
+  margin-top: 3em !important;
+}
+
 .landing-page {
   p,
   li {
@@ -700,14 +704,12 @@ $small-breakpoint: 960px;
   }
 
   .directory {
-    margin-top: 30px;
     background: transparent;
     box-shadow: none;
     border-radius: 0;
   }
 
   .hero-widget {
-    margin-top: 30px;
     margin-bottom: 0;
 
     h4 {
@@ -893,28 +895,18 @@ table.brand-img {
 .brand__tagline {
   display: block;
   position: relative;
-  font-size: 2em;
+  font-size: 1.6em;
   opacity: .8;
   padding-top: 2em;
-  width: 100%;
+  width: 100vw;
   left: 0;
   bottom: 0;
-  background: linear-gradient(to right, #d589ff4f, #a389ff4f, #89c8ff4f, #89ffcd4f, #cfff894f);
+  background: linear-gradient(to right, #d589ff9c, #a389ff94, #89c8ffa1, #89ffcda3, #cfff8999);
   color: #000 !important;
   margin-top: 1em;
   padding: .8em .4em;
   text-align: center;
   text-decoration: none;
-  border-radius: 0.3em;
-  border-left: 0.2em solid black;
-  border-right: 0.2em solid black;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    position: static;
-    width: auto;
-    margin-top: 20px;
-    color: $dark-text-color;
-  }
 }
 
 .rules-list {

app/javascript/styles/mastodon/basics.scss

@@ -8,7 +8,7 @@
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 7%);
+  background: darken($ui-base-color, 50%);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;

app/javascript/styles/mastodon/components.scss

@@ -50,7 +50,7 @@
   cursor: pointer;
   display: inline-block;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 1.3em;
   font-weight: 500;
   height: 36px;
   letter-spacing: 0;
@@ -59,7 +59,6 @@
   padding: 0 16px;
   position: relative;
   text-align: center;
-  text-transform: uppercase;
   text-decoration: none;
   text-overflow: ellipsis;
   transition: all 100ms ease-in;

app/javascript/styles/mastodon/variables.scss

@@ -12,7 +12,7 @@ $red-bookmark: $warning-red;
 $classic-base-color: #282c37;         // Midnight Express
 $classic-primary-color: #9baec8;      // Echo Blue
 $classic-secondary-color: #d9e1e8;    // Pattens Blue
-$classic-highlight-color: #2b90d9;    // Summer Sky
+$classic-highlight-color: #f73699;    // Summer Sky
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;

app/views/about/show.html.haml

@@ -19,9 +19,9 @@
   .landing__buttons
     .btn-container
       %a{ "href" => "/auth/sign_up" }
-        %div.btn-left=t 'about.register'
+        %div.button.left=t 'auth.register'
       %a{ "href" => "/auth/sign_in" }
-        %div.btn-right=t 'about.login'
+        %div.button.right=t 'auth.login'
 
   .landing__grid
     .landing__grid__column.landing__grid__column-registration