Skip to content

Commit feb0daf

Browse files
josephaw1022josephaw1022
committed
get the html to look somewhat decent. not done but its good enough for now
1 parent e4e3ef8 commit feb0daf

File tree

2 files changed

+80
-33
lines changed

2 files changed

+80
-33
lines changed

‎_includes/homepage-dev-ui-band.html‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
<div class="grid-wrapper">
33
<div class="width-12-12">
44
<h2>Dev UI Features</h2>
5-
<p>Explore the powerful built-in features of the Quarkus Dev UI that enhance productivity and streamline development.</p>
5+
<p>Explore the powerful built-in features of the Quarkus Dev UI that enhance productivity and streamline
6+
development.</p>
67
</div>
78
</div>
89
<div class="grid-container">
910
<div class="contrib-block">
1011
<div class="image-container">
11-
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-light.png" alt="Configuration Management Light">
12-
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-dark.png" alt="Configuration Management Dark">
12+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-light.png"
13+
alt="Configuration Management Light">
14+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-dark.png"
15+
alt="Configuration Management Dark">
1316
</div>
1417
<div class="content">
1518
<h3>Configuration Management</h3>
@@ -18,8 +21,10 @@ <h3>Configuration Management</h3>
1821
</div>
1922
<div class="contrib-block">
2023
<div class="image-container">
21-
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-light.png" alt="Visualize Endpoints Light">
22-
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-dark.png" alt="Visualize Endpoints Dark">
24+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-light.png"
25+
alt="Visualize Endpoints Light">
26+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-dark.png"
27+
alt="Visualize Endpoints Dark">
2328
</div>
2429
<div class="content">
2530
<h3>Visualize Endpoints</h3>
@@ -28,8 +33,10 @@ <h3>Visualize Endpoints</h3>
2833
</div>
2934
<div class="contrib-block">
3035
<div class="image-container">
31-
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-light.png" alt="DB Schema Generation Light">
32-
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-dark.png" alt="DB Schema Generation Dark">
36+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-light.png"
37+
alt="DB Schema Generation Light">
38+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-dark.png"
39+
alt="DB Schema Generation Dark">
3340
</div>
3441
<div class="content">
3542
<h3>DB Schema Generation</h3>
@@ -38,8 +45,10 @@ <h3>DB Schema Generation</h3>
3845
</div>
3946
<div class="contrib-block">
4047
<div class="image-container">
41-
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-light.png" alt="Dependency Visualization Light">
42-
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-dark.png" alt="Dependency Visualization Dark">
48+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-light.png"
49+
alt="Dependency Visualization Light">
50+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-dark.png"
51+
alt="Dependency Visualization Dark">
4352
</div>
4453
<div class="content">
4554
<h3>Dependency Visualization</h3>
@@ -48,8 +57,10 @@ <h3>Dependency Visualization</h3>
4857
</div>
4958
<div class="contrib-block">
5059
<div class="image-container">
51-
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-light.png" alt="Continuous Testing Light">
52-
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-dark.png" alt="Continuous Testing Dark">
60+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-light.png"
61+
alt="Continuous Testing Light">
62+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-dark.png"
63+
alt="Continuous Testing Dark">
5364
</div>
5465
<div class="content">
5566
<h3>Continuous Testing</h3>
@@ -58,13 +69,20 @@ <h3>Continuous Testing</h3>
5869
</div>
5970
<div class="contrib-block">
6071
<div class="image-container">
61-
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-light.png" alt="Build Container Image Light">
62-
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-dark.png" alt="Build Container Image Dark">
72+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-light.png"
73+
alt="Build Container Image Light">
74+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-dark.png"
75+
alt="Build Container Image Dark">
6376
</div>
6477
<div class="content">
6578
<h3>Build Container Image</h3>
6679
<p>Create lightweight, production-ready container images directly from the Dev UI.</p>
6780
</div>
6881
</div>
82+
83+
6984
</div>
70-
</div>
85+
<div class="button-container">
86+
<button onclick="window.location.href='{{site.baseurl}}/dev-ui'">Go to Dev UI Page</button>
87+
</div>
88+
</div>

‎_sass/includes/homepage-dev-ui-band.scss‎

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,99 @@
11
.homepage-dev-ui-band {
2-
background-color: var(--blue-background-color);
32
color: var(--main-text-color);
43
padding: 4rem 2rem;
54

6-
h2 {
5+
h3 {
76
font-size: 2.5rem;
87
color: var(--heading-color);
98
margin-bottom: 1.5rem;
109
}
1110

1211
p {
1312
font-size: 1.2rem;
14-
color: var(--secondary-text-color);
13+
color: var(--main-text-color);
1514
margin-bottom: 3rem;
1615
}
1716

17+
18+
.button-container {
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
margin-top: 2rem;
23+
}
24+
1825
.grid-container {
1926
display: grid;
2027
grid-template-columns: repeat(3, 1fr);
2128
gap: 1.5rem;
2229
justify-content: center;
23-
align-items: stretch;
30+
align-items: center;
31+
margin: auto;
32+
place-items: center;
2433
}
2534

2635
.contrib-block {
27-
background: var(--tile-background-color);
36+
height: 100% !important;
37+
max-height: 350px;
38+
background: var(--card-background-color);
2839
border-radius: 10px;
2940
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
30-
overflow: hidden; /* Ensures the image does not overflow */
41+
overflow: hidden;
42+
text-align: center;
3143
display: flex;
3244
flex-direction: column;
3345
align-items: center;
34-
text-align: center;
46+
max-width: 320px;
47+
margin: 0;
48+
border: 1px solid var(--card-outline);
3549

3650
.image-container {
3751
width: 100%;
38-
height: 150px; /* Adjust height as needed */
39-
overflow: hidden; /* Hides any part of the image that overflows */
52+
height: 150px !important;
53+
overflow: hidden;
54+
border-bottom: 2px solid var(--link-color);
55+
flex: 1;
56+
flex-shrink: 0;
57+
4058
}
4159

4260
img {
4361
width: 100%;
4462
height: 100%;
45-
object-fit: cover; /* Ensures the image fills the container without distortion */
63+
object-fit: cover;
64+
display: block;
4665
}
4766

4867
.content {
4968
padding: 1.5rem;
5069
background: var(--tile-background-color);
51-
width: 100%;
70+
flex: 1;
71+
flex-grow: 1;
72+
justify-content: center;
73+
5274

5375
h3 {
5476
font-size: 1.4rem;
55-
color: var(--tile-heading-color);
77+
font-weight: bold;
78+
color: var(--tile-text-color);
5679
margin-bottom: 1rem;
80+
white-space: nowrap;
81+
overflow: hidden;
82+
font-size: clamp(1.2rem, 2vw, 1.4rem);
5783
}
5884

5985
p {
6086
font-size: 1rem;
61-
color: var(--tile-text-color);
87+
color: var(--main-text-color);
6288
line-height: 1.5;
6389
margin: 0;
90+
overflow: hidden;
91+
text-overflow: ellipsis;
92+
max-width: 100%;
6493
}
65-
}
6694

67-
&:hover {
68-
transform: translateY(-5px);
69-
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
70-
transition: all 0.3s ease-in-out;
7195
}
96+
7297
}
7398

7499
@media screen and (max-width: 1024px) {
@@ -78,6 +103,8 @@
78103
}
79104

80105
.contrib-block {
106+
max-width: 250px;
107+
81108
.image-container {
82109
height: 130px;
83110
}
@@ -102,6 +129,8 @@
102129
}
103130

104131
.contrib-block {
132+
max-width: 100%;
133+
105134
.image-container {
106135
height: 120px;
107136
}
@@ -119,4 +148,4 @@
119148
}
120149
}
121150
}
122-
}
151+
}

0 commit comments

Comments
 (0)