mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-05-06 04:49:39 +05:00
feat: add responsiveness
This commit is contained in:
parent
0b09f1b50f
commit
78efd2500a
3 changed files with 86 additions and 8 deletions
|
@ -1250,6 +1250,22 @@ input:checked + .toggle-bg {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-\[25\%\] {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.w-\[50\%\] {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.w-\[100\%\] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[1440px\] {
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
@ -1336,6 +1352,10 @@ input:checked + .toggle-bg {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
@ -1500,6 +1520,16 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(227 160 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
@ -1550,6 +1580,16 @@ input:checked + .toggle-bg {
|
|||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
@ -1902,6 +1942,44 @@ input:checked + .toggle-bg {
|
|||
--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.md\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.md\:justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.lg\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.lg\:justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.xl\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
|
||||
--tw-rotate: 180deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue