old version note

rubyonjets · May 23, 2024 · adb8193 · adb8193
1 parent ee8941a
commit adb8193
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 18 deletions.
diff --git a/_includes/content.html b/_includes/content.html
@@ -17,6 +17,8 @@
 
     <div class="container-fluid">
       <h1 id="{{ page.title | slugify }}">{{ page.title }}</h1>
+      <p id="old-version-note">Important: These docs are for the outdated Jets 5 versions and below. For the latest
+        Jets docs: <a href="https://docs.rubyonjets.com">docs.rubyonjets.com</a></p>
       {{ content }}
     </div>
   </div>
@@ -31,4 +33,4 @@ <h1 id="{{ page.title | slugify }}">{{ page.title }}</h1>
 
 </div>
 
-{% endif %}
+{% endif %}
diff --git a/_sass/masthead.scss b/_sass/masthead.scss
@@ -7,7 +7,8 @@ header.masthead {
   color: white;
   background-color: #020766;
 
-  h1, h2 {
+  h1,
+  h2 {
     border: none;
   }
 
@@ -20,59 +21,71 @@ header.masthead {
     position: relative;
     padding: 50px 0 30px;
     text-align: center;
+
     .header-content-inner {
       position: relative;
       max-width: 500px;
       margin: 0 auto;
+
       h1 {
         font-size: 30px;
         margin-top: 0;
         margin-bottom: 30px;
       }
+
       .list-badges {
         margin-bottom: 25px;
+
         img {
           height: 50px;
           margin-bottom: 25px;
         }
       }
     }
   }
+
   .device-container {
     max-width: 300px;
     margin: 0 auto 100px;
+
     .screen img {
       border-radius: 3px;
     }
   }
+
   @media (min-width: 768px) {
+
     // min-height: 100%;
     .header-content {
       // height: 100vh;
       min-height: 600px;
       padding: 0;
       text-align: left;
+
       .header-content-inner {
         position: absolute;
         top: 50%;
         max-width: none;
         margin: 0;
         transform: translateY(-50%);
+
         h1 {
           font-size: 35px;
         }
       }
     }
+
     .device-container {
       max-width: none;
       max-height: calc(100vh - 100px);
       margin: 100px auto 0;
     }
   }
+
   @media (min-width: 992px) {
     .header-content .header-content-inner h1 {
       font-size: 40px;
       line-height: normal;
     }
   }
-}
+}
diff --git a/_sass/theme.scss b/_sass/theme.scss
@@ -3,12 +3,14 @@
     font-size: 2.2em;
     font-weight: bold;
   }
+
   h2 {
     font-size: 1.7em;
     line-height: 1.3em;
     padding-bottom: 20px;
   }
 }
+
 .homepage-logo {
   width: 60%;
   margin: auto;
@@ -49,7 +51,7 @@ section#main img {
 section#main .intro-text .name {
   display: block;
   text-transform: uppercase;
-  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 2em;
   font-weight: 700;
 }
@@ -81,6 +83,7 @@ section#main .intro-text .skills {
 .content-body {
   text-align: left;
   margin-top: 30px;
+
   @media (min-width: 992px) {
     margin-top: 35px;
   }
@@ -110,6 +113,7 @@ footer img.footer-logo {
   h2 {
     font-size: 1.3em;
   }
+
   li {
     font-size: 0.9em;
   }
@@ -125,8 +129,12 @@ footer img.footer-logo {
 
 
 .content-body-list {
-  .video-container iframe, .video-container object, .video-container embed {
+
+  .video-container iframe,
+  .video-container object,
+  .video-container embed {
     width: 180px;
+
     @media (min-width: 768px) {
       /* 16:9 ratio */
       width: 300px;
@@ -156,6 +164,7 @@ footer img.footer-logo {
   font-size: 1.15em;
   padding-bottom: 10px;
   position: relative;
+
   // background-color: yellow;
   // border: 1px solid red;
   @media (min-width: 1000px) {
@@ -171,11 +180,13 @@ footer img.footer-logo {
     text-align: center;
     display: table-cell;
     height: 70px;
+
     // background-color: green;
     @media (min-width: 768px) {
       width: 150px;
       height: 120px;
     }
+
     @media (min-width: 1000px) {
       width: inherit;
       height: 160px;
@@ -184,24 +195,30 @@ footer img.footer-logo {
       display: block;
       float: none;
     }
+
     img.center-crop {
       object-fit: contain;
-      object-position: center; /* Center the image within the element */
+      object-position: center;
+      /* Center the image within the element */
       height: 64px;
+
       @media (min-width: 768px) {
         height: 110px;
       }
+
       @media (min-width: 1000px) {
         height: 160px;
       }
     }
   }
+
   .related-link {
     // background-color: red;
     vertical-align: top;
     display: table-cell;
     height: 70px;
     padding-left: 15px;
+
     @media (min-width: 1000px) {
       height: 50px;
       display: block;
@@ -210,7 +227,8 @@ footer img.footer-logo {
       margin-bottom: 5px;
       text-align: center;
     }
-      a {
+
+    a {
       display: block;
       vertical-align: middle;
       line-height: normal;
@@ -240,11 +258,13 @@ ul.toc {
   list-style-type: none;
   padding: 5px;
   margin-left: 0;
+
   li {
     list-style-type: none;
     padding-left: 5px;
     margin-left: 0;
   }
+
   ul {
     padding-left: 10px;
   }
@@ -253,11 +273,13 @@ ul.toc {
 .getting-started-options {
   padding: 40px 30px;
   text-align: center;
+
   img {
     vertical-align: middle;
     text-align: center;
     padding: 20px;
   }
+
   font-size: 2em;
 }
 
@@ -274,20 +296,23 @@ ul.toc {
   text-align: left;
   margin: 0 auto 0 0;
   padding-bottom: 20px;
+
   .video-container {
-    position:relative;
-    padding-bottom:56.25%;
-    padding-top:30px;
-    height:0;
-    overflow:hidden;
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
   }
 
-  .video-container iframe, .video-container object, .video-container embed {
-    position:absolute;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
+  .video-container iframe,
+  .video-container object,
+  .video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -297,10 +322,12 @@ ul.toc {
     h4 {
       font-weight: bold;
     }
+
     // background-color: red;
     font-size: 1.25em;
     vertical-align: middle;
     display: table-cell;
+
     @media (min-width: 768px) {
       height: 350px;
     }
@@ -338,6 +365,7 @@ ul.toc {
   font-size: 0.9em;
   padding: 10px;
   margin-bottom: 15px;
+
   p {
     margin: 0;
   }
@@ -360,15 +388,18 @@ ul.toc {
     margin: 0;
     padding: 0;
     width: 200px;
+
     // desktop
     @media (min-width: 500px) {
       // without padding-left its centered
       width: 320px;
     }
+
     @media (min-width: 600px) {
       // without padding-left its centered
       width: 400px;
     }
+
     @media (min-width: 768px) {
       padding-left: 64px;
       width: 512px;
@@ -400,6 +431,7 @@ ul.toc {
 
 .navbar-logo {
   max-height: 25px;
+
   @media (min-width: 992px) {
     max-height: 55px;
   }
@@ -429,4 +461,9 @@ ul.toc {
 
 .learn {
   margin-bottom: 20px;
+}
+
+#old-version-note {
+  font-size: 1.2rem;
+  color: #e44522;
 }