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"> <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"; import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
interface ArtistLink { interface ArtistLink {
@ -44,7 +44,7 @@ defineProps<Props>();
<ul> <ul>
<li v-if="attrib.links.furaffinity"> <li v-if="attrib.links.furaffinity">
<a :href="attrib.links.furaffinity" title="Fur Affinity"> <a :href="attrib.links.furaffinity" title="Fur Affinity">
<PawIcon /> <FAIcon />
</a> </a>
</li> </li>
<li v-if="attrib.links.twitter"> <li v-if="attrib.links.twitter">
@ -72,6 +72,7 @@ defineProps<Props>();
&.artist { &.artist {
p { p {
margin: 0.5rem 0;
text-align: center; text-align: center;
} }
@ -79,6 +80,7 @@ defineProps<Props>();
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -87,12 +89,43 @@ defineProps<Props>();
li { li {
flex: 0 0 2rem; flex: 0 0 2rem;
max-width: 2rem; display: flex;
padding: 0 0.5rem; 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 { a {
flex: 1 1 auto;
padding: 0.375rem;
box-shadow: none; 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: var(--theme-c-text-light);
--table-cell-text-color-hover: var(--theme-c-text-dark); --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-stroke-color: var(--theme-c-dark-grey-blue);
--timeline-circle-background: var(--theme-c-dark-grey-blue-translucent); --timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
--timeline-icon-color: var(--theme-c-antique-white); --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: var(--theme-c-text-dark);
--table-cell-text-color-hover: 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-stroke-color: var(--theme-c-crystal-blue);
--timeline-circle-background: var(--theme-c-crystal-blue-translucent); --timeline-circle-background: var(--theme-c-crystal-blue-translucent);
--timeline-icon-color: var(--theme-c-antique-white); --timeline-icon-color: var(--theme-c-antique-white);