🎨 style(media): update to darker colours

Author: tatianamac

src/_includes/css/main.css

@@ -292,10 +292,11 @@
   @include txn-ease-in-quick;
 }
 
-@mixin bdr--orange() {
-  border-bottom: 10px solid $orange;
+@mixin bdr($width: 1px, $color: $orange) {
+  border-bottom: $width solid $color;
   @include txn-ease-in-quick;
 }
+
 @mixin deco--orange() {
   text-decoration: wavy;
   text-decoration-color: $rust;

src/_includes/css/main.css.map

@@ -40,7 +40,7 @@ $neon-yellow: #f3f315;
 $yellow: #ffd926;
 $gold: #ffbc0e;
 $orange: #ff5327;
-$rust: #942f00;
+$rust: hsla(19, 100, 19, 1);
 
 //greens
 $pistachio-green: #d5ffb1;

src/media/index.html

@@ -212,6 +212,7 @@ $bg-color: (
   "neon-yellow": #{$neon-yellow},
   "ochre": #{$ochre},
   "midnight": #{$midnight},
+  "rust": #{$rust},
 );
 
 @each $name, $colour in $bg-color {

src/scss/abstracts/_mixins.scss

@@ -440,7 +440,7 @@ p {
 .details {
   text-transform: uppercase;
   font-size: 0.75em;
-  color: $black;
+  color: $pale-peach;
   letter-spacing: 0.025em;
   padding-top: 0.5em;
   min-width: 100px;
@@ -551,7 +551,7 @@ $t-color: (
 }
 
 .t-link-accent-orange {
-  @include bdr--orange;
+  @include bdr($orange);
   color: $rust;
   padding: 2px 0;
   text-decoration: none;
@@ -568,6 +568,24 @@ $t-color: (
   }
 }
 
+.t-link-accent-rust {
+  @include bdr(1px, $orange);
+  color: $white;
+  padding: 2px 0;
+  text-decoration: none;
+  &:hover {
+    @include t-link-hover;
+  }
+  &:focus {
+    @include out--rust;
+  }
+
+  &--block {
+    @extend .t-link-accent-orange;
+    display: inline-block;
+  }
+}
+
 .t-ltr-stretch {
   @include t-uppercase;
   @include t-ltr-spaceout-s;
@@ -595,7 +613,7 @@ $t-color: (
 
 .t-link-accent-azure {
   @include t-link-hover($gild);
-  
+
   color: $azure;
   line-height: 1.25em;
   padding: 2px 0;