Use mute instead of opacity everywhere

site/layouts/index.html

@@ -6,7 +6,7 @@
 {{ partial "systems" (dict "content" . "incidents" $active) }}
 
 {{ with $active }}
-  <div class="section-title">Active Incidents</div>
+  <div class="section-title mute">Active Incidents</div>
   {{ range $active }}
     {{ partial "incident" . }}
   {{ end }}

site/layouts/partials/footer.html

@@ -1,9 +1,9 @@
 <div class="footer">
   <p>
-    <a href="https://www.netlify.com/statuskit">
+    <a class="mute" href="https://www.netlify.com/statuskit">
       StatusKit by Netlify
     </a> &#8226
-    <a href="https://github.com/netlify/netlify-statuskit">
+    <a class="mute" href="https://github.com/netlify/netlify-statuskit">
       View on GitHub
     </a>
   </p>

site/layouts/section/incidents.html

@@ -2,11 +2,11 @@
 
 <div class="incidents">
 {{ range (.Paginate .Data.Pages.ByPublishDate 15 ).Pages }}
-<div class="incident-summary">
+<div class="incident-summary flex-out">
   <a href="{{ .Permalink }}" class="article article-title">
     {{ .Title }}
   </a>
-  <span class="article-date">
+  <span class="article-date mute">
     {{ dateFormat "02 Jan 2006 15:04 MST" .Date }}
   </span>
 </div>

site/layouts/shortcodes/track.html

@@ -1 +1 @@
-<span class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" (.Get 0) }}</span>
+<p class="small mute separate">{{ dateFormat "02 Jan 2006 15:04 MST" (.Get 0) }}</p>

src/css/main.css

@@ -226,6 +226,9 @@ a:active {
   color: #BD1F1A;
 }
 
+.mute {
+  opacity: 0.7;
+}
 .incident-summary {
   margin-bottom: 24px;
   overflow: hidden;
@@ -242,7 +245,6 @@ a:active {
   float: right;
   text-align: right;
   font-size: 14px;
-  opacity: 0.3;
 }
 
 .pagination,
@@ -291,7 +293,6 @@ a:active {
 
 .footer a {
   color: #202020;
-  opacity: 0.3;
   transition: all 0.3s ease;
 }