ui(homepage): improves text alignment (#2952)

Author: pranshuchittora

src/components/Contributors/Contributors.scss

@@ -17,7 +17,7 @@
     height: 45px;
     width: 45px;
     border-radius: 50%;
-    box-shadow: 0 0 2px rgba(0,0,0,0.3);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
   }
 
   .contributor__name {
@@ -30,7 +30,7 @@
     overflow-wrap: break-word;
     hyphens: auto;
     color: getColor(fiord);
-    box-shadow: 0 0 2px rgba(0,0,0,0.3);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
     background: transparentize(getColor(white), 0.05);
     transition: color 0.1s;
   }

src/components/Dropdown/Dropdown.scss

@@ -21,9 +21,8 @@
 }
 
 .dropdown__arrow {
-
   &:before {
-    content: "\25be";
+    content: '\25be';
   }
 }
 
@@ -34,7 +33,7 @@
   right: 0;
   font-size: getFontSize(-1);
   margin: auto;
-  background-color: #2B3A42;
+  background-color: #2b3a42;
   z-index: 1;
 
   ul {
@@ -47,7 +46,9 @@
     color: #fff;
     transition: all 250ms;
 
-    a:link, a:visited, a:hover {
+    a:link,
+    a:visited,
+    a:hover {
       color: #fff;
     }
 

src/components/Footer/Footer.scss

@@ -35,7 +35,7 @@
 
 .footer__left {
   @include break {
-    padding-left:1.5em;
+    padding-left: 1.5em;
   }
 }
 
@@ -55,12 +55,12 @@
 }
 
 .footer__icon {
-  display:inline-block;
-  height:35px;
+  display: inline-block;
+  height: 35px;
 
   img {
-    width:auto;
-    height:100%;
+    width: auto;
+    height: 100%;
   }
 }
 

src/components/Logo/Logo.scss

@@ -1,11 +1,11 @@
 .logo {
-  float:left;
-  width:auto;
-  height:35px;
-  opacity:0.9;
-  transition:opacity 250ms;
+  float: left;
+  width: auto;
+  height: 35px;
+  opacity: 0.9;
+  transition: opacity 250ms;
 
   &:hover {
-    opacity:1;
+    opacity: 1;
   }
 }

src/components/Markdown/Markdown.scss

@@ -44,7 +44,7 @@
       color: inherit;
     }
 
-    a[aria-hidden="true"] {
+    a[aria-hidden='true'] {
       margin-left: 8px;
       font-size: 0.8em;
       height: 1em;
@@ -53,7 +53,7 @@
       transition: all 250ms;
     }
 
-    &:hover a[aria-hidden="true"] {
+    &:hover a[aria-hidden='true'] {
       opacity: 1;
       visibility: visible;
     }
@@ -171,7 +171,7 @@
       color: #907a6e;
 
       .tip-content::before {
-        content: "[TODO]: ";
+        content: '[TODO]: ';
         font-style: normal;
       }
     }
@@ -275,7 +275,7 @@
     }
   }
 
