Skip to content

Commit

Permalink
Fix tablet responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@sheilagomes
sheilagomes committed Dec 6, 2023
1 parent 35058ed commit 6e1cf17
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 38 deletions.
112 changes: 87 additions & 25 deletions styles/internal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,21 @@
:root {
--bg-1: #FFFFFF;
--bg-2: #142032;
/*#FFE0EF; */
--bg-3: #E7E9EE;
/*#F71963;*/
--bg-4: #5E6E84;
/*#FFC4DD;*/
--bg-5: #F71963;
--bg-6: #F8F7FC;
--fc-1: #000000;
--ff-regular: "VTEXTrust Regular";
--ff-italic: "VTEXTrust Italic";
--ff-bold: "VTEXTrust Bold";
--col-regular: #000;
--fs-100: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
--fs-200: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
--fs-300: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
--fs-400: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
--fs-1: clamp(0.9375rem, 0.9081rem + 0.0766vw, 1rem);
--fs-2: clamp(1.125rem, 1.0662rem + 0.1531vw, 1.25rem);
--fs-3: clamp(1.35rem, 1.2501rem + 0.2603vw, 1.5625rem);
--fs-4: clamp(1.62rem, 1.4634rem + 0.4081vw, 1.9531rem);
--fs-5: clamp(1.9438rem, 1.7099rem + 0.6095vw, 2.4413rem);
--fs-6: clamp(2.3325rem, 1.9943rem + 0.8813vw, 3.0519rem);
}

