Skip to content

Commit 7f1ccb7

Browse files
author
Vianpyro
committed
Refactor styles to use CSS variables for colors, typography, and spacing
1 parent b92c085 commit 7f1ccb7

File tree

7 files changed

+45
-27
lines changed

7 files changed

+45
-27
lines changed

assets/styles/variables.css

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,33 @@
22
color-scheme: light dark;
33

44
/* Colors */
5-
--color-primary: #ff6f61;
6-
--color-secondary: #ffcc5c;
7-
--color-tertiary: #88d8b0;
8-
--color-error: #cd3545;
5+
--color-primary: light-dark(#b8d8ba, #426347);
6+
--color-secondary: light-dark(#d9dbbc, #636645);
7+
--color-tertiary: light-dark(#fcddbc, #925527);
8+
--color-quaternary: light-dark(#ef959d, #782939);
9+
--color-quinary: light-dark(#69585f, #2C2629);
10+
--color-error: red;
11+
--color-success: green;
912

1013
/* Typography */
1114
--font-family: 'Roboto', sans-serif;
12-
--font-size-heading: 2.5rem;
13-
--font-size-body: 1.6rem;
15+
--font-size-heading: 2rem;
16+
--font-size-title: 1.6rem;
17+
--font-size-body: 1.1rem;
1418

1519
/* Spacing */
1620
--spacing-small: 0.4rem;
1721
--spacing-medium: 1.6rem;
1822
--spacing-large: 3.2rem;
1923

24+
/* Curvature */
25+
--border-radius-small: 0.4rem;
26+
--border-radius-medium: 1.6rem;
27+
--border-radius-large: 3.2rem;
28+
2029
/* Personalized elements */
2130
--icon-size: 2rem;
22-
--polaroid-background-color: light-dark(#e9e9e9, #161616);
31+
--polaroid-color: light-dark(#e9e9e9, #161616);
2332
--polaroid-height: 107mm;
2433
--polaroid-photo-size: 79mm;
2534
--polaroid-width: 88mm;
@@ -28,14 +37,20 @@
2837

2938
* {
3039
font-family: var(--font-family);
40+
font-size: var(--font-size-body);
3141
margin: 0;
3242
padding: 0;
3343
transition-duration: .5s;
3444
}
3545

46+
a {
47+
color: var(--color-quinary);
48+
font-weight: bold;
49+
text-decoration: none;
50+
}
51+
3652
button {
37-
background-color: var(--background-color-tertiary);
38-
color: var(--text-color-tertiary);
53+
background-color: var(--color-primary);
3954
height: 3rem;
4055
}
4156

components/Footer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@ const yearString = computed(() => {
2424
<style scoped>
2525
footer {
2626
display: flex;
27-
gap: .5rem;
27+
gap: var(--spacing-small);
2828
}
2929
</style>

components/Header.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ router.afterEach(() => {
3535

3636
<style scoped>
3737
header {
38-
background-color: rgb(0 0 0 / 30%);
38+
background-color: var(--color-primary);
3939
display: flex;
4040
justify-content: space-between;
4141
width: 100%;
@@ -49,8 +49,7 @@ ul {
4949
align-items: center;
5050
display: flex;
5151
gap: var(--spacing-medium);
52-
justify-content: center;
5352
list-style-type: none;
54-
padding: 0;
53+
margin-right: var(--spacing-medium);
5554
}
5655
</style>

components/RecipeCard.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const handleClick = () => {
4242
<style scoped>
4343
.card {
4444
align-items: center;
45-
background-color: var(--polaroid-background-color);
45+
background-color: var(--polaroid-color);
4646
border: 1px solid #888;
4747
cursor: pointer;
4848
display: flex;
@@ -59,6 +59,10 @@ const handleClick = () => {
5959
justify-content: center;
6060
}
6161
62+
.recipe-title>h1 {
63+
font-size: var(--font-size-title);
64+
}
65+
6266
.card-body {
6367
background-size: cover;
6468
display: flex;
@@ -72,9 +76,8 @@ const handleClick = () => {
7276
.card-body * {
7377
background-repeat: no-repeat;
7478
background-size: var(--icon-size);
75-
filter: drop-shadow(0 0 0.5rem var(--polaroid-background-color));
76-
font-size: calc(var(--icon-size) * 0.75);
77-
font-weight: bold;
79+
filter: drop-shadow(0 0 var(--spacing-small) var(--polaroid-color));
80+
font-size: var(--font-size-body);
7881
height: var(--icon-size);
7982
line-height: var(--icon-size);
8083
}

pages/account.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default {
3030

3131
<style scoped>
3232
#logout {
33-
color: red;
33+
color: var(--color-primary);
3434
font-weight: bold;
3535
width: 100%;
3636
}

pages/index.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<main>
33
<div id="recipe-list">
4-
<div v-if="error">Error: {{ error.message }}</div>
5-
<div v-else-if="!recipes">Unable to fetch recipes</div>
4+
<div v-if="error">Unable to load recipes, please try again later or contact support</div>
5+
<div v-else-if="!recipes">Loading recipes...</div>
66
<div v-else-if="!recipes.data">No recipes available</div>
77
<div v-else>
88
<RecipeCard
@@ -30,12 +30,13 @@ main {
3030
overflow-y: auto;
3131
}
3232
33-
#recipe-list> div {
33+
#recipe-list>div {
3434
display: flex;
3535
flex-wrap: wrap;
36-
gap: 2rem;
36+
gap: var(--spacing-medium);
3737
justify-content: center;
3838
justify-self: center;
3939
width: 80%;
40+
text-wrap: nowrap;
4041
}
4142
</style>

pages/login.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ section {
5858
display: flex;
5959
width: clamp(300px, 80%, 600px);
6060
flex-direction: column;
61-
border: 1px solid var(--background-color-secondary);
61+
border: 1px solid var(--color-primary);
6262
padding: 2rem;
63-
border-radius: var(--border-radius);
64-
gap: 1rem;
63+
border-radius: var(--border-radius-small);
64+
gap: var(--spacing-medium);
6565
}
6666
6767
:deep(form>div) {
@@ -100,7 +100,7 @@ section {
100100
input.valid
101101
) {
102102
background-color: rgb(0 255 0 / 5%);
103-
border: 1px solid green;
103+
border: 1px solid var(--color-success);
104104
box-sizing: border-box;
105105
width: 100%;
106106
}
@@ -110,7 +110,7 @@ section {
110110
input.invalid
111111
) {
112112
background-color: rgb(255 0 0 / 5%);
113-
border: 1px solid red;
113+
border: 1px solid var(--color-error);
114114
box-sizing: border-box;
115115
width: 100%;
116116
}

0 commit comments

Comments
 (0)