feat: responsiveness
This commit is contained in:
@@ -51,62 +51,89 @@ import { Picture } from "astro:assets";
|
||||
grid-template-columns: var(--base-grid);
|
||||
max-width: var(--max-content-width);
|
||||
margin-inline: auto;
|
||||
padding-block: 8rem 5.5rem;
|
||||
padding-block: 5rem;
|
||||
padding-inline: var(--padding-x);
|
||||
|
||||
& h2 {
|
||||
grid-column: 1 / 6;
|
||||
@media screen and (min-width: 64rem) {
|
||||
padding-block: 8rem 5.5rem;
|
||||
}
|
||||
|
||||
font-size: 4.75rem;
|
||||
& h2 {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
font-size: var(--fs-xl);
|
||||
line-height: var(--leading-title);
|
||||
letter-spacing: var(--tracking-narrow);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64rem) {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
& div {
|
||||
grid-column: -1 / -6;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
font-size: 1.125rem;
|
||||
line-height: var(--leading-paragraph);
|
||||
|
||||
@media screen and (max-width: 63.9375rem) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: var(--fs-md);
|
||||
margin-top: 1.5rem;
|
||||
|
||||
@media screen and (max-width: 63.9375rem) {
|
||||
max-width: 52ch;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64rem) {
|
||||
grid-column: -7 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
place-items: center;
|
||||
margin-bottom: 8rem;
|
||||
min-height: 400px;
|
||||
max-height: 500px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* max-height: 400px; */
|
||||
|
||||
& picture {
|
||||
display: block;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 500px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
& .background {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
& p {
|
||||
grid-column: 2;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
max-width: 43ch;
|
||||
font-size: 2rem;
|
||||
font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
|
||||
line-height: var(--leading-paragraph);
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (max-width: 63.9375rem) {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -58,10 +58,10 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
|
||||
|
||||
.content {
|
||||
grid-column: 3 / 12;
|
||||
grid-row: 1;
|
||||
align-content: center;
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
grid-row: 1;
|
||||
grid-column: 6 / -1;
|
||||
}
|
||||
}
|
||||
@@ -89,9 +89,9 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
|
||||
width: max-content;
|
||||
margin-inline: auto;
|
||||
|
||||
margin-top: 15rem;
|
||||
margin-top: 8rem;
|
||||
|
||||
font-size: clamp(3rem, 3vw + 3rem, 6.25rem);
|
||||
font-size: clamp(2.5rem, 5vw + 1rem, 6.25rem);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -99,6 +99,10 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
|
||||
line-height: var(--leading-tightest);
|
||||
letter-spacing: var(--tracking-narrow);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64vw) {
|
||||
margin-top: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -48,59 +48,84 @@ function formatIndex(index: number) {
|
||||
grid-template-columns: var(--base-grid);
|
||||
max-width: var(--max-content-width);
|
||||
margin-inline: auto;
|
||||
padding-block: 8rem 5.5rem;
|
||||
padding-block: 4rem;
|
||||
padding-inline: var(--padding-x);
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
padding-block: 8rem 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / -1;
|
||||
font-size: 4.75rem;
|
||||
font-size: var(--fs-xl);
|
||||
line-height: var(--leading-title);
|
||||
letter-spacing: var(--tracking-narrow);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 5.5rem;
|
||||
margin-top: 3rem;
|
||||
list-style: none;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
> * {
|
||||
border-bottom: 0.25rem solid hsl(0 100 100 / 30%);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
margin-top: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: grid;
|
||||
grid-template-columns: var(--base-grid);
|
||||
padding-block: 4rem;
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
padding-block: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
@media screen and (max-width: 49.9375rem) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
grid-row: 1;
|
||||
grid-column: 5 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3rem;
|
||||
font-size: clamp(2.25rem, 2.5vw + 1rem, 3rem);
|
||||
line-height: var(--leading-title);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
|
||||
line-height: var(--leading-paragraph);
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: max-content;
|
||||
|
||||
grid-row: 1;
|
||||
grid-column: 1 / 4;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
font-size: clamp(10rem, 16vw, 15.625rem);
|
||||
font-weight: 600;
|
||||
line-height: var(--leading-tightest);
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user