Skip to content

Commit a59e8bf

Browse files
tireymorristireymorris
committed
Create responsive cards with hover effective
1 parent ce07a29 commit a59e8bf

File tree

2 files changed

+100
-31
lines changed

2 files changed

+100
-31
lines changed

‎public/styles/uno.css

Lines changed: 81 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,42 @@
11
/* layer: preflights */
22
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
33
/* layer: default */
4+
.grid,
5+
[grid=""]{display:grid;}
6+
.grid-cols-1,
7+
[grid-cols-1=""]{grid-template-columns:repeat(1,minmax(0,1fr));}
48
.m-0{margin:0;}
5-
.mb-1{margin-bottom:0.25rem;}
69
.mr-4{margin-right:1rem;}
710
.mt-1{margin-top:0.25rem;}
11+
.mt-2{margin-top:0.5rem;}
812
.h-12{height:3rem;}
913
.h-8{height:2rem;}
1014
.min-h-screen{min-height:100vh;}
1115
.w-12{width:3rem;}
12-
.w-full{width:100%;}
13-
.flex{display:flex;}
16+
.w-full,
17+
[w-full=""]{width:100%;}
18+
[h1=""]{height:0.25rem;}
19+
.flex,
20+
[flex=""]{display:flex;}
1421
.flex-col{flex-direction:column;}
22+
.hover\:-translate-y-1:hover{--un-translate-y:-0.25rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
23+
.transform,
24+
[transform=""]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
1525
.cursor-pointer{cursor:pointer;}
16-
.list-none{list-style-type:none;}
17-
.items-center{align-items:center;}
26+
.items-center,
27+
[items-center=""]{align-items:center;}
1828
.justify-center{justify-content:center;}
1929
.gap-2{gap:0.5rem;}
2030
.gap-3{gap:0.75rem;}
31+
.gap-4,
32+
[gap-4=""]{gap:1rem;}
33+
.overflow-hidden,
34+
[overflow-hidden=""]{overflow:hidden;}
2135
.border{border-width:1px;}
22-
.border-b{border-bottom-width:1px;}
2336
.border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
2437
.focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
38+
.rounded-lg,
39+
[rounded-lg=""]{border-radius:0.5rem;}
2540
.rounded-md{border-radius:0.375rem;}
2641
.rounded-sm{border-radius:0.125rem;}
2742
.border-none{border-style:none;}
@@ -30,35 +45,82 @@
3045
.bg-transparent{background-color:transparent /* transparent */;}
3146
.bg-white,
3247
[bg-white=""]{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}
48+
.dark .dark\:bg-gray-800,
49+
.dark [dark\:bg-gray-800=""]{--un-bg-opacity:1;background-color:rgb(31 41 55 / var(--un-bg-opacity)) /* #1f2937 */;}
3350
.dark .dark\:bg-gray-900,
3451
.dark [dark\:bg-gray-900=""]{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity)) /* #111827 */;}
3552
.hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity)) /* #60a5fa */;}
36-
.from-blue-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(59 130 246 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
37-
.to-purple-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(168 85 247 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
38-
.bg-gradient-to-r{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
53+
.from-blue-500,
54+
[from-blue-500=""]{--un-gradient-from-position:0%;--un-gradient-from:rgb(59 130 246 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
55+
.to-purple-500,
56+
[to-purple-500=""]{--un-gradient-to-position:100%;--un-gradient-to:rgb(168 85 247 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
57+
.bg-gradient-to-r,
58+
[bg-gradient-to-r=""]{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
3959
.p-0{padding:0;}
4060
.p-4{padding:1rem;}
41-
.px-4{padding-left:1rem;padding-right:1rem;}
61+
.px-4,
62+
[px-4=""]{padding-left:1rem;padding-right:1rem;}
4263
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
43-
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
64+
.py-2,
65+
[py-2=""]{padding-top:0.5rem;padding-bottom:0.5rem;}
4466
.pl-3{padding-left:0.75rem;}
4567
.pr-10{padding-right:2.5rem;}
4668
.text-base{font-size:1rem;line-height:1.5rem;}
47-
.text-sm{font-size:0.875rem;line-height:1.25rem;}
69+
.text-lg,
70+
[text-lg=""]{font-size:1.125rem;line-height:1.75rem;}
71+
.text-sm,
72+
[text-sm=""]{font-size:0.875rem;line-height:1.25rem;}
4873
.text-xl{font-size:1.25rem;line-height:1.75rem;}
74+
.dark .dark\:text-blue-400,
75+
.dark [dark\:text-blue-400=""]{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}
76+
.dark .dark\:text-gray-400,
77+
.dark [dark\:text-gray-400=""]{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity)) /* #9ca3af */;}
4978
.dark .dark\:text-white,
5079
.dark [dark\:text-white=""],
51-
.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
80+
.text-white,
81+
[text-white=""]{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
5282
.text-black{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity)) /* #000 */;}
53-
.text-gray-500{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity)) /* #6b7280 */;}
83+
.text-blue-600,
84+
[text-blue-600=""]{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity)) /* #2563eb */;}
85+
.text-gray-500,
86+
[text-gray-500=""]{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity)) /* #6b7280 */;}
5487
.text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity)) /* #737373 */;}
5588
.text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity)) /* #0f172a */;}
56-
.text-teal-500{--un-text-opacity:1;color:rgb(20 184 166 / var(--un-text-opacity)) /* #14b8a6 */;}
89+
.dark .dark\:visited\:text-purple-400:visited{--un-text-opacity:1;color:rgb(192 132 252 / var(--un-text-opacity)) /* #c084fc */;}
90+
.dark [dark\:visited\:text-purple-400=""]:visited{--un-text-opacity:1;color:rgb(192 132 252 / var(--un-text-opacity)) /* #c084fc */;}
5791
.visited\:text-purple-600:visited{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity)) /* #9333ea */;}
92+
[visited\:text-purple-600=""]:visited{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity)) /* #9333ea */;}
93+
.dark .dark\:hover\:text-blue-600:hover{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity)) /* #2563eb */;}
94+
.dark [dark\:hover\:text-blue-600=""]:hover{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity)) /* #2563eb */;}
95+
.hover\:text-blue-800:hover{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity)) /* #1e40af */;}
96+
[hover\:text-blue-800=""]:hover{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity)) /* #1e40af */;}
5897
.font-bold{font-weight:700;}
98+
.font-semibold,
99+
[font-semibold=""]{font-weight:600;}
59100
.font-serif{font-family:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;}
60101
.italic{font-style:italic;}
61-
.hover\:underline:hover{text-decoration-line:underline;}
62-
.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
63-
.shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
64-
.outline{outline-style:solid;}
102+
.shadow-lg,
103+
[shadow-lg=""]{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
104+
.shadow-md,
105+
[shadow-md=""]{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
106+
.hover\:shadow-2xl:hover{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
107+
[hover\:shadow-2xl=""]:hover{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
108+
.outline{outline-style:solid;}
109+
.transition-colors,
110+
[transition-colors=""]{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
111+
.transition-shadow,
112+
[transition-shadow=""]{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
113+
.duration-300,
114+
[duration-300=""]{transition-duration:300ms;}
115+
@media (min-width: 768px){
116+
.md\:grid-cols-2,
117+
[md\:grid-cols-2=""]{grid-template-columns:repeat(2,minmax(0,1fr));}
118+
}
119+
@media (min-width: 1024px){
120+
.lg\:grid-cols-3,
121+
[lg\:grid-cols-3=""]{grid-template-columns:repeat(3,minmax(0,1fr));}
122+
}
123+
@media (min-width: 1280px){
124+
.xl\:grid-cols-4,
125+
[xl\:grid-cols-4=""]{grid-template-columns:repeat(4,minmax(0,1fr));}
126+
}

‎src/components/Articles.tsx

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,27 @@ export default function Articles(props: { articles: Article[] }) {
66
formatRelativeTime(new Date(article.created_at));
77

88
return (
9-
<ul class="list-none m-0 p-0">
9+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
1010
{props.articles.map((article) => (
11-
<li key={article.id} class="p-0 m-0 border-b list-none mb-1">
12-
<a
13-
href={article.link}
14-
class="text-teal-500 hover:underline visited:text-purple-600"
15-
>
16-
{article.title}
17-
</a>
18-
<div class="text-gray-500 text-sm">
19-
{relativeDate(article)} - {article.source}
11+
<div
12+
key={article.id}
13+
className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-2xl transition-shadow duration-300 transform hover:-translate-y-1"
14+
>
15+
<div className="p-4">
16+
<a
17+
href={article.link}
18+
className="text-lg font-semibold text-blue-600 hover:text-blue-800 visited:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:visited:text-purple-400 transition-colors duration-300"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
>
22+
{article.title}
23+
</a>
24+
<div className="text-gray-500 dark:text-gray-400 text-sm mt-2">
25+
{relativeDate(article)} - {article.source}
26+
</div>
2027
</div>
21-
</li>
28+
</div>
2229
))}
23-
</ul>
30+
</div>
2431
);
2532
}

0 commit comments

Comments
 (0)