Improve Docs homepage

trilbymedia · Aug 15, 2017 · 38962f9 · 38962f9
1 parent 4cb36cd
commit 38962f9
Show file tree

Hide file tree

Showing 16 changed files with 224 additions and 218 deletions.
diff --git a/docs/components.html b/docs/components.html
diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -108,11 +108,11 @@
   height: auto;
   width: 1em;
 }
-.s-content .s-title + .notes,
-.s-content .s-subtitle + .notes {
+.s-content .s-title + .docs-note,
+.s-content .s-subtitle + .docs-note {
   margin-top: 8px;
 }
-.s-content .notes {
+.s-content .docs-note {
   margin: 30px 0;
 }
 .s-content .column {
@@ -264,6 +264,7 @@
   z-index: 200;
 }
 .section-header .s-brand {
+  padding: 0;
   position: static;
 }
 .section-hero {
@@ -274,17 +275,22 @@
   padding: 10px;
 }
 .section-updates {
-  padding: 30px 10px;
+  padding: 90px 10px 70px 10px;
 }
 .section-updates .update-branding {
   height: auto;
   width: 96px;
 }
 .section-updates .card {
+  border: 0;
+  color: #667189;
   margin-bottom: 20px;
 }
 .section-features {
-  padding: 30px 10px;
+  padding: 90px 10px;
+}
+.section-features .column {
+  padding: 10px;
 }
 .section-footer {
   color: #acb3c2;
@@ -302,7 +308,7 @@
 .grid-hero h1 {
   color: #454d5d;
   font-size: 32px;
-  font-weight: 400;
+  margin-bottom: 30px;
 }
 .grid-hero h2 {
   color: #50596c;
@@ -319,7 +325,7 @@
 .grid-hero .card {
   background: none;
   border: 0;
-  color: #5b657a;
+  color: #667189;
   padding: 10px;
 }
 .grid-hero .card .card-title {

diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
@@ -78,7 +78,7 @@
   color: #5764c6;
 }
 .calendar .calendar-date .date-item:focus {
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
 }
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
@@ -722,7 +722,7 @@
   width: 100%;
 }
 .slider:focus {
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
   outline: none;
 }
 .slider::-webkit-slider-thumb {

diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -403,7 +403,7 @@ a {
   text-decoration: none;
 }
 a:focus {
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
 }
 a:focus,
 a:hover,
@@ -421,7 +421,7 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: 8px;
+  margin-bottom: .5em;
   margin-top: 0;
 }
 .h1,
@@ -628,7 +628,7 @@ dl dd {
 }
 .btn:focus {
   background: #eff1fa;
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
   text-decoration: none;
 }
 .btn:hover {
@@ -816,7 +816,7 @@ legend {
 }
 .form-input:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
 }
 .form-input::-webkit-input-placeholder {
   color: #acb3c2;
@@ -888,7 +888,7 @@ textarea.form-input {
 }
 .form-select:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
 }
 .form-select::-ms-expand {
   display: none;
@@ -952,7 +952,7 @@ textarea.form-input {
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
 }
 .form-checkbox input:checked + .form-icon,
 .form-radio input:checked + .form-icon,
@@ -1133,7 +1133,7 @@ textarea.form-input {
 .has-success .form-select:focus,
 .form-input.is-success:focus,
 .form-select.is-success:focus {
-  box-shadow: 0 0 0 2px rgba(50, 182, 67, .1);
+  box-shadow: 0 0 0 2px rgba(50, 182, 67, .2);
 }
 .has-error .form-input,
 .has-error .form-select,
@@ -1145,7 +1145,7 @@ textarea.form-input {
 .has-error .form-select:focus,
 .form-input.is-error:focus,
 .form-select.is-error:focus {
-  box-shadow: 0 0 0 2px rgba(232, 86, 0, .1);
+  box-shadow: 0 0 0 2px rgba(232, 86, 0, .2);
 }
 .has-error .form-checkbox .form-icon,
 .has-error .form-radio .form-icon,
@@ -1171,13 +1171,13 @@ textarea.form-input {
 .form-radio.is-error input:focus + .form-icon,
 .form-switch.is-error input:focus + .form-icon {
   border-color: #e85600;
-  box-shadow: 0 0 0 2px rgba(232, 86, 0, .1);
+  box-shadow: 0 0 0 2px rgba(232, 86, 0, .2);
 }
 .form-input:not(:placeholder-shown):invalid {
   border-color: #e85600;
 }
 .form-input:not(:placeholder-shown):invalid:focus {
-  box-shadow: 0 0 0 2px rgba(232, 86, 0, .1);
+  box-shadow: 0 0 0 2px rgba(232, 86, 0, .2);
 }
 .form-input:not(:placeholder-shown):invalid + .form-input-hint {
   color: #e85600;
@@ -1880,7 +1880,7 @@ code {
 }
 .form-autocomplete .form-autocomplete-input.is-focused {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .2);
 }
 .form-autocomplete .form-autocomplete-input .form-input {
   border-color: transparent;
@@ -2809,6 +2809,13 @@ a.text-primary:focus,
 a.text-primary:hover {
   color: #4452c0;
 }
+.text-secondary {
+  color: #e4e6f6;
+}
+a.text-secondary:focus,
+a.text-secondary:hover {
+  color: #d1d4ef;
+}
 .text-gray {
   color: #acb3c2;
 }

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css