-  img:not([class*="support__"]) {
+  img:not([class*='support__']) {
     max-width: 100%;
     height: auto;
   }
@@ -329,7 +329,7 @@
         cursor: pointer;
 
         &::after {
-          content: "\F103";
+          content: '\F103';
           float: left;
           position: relative;
           left: -2px;

src/components/Markdown/prism-theme.scss

@@ -1,8 +1,8 @@
 @import 'functions';
 @import 'mixins';
 
-code[class*="lang-"],
-pre[class*="lang-"] {
+code[class*='lang-'],
+pre[class*='lang-'] {
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -20,17 +20,17 @@ pre[class*="lang-"] {
 }
 
 /* Code blocks */
-pre[class*="lang-"] {
-  padding: .4em .8em;
-  margin: .5em 0;
+pre[class*='lang-'] {
+  padding: 0.4em 0.8em;
+  margin: 0.5em 0;
   overflow: auto;
   background-color: getColor(elephant);
 }
 
 /* Inline code */
-:not(pre) > code[class*="lang-"] {
-  padding: .2em;
-  border-radius: .3em;
+:not(pre) > code[class*='lang-'] {
+  padding: 0.2em;
+  border-radius: 0.3em;
   box-shadow: none;
   white-space: normal;
 }
@@ -47,7 +47,7 @@ pre[class*="lang-"] {
 }
 
 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -66,7 +66,7 @@ pre[class*="lang-"] {
 .token.regex,
 .token.attr-value,
 .token.important {
-  color: desaturate(#2dd271, 23%)
+  color: desaturate(#2dd271, 23%);
 }
 
 .token.inserted {

src/components/Navigation/Navigation.scss

@@ -119,7 +119,7 @@
   text-shadow: 0 0 0 #666;
   transition: all 250ms;
 
-  &::-webkit-input-placeholder{
+  &::-webkit-input-placeholder {
     color: lighten(getColor(fiord), 15%);
     text-shadow: none;
     -webkit-text-fill-color: initial;
@@ -213,8 +213,12 @@
 }
 
 @media (max-width: 720px) {
-  .navigation__mobile { display: block; }
-  .navigation__items { display: none; }
+  .navigation__mobile {
+    display: block;
+  }
+  .navigation__items {
+    display: none;
+  }
   .navigation--search .navigation__logo {
     pointer-events: none;
     overflow: hidden;

src/components/Navigation/Search.scss

@@ -13,7 +13,7 @@
       content: none;
     }
 
-    [class^=ds-dataset-] {
+    [class^='ds-dataset-'] {
       border-radius: 0;
       border-color: getColor(malibu);
       border-width: 2px 0;
@@ -75,7 +75,7 @@
     padding: 8px 16px 8px 12px;
   }
 
-  .ds-suggestion:nth-child(n+2) {
+  .ds-suggestion:nth-child(n + 2) {
     .algolia-docsearch-suggestion--category-header {
       border-top: 1px solid #dedede;
     }

src/components/Organization/Organization.scss

@@ -26,7 +26,7 @@
   margin-bottom: 1em;
   padding: 1em;
   border-radius: 2px;
-  box-shadow: 0 0 1px getColor(dove-grey); 
+  box-shadow: 0 0 1px getColor(dove-grey);
   overflow: hidden;
   background: getColor(concrete);
   transition: all 250ms;

src/components/Placeholder/Placeholder.scss

@@ -1,8 +1,8 @@
 @import 'functions';
 
 .placeholder {
-
-  h2, p {
+  h2,
+  p {
     background-color: getColor(concrete);
     // use system font to prevent layout change
     font-family: sans-serif;

src/components/SidebarItem/SidebarItem.scss

@@ -57,8 +57,12 @@
     padding-left: 1em;
     @include control-overflow;
 
-    &:first-child { margin-top: 0; }
-    &:last-child { margin-bottom: 0; }
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
     &:before {
       content: '';
       position: absolute;
@@ -90,7 +94,7 @@
 
   &--disabled {
     .sidebar-item__toggle {
-      color: #AAA;
+      color: #aaa;
     }
   }
 }

src/components/SidebarMobile/SidebarMobile.scss

@@ -26,7 +26,7 @@
     }
   }
 
-  &.no-delay{
+  &.no-delay {
     transition-duration: 0ms;
   }
 }
@@ -79,7 +79,7 @@
     border-left: 2px solid getColor(malibu);
 
     .sidebar-mobile__section-header {
-      color: lighten(getColor(fiord), 15%)
+      color: lighten(getColor(fiord), 15%);
     }
   }
 }
@@ -101,13 +101,13 @@
   padding: 0.5em 17px;
   text-transform: capitalize;
   color: getColor(dove-grey);
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &:active,
   &--active {
     color: getColor(mine-shaft);
     font-weight: 600;
-    background: #F1F4F4;
+    background: #f1f4f4;
   }
 
   &:hover {

src/components/Splash/Splash.scss

@@ -9,10 +9,10 @@
   h2 {
     justify-content: center;
   }
-  
+
   &__section {
-    position:relative;
-    text-align:center;
+    position: relative;
+    text-align: center;
 
     &--dark {
       background-color: #f3f3f3;
@@ -64,6 +64,10 @@
     width: 100%;
     float: left;
 
+    p {
+      text-align: left;
+    }
+
     @include break {
       width: 50%;
       padding: 0 15px;

src/components/Support/Support.scss

@@ -14,7 +14,9 @@
   &__rank {
     text-transform: capitalize;
 
-    &:after { content: ' '; }
+    &:after {
+      content: ' ';
+    }
   }
 
   &__item {

src/styles/fonts.scss

@@ -1,7 +1,6 @@
 @font-face {
   font-family: 'Geomanist';
-  src: url('../assets/geomanist-medium.woff2') format('woff2'),
-  url('../assets/geomanist-medium.woff') format('woff');
+  src: url('../assets/geomanist-medium.woff2') format('woff2'), url('../assets/geomanist-medium.woff') format('woff');
   font-weight: 600;
   font-style: normal;
-}
+}

src/styles/index.scss

@@ -30,7 +30,7 @@ a {
     font-size: 0.7em;
     margin-left: 16px;
     transform: rotate(-45deg);
-    color:lighten(getColor(dusty-grey), 10%);
+    color: lighten(getColor(dusty-grey), 10%);
 
     &:hover {
       color: $text-color-highlight;

src/styles/partials/_functions.scss

@@ -4,7 +4,7 @@
 @import '../../../node_modules/modularscale-sass/stylesheets/modularscale';
 
 @function getFontSize($step) {
-  @return ms($step, 16px, $minor-third)
+  @return ms($step, 16px, $minor-third);
 }
 
 @function getColor($name) {

src/styles/partials/_mixins.scss

@@ -1,4 +1,4 @@
-@mixin break ($size: medium) {
+@mixin break($size: medium) {
   @media (min-width: map-get($screens, $size)) {
     @content;
   }
@@ -10,13 +10,12 @@
   text-overflow: ellipsis;
 }
 
-@mixin fontantialias ($on) {
+@mixin fontantialias($on) {
   @if $on == true {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  }
-  @else {
+  } @else {
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: auto;
   }
-}
+}