Use mute instead of opacity everywhere

This commit is contained in:
steveoh 2017-08-30 18:59:32 -06:00
parent 0f60b7dd96
commit 0c06ef17c7
5 changed files with 9 additions and 8 deletions

View File

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

View File

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

View File

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

View File

@ -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>

View File

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