Add more contrast and visibility of text

Also update style dependencies.
jakezatecky · Apr 4, 2023 · 1e03662 · 1e03662
1 parent 4f7b2d6
commit 1e03662
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 65 deletions.
diff --git a/examples/src/scss/_cayman.scss b/examples/src/scss/_cayman.scss
@@ -1,28 +1,30 @@
-// stylelint-disable
+// stylelint-disable value-keyword-case
 
 // Breakpoints
 $large-breakpoint: 64em;
 $medium-breakpoint: 42em;
 
 // Headers
-$header-heading-color: #fff;
-$header-bg-color: #3498db;
-$header-bg-color-secondary: #2c3e50;
+$header-heading-color: #fff !default;
+$header-bg-color: #159957 !default;
+$header-bg-color-secondary: #155799 !default;
 
 // Text
-$section-headings-color: #3498db;
-$body-text-color: #606c71;
-$body-link-color: #1e6bb8;
-$blockquote-text-color: #606c71;
+$font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$section-headings-color: #159957 !default;
+$body-text-color: #606c71 !default;
+$body-link-color: #1e6bb8 !default;
+$blockquote-text-color: #819198 !default;
 
 // Code
-$code-bg-color: #f3f6fa;
-$code-text-color: #567482;
+$font-family-code: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+$code-bg-color: #f3f6fa !default;
+$code-text-color: #567482 !default;
 
 // Borders
-$border-color: #dce6f0;
-$table-border-color: #e9ebec;
-$hr-border-color: #eff0f1;
+$border-color: #dce6f0 !default;
+$table-border-color: #e9ebec !default;
+$hr-border-color: #eff0f1 !default;
 
 @mixin large {
   @media screen and (min-width: #{$large-breakpoint}) {
@@ -49,7 +51,7 @@ $hr-border-color: #eff0f1;
 body {
   padding: 0;
   margin: 0;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: $font-family;
   font-size: 16px;
   line-height: 1.5;
   color: $body-text-color;
@@ -65,27 +67,6 @@ a {
 }
 
 .btn {
-  display: inline-block;
-  margin-bottom: 1rem;
-  color: rgba(255, 255, 255, 0.7);
-  background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.2);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 0.3rem;
-  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
-
-  &:hover {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    background-color: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.3);
-  }
-
-  + .btn {
-    margin-left: 1rem;
-  }
-
   @include large {
     padding: 0.75rem 1rem;
   }
@@ -106,14 +87,30 @@ a {
       margin-left: 0;
     }
   }
+
+  display: inline-block;
+  margin-bottom: 1rem;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.3rem;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  + .btn {
+    margin-left: 1rem;
+  }
 }
 
 .page-header {
-  color: $header-heading-color;
-  text-align: center;
-  background-color: $header-bg-color;
-  background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
-
   @include large {
     padding: 5rem 6rem;
   }
@@ -125,12 +122,18 @@ a {
   @include small {
     padding: 2rem 1rem;
   }
+
+  color: $header-heading-color;
+  text-align: center;
+  background-color: $header-bg-color;
+  background-image: linear-gradient(
+      120deg,
+      $header-bg-color-secondary,
+      $header-bg-color
+  );
 }
 
 .project-name {
-  margin-top: 0;
-  margin-bottom: 0.1rem;
-
   @include large {
     font-size: 3.25rem;
   }
@@ -142,13 +145,12 @@ a {
   @include small {
     font-size: 1.75rem;
   }
+
+  margin-top: 0;
+  margin-bottom: 0.1rem;
 }
 
 .project-tagline {
-  margin-bottom: 2rem;
-  font-weight: normal;
-  opacity: 0.7;
-
   @include large {
     font-size: 1.25rem;
   }
@@ -160,15 +162,13 @@ a {
   @include small {
     font-size: 1rem;
   }
+
+  margin-bottom: 2rem;
+  font-weight: normal;
+  opacity: 0.7;
 }
 
 .main-content {
-  word-wrap: break-word;
-
-  :first-child {
-    margin-top: 0;
-  }
-
   @include large {
     max-width: 64rem;
     padding: 2rem 6rem;
@@ -186,6 +186,12 @@ a {
     font-size: 1rem;
   }
 
+  word-wrap: break-word;
+
+  :first-child {
+    margin-top: 0;
+  }
+
   img {
     max-width: 100%;
   }
@@ -208,7 +214,7 @@ a {
 
   code {
     padding: 2px 4px;
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-family: $font-family-code;
     font-size: 0.9rem;
     color: $code-text-color;
     background-color: $code-bg-color;
@@ -219,7 +225,7 @@ a {
     padding: 0.8rem;
     margin-top: 0;
     margin-bottom: 1rem;
-    font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font: 1rem $font-family-code;
     color: $code-text-color;
     word-wrap: normal;
     background-color: $code-bg-color;
@@ -269,8 +275,8 @@ a {
     background-color: transparent;
     border: 0;
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: normal;
     }
   }
@@ -300,8 +306,6 @@ a {
     width: 100%;
     overflow: auto;
     word-break: normal;
-    word-break: keep-all; // For Firefox to horizontally scroll wider tables.
-    -webkit-overflow-scrolling: touch;
 
     th {
       font-weight: bold;
@@ -340,10 +344,6 @@ a {
 }
 
 .site-footer {
-  padding-top: 2rem;
-  margin-top: 2rem;
-  border-top: solid 1px $hr-border-color;
-
   @include large {
     font-size: 1rem;
   }
@@ -355,6 +355,10 @@ a {
   @include small {
     font-size: 0.9rem;
   }
+
+  padding-top: 2rem;
+  margin-top: 2rem;
+  border-top: solid 1px $hr-border-color;
 }
 
 .site-footer-owner {

diff --git a/examples/src/scss/style.scss b/examples/src/scss/style.scss
@@ -1,5 +1,21 @@
+// Cayman overrides
+$body-text-color: #444;
+$code-text-color: #465e6a;
+$header-bg-color: #3498db;
+$header-bg-color-secondary: #2c3e50;
+$section-headings-color: #2079b5;
+$blockquote-text-color: #576266;
+
 @import "cayman";
 
+.main-content {
+  h1,
+  h2,
+  h3 {
+    font-weight: bold;
+  }
+}
+
 .demo {
   display: flex;
   align-items: center;
@@ -13,7 +29,7 @@
 }
 
 .demo-funnel {
-  margin-right: 50px;
   width: 320px;
   height: 400px;
+  margin-right: 50px;
 }
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "process": "^0.11.10",
     "sinon": "^15.0.0",
     "stylelint": "^15.0.0",
-    "stylelint-config-takiyon": "^2.0.4",
+    "stylelint-config-takiyon": "^3.0.0",
     "util": "^0.12.4",
     "webpack": "^5.3.2",
     "webpack-cli": "^5.0.0",