more responsive styles

This commit is contained in:
Zoe
2024-11-14 02:19:31 -06:00
parent fc2d43e64a
commit d9785498aa
3 changed files with 15 additions and 19 deletions

View File

@@ -60,11 +60,11 @@
}
h1 {
font-size: 64px;
font-size: clamp(48px,10vw,64px);
}
h2 {
font-size: 36px;
font-size: clamp(30px,6vw,36px);
}
.font-semibold {
@@ -156,20 +156,8 @@
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.xl\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[repeat\(auto-fill\,_minmax\(min\(330px\,_100\%\)\,_1fr\)\)\] {
grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.gap-2 {
@@ -216,6 +204,14 @@
width: fit-content;
}
.w-\[clamp\(48px\,10vw\,60px\)\] {
width: clamp(48px,10vw,60px);
}
.aspect-square {
aspect-ratio: 1/1;
}
@media (min-width: 640px) {
.sm\:w-8\/10 {
width: 80%;