From 886f254d0550427d301a163c159363a2ee2e1f44 Mon Sep 17 00:00:00 2001
From: bogdankol <68349689+bogdankol@users.noreply.github.com>
Date: Thu, 25 Apr 2024 17:51:52 +0300
Subject: added staging fix

---
 sass/front-page/navigation.sass |  6 +-----
 sass/header.sass                |  6 ++++++
 sass/main.sass                  |  1 +
 sass/staging.sass               | 42 +++++++++++++++++++++++++++++++++++++++++
 site/js/staging-detection.js    |  8 ++++++++
 templates/main.html             | 13 ++++++-------
 templates/staging-warning.html  | 12 +++++++-----
 7 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 sass/staging.sass
 create mode 100644 site/js/staging-detection.js

diff --git a/sass/front-page/navigation.sass b/sass/front-page/navigation.sass
index 5c0c545..4b80209 100644
--- a/sass/front-page/navigation.sass
+++ b/sass/front-page/navigation.sass
@@ -1,12 +1,8 @@
 .navigation 
   background: transparent
-  position: fixed
-  top: 0
-  right: 0
-  left: 0
-  z-index: 2
   display: flex 
   justify-content: center
+  width: 100%
   transition: background-color 250ms linear, box-shadow 250ms linear
 
   &.background__white
diff --git a/sass/header.sass b/sass/header.sass
index b21c375..3967f7e 100644
--- a/sass/header.sass
+++ b/sass/header.sass
@@ -5,6 +5,12 @@ header
   top: 0
   left: 0
   z-index: 11
+  width: 100%
+  right: 0
+  z-index: 11
+  display: flex 
+  align-items: center
+  flex-direction: column
 
   .logo
     display: flex
diff --git a/sass/main.sass b/sass/main.sass
index 5767658..ef0045f 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -17,6 +17,7 @@
 @import ./contributor-subs-page/main
 @import lists
 @import footnotes
+@import staging
 
 body
   font-family: $r
diff --git a/sass/staging.sass b/sass/staging.sass
new file mode 100644
index 0000000..f15790d
--- /dev/null
+++ b/sass/staging.sass
@@ -0,0 +1,42 @@
+@import settings
+
+.staging
+  width: 100%
+  display: flex
+  justify-content: center
+  background-color: $white
+
+  .containerCustom
+    text-align: center
+    border: 2px solid $red
+    padding: 10px 0
+    flex-direction: column
+
+    h2
+      font-size: 16px
+      letter-spacing: $em
+      color: $black
+      line-height: 1.4
+
+    p
+      font-size: 14px
+      letter-spacing: $em
+      color: $grey-dark
+      line-height: 1.2
+
+    a
+      padding-right: 5px
+
+.staging-fix
+  +resolution(992)
+    padding-top: 220px !important
+  +resolution(576, 991)
+    padding-top: 240px !important
+  +resolution(476, 575)
+    padding-top: 240px !important
+  +resolution(376, 475)
+    padding-top: 260px !important
+  +resolution(0, 375)
+    padding-top: 290px !important
+
+
diff --git a/site/js/staging-detection.js b/site/js/staging-detection.js
new file mode 100644
index 0000000..06a7168
--- /dev/null
+++ b/site/js/staging-detection.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function () {
+	const staging = document.querySelector('.staging')
+	const sectionBanner = document.querySelector('.banner')
+
+	if (!staging) return
+
+  sectionBanner.classList.add('staging-fix')
+})
diff --git a/templates/main.html b/templates/main.html
index 80fd5a4..207914f 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -116,9 +116,7 @@
 			</div>
 		</header>
 		<main>
-			<div
-				id="content"
-			>
+			<div id="content">
 				<!-- content is automatically inserted here -->
 			</div>
 		</main>
@@ -212,7 +210,7 @@
 						<p>© 2024 vyos.io All rights reserved.</p>
 
 						<div class="social-logos">
-              <!-- twitter icon -->
+							<!-- twitter icon -->
 							<a
 								href="https://twitter.com/vyos_dev"
 								target="_blank"
@@ -231,7 +229,7 @@
 								</svg>
 							</a>
 
-              <!-- linkedin icon -->
+							<!-- linkedin icon -->
 							<a
 								href="https://www.linkedin.com/company/vyos/"
 								target="_blank"
@@ -250,7 +248,7 @@
 								</svg>
 							</a>
 
-              <!-- facebook icon -->
+							<!-- facebook icon -->
 							<a
 								href="https://www.facebook.com/vyosofficial/"
 								target="_blank"
@@ -269,7 +267,7 @@
 								</svg>
 							</a>
 
-              <!-- reddit icon -->
+							<!-- reddit icon -->
 							<a
 								href="https://www.reddit.com/r/vyos/"
 								target="_blank"
@@ -352,6 +350,7 @@
 		<script src="/js/rive-animations.js"></script>
 		<script src="/js/scroll-detector-for-header.js"></script>
 		<script src="/js/form-insertions.js"></script>
+		<script src="/js/staging-detection.js"></script>
 		<script
 			charset="utf-8"
 			type="text/javascript"
diff --git a/templates/staging-warning.html b/templates/staging-warning.html
index f029102..e99e770 100644
--- a/templates/staging-warning.html
+++ b/templates/staging-warning.html
@@ -1,6 +1,8 @@
-<div style="text-align:center; border: 2px solid red; margin: 10px; padding: 20px;">
-  <h1>WARNING! ACHTUNG! ATENCIÓN! УВАГА!</h1>
-  <p>This is a <strong>preview version</strong> of the VyOS community website. It may differ from the production version in the most unexpected ways:
-     contain links to untested VyOS images, contain misleading information, or simply be horribly broken.</p>
-  <p>Unless you are looking for a preview website version, please leave this page and go to the production version at <a href="https://vyos.net">https://vyos.net</a>!</p>
+<div class="staging">
+  <div class="containerCustom">
+    <h2>WARNING! ACHTUNG! ATENCIÓN! УВАГА!</h2>
+    <p>This is a <span>preview version</span> of the VyOS community website. It may differ from the production version in the most unexpected ways:</p> 
+    <p>contain links to untested VyOS images, contain misleading information, or simply be horribly broken.</p>
+    <p>Unless you are looking for a preview website version, please leave this page and go to the production version at <a href="https://vyos.net">https://vyos.net</a>!</p>
+  </div>
 </div>
-- 
cgit v1.2.3