Merge branch '2x' of https://github.com/GeorgeLimaDev/VTEX-design int…

…o 2x
vtex · Sep 20, 2023 · a18f3ea · a18f3ea
2 parents a3b764c + 17a33e9
commit a18f3ea
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/content/internal.css b/content/internal.css
@@ -0,0 +1,122 @@
+@font-face {
+    font-family: "VTEXTrust Bold";
+    src: url(./fonts/VTEXTrust-Bold.otf);
+ }
+
+ @font-face {
+    font-family: "VTEXTrust Italic";
+    src: url(./fonts/VTEXTrust-Italic.otf);
+ }
+
+@font-face {
+   font-family: "VTEXTrust Regular";
+   src: url(./fonts/VTEXTrust-Regular.otf);
+}
+
+:root {
+    --bg-1: #F8F7FC;
+    --bg-2: #142032; /*#FFE0EF; */
+    --bg-3: #E7E9EE; /*#F71963;*/
+    --bg-4: #5E6E84; /*#FFC4DD;*/
+	--bg-5: #F71963;
+    --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);
+}
+
+* {
+	list-style: none;
+	text-decoration: none;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: var(--ff-regular), sans-serif;
+}
+
+body {
+	background: var(--bg-1);
+}
+
+.wrapper .sidebar {
+	background: var(--bg-3);
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 15%;
+	height: 100%;
+	padding: 1rem 0;
+	transition: all 0.5s ease;
+}
+
+.wrapper .sidebar .logo img {
+	display: block;
+	margin: 0 auto;
+	margin-bottom: 2rem;
+}
+
+.wrapper .sidebar ul li a {
+	display: block;
+	padding: 1rem 2.5rem;
+	color: var(--bg-4);
+	font-size: 1rem;
+	position: relative;
+}
+
+.wrapper .sidebar ul li a:hover,
+.wrapper .sidebar ul li a.active {
+	color: var(--bg-5);
+	font-family: var(--ff-bold);
+}
+
+.wrapper .section {
+	width: calc(100% - 14rem);
+	margin-left: 14rem;
+	transition: all 0.5s ease;
+}
+
+.wrapper .section .top_navbar {
+	background: var(--bg-3);
+	height: 3.75rem;
+	display: flex;
+	align-items: center;
+	padding: 0 1.875rem;
+}
+
+.wrapper .section .top_navbar .hamburger a {
+	font-size: 1.8rem;
+	color: var(--bg-4);
+}
+
+.wrapper .section .top_navbar .hamburger a:hover {
+	color: var(--bg-5);
+}
+
+body.active .wrapper .sidebar {
+	left: -14rem;
+}
+
+body.active .wrapper .section {
+	margin-left: 0;
+	width: 100%;
+}
+
+body.active .wrapper .main-doc {
+	margin-left: 0;
+	transition: all 0.5s ease;
+}
+
+.main-doc {
+	margin-left: 15%;
+	transition: all 0.5s ease;
+}
+
+iframe {
+	width: 100%;
+	height: 100vh;
+	border: none;
+}
diff --git a/content/internal.html b/content/internal.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VTEX Writing - Menu</title>
+    <link rel="stylesheet" href="internal.css">
+    <script src="internal.js" defer></script>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="section">
+            <div class="top_navbar">
+                <div class="hamburger">
+                    <a href="#">
+                        <i class="fas fa-bars"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="sidebar">
+            <div class="logo">
+                <img src="../assets/VTEX_Writing.svg" alt="VTEX Writing logo">
+            </div>
+            <ul>
+                <li>
+                    <a href="../index.html">
+                        <span class="item">Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" onclick="styleGuide()">
+                        <span class="item">Style Guides</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" onclick="adminReviewLog()">
+                        <span class="item">Admin Review Logs</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span class="item">Glossaries</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span class="item">Translation Memories</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="main-doc">
+            <main>
+                <iframe id="main-frame" src=""></iframe>
+            </main>
+        </div>
+	</div>
+</body>
+</html>
diff --git a/content/internal.js b/content/internal.js
@@ -0,0 +1,12 @@
+let hamburger = document.querySelector(".hamburger");
+	hamburger.addEventListener("click", function(){
+		document.querySelector("body").classList.toggle("active");
+	})
+
+function styleGuide() {
+    document.getElementById("main-frame").src = "./loc_style_guides/Localization Style Guide - PT/VTEXPortugueseStyleGuidePT.html";
+}
+
+function adminReviewLog() {
+    document.getElementById("main-frame").src = "./loc_admin_review_logs/Admin String Standardization - EN/VTEXAdminstringstandardizationinEnglish.html";
+}