From 022ed42242a3f8f30d0bb2934159cdb37dd1839e Mon Sep 17 00:00:00 2001 From: sheilagomes Date: Fri, 1 Dec 2023 15:24:09 -0300 Subject: [PATCH] Fix gloss, tm and background css --- content/glossaries/glossaries.html | 8 +- .../translation_memory.html | 7 +- styles/content.css | 274 ++++++++++++------ styles/internal.css | 18 +- styles/style_guides.css | 7 +- 5 files changed, 207 insertions(+), 107 deletions(-) diff --git a/content/glossaries/glossaries.html b/content/glossaries/glossaries.html index c4be6ee..7fc6aee 100644 --- a/content/glossaries/glossaries.html +++ b/content/glossaries/glossaries.html @@ -7,10 +7,12 @@ Product Localization Glossary -
-

Product Localization Glossary

+
+

Product Localization Glossary

- +

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.

+

Check our Glossary spreadsheet here

+
diff --git a/content/translation_memory/translation_memory.html b/content/translation_memory/translation_memory.html index b81c16e..3af7739 100644 --- a/content/translation_memory/translation_memory.html +++ b/content/translation_memory/translation_memory.html @@ -7,10 +7,11 @@ Product Localization Translation Memory -
-

Product Localization Translation Memory

+
+

Product Localization Translation Memory

- +

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.

+

Check our Translation memory spreadsheet here

diff --git a/styles/content.css b/styles/content.css index e972cd8..cd47ab9 100644 --- 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%; -} \ No newline at end of file +} + +/* 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); + } +} diff --git a/styles/internal.css b/styles/internal.css index 528b474..40ce833 100644 --- a/styles/internal.css +++ b/styles/internal.css @@ -14,7 +14,7 @@ } :root { - --bg-1: #F8F7FC; + --bg-1: #FFFFFF; --bg-2: #142032; /*#FFE0EF; */ --bg-3: #E7E9EE; @@ -22,6 +22,7 @@ --bg-4: #5E6E84; /*#FFC4DD;*/ --bg-5: #F71963; + --bg-6: #F8F7FC; --ff-regular: "VTEXTrust Regular"; --ff-italic: "VTEXTrust Italic"; --ff-bold: "VTEXTrust Bold"; @@ -51,7 +52,7 @@ body { } .wrapper .sidebar { - background: var(--bg-3); + /* background: var(--bg-3); */ position: fixed; top: 0; left: 0; @@ -83,7 +84,7 @@ body { } .wrapper .section .top_navbar { - background: var(--bg-1); + /* background: var(--bg-1); */ height: 3.75rem; display: flex; align-items: center; @@ -163,13 +164,14 @@ p { header { height: 30vh; - background-color: #E7E9EE; + /* background-color: #E7E9EE; */ } .header-text { display: inline-block; position: relative; - border-bottom: 5px solid #e31c58; + border-bottom: 5px solid var(--bg-5); + /* #e31c58; */ text-align: left; font-size: 4rem; margin-left: 20rem; @@ -188,7 +190,8 @@ header a { } header a:hover { - border: 1px solid #e31c58; + border: 1px solid var(--bg-5); + /* #e31c58; */ } .header-subtext { @@ -210,7 +213,8 @@ header a:hover { .header-text { display: inline-block; position: relative; - border-bottom: 5px solid #e31c58; + border-bottom: 5px solid var(--bg-5); + /* #e31c58; */ text-align: left; font-size: 3rem; margin-left: 18rem; diff --git a/styles/style_guides.css b/styles/style_guides.css index 161fd1d..744517d 100644 --- a/styles/style_guides.css +++ b/styles/style_guides.css @@ -9,16 +9,17 @@ header { height: 25vh; - background-color: #E7E9EE; + background-color: var(--bg-1); } .cards { - background-color: #F8F7FC; + background-color: var(--bg-1); margin-top: 5rem; } .card { height: 350px; + background-color: var(--bg-6); } .card:hover>a>.upper { @@ -35,7 +36,7 @@ h1 { padding-top: 3rem; margin-left: 3rem; position: relative; - border-bottom: 5px solid #e31c58; + border-bottom: 5px solid var(--bg-5); } h6 {