feat(15): styling of mobile step 1

This commit is contained in:
efim
2023-07-09 18:22:14 +00:00
parent 8b62506f00
commit 7b2060c5d0
2 changed files with 113 additions and 11 deletions

View File

@@ -669,6 +669,16 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-magnolia {
--tw-bg-opacity: 1;
background-color: hsl(217 100% 97% / var(--tw-bg-opacity));
}
.bg-alabaster {
--tw-bg-opacity: 1;
background-color: hsl(231 100% 99% / var(--tw-bg-opacity));
}
.bg-sidebar-mobile {
background-image: url("images/bg-sidebar-mobile.svg");
}
@@ -677,6 +687,10 @@ video {
background-repeat: no-repeat;
}
.p-1 {
padding: 0.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
@@ -692,6 +706,34 @@ video {
padding-bottom: 2rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@@ -702,10 +744,19 @@ video {
line-height: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
@@ -715,6 +766,26 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-cool-gray {
--tw-text-opacity: 1;
color: hsl(231 11% 63% / var(--tw-text-opacity));
}
.text-marine-blue {
--tw-text-opacity: 1;
color: hsl(213 96% 18% / var(--tw-text-opacity));
}
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-xl {
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
html {
font-size: 16px;
}
@@ -763,6 +834,16 @@ html {
/* } */
.placeholder\:text-cool-gray::-moz-placeholder {
--tw-text-opacity: 1;
color: hsl(231 11% 63% / var(--tw-text-opacity));
}
.placeholder\:text-cool-gray::placeholder {
--tw-text-opacity: 1;
color: hsl(231 11% 63% / var(--tw-text-opacity));
}
@media (min-width: 768px) {
.md\:row-span-2 {
grid-row: span 2 / span 2;