self-hosting: Properly fix content in feature box at all widths.

Also moves height properties outside the nested styles for easy
overriding by other pages.
This commit is contained in:
Aman Agrawal
2025-05-15 11:35:43 +05:30
committed by Tim Abbott
parent 18f0b73fa9
commit b11047789a

View File

@@ -2775,8 +2775,7 @@ button {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
width: 40vw; width: 35vw;
height: 350px;
box-shadow: box-shadow:
0 1px 1px 0 hsl(193deg 100% 7.1% / 30%), 0 1px 1px 0 hsl(193deg 100% 7.1% / 30%),
1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%), 1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%),
@@ -2788,10 +2787,6 @@ button {
padding: 50px 30px 0; padding: 50px 30px 0;
border-top: 5px solid hsl(171deg 49% 39%); border-top: 5px solid hsl(171deg 49% 39%);
@media (width < 1000px) {
height: 400px;
}
& h1 { & h1 {
font-weight: 600; font-weight: 600;
font-size: clamp(24px, 2.5vw, 32px); font-size: clamp(24px, 2.5vw, 32px);
@@ -2810,8 +2805,9 @@ button {
flex-direction: column; flex-direction: column;
.feature-box { .feature-box {
width: 75vw !important; width: 70vw;
height: calc(600px - 35vw); height: auto;
padding-bottom: 20px;
} }
} }
} }
@@ -2851,6 +2847,20 @@ button {
} }
} }
.self-hosting-page .feature-box {
/* Defined a fixed height since we all boxes to have same height. */
height: 350px;
@media (width < 1200px) {
height: 400px;
}
@media (width < 900px) {
/* Based on height required to fit all content in the box at 768px. */
height: 480px;
}
}
.apps .apps-page-link { .apps .apps-page-link {
text-decoration: underline; text-decoration: underline;
color: hsl(0deg 0% 100%); color: hsl(0deg 0% 100%);