@@ -96,44 +96,51 @@ def newsletter_input() -> rx.Component:
9696 )
9797
9898
99- def card_content (meta : dict , path : str ) -> rx .Component :
100- return rx .el .div (
101- rx .el .a (
102- rx .el .div (
103- rx .image (
104- src = meta ["image" ],
105- loading = "eager" ,
106- custom_attrs = {"fetchPriority" : "high" },
107- alt = "Image preview for blog post: " + str (meta ["title" ]),
108- class_name = "group-hover:scale-105 w-full h-full transition-transform duration-150 ease-out object-top object-cover" ,
109- ),
110- class_name = "relative flex-shrink-0 border-slate-5 border-b border-solid w-full h-[19.5rem] overflow-hidden" ,
99+ def card_inner (meta : dict , path : str ) -> rx .Component :
100+ return rx .el .a (
101+ rx .el .div (
102+ rx .image (
103+ src = meta ["image" ],
104+ loading = "eager" ,
105+ custom_attrs = {"fetchPriority" : "high" },
106+ alt = "Image preview for blog post: " + str (meta ["title" ]),
107+ class_name = "group-hover:scale-105 w-full h-full transition-transform duration-150 ease-out object-top object-cover" ,
111108 ),
112- rx . el . div (
113- rx . el . span (
114- meta [ "title" ],
115- class_name = "text-2xl font-[575] text-m-slate-12 dark:text-m-slate-3 mb-4" ,
116- ) ,
117- rx . el . p (
118- meta [ "description" ] ,
119- class_name = "text-m-slate-7 dark:text-m-slate-6 text-sm font-[475] mb-6" ,
120- ) ,
121- rx . el . span (
122- meta [ "author" ] ,
123- class_name = "text-m-slate-12 dark:text-m-slate-3 text-sm font-[525] mt-auto" ,
124- ) ,
125- class_name = "flex flex-col w-full h-full pb-12 px-12 " ,
109+ class_name = "relative flex-shrink-0 border-slate-5 border-b border-solid w-full h-[17.5rem] overflow-hidden" ,
110+ ),
111+ rx . el . div (
112+ rx . el . span (
113+ meta [ "title" ] ,
114+ class_name = "text-2xl font-[575] text-m-slate-12 dark:text-m-slate-3 mb-4 line-clamp-3" ,
115+ ) ,
116+ rx . el . p (
117+ meta [ "description" ] ,
118+ class_name = "text-m-slate-7 dark:text-m-slate-6 text-sm font-[475] mb-6 line-clamp-3" ,
119+ ) ,
120+ rx . el . span (
121+ meta [ "author" ] ,
122+ class_name = "text-m-slate-12 dark:text-m-slate-3 text-sm font-[525] mt-auto " ,
126123 ),
127- to = path ,
128- class_name = "flex flex-col gap-10 rounded-xl backdrop-blur-[16px] [box-shadow:0_-2px_2px_1px_rgba(0,_0,_0,_0.02),_0_1px_1px_0_rgba(0,_0,_0,_0.08),_0_4px_8px_0_rgba(0,_0,_0,_0.03)] bg-white-1 dark:bg-m-slate-11 overflow-hidden group h-full" ,
124+ class_name = "flex flex-col w-full h-full pb-8 px-8" ,
129125 ),
126+ to = path ,
127+ class_name = "flex flex-col gap-8 rounded-xl backdrop-blur-[16px] [box-shadow:0_-2px_2px_1px_rgba(0,_0,_0,_0.02),_0_1px_1px_0_rgba(0,_0,_0,_0.08),_0_4px_8px_0_rgba(0,_0,_0,_0.03)] bg-white-1 dark:bg-m-slate-11 overflow-hidden group h-full" ,
128+ )
129+
130+
131+ def card_content (meta : dict , path : str , class_name : str = "" ) -> rx .Component :
132+ return rx .el .div (
133+ card_inner (meta , path ),
130134 display = rx .cond (
131135 (blog_filter_cs .value == "All" )
132136 | (blog_filter_cs .value == meta .get ("tag" , "" )),
133137 "block" ,
134138 "none" ,
135139 ),
136- class_name = "relative border-y border-m-slate-4 dark:border-m-slate-10 lg:odd:border-r lg:even:border-l lg:even:before:content-[''] lg:even:before:absolute lg:even:before:w-12 lg:even:before:-left-12 lg:even:before:top-0 lg:even:before:bottom-0 lg:even:before:border-y lg:even:before:border-m-slate-4 lg:dark:even:before:border-m-slate-10" ,
140+ class_name = ui .cn (
141+ "relative border-y border-m-slate-4 dark:border-m-slate-10 lg:before:absolute lg:before:w-[calc(2rem+2px)] lg:before:-left-[calc(2rem+1px)] lg:before:-top-[0.5px] lg:before:-bottom-[0.5px] lg:before:border-y lg:before:border-m-slate-4 lg:dark:before:border-m-slate-10 lg:max-xl:odd:border-r lg:max-xl:even:border-l lg:max-xl:even:before:content-[''] xl:[&:nth-child(3n+1)]:border-r xl:[&:nth-child(3n+2)]:border-l xl:[&:nth-child(3n+2)]:border-r xl:[&:nth-child(3n+2)]:before:content-[''] xl:[&:nth-child(3n)]:border-l xl:[&:nth-child(3n)]:before:content-['']" ,
142+ class_name ,
143+ ),
137144 )
138145
139146
@@ -161,7 +168,7 @@ def component_grid() -> rx.Component:
161168 rx .el .div (
162169 class_name = "absolute -bottom-24 -right-px w-px h-24 bg-gradient-to-b from-current to-transparent text-m-slate-4 dark:text-m-slate-10"
163170 ),
164- class_name = "grid lg:grid-cols-2 grid-cols-1 lg:border border-m-slate-4 dark:border-m-slate-10 w-full gap-x-12 gap-y-12 lg:gap-y-24 relative py-24" ,
171+ class_name = "grid lg:grid-cols-2 xl: grid-cols-3 grid-cols- 1 lg:border border-m-slate-4 dark:border-m-slate-10 w-full gap-x-8 gap-y-8 lg:gap-y-24 relative py-24 lg:mb-48 mb -24" ,
165172 )
166173
167174
0 commit comments