@@ -6,16 +6,160 @@ permalink: /index.html
66---
77
88<style >
9- .container {
10- display : block ;
11- min-height : 100vh ;
12- background : var (--app-bg-primary );
13- color : var (--app-text-primary );
9+ .home-container {
10+ display : block ;
11+ min-height : 100vh ;
12+ background : var (--app-bg-primary );
13+ color : var (--app-text-primary );
14+ max-width : 1200px ;
15+ margin : 0 auto ;
16+ padding : 20px ;
17+ }
18+
19+ .hero {
20+ text-align : center ;
21+ padding : 40px 20px ;
22+ margin-bottom : 40px ;
23+ }
24+
25+ .hero .title {
26+ font-size : 2.5rem ;
27+ margin-bottom : 10px ;
28+ font-weight : 600 ;
29+ color : var (--app-text-primary );
30+ }
31+
32+ .hero p {
33+ font-size : 1.1rem ;
34+ color : var (--app-text-secondary );
35+ margin : 0 ;
36+ max-width : 600px ;
37+ margin : 0 auto ;
38+ line-height : 1.6 ;
39+ }
40+
41+ .tools-grid {
42+ display : grid ;
43+ grid-template-columns : repeat (auto-fit , minmax (300px , 1fr ));
44+ gap : 20px ;
45+ margin-bottom : 40px ;
46+ }
47+
48+ /* Tool card styles */
49+ .tool-card {
50+ display : block ;
51+ background : var (--app-bg-card );
52+ border-radius : 12px ;
53+ overflow : hidden ;
54+ box-shadow : 0 2px 8px var (--app-shadow );
55+ transition : all 0.3s ease ;
56+ height : 100% ;
57+ text-decoration : none ;
58+ color : inherit ;
59+ cursor : pointer ;
60+ }
61+
62+ .tool-card :hover {
63+ box-shadow : 0 4px 16px var (--app-shadow-hover );
64+ transform : translateY (-2px );
65+ }
66+
67+ .tool-card .card-image {
68+ width : 100% ;
69+ height : 200px ;
70+ object-fit : cover ;
71+ background : #f0f0f0 ;
72+ display : block ;
73+ }
74+
75+ .tool-card.wled .card-image {
76+ object-fit : contain ;
77+ }
78+
79+ .tool-card .card-content {
80+ padding : 20px ;
81+ display : flex ;
82+ flex-direction : column ;
83+ min-height : 180px ;
84+ }
85+
86+ .tool-card .card-header {
87+ margin-bottom : 12px ;
88+ }
89+
90+ .tool-card .card-title {
91+ font-size : 1.25rem ;
92+ font-weight : 600 ;
93+ color : var (--app-text-primary );
94+ margin : 0 0 8px 0 ;
95+ line-height : 1.3 ;
96+ }
97+
98+ .tool-card .card-category {
99+ display : inline-block ;
100+ background : var (--app-category-bg );
101+ color : var (--app-category-text );
102+ padding : 2px 8px ;
103+ border-radius : 12px ;
104+ font-size : 0.75rem ;
105+ font-weight : 500 ;
106+ margin-bottom : 8px ;
107+ }
108+
109+ .tool-card .card-description {
110+ color : var (--app-text-secondary );
111+ line-height : 1.5 ;
112+ margin : 0 ;
113+ flex : 1 ;
114+ }
115+
116+ @media (max-width : 768px ) {
117+ .hero .title {
118+ font-size : 2rem ;
119+ }
120+
121+ .tools-grid {
122+ grid-template-columns : 1fr ;
123+ gap : 16px ;
124+ }
125+
126+ .home-container {
127+ padding : 16px ;
14128 }
129+ }
130+
131+ @media (max-width : 480px ) {
132+ .tool-card .card-content {
133+ padding : 16px ;
134+ }
135+ }
15136 </style >
16137
17- <div class =" container" >
18- <home-page ></home-page >
19- </div >
138+ <div class =" home-container" >
139+ <div class =" hero" >
140+ <div class =" title" >Device Toolbox</div >
141+ <p >
142+ Flash firmware, configure devices, and manage your smart home hardware
143+ directly from your browser. No installation required.
144+ </p >
145+ </div >
20146
21- <script type =" module" src =" /src/pages/home-page.ts" ></script >
147+ <div class =" tools-grid" >
148+ {%- for tool in collections .tools -%}
149+ <a href =" {{ tool.url }}" class =" tool-card {{ tool.slug }}" {% if tool.url.startsWith( ' http' ) and not tool.url.includes( ' #' ) %}target =" _blank" rel =" noopener noreferrer" {% endif %} >
150+ <img src =" {{ tool.image }}" alt =" {{ tool.title }}" class =" card-image" />
151+
152+ <div class =" card-content" >
153+ <div class =" card-header" >
154+ {%- if tool .category -%}
155+ <div class =" card-category" >{{ tool .category }} </div >
156+ {%- endif -%}
157+ <h3 class =" card-title" >{{ tool .title }} </h3 >
158+ </div >
159+
160+ <p class =" card-description" >{{ tool .description }} </p >
161+ </div >
162+ </a >
163+ {%- endfor -%}
164+ </div >
165+ </div >
0 commit comments