Refactor HTML structure for stable release information and update sitemap priorities

Author: nikoscham

feascript-website.css

@@ -1,10 +1,22 @@
+/*   ______ ______           _____           _       _     */
+/*  |  ____|  ____|   /\    / ____|         (_)     | |    */
+/*  | |__  | |__     /  \  | (___   ___ ____ _ ____ | |_   */
+/*  |  __| |  __|   / /\ \  \___ \ / __|  __| |  _ \| __|  */
+/*  | |    | |____ / ____ \ ____) | (__| |  | | |_) | |    */
+/*  |_|    |______/_/    \_\_____/ \___|_|  |_|  __/| |    */
+/*                                            | |   | |    */
+/*                                            |_|   | |_   */
+/*       Website: https://feascript.com/             \__|  */
+
+/* ==========================================================================
+   RESET AND BASE STYLES
+   ========================================================================== */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-/* General styles */
 html {
   max-width: 1500px;
   margin: auto;
@@ -18,19 +30,9 @@ body {
   line-height: 1.6;
 }
 
-ul {
-  padding-left: 1.5em;
-  max-width: 1000px;
-}
-
-/* Default max-width for content elements */
-li,
-p,
-.highlight-container,
-pre.prettyprint {
-  max-width: 1000px;
-}
-
+/* ==========================================================================
+   TYPOGRAPHY
+   ========================================================================== */
 /* Headings */
 h1,
 h2,
@@ -65,49 +67,14 @@ p {
   margin: 1em 0;
 }
 
-.highlight-container {
-  background: #f7e7b7;
-  border-radius: 5px;
-  padding: 15px;
-}
-
-.highlight-container p {
-  margin: 0;
-}
-
 a {
   text-decoration: none;
 }
 
-/* Preformatted text */
-pre {
-  background-color: #f2f2f2;
-  margin: 0;
-  padding: 10px;
-  overflow-x: auto;
-  white-space: pre;
-}
-
-pre.prettyprint {
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-/* Images */
-img.title {
-  height: 1em;
-}
-
-#responsive-logo {
-  height: 80px;
-}
-
-/* Left-align MathJax formulas */
-mjx-container {
-  text-align: left !important;
-}
-
-/* Banner - default hidden, shown in large screens via media query */
+/* ==========================================================================
+   LAYOUT COMPONENTS
+   ========================================================================== */
+/* Banner */
 #banner {
   float: right;
   padding-left: 1.5em;
@@ -120,7 +87,7 @@ mjx-container {
   box-shadow: 0px 1px 4px #999;
 }
 
-/* Menu */
+/* Menu/Navigation */
 #menu {
   list-style: none;
   margin: 1em 0;
@@ -155,6 +122,74 @@ mjx-container {
   padding-left: 1em;
 }
 
+/* Footer styles */
+footer {
+  position: relative;
+  background-color: #f7e7b7;
+  padding: 2px 0 2px 5px;
+  text-align: left;
+  border-top: 2px solid #e0c97f;
+}
+
+/* ==========================================================================
+   CONTENT ELEMENTS
+   ========================================================================== */
+/* Lists */
+ul {
+  padding-left: 1.5em;
+  max-width: 1000px;
+}
+
+/* Default max-width for content elements */
+li,
+p,
+.highlight-container,
+pre.prettyprint {
+  max-width: 1000px;
+}
+
+/* Preformatted text */
+pre {
+  background-color: #f2f2f2;
+  margin: 0;
+  padding: 10px;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+pre.prettyprint {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+/* Images */
+img.title {
+  height: 1em;
+}
+
+#responsive-logo {
+  height: 80px;
+}
+
+/* Left-align MathJax formulas */
+mjx-container {
+  text-align: left !important;
+}
+
+/* ==========================================================================
+   SPECIAL COMPONENTS
+   ========================================================================== */
+/* Highlight containers */
+.highlight-container {
+  background: #f7e7b7;
+  border-radius: 5px;
+  padding: 15px;
+}
+
+.highlight-container p {
+  margin: 0;
+}
+
 /* Loading spinner */
 #loading {
   display: none;
@@ -208,6 +243,26 @@ mjx-container {
   color: #555;
 }
 
+/* Tutorial lists and badges */
+.tutorials-list {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.tutorials-list li {
+  margin-bottom: 0.5em;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.5em;
+}
+
+.tutorial-name {
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 550;
+  margin-right: 10px;
+}
+
 .tutorials-list .badge {
   display: inline-block;
   background-color: #f7e7b7;
@@ -227,9 +282,10 @@ mjx-container {
 
 .tutorials-list .badge:hover {
   transform: translateY(-2px);
-  cursor: default; /* or pointer if clickable */
+  cursor: default;
 }
 
+/* Badge variants */
 .tutorials-list .badge-basic {
   background-color: #6a6a6a;
   color: #f7e7b7;
@@ -263,27 +319,7 @@ mjx-container {
   background-color: #47cf73;
 }
 
-.tutorial-name {
-  display: inline-block;
-  vertical-align: middle;
-  font-weight: 550;
-  margin-right: 10px;
-}
-
-.tutorials-list li {
-  margin-bottom: 1em;
-  border-bottom: 1px solid #ddd;
-  padding-bottom: 0.5em;
-}
-
-/* Remove bullets for tutorials list */
-.tutorials-list {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-}
-
-/* Remove bullets from top-level features-list */
+/* Features list */
 .features-list {
   list-style: none;
   margin: 0;
@@ -294,16 +330,26 @@ mjx-container {
   margin-bottom: 1em;
 }
 
-/* Footer styles */
-footer {
-  position: relative;
-  background-color: #f7e7b7;
-  padding: 2px 0 2px 5px;
-  text-align: left;
-  border-top: 2px solid #e0c97f;
+/* ==========================================================================
+   HELPER CLASSES AND UTILITIES
+   ========================================================================== */
+/* Social media links */
+.social-media-list a:hover {
+  transform: translateY(-2px);
+  cursor: default;
+  transition: transform 0.2s;
 }
 
-/* Media queries */
+/* Notice bars */
+.notice-dev {
+  border-left: 4px solid #f39c12;
+  padding-left: 10px;
+  margin: 1em 0;
+}
+
+/* ==========================================================================
+   MEDIA QUERIES
+   ========================================================================== */
 /* Small screens: up to 500px */
 @media screen and (max-width: 500px) {
   body {
@@ -387,16 +433,3 @@ footer {
     font-size: 120%;
   }
 }
-
-.social-media-list a:hover {
-  transform: translateY(-2px);
-  cursor: default;
-  transition: transform 0.2s;
-}
-
-/* Orange vertical bar */
-.notice-dev {
-  border-left: 4px solid #f39c12;
-  padding-left: 10px;
-  margin: 1em 0;
-}