feat: improve button styling
This commit is contained in:
@@ -55,17 +55,6 @@ html, body {
|
||||
}
|
||||
}
|
||||
|
||||
.label-success {
|
||||
background-color: rgba(92, 139, 184, 0.6);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: rgba(92, 139, 184, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
@@ -80,6 +69,26 @@ html, body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
.label {
|
||||
&.label-success {
|
||||
background-color: rgba(92, 139, 184, 0.6);
|
||||
color: #fff;
|
||||
|
||||
&.label-lg {
|
||||
font-size: 1em;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
background-color: rgba(92, 139, 184, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.container p img,
|
||||
.img-responsive {
|
||||
@@ -204,7 +213,6 @@ html, body {
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -212,12 +220,21 @@ html, body {
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
margin-top: .5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-links {
|
||||
margin-bottom: 1em;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: .5em;
|
||||
justify-content: center;
|
||||
|
||||
.label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<div class="blog-links">
|
||||
{{- with .Params.event }}
|
||||
<a class="btn btn-default button-event" href="{{ .href }}" target="_blank" aria-label="Event Page" role="button">
|
||||
<a class="label label-success label-lg" href="{{ .href }}" target="_blank" aria-label="Event Page" role="button">
|
||||
<i class="fas fa-calendar-alt" aria-hidden="true"></i> {{ .name }}
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- with .Params.audio }}
|
||||
<a class="btn btn-default button-audio" href="{{ . }}" target="_blank" aria-label="Audio Recording" role="button">
|
||||
<a class="label label-success label-lg" href="{{ . }}" target="_blank" aria-label="Audio Recording" role="button">
|
||||
<i class="fas fa-microphone" aria-hidden="true"></i> Listen to Recording
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- with .Params.article }}
|
||||
<a class="btn btn-default button-article" href="{{ .href }}" target="_blank" aria-label="Related Article" role="button">
|
||||
<a class="label label-success label-lg" href="{{ .href }}" target="_blank" aria-label="Related Article" role="button">
|
||||
<i class="fas fa-newspaper" aria-hidden="true"></i> Read {{ .name }} Article
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- with .Params.video }}
|
||||
<a class="btn btn-default button-video" href="{{ . }}" target="_blank" aria-label="Video Recording" role="button">
|
||||
<a class="label label-success label-lg" href="{{ . }}" target="_blank" aria-label="Video Recording" role="button">
|
||||
<i class="fas fa-video" aria-hidden="true"></i> Watch Recording
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- with .Params.slides }}
|
||||
<a class="btn btn-default button-slides" href="{{ . }}" target="_blank" aria-label="Slides" role="button">
|
||||
<a class="label label-success label-lg" href="{{ . }}" target="_blank" aria-label="Slides" role="button">
|
||||
<i class="fas fa-desktop" aria-hidden="true"></i> View Slides
|
||||
</a>
|
||||
{{- end }}
|
||||
|
||||
Reference in New Issue
Block a user