tideshift/tideshift-website
1
0
Fork 0
Code Activity

feat: responsiveness

Browse Source
This commit is contained in:
Michael Rieger
2026-03-11 11:52:31 +01:00
parent 005830726e
commit cffcefa150
22 changed files with 528 additions and 1087 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/landing/ServicesSection.astro
+21 -9
View File
@@ -63,30 +63,41 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
}
.heading {
@media (min-width: 50rem) {
display: grid;
display: grid;
grid-column: 1 / -1;
@media screen and (max-width: 63.9375rem) {
row-gap: 1rem;
}
@media screen and (min-width: 64rem) {
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
& h2 {
grid-column: 1 / 6;
grid-column: 1 / -1;
height: max-content;
font-size: var(--fs-xl);
line-height: var(--leading-title);
letter-spacing: var(--tracking-narrow);
@media screen and (min-width: 64rem) {
grid-column: 1 / 7;
}
}
& p {
grid-column: -1 / -6;
justify-self: end;
grid-column: 1 / -1;
max-width: 46ch;
font-size: var(--fs-lg);
line-height: var(--leading-paragraph);
@media (min-width: 50rem) {
@media screen and (min-width: 64rem) {
grid-column: -7 / -1;
max-width: 32ch;
justify-self: end;
}
}
}
@@ -97,10 +108,11 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
grid-column: 1 / -1;
list-style: none;
margin-top: 7rem;
margin-top: 4rem;
@media (min-width: 50rem) {
@media (min-width: 75rem) {
grid-template-columns: repeat(3, 1fr);
margin-top: 7rem;
}
}
</style>