SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: change artist links into round buttons

Browse source
This commit is contained in:
Sebin Nyshkim 2023-02-04 18:44:14 +01:00
parent e4be1debf9
commit 538d09f7be
2 changed files with 47 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/AttributionTable.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import PawIcon from "@/assets/icons/PawIcon.vue";
import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
interface ArtistLink {
@ -44,7 +44,7 @@ defineProps<Props>();
<ul>
<li v-if="attrib.links.furaffinity">
<a :href="attrib.links.furaffinity" title="Fur Affinity">
<PawIcon />
<FAIcon />
</a>
</li>
<li v-if="attrib.links.twitter">
@ -72,6 +72,7 @@ defineProps<Props>();
&.artist {
p {
margin: 0.5rem 0;
text-align: center;
}
@ -79,6 +80,7 @@ defineProps<Props>();
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
@ -87,12 +89,43 @@ defineProps<Props>();
li {
flex: 0 0 2rem;
max-width: 2rem;
padding: 0 0.5rem;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background: var(--color-artist-link-background);
width: 2rem;
height: 2rem;
margin: 0 0.25rem;
border-radius: 100%;
}
a {
flex: 1 1 auto;
padding: 0.375rem;
box-shadow: none;
&:hover {
box-shadow: none;
}
}
svg {
fill: var(--color-artist-link-icon);
}
}
}
&__row {
&:hover {
li {
background: var(--color-artist-link-background-hover);
}
svg {
fill: var(--color-artist-link-icon-hover);
}
}
}

10
src/scss/base.scss
View file

@ -147,6 +147,11 @@
--table-cell-text-color: var(--theme-c-text-light);
--table-cell-text-color-hover: var(--theme-c-text-dark);
--color-artist-link-background: var(--theme-c-text-light);
--color-artist-link-background-hover: var(--theme-c-text-dark);
--color-artist-link-icon: var(--theme-c-text-dark);
--color-artist-link-icon-hover: var(--theme-c-text-light);
--timeline-stroke-color: var(--theme-c-dark-grey-blue);
--timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
--timeline-icon-color: var(--theme-c-antique-white);
@ -174,6 +179,11 @@
--table-cell-text-color: var(--theme-c-text-dark);
--table-cell-text-color-hover: var(--theme-c-text-dark);
--color-artist-link-background: var(--theme-c-text-dark);
--color-artist-link-background-hover: var(--theme-c-text-dark);
--color-artist-link-icon: var(--theme-c-text-light);
--color-artist-link-icon-hover: var(--theme-c-text-light);
--timeline-stroke-color: var(--theme-c-crystal-blue);
--timeline-circle-background: var(--theme-c-crystal-blue-translucent);
--timeline-icon-color: var(--theme-c-antique-white);