reposition outdated notice

bishabosha · bishabosha · commit de0865b0e9b2 · 2022-06-22T12:06:01.000+02:00
diff --git a/_includes/headertop.html b/_includes/headertop.html
@@ -1,8 +1,15 @@
 <!DOCTYPE html>
-{% if page.scala3 %}
-<html class="scala3">
+{% if page.scala3 or page.new-version %}
+  {% assign classes='' %}
+  {% if page.scala3 %}
+    {% assign classes= classes | append: ' scala3' %}
+  {% endif %}
+  {% if page.new-version %}
+    {% assign classes= classes | append: ' outdated-page' %}
+  {% endif %}
+  <html class="{{classes}}">
 {% else %}
-<html>
+  <html>
 {% endif %}
   <head>
     <title>
diff --git a/_layouts/inner-page-parent-dropdown.html b/_layouts/inner-page-parent-dropdown.html
@@ -1,6 +1,5 @@
 {% include headertop.html %}
 {% include headerbottom.html %}
-{% if page.new-version %}<a class="new-version-notice" href="{{ page.new-version }}">This page has a new version.</a>{% endif %}
 
 
 
@@ -13,6 +12,12 @@
   <section class="title-page">
     <div class="wrap">
       <div class="content-title-documentation">
+        {% if page.new-version %}
+          <div class="wip-notice">
+            <h4>Outdated Notice</h4>
+            <p><a class="new-version-notice" href="{{ page.new-version }}"><i class="fa fa-info"></i><span>&nbsp;&nbsp;This page has a new version.</span></a></p>
+          </div>
+        {% endif %}
         <div class="titles">
           {% if page.overview-name %}
             <div class="supertitle">{{ page.overview-name }}</div>
diff --git a/_sass/layout/title-page.scss b/_sass/layout/title-page.scss
@@ -2,6 +2,10 @@
 //------------------------------------------------
 //------------------------------------------------
 
+.outdated-page .title-page {
+  background: $brand-tertiary-outdated;
+}
+
 .title-page {
   background: $brand-tertiary;
   // height: 200px;
diff --git a/_sass/utils/_variables.scss b/_sass/utils/_variables.scss
@@ -7,6 +7,7 @@
 $brand-primary: #DC322F;
 $brand-secondary: #859900;
 $brand-tertiary: #5CC6E4;
+$brand-tertiary-outdated: #a9c0c6;
 $brand-tertiary-dotty: #E45C77;
 //-------------------------------------------------
 $gray-darker: #002B36;
