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

refactor: restructure styling across app

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-29 01:21:13 +01:00
parent 787210d8bf
commit 6408fc3fc6
5 changed files with 275 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/App.vue
View file

@ -12,6 +12,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
</template>
<template #name>Viktor Kraastav</template>
<template #species>Ankylosaurus</template>
</CharacterItem>
<CharacterItem class="sebin" href="/sebin/">
@ -20,6 +21,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
</template>
<template #name>Sebin Nyshkim</template>
<template #species>Anthro Dragon (main)</template>
</CharacterItem>
<CharacterItem class="jarek" href="/jarek/">
@ -28,54 +30,23 @@ import CharacterItem from "@/components/CharacterItem.vue";
</template>
<template #name>Jarek Vakhtang</template>
<template #species>Krondir</template>
</CharacterItem>
</CharacterList>
</main>
</template>
<style lang="scss">
.sebin,
.viktor,
.jarek {
&:before,
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: all 0.2s ease-in-out;
filter: saturate(0%);
z-index: -1;
}
&:hover {
&:before,
&:after {
filter: saturate(100%);
}
}
}
.sebin {
font-family: "Exo", sans-serif;
font-style: italic;
&:before {
background-image: radial-gradient(
circle at bottom right,
#800f0f 5%,
transparent 50%
),
radial-gradient(circle at top left, #195673 5%, #170821 100%);
background: var(--background--sebin);
}
&:after {
background-image: url(@/assets/subtle-prism.svg);
background: url(@/assets/subtle-prism.svg);
mix-blend-mode: multiply;
}
}
@ -84,15 +55,30 @@ import CharacterItem from "@/components/CharacterItem.vue";
font-family: "Secular One", serif;
&:before {
background-color: #e7c7b1;
background: var(--background--viktor);
}
&:after {
top: unset;
background: var(--background-image--viktor) no-repeat center bottom;
background-size: cover;
height: var(--background-height-base--viktor);
z-index: 0;
}
&:hover:after {
height: var(--background-height-hover--viktor);
}
a {
color: #493428;
color: var(--color-text--viktor);
}
img {
background-color: #2d4c5a;
background: var(--image-background--viktor);
}
}
@ -100,7 +86,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
font-family: "Rubik Dirt", sans-serif;
&:before {
background-color: #6b682f;
background: var(--background--jarek);
}
}
</style>