Merge pull request #97 from glitch-soc/LESS_UGLY_LANDING_PAGE_TEXT_CSS

Landing page CSS fixes

app/javascript/styles/about.scss

@@ -272,6 +272,8 @@
 }
 
 .landing-page {
+  $lp-par-color: lighten($ui-base-color, 36%);
+
   .header-wrapper {
     padding-top: 15px;
     background: $ui-base-color;
@@ -284,6 +286,14 @@
 
       .hero .heading {
         padding-bottom: 30px;
+
+        p, li {
+          color: lighten($ui-base-color, 50%);
+        }
+
+        li {
+          margin: 2px 0;
+        }
       }
     }
 
@@ -307,13 +317,6 @@
     }
   }
 
-  p,
-  li {
-    font: inherit;
-    font-weight: inherit;
-    margin-bottom: 0;
-  }
-
   .header {
     line-height: 30px;
     overflow: hidden;
@@ -410,28 +413,24 @@
       }
     }
 
-    ul {
+    .links {
-      list-style: none;
+      position: relative;
-      margin: 0;
+      z-index: 4;
 
-      li {
+      ul {
-        display: inline-block;
+        list-style: none;
-        vertical-align: bottom;
         margin: 0;
 
-        &:first-child a {
+        li {
-          padding-left: 0;
+          display: inline-block;
-        }
+          vertical-align: bottom;
+          margin: 0;
 
-        &:last-child a {
+          &:last-child a {
-          padding-right: 0;
+            padding-right: 0;
+          }
         }
       }
-    }
-
-    .links {
-      position: relative;
-      z-index: 4;
 
       a {
         display: flex;
@@ -480,13 +479,11 @@
     padding: 0;
   }
 
-  .learn-more-cta {
+  .learn-more-cta, .extended-description {
-    background: darken($ui-base-color, 4%);
-    padding: 50px 0;
-  }
-
-  .extended-description {
     padding: 50px 0;
+    font-weight: 400;
+    color: $lp-par-color;
+    font: 16px/1.6 'mastodon-font-sans-serif', sans-serif;
 
     ul,
     ol {
@@ -509,16 +506,27 @@
 
     p,
     li {
-      font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
+      color: $lp-par-color;
-      font-weight: 400;
+      margin-bottom: 6px;
-      margin-bottom: 12px;
-      color: $ui-base-lighter-color;
 
       a {
         color: $ui-highlight-color;
         text-decoration: underline;
       }
     }
+
+    li {
+      margin: 2px 0;
+    }
+  }
+
+  .learn-more-cta {
+    background: darken($ui-base-color, 4%);
+    padding: 50px 0;
+    p {
+      font-size: 16px;
+      line-height: 28px;
+    }
   }
 
   h3 {
@@ -532,8 +540,8 @@
 
   p {
     font-size: 16px;
-    line-height: 30px;
+    line-height: 28px;
-    color: $ui-base-lighter-color;
+    color: $lp-par-color;
   }
 
   .features {

app/views/about/more.html.haml

@@ -29,7 +29,10 @@
             - else
               = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
           %li= link_to t('about.about_this'), about_more_path
-          %li= link_to t('about.other_instances'), 'https://joinmastodon.org/'
+          %li
+            = link_to 'https://joinmastodon.org/' do
+              = "#{t('about.other_instances')}"
+              %i.fa.fa-external-link{ style: 'padding-left: 5px;' }
 
       .container.hero
         .heading

app/views/about/show.html.haml

@@ -33,7 +33,10 @@
             - else
               = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
           %li= link_to t('about.about_this'), about_more_path
-          %li= link_to t('about.other_instances'), 'https://joinmastodon.org/'
+          %li
+            = link_to 'https://joinmastodon.org/' do
+              = "#{t('about.other_instances')}"
+              %i.fa.fa-external-link{ style: 'padding-left: 5px;' }
 
       .container.hero
         .floats