Fix PT loc guide typography and spacing

vtex · Nov 1, 2023 · 65c79db · 65c79db
1 parent 7c4d07d
commit 65c79db
Show file tree

Hide file tree

Showing 2 changed files with 247 additions and 90 deletions.
diff --git a/content/loc_style_guides/Localization Style Guide - PT/LSG_PT_style.css b/content/loc_style_guides/Localization Style Guide - PT/LSG_PT_style.css
@@ -35,6 +35,13 @@
     --bg-4: #5E6E84;
     --bg-5: #A1AAB7;
     --ff-regular: "VTEXTrust Regular";
+    --fs-1: clamp(0.9375rem, 0.925rem + 0.0625vw, 1rem);
+    --fs-2: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
+    --fs-3: clamp(1.35rem, 1.3075rem + 0.2125vw, 1.5625rem);
+    --fs-4: clamp(1.62rem, 1.5534rem + 0.3331vw, 1.9531rem);
+    --fs-5: clamp(1.9438rem, 1.8443rem + 0.4975vw, 2.4413rem);
+    --fs-6: clamp(2.3325rem, 2.1886rem + 0.7194vw, 3.0519rem);
+    --fs-7: clamp(2.7994rem, 2.5963rem + 1.0156vw, 3.815rem);
 }
 
 * {
@@ -48,6 +55,7 @@
 
 body {
     background: var(--bg-1);
+    font-size: var(--fs-2);
     padding: 2rem;
     text-align: justify;
     line-height: 1.6;
@@ -59,6 +67,10 @@ body {
     grid-gap: 0.2rem;
 }
 
+.flow > * + * {
+    margin-top: 1.5em;
+}
+
 .doc-content {
     padding: 0 1rem 3rem;
     grid-area: 1 / 1 / span 5 / span 1;
@@ -73,25 +85,37 @@ body {
 .update-info {
     color: var(--bg-4);
     text-align: right;
-    font-size: 0.8rem;
+    font-size: var(--fs-1);
 }
 
-h1 {
-    color: var(--bg-3);
-    font-size: 2.4rem;
-    text-align: center;
-    padding: 1rem 0 0.5rem;
-    page-break-after: avoid;
+.example {
+    margin-top: 0;
 }
 
-h2, h3, h4 {
+h1, h2, h3, h4 {
     color: var(--bg-3);
+    line-height: 1.3;
     page-break-after: avoid;
-    padding: 1rem 0 0.5rem;
+}
+
+h1 {
+    font-size: var(--fs-7);
+    text-align: center;
+}
+
+h2 {
+    font-size: var(--fs-6);
+}
+
+h3 {
+    font-size: var(--fs-5);
+}
+
+h4 {
+    font-size: var(--fs-4);
 }
 
 p {
-    text-indent: 3rem;
     text-align: justify;
 }
 
@@ -114,14 +138,36 @@ p {
 
 li {
     margin-left:3rem;    
-    font-size: 0.9rem;
 }
 
+.no-bullet {
+    list-style: none;
+}
+
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin: 0.5rem 0 1rem;
+}
+
+.table-intro {
+    padding-bottom: 1rem;
+}
+
+.table-internal {
+    padding: 0.25rem 0.8rem;
+    border: 1px solid var(--bg-4);
+    font-size: var(--fs-1);
+}
+
+.clear-table {
+    border: none;
+}
 
 .aside-content {
     grid-area: 1 / 2 / span 1 / span 1;
     padding: 0.5rem 1rem 3rem;
-    font-size: 0.8rem;
+    font-size: var(--fs-1);
     color: var(--bg-5);
     line-height: 1.7;
     position: fixed;
@@ -133,7 +179,7 @@ li {
 }
 
 .content {
-    font-size: 0.9rem;
+    font-size: var(--fs-1);
     font-weight: bold;
     padding: 0 0 0.5rem 1rem;
 }
@@ -150,10 +196,6 @@ li {
     margin-left: 0;
 }
 
-nav > p {
-    text-indent: 0;
-}
-
 .aside-item-1, 
 .aside-item-2, 
 .aside-item-3 {