home.html

<!-- This page is the body of the sunpy.org landing page, it is included in index.rst
     All the styling in this file is specific to this page, but should use css variables from the theme. -->
<style>
  body {
    background-color: none !important;
    background-image: url("_static/img/sunpy-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }

  h1 {
    display: none;
  }

  .bd-main {
    width: 100%;
  }

  .bd-sidebar-secondary {
    display: none;
  }

  .bd-header label.secondary-toggle {
    display: none;
  }

  .whatsnew {
    padding-top: 15px;
    font-size: 30px;
    text-align: center;
  }

  .whatsnew a {
    color: var(--sst-accent-color-bright);
    font-weight: bold;
    text-decoration: none;
  }

  p.whatsnew {
    margin-bottom: 0;
    color: var(--sst-darkest-color);
  }

  #front {
    border: 1px var(--sst-dark-color) solid;
    border-left-style: none;
    border-right-style: none;
  }

  @media only screen and (min-width: 768px) {
    .lead {
      font-size: 1.8rem;
    }
  }

  @media (max-width: 959px) {
    /* Override the sbt header nav hiding. */
    .bd-header label.primary-toggle {
      display: inherit;
    }
  }

  /* TODO: Use flex here */
  .logo-container {
    margin-top: 2%;
    margin-bottom: 5%;
  }
</style>

<div class="container">
  <div class="row logo-container">
    <div class="col-md-6 center">
      <img
        id="logo"
        class="dark-light"
        src="_static/img/sunpy_icon.svg"
        class="sunpy-logo"
        alt="SunPy Logo"
      />
    </div>
    <div class="col-md-6 center">
      <div class="text-center">
        <p class="sunpy-icon-text">
          sun<span class="sunpy-icon-text-color2">py</span>
        </p>
      </div>
      <p class="lead text-center always-light-theme">
        The community-developed, free and open-source solar data analysis
        environment for Python.
      </p>
      <div id="front" class="text-center">
        <p class="whatsnew always-light-theme">
          What's new in
          <a href="https://docs.sunpy.org/en/stable/whatsnew/5.1.html"
            >sunpy 5.1?</a
          >
        </p>
        <p class="body always-light-theme">
          Latest stable release: <span id="version"></span>
        </p>
      </div>
      <div class="grid text-center sunpy-btn-grid">
        <a
          href="https://docs.sunpy.org/en/stable/tutorial/installation.html"
          class="btn btn-lg btn-sunpy btn-sunpy2"
          type="button"
          >Install sunpy</a
        >
        <a
          href="https://docs.sunpy.org/en/stable/tutorial/index.html"
          class="btn btn-lg btn-sunpy btn-sunpy1"
          role="button"
          >sunpy tutorial</a
        >
        <a
          href="https://docs.sunpy.org/en/stable/generated/gallery/index.html"
          class="btn btn-lg btn-sunpy btn-sunpy1"
          role="button"
          >Example Gallery</a
        >
        <a
          href="https://app.element.io/#/room/#sunpy:openastronomy.org"
          class="btn btn-lg btn-sunpy btn-sunpy1"
          role="button"
          >Chat</a
        >
        <a
          href="https://community.openastronomy.org/c/sunpy/5"
          class="btn btn-lg btn-sunpy btn-sunpy1"
          role="button"
          >Forum</a
        >
      </div>
    </div>
  </div>
</div>

<script>
  window.onload = async function () {
    // Get the latest version of sunpy from PyPI
    const res = await fetch("https://pypi.org/pypi/sunpy/json");
    const data = await res.json();
    document.getElementById("version").innerHTML = data.info.version;

    // Pride month
    const d = new Date();
    if (d.getMonth() == 5) {
      document.getElementById("logo").src = "_static/img/pride/sunpy_icon.svg";
    }
  };
</script>