Fix broken links and add dark mode with installation section

_features/analysis.md

@@ -3,7 +3,7 @@ description: Post-Process Analysis
 order: 1
 ---
 [Line survey, instrument function, rescale, crop...](https://radis.readthedocs.io/en/latest/spectrum/spectrum.html). [Combine spectra](https://radis.readthedocs.io/en/latest/los/los.html) to create mixtures or calculate line-of-sight integrations.
-[Compare with experiments](https://radis.readthedocs.io/en/latest/spectrum/spectrum.html#compare-two-spectra) or other codes ([Specair](https://spectralfit.gitlab.io/specair/)), let Radis handle units.
+[Compare with experiments](https://radis.readthedocs.io/en/latest/spectrum/spectrum.html#compare-two-spectra) or other codes (Specair), let Radis handle units.
 
 
 

_includes/head.html

@@ -4,6 +4,11 @@
 <title>{{ page.title }}</title>
 <meta name="author" content="Erwan Pannier" />
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<script>
+  if (localStorage.getItem('theme') === 'dark') {
+    document.documentElement.classList.add('dark-mode');
+  }
+</script>
 
 <link href="https://fonts.googleapis.com/css?family=Lato|Work+Sans:400,700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/css/bootstrap.min.css" />

_includes/hero.html

@@ -7,7 +7,7 @@
       <div class="row">
         <div class="col-lg-2 col-md-2 col-sm-2"></div>
         <div class="col-lg-8 col-md-8 col-sm-8">
-          <a class="btn btn-primary btn-block" href="https://radis.github.io/radis-lab" role="button">RADIS : fast molecular spectra</a>
+          <a class="btn btn-primary btn-block" href="https://radis.readthedocs.io/" role="button">RADIS : fast molecular spectra</a>
         <br>
         </div>
         <div class="col-2 col-md-2 col-sm-2"></div>

_includes/install.html

@@ -0,0 +1,182 @@
+<!-- install -->
+<style>
+  .install-section {
+    padding-bottom: 2rem;
+  }
+
+  .cmd-card {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 12px rgba(58, 3, 88, 0.08);
+    text-align: left;
+    height: 100%;
+  }
+
+  .cmd-card h4 {
+    font-family: "Work Sans", sans-serif;
+    font-weight: 700;
+    color: #3A0358;
+    font-size: 18px;
+    margin-bottom: 0.4rem;
+  }
+
+  .cmd-card .cmd-desc {
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 0.75rem;
+  }
+
+  .cmd-box {
+    display: flex;
+    align-items: center;
+    background: #1e1e2e;
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+    color: #a6e3a1;
+    gap: 0.5rem;
+  }
+
+  .cmd-box .cmd-prompt {
+    color: #cba6f7;
+    user-select: none;
+    flex-shrink: 0;
+  }
+
+  .cmd-box .cmd-text {
+    flex: 1;
+    color: #cdd6f4;
+    word-break: break-all;
+  }
+
+  .cmd-copy-btn {
+    background: none;
+    border: 1px solid #444;
+    border-radius: 6px;
+    color: #89b4fa;
+    padding: 3px 10px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .cmd-copy-btn:hover {
+    background: #313244;
+    border-color: #89b4fa;
+    color: #fff;
+  }
+
+  .cmd-copy-btn.copied {
+    color: #a6e3a1;
+    border-color: #a6e3a1;
+  }
+
+  .install-footer {
+    font-size: 14px;
+    color: #555;
+    margin-top: 1.5rem;
+  }
+
+  /* Dark mode overrides */
+  html.dark-mode .cmd-card {
+    background: #1e1e2e;
+    border-color: #333;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
+  }
+
+  html.dark-mode .cmd-card h4 {
+    color: #cca3e8;
+  }
+
+  html.dark-mode .cmd-card .cmd-desc {
+    color: #aaa;
+  }
+
+  html.dark-mode .cmd-box {
+    background: #13131f;
+    border: 1px solid #333;
+  }
+
+  html.dark-mode .install-footer {
+    color: #aaa;
+  }
+</style>
+
+<div class="container pt-sm-2 install-section">
+  <br />
+
+  <div class="row section-heading">
+    <div class="col-lg-4 col-md-3"><hr/></div>
+    <div class="col-lg-4 col-md-6">
+      <h2>Installation</h2>
+    </div>
+    <div class="col-lg-4 col-md-3"><hr/></div>
+  </div>
+
+  <br />
+
+  <div class="row">
+    <div class="col-md-6 mb-4">
+      <div class="cmd-card">
+        <h4>pip</h4>
+        <p class="cmd-desc">Install from PyPI</p>
+        <div class="cmd-box">
+          <span class="cmd-prompt">$</span>
+          <span class="cmd-text" id="pip-cmd">pip install radis</span>
+          <button class="cmd-copy-btn" onclick="copyCmd('pip-cmd', this)">Copy</button>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6 mb-4">
+      <div class="cmd-card">
+        <h4>conda</h4>
+        <p class="cmd-desc">Install from conda-forge</p>
+        <div class="cmd-box">
+          <span class="cmd-prompt">$</span>
+          <span class="cmd-text" id="conda-cmd">conda install -c conda-forge radis</span>
+          <button class="cmd-copy-btn" onclick="copyCmd('conda-cmd', this)">Copy</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row text-center">
+    <div class="col-12 install-footer">
+      <p>For more details including development installation, see the <a href="https://radis.readthedocs.io/en/latest/install.html">Installation Guide</a>.</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  function copyCmd(id, btn) {
+    var text = document.getElementById(id).textContent;
+    navigator.clipboard.writeText(text).then(function() {
+      btn.textContent = "Copied!";
+      btn.classList.add("copied");
+      setTimeout(function() {
+        btn.textContent = "Copy";
+        btn.classList.remove("copied");
+      }, 2000);
+    }).catch(function() {
+      // fallback for http
+      var el = document.createElement("textarea");
+      el.value = text;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      btn.textContent = "Copied!";
+      btn.classList.add("copied");
+      setTimeout(function() {
+        btn.textContent = "Copy";
+        btn.classList.remove("copied");
+      }, 2000);
+    });
+  }
+</script>
+<!-- end install -->

_includes/menu.html

@@ -18,11 +18,11 @@
         </li>
 
         <li class="nav-item flex-md-fill text-md-center">
-            <a class="nav-link" href="//radis.readthedocs.io/en/latest/auto_examples/">Examples</a>
+            <a class="nav-link" href="https://radis.readthedocs.io/en/latest/auto_examples/index.html">Examples</a>
         </li>
 
         <li class="nav-item flex-md-fill text-md-center">
-          <a class="nav-link" href="https://radis.github.io/slack-invite">Community</a>
+          <a class="nav-link" href="https://radis.github.io/slack-invite/">Community</a>
         </li>
 
         <li class="nav-item flex-md-fill text-md-center">
@@ -34,9 +34,12 @@
         </li>
 
         <li class="nav-item flex-md-fill text-md-center">
-            <a class="nav-link" href="https://www.youtube.com/channel/UCO-7NXkubTAiGGxXmvtQlsA"">Videos</a>
+            <a class="nav-link" href="https://www.youtube.com/channel/UCO-7NXkubTAiGGxXmvtQlsA">Videos</a>
         </li>
 
+        <li class="nav-item flex-md-fill text-md-center">
+            <a class="nav-link" href="#" id="theme-toggle" style="cursor: pointer;">🌙 Dark Mode</a>
+        </li>
       </ul>
     </div>
 

_includes/scripts.html

@@ -1,3 +1,31 @@
 <script src="/js/jquery.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
 <script async defer src="https://buttons.github.io/buttons.js"></script>
+<script>
+  function syncToggleLabel() {
+    var toggleBtn = document.getElementById("theme-toggle");
+    if (!toggleBtn) return;
+    if (document.documentElement.classList.contains("dark-mode")) {
+      toggleBtn.textContent = "☀️ Light Mode";
+    } else {
+      toggleBtn.textContent = "🌙 Dark Mode";
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", function() {
+    syncToggleLabel();
+    var toggleBtn = document.getElementById("theme-toggle");
+    if (toggleBtn) {
+      toggleBtn.addEventListener("click", function(e) {
+        e.preventDefault();
+        document.documentElement.classList.toggle("dark-mode");
+        if (document.documentElement.classList.contains("dark-mode")) {
+          localStorage.setItem("theme", "dark");
+        } else {
+          localStorage.setItem("theme", "light");
+        }
+        syncToggleLabel();
+      });
+    }
+  });
+</script>

css/main.sass

@@ -238,3 +238,66 @@ img
     font-size: 16px
     text-align: left
     text-justify: inter-character
+
+/* Dark Mode - applied when html has .dark-mode class */
+html.dark-mode,
+html.dark-mode body
+  background-color: #1a1a1a
+  color: #eee
+
+html.dark-mode #main-menu
+  background-color: #1e1e1e !important
+
+html.dark-mode .navbar
+  background-color: #1e1e1e !important
+
+html.dark-mode .nav-link,
+html.dark-mode .navbar-brand
+  color: #ddd !important
+
+html.dark-mode .nav-item:hover
+  background-color: #333 !important
+  border-bottom: 2px solid #cca3e8 !important
+
+html.dark-mode .section-heading h2
+  color: #cca3e8
+
+html.dark-mode .section-heading hr
+  background-color: #cca3e8
+
+html.dark-mode .feature h4,
+html.dark-mode .user h4,
+html.dark-mode .goal h4
+  color: #cca3e8
+
+html.dark-mode .feature p,
+html.dark-mode .user p,
+html.dark-mode p
+  color: #ccc
+
+html.dark-mode a
+  color: #50e3c2
+
+html.dark-mode .btn-primary
+  background-color: #4a1e6e
+  border-color: #cca3e8
+  color: #fff
+
+html.dark-mode .btn-primary:hover
+  background-color: #5c2a8a
+
+html.dark-mode .alt-color
+  background-color: #242424
+
+html.dark-mode .links
+  background-color: #111
+
+html.dark-mode .footer-copy
+  background-color: #000
+
+html.dark-mode .code-block,
+html.dark-mode pre
+  background-color: #2d2d2d !important
+  color: #eee !important
+  border: 1px solid #444
+

index.html

@@ -4,6 +4,8 @@
 ---
 {% include hero.html %}
 
+{% include install.html %}
+
 {% include glance.html %}
 
 {% include connect.html %}