feat: improve button styling

This commit is contained in:
2026-02-14 10:25:47 +01:00
parent 87b4976482
commit 0722d54cfc
2 changed files with 35 additions and 18 deletions

View File

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

View File

@@ -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>&nbsp;&nbsp;{{ .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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;View Slides
</a>
{{- end }}