Fix gloss, tm and background css

vtex · Dec 1, 2023 · 022ed42 · 022ed42
1 parent 5726758
commit 022ed42
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 107 deletions.
diff --git a/content/glossaries/glossaries.html b/content/glossaries/glossaries.html
@@ -7,10 +7,12 @@
   <title>Product Localization Glossary</title>
 </head>
 <body>
-    <div class="glo-wrapper">
-        <h1 class="spacing" id="title-color">Product Localization Glossary</h1>
+    <div class="glo-wrapper flow">
+        <h1>Product Localization Glossary</h1>
         <div class="spreadsheet">
-            <iframe class="responsive-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRRCBudlGtneiyMkP-y8muBaIYB73yKGGHYok7B_mkrjbTdlXZZFle-WFFv3DVl9g/pubhtml?gid=1978438735&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
+            <p class="high-res">A glossary is a list of terms and definitions that is used consistently by all stakeholders of a specific project or product, especially localization. By helping to eliminate ambiguity glossaries optimize communication and user experience.</p>
+            <p class="bold-text spacing center-text">Check our Glossary spreadsheet <a class="text-link" href="https://docs.google.com/spreadsheets/d/1vSSg5CrimqSxvWjBoXLE5P7ATJCdRnPT/edit?usp=sharing&ouid=100655064255803046570&rtpof=true&sd=true">here</a></p>
+
         </div>
     </div>
 </body>

diff --git a/content/translation_memory/translation_memory.html b/content/translation_memory/translation_memory.html
@@ -7,10 +7,11 @@
   <title>Product Localization Translation Memory</title>
 </head>
 <body>
-    <div class="tm-wrapper">
-        <h1 class="spacing" id="title-color">Product Localization Translation Memory</h1>
+    <div class="tm-wrapper flow">
+        <h1>Product Localization Translation Memory</h1>
         <div class="spreadsheet">
-            <iframe class="responsive-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSXwqZ5xAvs-GYowux71cZUOrGOFHgikLmbRTX4_G0kG0cJ1fP_T44o5IbpPCv4pg/pubhtml?gid=998602615&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
+            <p class="high-res">A translation memory (TM) is a repository or database that contains translated source and target language pairs. It reduces translation time and cost by reusing translated content from the repository in computer-aided translation (CAT) tools where human translators can see full or partial matches for sentences in the translation editor.</p>
+            <p class="bold-text spacing center-text">Check our Translation memory spreadsheet <a class="text-link" href="https://docs.google.com/spreadsheets/d/17psfw_6SXQEKBZDvSDxMKLpGAoce8ztB/edit?usp=sharing&ouid=100655064255803046570&rtpof=true&sd=true">here</a></p>
         </div>
     </div>
 </body>

diff --git a/styles/content.css b/styles/content.css
@@ -5,7 +5,8 @@
 }
 
 ::-webkit-scrollbar-track {
-    background:  #F8F7FC;
+    background:  #FFFFFF;
+    /* #F8F7FC; */
     border-radius: 100vw;
     margin-block: 0.5em;
 }
@@ -17,9 +18,10 @@
 }
 
 /* Firefox scrolling */
