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;
align-items: flex-start;
flex-direction: column;
width: 40vw;
height: 350px;
width: 35vw;
box-shadow:
0 1px 1px 0 hsl(193deg 100% 7.1% / 30%),
1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%),
@@ -2788,10 +2787,6 @@ button {
padding: 50px 30px 0;
border-top: 5px solid hsl(171deg 49% 39%);
@media (width < 1000px) {
height: 400px;
}
& h1 {
font-weight: 600;
font-size: clamp(24px, 2.5vw, 32px);
@@ -2810,8 +2805,9 @@ button {
flex-direction: column;
.feature-box {
width: 75vw !important;
height: calc(600px - 35vw);
width: 70vw;
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 {
text-decoration: underline;
color: hsl(0deg 0% 100%);