* {
Expand All @@ -52,7 +52,6 @@ body {
}

.wrapper .sidebar {
/* background: var(--bg-3); */
position: fixed;
top: 0;
left: 0;
Expand All @@ -72,8 +71,8 @@ body {
.wrapper .sidebar ul li a {
display: block;
padding: 1rem 2.5rem;
color: black;
font-size: 1rem;
color: var(--fc-1);
font-size: var(--fs-1);
position: relative;
}

Expand All @@ -84,15 +83,14 @@ body {
}

.wrapper .section .top_navbar {
/* background: var(--bg-1); */
height: 3.75rem;
display: flex;
align-items: center;
padding: 0 1.875rem;
}

.wrapper .section .top_navbar .hamburger a {
font-size: 1.8rem;
font-size: var(--fs-4);
color: var(--bg-4);
}

Expand Down Expand Up @@ -120,7 +118,7 @@ body.active .wrapper .main-doc {

.menu {
text-align: center;
font-size: 1.3rem;
font-size: var(--fs-2);
}

.main-doc {
Expand Down Expand Up @@ -156,24 +154,23 @@ p {
}

.toggleMenu {
color: black;
color: var(--fc-1);
margin: 0.5rem;
margin-left: 1rem;
scale: 1.3;
}

header {
height: 30vh;
/* background-color: #E7E9EE; */
}

.header-text {
display: inline-block;
position: relative;
border-bottom: 5px solid var(--bg-5);
/* #e31c58; */
text-align: left;
font-size: 4rem;
font-size: var(--fs-6);
/* 4rem; */
margin-left: 20rem;
padding-top: 3rem;
}
Expand All @@ -182,41 +179,102 @@ header a {
display: none;
margin-left: 20rem;
margin-top: 1.5rem;
color: black;
font-size: 0.9rem;
border: 1px solid black;
color: var(--fc-1);
font-size: var(--fs-1);
/* 0.9rem; */
border: 1px solid var(--fc-1);
border-radius: 40px;
padding: 0.3rem;
}

header a:hover {
border: 1px solid var(--bg-5);
/* #e31c58; */
}

.header-subtext {
margin-left: 20rem;
padding-top: 2rem;
font-size: 1.3rem;
font-size: var(--fs-2);
width: 55%;
}

.material-symbols-outlined {
color: black;
color: var(--fc-1);
}

.internalLogo {
margin-top: -1rem;
}

/* Tablet and medium size screens */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
.wrapper .sidebar {
position: fixed;
top: 0;
left: 0;
width: 75ch;
height: 100%;
padding: 1rem 0;
transition: all 0.5s ease;
background-color: var(--bg-1);
}

.wrapper .section {
width: calc(100% - 73ch);
margin-left: 73ch;
transition: all 0.5s ease;
}

.wrapper .section .top_navbar .hamburger a {
font-size: var(--fs-3);
}

.wrapper .section .top_navbar .hamburger a:hover {
color: var(--bg-5);
}

.top_navbar {
margin-left: -1rem;
}

body.active .wrapper .sidebar {
left: -73ch;
}

.main-doc {
margin-left: 0;
transition: all 0.5s ease;
}

header {
height: 15vh;
}

.header-text {
display: inline-block;
position: relative;
border-bottom: 5px solid var(--bg-5);
text-align: left;
font-size: var(--fs-5);
margin-left: 1.5rem;
padding-top: 6rem;
}

.header-subtext {
margin-left: 1.5rem;
padding-top: 1rem;
font-size: var(--fs-2);
}
}

/* HD monitors*/
@media only screen and (min-width: 1280px) and (max-width: 1919px) {
.header-text {
display: inline-block;
position: relative;
border-bottom: 5px solid var(--bg-5);
/* #e31c58; */
text-align: left;
font-size: 3rem;
font-size: var(--fs-6);
margin-left: 18rem;
padding-top: 1.5rem;
}
Expand All @@ -243,3 +301,7 @@ header a:hover {
margin-left: 17ch;
}
}

/* Full HD monitors and above */
@media only screen and (min-width: 1920px) {
}
15 changes: 7 additions & 8 deletions styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,9 @@
--ff-italic: "VTEXTrust Italic";
--ff-bold: "VTEXTrust Bold";
--col-regular: #000;
--fs-100: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
--fs-200: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
--fs-300: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
--fs-400: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
--fs-1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
--fs-2: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
--fs-3: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
}

html {
Expand Down Expand Up @@ -86,23 +85,23 @@ p {
.lower>h6 {
padding: 0.7rem;
color: #e31c58;
font-size: var(--fs-300);
font-size: var(--fs-2);
}

h4 {
font-size: var(--fs-400);
font-size: var(--fs-3);
text-align: center;
margin-top: 4.5rem;
}

h5 {
font-size: var(--fs-300);
font-size: var(--fs-2);
text-align: center;
padding: 1rem;
}

h6 {
font-size: var(--fs-200);
font-size: var(--fs-1);
padding: 0.25rem;
}

Expand Down
22 changes: 17 additions & 5 deletions styles/style_guides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ header {

h1 {
display: inline-block;
font-size: 4rem;
font-size: var(--fs-6);
/* 4rem; */
padding-top: 3rem;
margin-left: 3rem;
position: relative;
Expand All @@ -42,7 +43,7 @@ h1 {
h6 {
padding-top: 2rem;
padding-left: 3rem;
font-size: 1.3rem;
font-size: var(--fs-2);
}

.menuOptions {
Expand All @@ -54,7 +55,7 @@ h6 {
}

.toggleMenu {
color: black;
color: var(--fc-1);
margin: 0.5rem;
margin-left: 1.5rem;
scale: 1.3;
Expand All @@ -65,17 +66,19 @@ h6 {
margin: 1;
}

/* HD monitors*/
@media only screen and (min-width: 1280px) and (max-width: 1919px) {
h1 {
font-size: 2.5rem;
font-size: var(--fs-5);
/* 2.5rem; */
padding-top: 1rem;
margin-left: 8rem;
}

h6 {
padding-top: 2rem;
margin-left: 5rem;
font-size: 1.3rem;
font-size: var(--fs-2);
}

.cards {
Expand All @@ -96,6 +99,7 @@ h6 {
}
}

/* Tablet and medium size screens */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
body .wrapper .sidebar {
left: -33ch;
Expand Down Expand Up @@ -123,4 +127,12 @@ h6 {
body.active .wrapper .main-doc {
margin-left: 33ch;
}

header {
height: 15vh;
}
}

/* Full HD monitors and above */
@media only screen and (min-width: 1920px) {
}

0 comments on commit 6e1cf17

Please sign in to comment.