Landing update

Author: fil0157

src/app/src/app/pages/landing/landing.component.html

@@ -8,6 +8,7 @@
  </hex-color-picker>
  <div class="preview--output">{{getName('hex')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['rgb'].name}}</div>
  <rgb-color-picker
@@ -17,6 +18,7 @@
  </rgb-color-picker>
  <div class="preview--output">{{getName('rgb')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['rgbString'].name}}</div>
  <rgb-string-color-picker
@@ -26,6 +28,7 @@
  </rgb-string-color-picker>
  <div class="preview--output">{{getName('rgbString')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['rgba'].name}}</div>
  <rgba-color-picker
@@ -35,6 +38,7 @@
  </rgba-color-picker>
  <div class="preview--output">{{getName('rgba')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['rgbaString'].name}}</div>
  <rgba-string-color-picker
@@ -44,6 +48,7 @@
  </rgba-string-color-picker>
  <div class="preview--output">{{getName('rgbaString')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hsl'].name}}</div>
  <hsl-color-picker
@@ -53,6 +58,7 @@
  </hsl-color-picker>
  <div class="preview--output">{{getName('hsl')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hslString'].name}}</div>
  <hsl-string-color-picker
@@ -62,6 +68,7 @@
  </hsl-string-color-picker>
  <div class="preview--output">{{getName('hslString')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hsla'].name}}</div>
  <hsla-color-picker
@@ -71,6 +78,7 @@
  </hsla-color-picker>
  <div class="preview--output">{{getName('hsla')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hslaString'].name}}</div>
  <hsla-string-color-picker
@@ -80,6 +88,7 @@
  </hsla-string-color-picker>
  <div class="preview--output">{{getName('hslaString')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hsv'].name}}</div>
  <hsv-color-picker
@@ -89,6 +98,7 @@
  </hsv-color-picker>
  <div class="preview--output">{{getName('hsv')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hsvString'].name}}</div>
  <hsv-string-color-picker
@@ -98,6 +108,7 @@
  </hsv-string-color-picker>
  <div class="preview--output">{{getName('hsvString')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hsva'].name}}</div>
  <hsva-color-picker
@@ -107,6 +118,7 @@
  </hsva-color-picker>
  <div class="preview--output">{{getName('hsva')}}</div>
 </div>
+<hr>
 <div class="preview">
  <div class="preview--title">{{colors['hsvaString'].name}}</div>
  <hsva-string-color-picker
@@ -116,3 +128,4 @@
  </hsva-string-color-picker>
  <div class="preview--output">{{getName('hsvaString')}}</div>
 </div>
+<hr>

src/app/src/app/pages/landing/landing.component.scss

@@ -1,8 +1,9 @@
 .preview {
  display: flex;
  align-items: center;
- padding: 60px;
- border-bottom: 2px solid var(--ng-doc-shadow-color);
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 60px 0;
 
  &--title {
  flex-shrink: 0;
@@ -24,6 +25,11 @@
  }
 }
 
+hr {
+ border: none;
+ border-bottom: 2px solid var(--ng-doc-shadow-color);
+}
+
 @media (max-width: 767px) {
  .preview {
  flex-direction: column;