feat: improve button styling

This commit is contained in:
2026-02-14 10:25:47 +01:00
parent bc7ec2915e
commit 920bb21de6
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 { h1 {
font-weight: bold; font-weight: bold;
color: var(--primary-color); 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 */ /* Images */
.container p img, .container p img,
.img-responsive { .img-responsive {
@@ -204,7 +213,6 @@ html, body {
img { img {
width: 100%; width: 100%;
height: auto; height: auto;
padding-bottom: 2px;
} }
p { p {
@@ -212,12 +220,21 @@ html, body {
font-size: 0.8em; font-size: 0.8em;
text-align: center; text-align: center;
line-height: 1em; line-height: 1em;
margin-top: .5em;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.blog-links { .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"> <div class="blog-links">
{{- with .Params.event }} {{- 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 }} <i class="fas fa-calendar-alt" aria-hidden="true"></i>&nbsp;&nbsp;{{ .name }}
</a> </a>
{{- end }} {{- end }}
{{- with .Params.audio }} {{- 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 <i class="fas fa-microphone" aria-hidden="true"></i>&nbsp;&nbsp;Listen to Recording
</a> </a>
{{- end }} {{- end }}
{{- with .Params.article }} {{- 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 <i class="fas fa-newspaper" aria-hidden="true"></i>&nbsp;&nbsp;Read {{ .name }} Article
</a> </a>
{{- end }} {{- end }}
{{- with .Params.video }} {{- 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 <i class="fas fa-video" aria-hidden="true"></i>&nbsp;&nbsp;Watch Recording
</a> </a>
{{- end }} {{- end }}
{{- with .Params.slides }} {{- 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 <i class="fas fa-desktop" aria-hidden="true"></i>&nbsp;&nbsp;View Slides
</a> </a>
{{- end }} {{- end }}