feat: added responsive to all current pages, making them work in tablet and mobile devices. Also, implemented dark theme and persistance of theme in LocalStorage.
This commit is contained in:
@@ -29,11 +29,19 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--responsive-breakpoint-mobile-min: 320px;
|
||||
--responsive-breakpoint-mobile-max: 767px;
|
||||
--responsive-breakpoint-tablet-min: 768px;
|
||||
--responsive-breakpoint-tablet-max: 1023px;
|
||||
--responsive-breakpoint-desktop-min: 1024px;
|
||||
--responsive-breakpoint-desktop-max: 1920px;
|
||||
|
||||
/* Primitive values */
|
||||
--bg-svg-color: #ffffff;
|
||||
|
||||
/* Colors */
|
||||
--dark-gray: #252525;
|
||||
--darker-gray: #1b1b1b;
|
||||
--light-gray: #444444;
|
||||
--base-white: #ffffff;
|
||||
--base-black: #000000;
|
||||
@@ -240,11 +248,48 @@
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* Dark theme */
|
||||
--main-bg-color: var(--dark-gray);
|
||||
--main-text-color: var(--base-white);
|
||||
--main-boxshadow: 0px 4px 8px rgba(68, 68, 68, 0.1);
|
||||
--secundary-text-color: var(--base-white);
|
||||
--card-bg-color: var(--main-mistyRose-500);
|
||||
--naliia-n-bg-color: var(--main-pink-500);
|
||||
--main-icon-color: var(--base-white);
|
||||
--navbar-border-color: rgba(255, 255, 255, 0.2);
|
||||
--navbar-n-naliia-start: var(--base-white);
|
||||
--navbar-n-naliia-end: var(--base-white);
|
||||
--main-border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
--primarybutton-bgcolor: var(--main-pink-500);
|
||||
--primarybutton-txtcolor: var(--base-white);
|
||||
--pricingcard-bgcolor: var(--darker-gray);
|
||||
--pricingcard-secundarybgcolor: var(--light-gray);
|
||||
--pricingcard-section-bgcolor: var(--main-pink-500);
|
||||
--pricingcard-sec-car-bgcolor: var(--light-gray);
|
||||
--pricingcard-plantype-bgcolor: var(--main-pink-500);
|
||||
--pricingcard-plantype-txtcolor: var(--base-white);
|
||||
--pricingcard-value-txtcolor: var(--base-white);
|
||||
--pricingcard-features-subtitlecolor: var(--main-pink-500);
|
||||
--pricingcard-primarytextcolor: var(--base-white);
|
||||
--detailstable-header-primarybgcolor: var(--light-gray);
|
||||
--detailstable-header-txtcolor: var(--base-white);
|
||||
--detailstable-primarytxtcolor: var(--base-white);
|
||||
--detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
@@ -261,7 +306,7 @@ p {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-base);
|
||||
line-height: var(--line-height-mobile-base);
|
||||
padding: 0;
|
||||
@@ -276,7 +321,7 @@ h1 {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-h1);
|
||||
line-height: var(--line-height-mobile-h1);
|
||||
padding: 0;
|
||||
@@ -291,7 +336,7 @@ h2 {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-h2);
|
||||
line-height: var(--line-height-mobile-h2);
|
||||
padding: 0;
|
||||
@@ -306,7 +351,7 @@ h3 {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-h3);
|
||||
line-height: var(--line-height-mobile-h3);
|
||||
padding: 0;
|
||||
@@ -321,7 +366,7 @@ h4 {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-h4);
|
||||
line-height: var(--line-height-mobile-h4);
|
||||
padding: 0;
|
||||
@@ -336,7 +381,7 @@ h5 {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-h5);
|
||||
line-height: var(--line-height-mobile-h5);
|
||||
padding: 0;
|
||||
@@ -351,7 +396,7 @@ h6 {
|
||||
margin: 0;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-h6);
|
||||
line-height: var(--line-height-mobile-h6);
|
||||
padding: 0;
|
||||
@@ -367,7 +412,7 @@ summary {
|
||||
font-size: var(--font-desktop-base);
|
||||
line-height: var(--line-height-desktop-base);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--font-mobile-base);
|
||||
line-height: var(--line-height-mobile-base);
|
||||
}
|
||||
@@ -424,6 +469,21 @@ main {
|
||||
scale: 1.1;
|
||||
transition: scale 0.4s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
& .whatsapp-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
& .payment-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp-floatingbutton {
|
||||
@@ -460,6 +520,17 @@ main {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
& .whatsapp-floatingbutton-text {
|
||||
font-size: var(--font-mobile-sm);
|
||||
padding: var(--padding-sm-8px) var(--padding-md-16px);
|
||||
}
|
||||
|
||||
&:hover .whatsapp-floatingbutton-text {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-floatingbutton {
|
||||
@@ -496,4 +567,15 @@ main {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
& .payment-floatingbutton-text {
|
||||
font-size: var(--font-mobile-sm);
|
||||
padding: var(--padding-sm-8px) var(--padding-md-16px);
|
||||
}
|
||||
|
||||
&:hover .payment-floatingbutton-text {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user