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>
<template #name>Viktor Kraastav</template> <template #name>Viktor Kraastav</template>
<template #species>Ankylosaurus</template>
</CharacterItem> </CharacterItem>
<CharacterItem class="sebin" href="/sebin/"> <CharacterItem class="sebin" href="/sebin/">
@ -20,6 +21,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
</template> </template>
<template #name>Sebin Nyshkim</template> <template #name>Sebin Nyshkim</template>
<template #species>Anthro Dragon (main)</template>
</CharacterItem> </CharacterItem>
<CharacterItem class="jarek" href="/jarek/"> <CharacterItem class="jarek" href="/jarek/">
@ -28,54 +30,23 @@ import CharacterItem from "@/components/CharacterItem.vue";
</template> </template>
<template #name>Jarek Vakhtang</template> <template #name>Jarek Vakhtang</template>
<template #species>Krondir</template>
</CharacterItem> </CharacterItem>
</CharacterList> </CharacterList>
</main> </main>
</template> </template>
<style lang="scss"> <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 { .sebin {
font-family: "Exo", sans-serif; font-family: "Exo", sans-serif;
font-style: italic;
&:before { &:before {
background-image: radial-gradient( background: var(--background--sebin);
circle at bottom right,
#800f0f 5%,
transparent 50%
),
radial-gradient(circle at top left, #195673 5%, #170821 100%);
} }
&:after { &:after {
background-image: url(@/assets/subtle-prism.svg); background: url(@/assets/subtle-prism.svg);
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }
} }
@ -84,15 +55,30 @@ import CharacterItem from "@/components/CharacterItem.vue";
font-family: "Secular One", serif; font-family: "Secular One", serif;
&:before { &: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 { a {
color: #493428; color: var(--color-text--viktor);
} }
img { 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; font-family: "Rubik Dirt", sans-serif;
&:before { &:before {
background-color: #6b682f; background: var(--background--jarek);
} }
} }
</style> </style>

115
src/components/CharacterItem.vue
View file

@ -9,13 +9,19 @@ defineProps<Props>();
<template> <template>
<li class="character__item"> <li class="character__item">
<a class="character__link" :href="href"> <a class="character__link" :href="href">
<span class="character__image"> <div class="character__image">
<slot name="image"></slot> <slot name="image"></slot>
</span> </div>
<span class="character__name"> <div class="character__meta">
<div class="character__name">
<slot name="name"></slot> <slot name="name"></slot>
</span> </div>
<div class="character__species">
<slot name="species"></slot>
</div>
</div>
</a> </a>
</li> </li>
</template> </template>
@ -26,80 +32,107 @@ defineProps<Props>();
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: var(--character-item-flex-flow);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// transform: skew(25deg); transition: var(--character-item-transition);
transition: all 0.2s ease-in-out;
position: relative; position: relative;
&:before { &:before,
position: absolute; &:after {
content: ""; content: "";
position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
filter: var(--base-saturation);
transition: var(--character-item-transition);
z-index: -1;
} }
&:hover { &:hover {
flex: 2 1 auto; flex: 2 1 auto;
&:before,
&:after {
filter: var(--hover-saturation);
} }
} }
}
&__link {
flex: var(--character-item-link-flex);
display: flex;
flex-flow: var(--character-item-link-flex-flow);
justify-content: var(--character-item-link-justify-content);
align-items: center;
filter: var(--base-saturation);
transition: var(--character-item-transition);
z-index: 1;
}
&__item:hover &__link { &__item:hover &__link {
transform: scale(1.5); transform: scale(1.5);
filter: saturate(100%); filter: var(--hover-saturation);
}
&__link {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
// transform: skew(-25deg);
filter: saturate(0%);
} }
&__image { &__image {
flex: 0 0 auto; flex: var(--character-item-image-flex);
max-width: var(--character-item-image-max-size);
max-height: var(--character-item-image-max-size);
transition: all 0.5s ease-in-out 0.25s;
img { img {
display: block; display: block;
width: 30vw; width: 100%;
height: 30vw; height: auto;
max-width: 15vh;
max-height: 15vh;
margin: 0; margin: 0;
border: 0.25rem solid #fff; border: var(--character-item-image-border);
border-radius: 100%; border-radius: 100%;
padding: 0; padding: 0;
}
}
@media (min-width: 80em) { &__meta {
width: 15vw; flex: var(--character-item-meta-flex);
height: 15vw;
max-width: 100%; text-align: var(--character-item-meta-text-align);
max-height: 100%;
} max-height: var(--character-item-meta-max-height);
margin: var(--character-item-meta-margin);
opacity: var(--character-item-meta-opacity);
transition: all 0.5s ease-in-out 0.25s;
} }
&__item:hover &__meta {
max-height: 12vh;
margin: var(--character-item-meta-margin-hover);
opacity: 1;
} }
&__name { &__name {
flex: 0 0 auto; font-size: var(--character-item-name-font-size);
font-size: 1.75rem;
margin: 1.75rem 0 0 0;
@media (min-width: 80em) {
font-size: 2.5vw;
margin: 4vh 0 0 0;
} }
&__species {
font-size: var(--character-item-species-font-size);
} }
} }
</style> </style>

8
src/components/CharacterList.vue
View file

@ -10,7 +10,7 @@
.character { .character {
&__list { &__list {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: var(--character-list-flex-flow);
justify-content: space-evenly; justify-content: space-evenly;
position: relative; position: relative;
@ -22,12 +22,6 @@
height: 100vh; height: 100vh;
list-style: none; list-style: none;
overflow: hidden;
@media (min-width: 80em) {
flex-flow: row nowrap;
}
} }
} }
</style> </style>

180
src/scss/base.scss
View file

@ -1,74 +1,154 @@
/* color palette from <https://github.com/vuejs/theme> */ /* color palette from <https://github.com/vuejs/theme> */
:root { :root {
--vt-c-white: #ffffff; --theme-c-muted-blue: #22759d;
--vt-c-white-soft: #f8f8f8; --theme-c-amaranth: #e93f3f;
--vt-c-white-mute: #f2f2f2; --theme-c-deep-purple: #33124a;
--vt-c-black: #181818; --theme-c-muted-blue-darker: #195673;
--vt-c-black-soft: #222222; --theme-c-amaranth-darker: #800f0f;
--vt-c-black-mute: #282828; --theme-c-deep-purple-darker: #170821;
--vt-c-indigo: #2c3e50; --theme-c-desert-sand: #e7c7b1;
--theme-c-woody-brown: #493428;
--theme-c-walnut-brown: #422322;
--theme-c-deep-oak: #341c1c;
--theme-c-crystal-blue: #6bb9db;
--theme-c-antique-white: #f8ebdd;
--theme-c-jagged-ice: #a7eef1;
--theme-c-glacier-blue: #6dabd1;
--theme-c-dark-grey-blue: #2d4c5a;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29); --theme-c-muddy-green: #6b682f;
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo); --theme-b-background-sebin-light: radial-gradient(
--vt-c-text-light-2: rgba(60, 60, 60, 0.66); circle at bottom right,
--vt-c-text-dark-1: var(--vt-c-white); var(--theme-c-amaranth) 5%,
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64); transparent 50%
),
radial-gradient(
circle at top left,
var(--theme-c-muted-blue) 5%,
var(--theme-c-deep-purple) 100%
);
--theme-b-background-sebin-dark: radial-gradient(
circle at bottom right,
var(--theme-c-amaranth-darker) 5%,
transparent 50%
),
radial-gradient(
circle at top left,
var(--theme-c-muted-blue-darker) 5%,
var(--theme-c-deep-purple-darker) 100%
);
--theme-b-background-viktor-light: url(@/assets/layered-waves-light.svg);
--theme-b-background-viktor-dark: url(@/assets/layered-waves-dark.svg);
}
/* general purpose variables */
:root {
--character-list-flex-flow: column nowrap;
--character-item-flex-flow: column nowrap;
--character-item-transition: all 0.2s ease-in-out;
--character-item-link-flex-flow: column nowrap;
--character-item-link-justify-content: center;
--character-item-image-flex: 0 0 15vw;
--character-item-image-size: 30vw;
--character-item-image-max-size: 15vh;
--character-item-image-border: 0.75vh solid #fff;
--character-item-meta-text-align: center;
--character-item-meta-max-height: 100%;
--character-item-meta-margin: var(--character-item-meta-margin-hover);
--character-item-meta-margin-hover: 1.75rem 0 0 0;
--character-item-meta-opacity: 1;
--character-item-name-font-size: 1.75rem;
--character-item-species-font-size: 1.25rem;
--background-height-base--viktor: 80%;
--background-height-hover--viktor: 80%;
} }
/* semantic color variables for this project */ /* semantic color variables for this project */
:root { :root {
--color-background: var(--vt-c-white); --background--sebin: var(--theme-b-background-sebin-light);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2); --background--viktor: var(--theme-c-desert-sand);
--color-border-hover: var(--vt-c-divider-light-1); --background-image--viktor: var(--theme-b-background-viktor-light);
--color-text--viktor: var(--theme-c-woody-brown);
--image-background--viktor: var(--theme-c-dark-grey-blue);
--color-heading: var(--vt-c-text-light-1); --background--jarek: var(--theme-c-muddy-green);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px; --base-saturation: saturate(100%);
--hover-saturation: saturate(100%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-background: var(--vt-c-black); --background--sebin: var(--theme-b-background-sebin-dark);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2); --background--viktor: var(--theme-c-dark-grey-blue);
--color-border-hover: var(--vt-c-divider-dark-1); --background-image--viktor: var(--theme-b-background-viktor-dark);
--color-text--viktor: var(--theme-c-antique-white);
--color-heading: var(--vt-c-text-dark-1); --image-background--viktor: var(--theme-c-desert-sand);
--color-text: var(--vt-c-text-dark-2);
} }
} }
*, @media (min-width: 30em) {
*::before, :root {
*::after { --character-item-flex-flow: row nowrap;
box-sizing: border-box;
margin: 0; --character-item-link-flex: 0 0 27rem;
position: relative; --character-item-link-flex-flow: row nowrap;
font-weight: normal; --character-item-link-justify-content: space-between;
--character-item-image-flex: 0 0 10rem;
--character-item-image-size: 15vh;
--character-item-image-max-size: 15vh;
--character-item-meta-flex: 0 0 15rem;
--character-item-meta-text-align: left;
--character-item-meta-margin-hover: 0;
}
} }
body { @media (min-width: 50em) and (orientation: landscape) {
min-height: 100vh; :root {
color: var(--color-text); --character-list-flex-flow: row nowrap;
background: var(--color-background);
transition: color 0.5s, background-color 0.5s; --character-item-link-flex: 0 0 auto;
line-height: 1.6; --character-item-link-flex-flow: column wrap;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, --character-item-link-justify-content: center;
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px; --character-item-image-flex: 0 0 15vw;
text-rendering: optimizeLegibility; --character-item-image-size: 15vw;
-webkit-font-smoothing: antialiased; --character-item-image-max-size: 15vw;
-moz-osx-font-smoothing: grayscale; --character-item-image-border: 0.75vw solid #fff;
--character-item-meta-flex: 0 0 auto;
--character-item-meta-text-align: center;
--character-item-meta-margin-hover: 3vw 0 0 0;
--character-item-name-font-size: 2.5vw;
--character-item-species-font-size: 1.25vw;
}
}
@media (hover: hover) {
:root {
--character-item-meta-max-height: 0;
--character-item-meta-margin: 0;
--character-item-meta-opacity: 0;
--background-height-base--viktor: 50%;
--base-saturation: saturate(30%);
--hover-saturation: saturate(100%);
}
} }

35
src/scss/main.scss
View file

@ -1,7 +1,34 @@
@import "@/scss/base.scss"; @import "@/scss/base";
@import "@/assets/fonts/exo/exo.css"; @import "@/assets/fonts/exo/exo";
@import "@/assets/fonts/rubik-dirt/rubik-dirt.css"; @import "@/assets/fonts/rubik-dirt/rubik-dirt";
@import "@/assets/fonts/secular-one/secular-one.css"; @import "@/assets/fonts/secular-one/secular-one";
:root {
font-size: 16px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { a {
color: #fff; color: #fff;