8000 media queries tailwind · WilliamBostrom/Nuxt-vue@401f36a · GitHub
[go: up one dir, main page]
Skip to content

Commit 401f36a

Browse files
WilliamBostromWilliamBostrom
committed
media queries tailwind
1 parent d4eb2a3 commit 401f36a

File tree

9 files changed

+2908
-1003
lines changed

9 files changed

+2908
-1003
lines changed

‎components/MenuCard.vue

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
11
<template>
2-
<div class="card text-center">
3-
<img :src="recipe.image" alt="recipe thumb" class="thumb" />
4-
<p class="font-bold text-gray-500 truncate">{{ recipe.name }}</p>
2+
<div class="card text-center flex-wrap">
3+
<img :src="recipe.image" alt="recipe thumb" class="thumb pb-2" />
4+
<p class="font-bold text-gray-700 truncate text-start">
5+
{{ recipe.name }}
6+
</p>
7+
<div class="h-[80px] flex flex-col items-start">
8+
<span
9+
>⭐
10+
<span class="text-sm"
11+
>{{ recipe.rating }}/5 ({{ recipe.reviewCount }})
12+
</span></span
13+
>
14+
<span
15+
>🕒 <span class="text-sm">{{ recipe.cookTimeMinutes }} min </span></span
16+
>
17+
<span
18+
>🔥
19+
<span class="text-sm">{{ recipe.caloriesPerServing }} cals </span></span
20+
>
21+
</div>
522
<NuxtLink :to="`/menu/${recipe.id}`">
623
<p class="btn">View Details</p>
724
</NuxtLink>
@@ -14,8 +31,9 @@ const { recipe } = defineProps(["recipe"]);
1431

1532
<style scoped>
1633
.thumb {
17-
max-height: 120px;
18-
max-width: 70%;
34+
/* width: 100%; */
35+
max-height: 300px;
36+
max-width: 100%;
1937
margin: 0 auto;
2038
}
2139
</style>

‎components/MenuDetails.vue

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="card">
3-
<div class="grid grid-cols-2 gap-10">
4-
<div class="p-7 mx-auto my-7">
3+
<div class="grid md:lg:grid-cols-1 lg:grid-cols-2 md:gap-2 lg:gap-10">
4+
<div class="lg:p-7 mx-auto md:my-2 lg:my-7">
55
<img :src="recipe.image" alt="recipe image" />
66
</div>
7-
<div class="p-7">
7+
<div class="md:p-2 lg:p-7">
88
<h2 class="text-4xl my-7">{{ recipe.name }}</h2>
99
<div class="flex gap-2">
1010
<p class="pr-[12px] border-r border-gray-200">
@@ -37,11 +37,17 @@
3737
</div>
3838
<div>
3939
<h3 class="text-2xl my-5 underline">Ingredients</h3>
40-
<ul>
40+
<ul
41+
:class="
42+
recipe.ingredients.length > 5
43+
? 'grid grid-cols-2 gap-4'
44+
: 'flex flex-col gap-2'
45+
"
46+
>
4147
<li
42-
class="flex items-center gap-2"
4348
v-for="(ingredient, index) in recipe.ingredients"
4449
:key="index"
50+
class="flex items-center gap-2"
4551
>
4652
<span
4753
class="h-3 w-3 p-3 text-gray-950 rounded-full flex items-center justify-center border-green-500 border-2"

‎layouts/default.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<header class="shadow-sm bg-white">
4-
<nav class="container-mx-auto p-4 flex justify-between">
4+
<nav class="container-mx-auto p-4 flex justify-between items-center">
55
<NuxtLink to="/" class="font-bold text-2xl"
66
>Nuxt<span class="text-black">Home</span></NuxtLink
77
>

‎layouts/menu.vue

Lines chang 628C ed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<template>
22
<div>
33
<header class="shadow-sm bg-white">
4-
<nav class="container mx-auto p-4 text-[#12b488]">
5-
<NuxtLink to="/menu" class="font-bold text-2xl"
4+
<nav
5+
class="container mx-auto p-4 text-[#12b488] flex justify-between items-center"
6+
>
7+
<NuxtLink to="/menu" class="font-bold text-2xl grow"
68
>Nuxt<span class="text-black">Menu</span></NuxtLink
79
>
10+
<ul class="flex gap-4">
11+
<li><NuxtLink to="/">Home</NuxtLink></li>
12+
<li><NuxtLink to="/todo">Todo List</NuxtLink></li>
13+
14+
<li><NuxtLink class="btn" to="/menu">Food menu</NuxtLink></li>
15+
</ul>
816
</nav>
917
</header>
1018
<main class="container mx-auto p4">
@@ -25,4 +33,7 @@
2533
.router-link-exact-active {
2634
color: #12b488;
2735
}
36+
.btn {
37+
color: white;
38+
}
2839
</style>

0 commit comments

Comments
 (0)
0