config: ui,styles,packages (1 files)

This commit is contained in:
Richard Ward
2025-12-31 00:11:49 +00:00
parent 2700bb6793
commit e6ab8e3ac3

View File

@@ -0,0 +1,90 @@
[
{
"id": "footer_main_styles",
"type": "component",
"category": "layout",
"className": "footer-main",
"description": "Main footer container styling",
"css": ".footer-main {\n width: 100%;\n background-color: var(--muted);\n border-top: 1px solid var(--border);\n margin-top: auto;\n}"
},
{
"id": "footer_container_styles",
"type": "component",
"category": "layout",
"className": "footer-container",
"description": "Footer content container",
"css": ".footer-container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 3rem 1.5rem 1.5rem;\n}\n\n@media (min-width: 768px) {\n .footer-container {\n padding: 4rem 2rem 2rem;\n }\n}"
},
{
"id": "footer_grid_styles",
"type": "component",
"category": "layout",
"className": "footer-grid",
"description": "Footer content grid layout",
"css": ".footer-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n@media (min-width: 640px) {\n .footer-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n .footer-grid {\n grid-template-columns: repeat(4, 1fr);\n gap: 3rem;\n }\n}"
},
{
"id": "footer_column_styles",
"type": "component",
"category": "layout",
"className": "footer-column",
"description": "Footer column styling",
"css": ".footer-column {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}"
},
{
"id": "footer_heading_styles",
"type": "component",
"category": "text",
"className": "footer-heading",
"description": "Footer section heading styling",
"css": ".footer-heading {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--foreground);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 0.5rem;\n}"
},
{
"id": "footer_links_styles",
"type": "component",
"category": "navigation",
"className": "footer-links",
"description": "Footer links list styling",
"css": ".footer-links {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n list-style: none;\n padding: 0;\n margin: 0;\n}"
},
{
"id": "footer_link_styles",
"type": "component",
"category": "link",
"className": "footer-link",
"description": "Individual footer link styling",
"css": ".footer-link {\n font-size: 0.875rem;\n color: var(--muted-foreground);\n text-decoration: none;\n transition: color 0.2s ease-in-out;\n}\n\n.footer-link:hover {\n color: var(--primary);\n}"
},
{
"id": "footer_brand_styles",
"type": "component",
"category": "branding",
"className": "footer-brand",
"description": "Footer brand/logo section styling",
"css": ".footer-brand {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.footer-brand-logo {\n font-size: 1.25rem;\n font-weight: 700;\n color: var(--foreground);\n}\n\n.footer-brand-description {\n font-size: 0.875rem;\n color: var(--muted-foreground);\n line-height: 1.6;\n max-width: 300px;\n}"
},
{
"id": "footer_social_styles",
"type": "component",
"category": "social",
"className": "footer-social",
"description": "Footer social media links styling",
"css": ".footer-social {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.footer-social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 0.375rem;\n background-color: var(--muted-foreground);\n color: var(--background);\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n}\n\n.footer-social-link:hover {\n background-color: var(--primary);\n transform: translateY(-2px);\n}"
},
{
"id": "footer_bottom_styles",
"type": "component",
"category": "layout",
"className": "footer-bottom",
"description": "Footer bottom bar (copyright, legal links)",
"css": ".footer-bottom {\n padding-top: 2rem;\n border-top: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n justify-content: space-between;\n}\n\n@media (min-width: 768px) {\n .footer-bottom {\n flex-direction: row;\n }\n}\n\n.footer-copyright {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n text-align: center;\n}\n\n@media (min-width: 768px) {\n .footer-copyright {\n text-align: left;\n }\n}"
},
{
"id": "footer_legal_links_styles",
"type": "component",
"category": "navigation",
"className": "footer-legal-links",
"description": "Footer legal links (Privacy, Terms, etc.)",
"css": ".footer-legal-links {\n display: flex;\n gap: 1.5rem;\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.footer-legal-link {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n text-decoration: none;\n transition: color 0.2s ease-in-out;\n}\n\n.footer-legal-link:hover {\n color: var(--primary);\n}"
}
]