styling of links

This commit is contained in:
nikurasu 2022-10-21 16:00:48 +02:00
parent dc527da736
commit 5175cb3150
3 changed files with 25 additions and 3 deletions

View file

@ -0,0 +1,2 @@
$no_alpha: #00000000;
$white: #FFFFFF;

View file

@ -1,3 +1,5 @@
@import "colors.scss";
body { body {
min-height: 100vh; min-height: 100vh;
} }
@ -26,8 +28,24 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
>a{
>button {
font-family: monospace;
font-size: 1rem;
font-weight: 600;
background-color: $no_alpha;
color: $white;
border: 4px solid $white;
width: 750px;
height: 3rem;
cursor: pointer;
transition: background-color .25s ease-in-out, color .25s ease-in-out;
>button { &:hover {
background-color: #000; background-color: $white;
color: #ff9601;
background-position: 2rem;
}
}
} }
} }

View file

@ -9,7 +9,9 @@
</div> </div>
<div class="linkbox"> <div class="linkbox">
<% links.forEach(link => { %> <% links.forEach(link => { %>
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button> <a href="<%= link.hyperlink %>">
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
</a>
<% }) %> <% }) %>
</div> </div>
</div> </div>