more responsive styles
This commit is contained in:
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user