-@supports (scrollbar-color: #F71963 #F8F7FC) {
+@supports (scrollbar-color: #F71963 #FFFFFF) {
+    /* #F8F7FC */
     * {
-        scrollbar-color: #F71963 #F8F7FC;
+        scrollbar-color: #F71963 #FFFFFF;
     }
 }
 
@@ -29,7 +31,8 @@
 }
 
 :root {
-    --bg-1: #F8F7FC;
+    --bg-1: #FFFFFF
+    /* #F8F7FC; */
     --bg-2: #1155CC;
     --bg-3: #F71963;
     --bg-4: #5E6E84;
@@ -63,17 +66,9 @@ body {
     line-height: 1.6;
 }
 
-.wrapper {
-    display: grid;
-    grid-template-columns: auto auto auto auto auto auto;
-    grid-gap: 0.2rem;
-}
-
 .spreadsheet {
-    position: relative;
-    overflow: hidden;
-    width: calc(100vw - 2rem);
-    height:calc(100vh - 8rem);
+    padding: 3rem;
+    line-height: 1.9;
 }
 
 h1, h2, h3, h4, h5 {
@@ -103,22 +98,8 @@ h5 {
     font-size: var(--fs-3);
 }
 
-#title-color {
-    color: var(--bg-6);
-}
-
 .spacing {
-    margin: 1rem 0 2rem;
-}
-.responsive-iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
+    padding-top: 3rem;
 }
 
 .flow > * + * {
@@ -127,13 +108,6 @@ h5 {
 
 .doc-content {
     padding: 0 1rem 3rem;
-    grid-area: 1 / 1 / span 5 / span 1;
-    margin: 60px 20% 0 0;
-    overflow-y: scroll;
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: calc(100% - 60px);
 }
 
 .text-link {
@@ -182,58 +156,10 @@ table {
     border: none;
 }
 
-.aside-content {
-    grid-area: 1 / 2 / span 1 / span 1;
-    padding: 0.5rem 1rem 3rem;
-    font-size: var(--fs-1);
-    color: var(--bg-5);
-    line-height: 1.7;
-    position: fixed;
-    height: calc(100% - 60px);
-    left: 80%;
-    right: 0;
-    overflow-y: scroll;
-    top: 60px;
-}
-
-.content {
-    font-size: var(--fs-1);
-    font-weight: bold;
-    padding: 0 0 0.5rem 1rem;
-}
-
-.aside-list {
-    padding-left: 1rem;
-    border-left: 1px solid var(--bg-5);
-    list-style: none;
-    width: 20ch;
-    text-align: left;
-}
-
-.aside-item {
-    color: var(--bg-5);
-}
-
-.aside-list a:hover {
-	color: var(--bg-3);
-}
-
-.index-item {
-    padding-bottom: 0.5rem;
-}
-
-.aside-subitem {
-    border-left: 0px;
-}
-
 .underline-text {
     text-decoration: underline;
 }
 
-.aside-list > li {
-    margin-left: 0;
-}
-
 nav > p {
     text-indent: 0;
 }
@@ -248,12 +174,6 @@ nav > p {
     margin-top: 0;
 }
 
-.aside-item-1, 
-.aside-item-2, 
-.aside-item-3 {
-    color: var(--bg-5);
-}
-
 .center-text {
     text-align: center;
 }
@@ -276,4 +196,176 @@ nav > p {
 
 .table-50 {
     width: 50%;
-}
+}
+
+/* Tablet and medium size screens */
+@media only screen and (min-width: 615px) and (max-width: 1279px) {
+
+
+}
+
+/* HD monitors*/
+@media only screen and (min-width: 1280px) and (max-width: 1919px) {
+
+    body {
+        height: 100vh;
+    }
+
+    .wrapper {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto;
+        grid-gap: 0.2rem;
+    }
+
+    .doc-content {
+        padding: 0 1rem 3rem;
+        grid-area: 1 / 1 / span 5 / span 1;
+        margin: 60px 20% 0 0;
+        overflow-y: scroll;
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: calc(100% - 60px);
+    }
+
+    .aside-content {
+        grid-area: 1 / 2 / span 1 / span 1;
+        padding: 0.5rem 1rem 3rem;
+        font-size: var(--fs-1);
+        color: var(--bg-5);
+        line-height: 1.7;
+        position: fixed;
+        height: calc(100% - 60px);
+        left: 80%;
+        right: 0;
+        overflow-y: scroll;
+        top: 60px;
+    }
+
+    .content {
+        font-size: var(--fs-1);
+        font-weight: bold;
+        padding: 0 0 0.5rem 1rem;
+    }
+
+    .aside-list {
+        padding-left: 1rem;
+        border-left: 1px solid var(--bg-5);
+        list-style: none;
+        width: 20ch;
+        text-align: left;
+    }
+
+    .aside-item {
+        color: var(--bg-5);
+    }
+
+    .aside-list a:hover {
+        color: var(--bg-3);
+    }
+
+    .index-item {
+        padding-bottom: 0.5rem;
+    }
+
+    .aside-subitem {
+        border-left: 0px;
+    }
+
+    .aside-list > li {
+        margin-left: 0;
+    }
+
+    .aside-item-1, 
+    .aside-item-2, 
+    .aside-item-3 {
+        color: var(--bg-5);
+    }
+}
+
+/* Full HD monitors and above */
+@media only screen and (min-width: 1920px) {
+
+    body {
+        height: 100vh;
+    }
+
+    .wrapper {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto;
+        grid-gap: 0.2rem;
+    }
+
+    .doc-content {
+        padding: 0 1rem 3rem;
+        grid-area: 1 / 1 / span 5 / span 1;
+        margin: 60px 20% 0 0;
+        overflow-y: scroll;
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: calc(100% - 60px);
+    }
+
+    p {
+        font-size: var(--fs-4);
+    }
+
+    .high-res {
+        text-align: center;    
+    }
+
+    .aside-content {
+        grid-area: 1 / 2 / span 1 / span 1;
+        padding: 0.5rem 1rem 3rem;
+        font-size: var(--fs-1);
+        color: var(--bg-5);
+        line-height: 1.7;
+        position: fixed;
+        height: calc(100% - 60px);
+        left: 80%;
+        right: 0;
+        overflow-y: scroll;
+        top: 60px;
+    }
+
+    .content {
+        font-size: var(--fs-1);
+        font-weight: bold;
+        padding: 0 0 0.5rem 1rem;
+    }
+
+    .aside-list {
+        padding-left: 1rem;
+        border-left: 1px solid var(--bg-5);
+        list-style: none;
+        width: 20ch;
+        text-align: left;
+    }
+
+    .aside-item {
+        color: var(--bg-5);
+    }
+
+    .aside-list a:hover {
+        color: var(--bg-3);
+    }
+
+    .index-item {
+        padding-bottom: 0.5rem;
+    }
+
+    .aside-subitem {
+        border-left: 0px;
+    }
+
+    .aside-list > li {
+        margin-left: 0;
+    }
+
+    .aside-item-1, 
+    .aside-item-2, 
+    .aside-item-3 {
+        color: var(--bg-5);
+    }
+}