Rename "Downloads" to "Install" and redesign

assets/js/application.js

@@ -36,6 +36,7 @@ $(document).ready(function() {
   Forms.init();
   Downloads.init();
   DownloadBox.init();
+  InstallPageLink.init();
   PostelizeAnchor.init();
   Print.init();
 });
@@ -809,6 +810,22 @@ var Graphviz = {
   }
 }
 
+var InstallPageLink = {
+  init: function() {
+    const installLink = document.querySelector('.install-link');
+    if (!installLink) return;
+
+    const os = window.session?.browser?.os;
+    if (os === "Mac") {
+      installLink.href = installLink.href.replace('/install', '/install/mac');
+    } else if (os === "Windows") {
+      installLink.href = installLink.href.replace('/install', '/install/win');
+    } else if (os === "Linux") {
+      installLink.href = installLink.href.replace('/install', '/install/linux');
+    }
+  }
+}
+
 var Print = {
   init: function() {
     Print.tagline = $("#tagline");

assets/sass/downloads.scss

@@ -1,6 +1,95 @@
 @import "variables";
 @import "mixins";
 
+.install-tabs {
+  display: flex;
+  border-bottom: 2px solid var(--callout-color);
+  role: tablist;
+
+  a[role="tab"] {
+    padding: 0.75rem 1rem;
+
+    background: var(--callout-color);
+    border: 2px solid var(--callout-color);
+    border-bottom: none;
+    margin-right: -2px;
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--font-color);
+    text-align: center;
+
+    &:hover {
+      background: var(--main-bg);
+      color: var(--link-color);
+    }
+
+    &[aria-selected="true"] {
+      background: var(--main-bg);
+      color: var(--font-color);
+      border-bottom: 2px solid var(--main-bg);
+      margin-bottom: -2px;
+      z-index: 1;
+      position: relative;
+    }
+
+    // Border radius for first and last tabs
+    &:first-of-type {
+      border-top-left-radius: 8px;
+    }
+
+    &:last-of-type {
+      border-top-right-radius: 8px;
+      margin-right: 0;
+    }
+  }
+}
+
+.install-content {
+  padding: 1rem;
+  border: 2px solid var(--callout-color);
+  border-top: none;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.install-overview {
+  margin: 2rem;
+  color: var(--light-font-color);
+  font-size: 1.1rem;
+  line-height: 1.8rem;
+}
+
+.install-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+
+  h1 {
+    margin: 0;
+  }
+
+  .version-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: var(--sidebar-toc-bg-color);
+    color: var(--light-font-color-darker-35);
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+
+    a {
+      color: var(--link-color);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--link-hover-color);
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
 #logo-license {
   @extend .callout;
   padding: 20px !important;
@@ -22,21 +111,6 @@
   }
 }
 
-.callout#more-downloads {
-  .column-left {
-    width: 47%;
-  }
-
-  .column-right {
-    width: 45%;
-  }
-
-  p {
-    padding-bottom: 1em;
-    line-height: 1.4;
-  }
-}
-
 #download-next-steps {
   @include clearfix;
   @extend .unstyled !optional;
@@ -94,14 +168,6 @@
   }
 }
 
-#os-filter-count {
-  position: relative;
-  top: 8px;
-  left: 12px;
-  display: none;
-  color: var(--orange);
-}
-
 .downloading .hide {
   display: none;
 }

content/install/_index.html

@@ -0,0 +1,21 @@
+---
+section: "install"
+title: "Git - Install"
+url: /install
+aliases:
+- /downloads/index.html
+- /download/index.html
+- /download.html
+- /install.html
+---
+
+<div id="main">
+  {{< install-header >}}
+
+    <div class="install-content">
+      <p class="install-overview">
+      Choose your operating system above.
+      </p>
+    </div>
+  </div>
+</div>

content/downloads/linux.html → content/install/linux.html

@@ -1,18 +1,19 @@
 ---
-section: "downloads"
+section: "install"
+title: "Git - Install for Linux"
 aliases:
 - /download/linux
+- /downloads/linux
 ---
 
 <div id="main">
-  <h1>Download for Linux and Unix</h1>
-  <p>It is easiest to install Git on Linux using the preferred package
-  manager of your Linux distribution. If you prefer to build from
-  source, you can find tarballs
-  <a href="https://www.kernel.org/pub/software/scm/git/">on kernel.org</a>.
-  The latest version is
-  <a href="https://www.kernel.org/pub/software/scm/git/git-{{< site-param latest_version >}}.tar.gz">{{< site-param latest_version >}}</a>
+  {{< install-header "linux" >}}
 
+    <div class="install-content">
+  <p>
+      It is easiest to install Git on Linux with your distribution's package
+      manager.
+  </p>
   <h3>Debian/Ubuntu</h3>
   <p>For the latest stable version for your release of Debian/Ubuntu</p>
   <code># apt-get install git</code>
@@ -60,4 +61,6 @@ <h3>Red Hat Enterprise Linux, Oracle Linux, CentOS, Scientific Linux, et al.</h3
   <h3>Slitaz</h3>
   <code>$ tazpkg get-install git</code>
 
+    </div>
+  </div>
 </div>

content/downloads/mac.html → content/install/mac.html

@@ -1,14 +1,16 @@
 ---
-section: "downloads"
-title: "Git - Downloading Package"
+section: "install"
+title: "Git - Install for macOS"
 aliases:
 - /download/mac
+- /downloads/mac
 ---
 
 <div id="main">
-  <h1>Download for macOS</h1>
+  {{< install-header "mac" >}}
 
-  <p>There are several options for installing Git on macOS. Note that
+    <div class="install-content">
+      <p>There are several options for installing Git on macOS. Note that
   any non-source distributions are provided by third parties, and may
   not be up to date with the latest source release.</p>
 
@@ -24,17 +26,13 @@ <h3>MacPorts</h3>
 
   <h3>Xcode</h3>
   <p>Apple ships a binary package of Git with <a href="https://developer.apple.com/xcode/">Xcode</a>.</p>
-
-  <h3>Building from Source</h3>
-  <p>If you prefer to build from source, you can find tarballs
-  <a href="https://www.kernel.org/pub/software/scm/git/">on kernel.org</a>.
-  The latest version is
-  <a href="https://www.kernel.org/pub/software/scm/git/git-{{< site-param latest_version >}}.tar.gz"%>{{< site-param latest_version >}}</a>.
 
   <h3>Installing git-gui</h3>
   <p>If you would like to install <a href="https://git-scm.com/docs/git-gui/">git-gui</a> and <a href="https://git-scm.com/docs/gitk/">gitk</a>,
   git's commit GUI and interactive history browser, you can do so using <a href="https://brew.sh/">homebrew</a><br>
 
   <code>$ brew install git-gui</code></p>
 
+    </div>
+  </div>
 </div>

content/install/source.html

@@ -0,0 +1,20 @@
+---
+section: "install"
+title: "Git - Build from Source"
+---
+
+<div id="main">
+  {{< install-header "source" >}}
+
+    <div class="install-content">
+
+<p>If you prefer to build from source, you can find tarballs
+  <a href="https://www.kernel.org/pub/software/scm/git/">on kernel.org</a>.
+  The latest version is
+  <a href="https://www.kernel.org/pub/software/scm/git/git-{{< site-param "latest_version" >}}.tar.gz">{{< site-param "latest_version" >}}</a>.
+</p>
+<p>There's also an official <a href="https://github.com/git/git">GitHub mirror</a>.</p>
+
+</div>
+</div>
+</div>

content/downloads/win.html → content/install/win.html

@@ -1,12 +1,15 @@
 ---
-section: "downloads"
-title: "Git - Downloading Package"
+section: "install"
+title: "Git - Install for Windows"
 aliases:
 - /download/win
+- /downloads/win
 ---
 
 <div id="main">
-  <h1>Download for Windows</h1>
+  {{< install-header "win" >}}
+
+    <div class="install-content">
   <p>
   <strong><a id="auto-download-link" href="{{< site-param windows_installer.installer_x64.url >}}">Click here to download </a></strong>
     the latest (<strong id="auto-download-version">{{< site-param windows_installer.installer_x64.version >}}</strong>)
@@ -66,4 +69,7 @@ <h3>Get Involved</h3>
       </a>
     </li>
   </ul>
+
+    </div>
+  </div>
 </div>

layouts/partials/sidebar.html

@@ -54,12 +54,7 @@
         <a href="{{ relURL "docs" }}"{{ if or (eq .Params.Subsection "reference") (eq .Params.Subsection "manual") }} class="active"{{ end }}>Reference</a>
       </li>
       <li>
-        <a href="{{ relURL "downloads" }}"{{ if (eq $section "downloads") }} class="active"{{ end }}>Downloads</a>
-        <ul {{ if (eq $section "downloads") }}class="expanded"{{ end }}>
-          <li>
-            <a href="{{ relURL "downloads/logos" }}"{{ if (eq .Params.Subsection "logos") }} class="active"{{ end }}>Logos</a>
-          </li>
-        </ul>
+        <a href="{{ relURL "install" }}" class="install-link{{ if (eq $section "install") }} active{{ end }}">Install</a>
       </li>
       <li>
         <a href="{{ relURL "community" }}"{{ if (eq $section "community") }} class="active"{{ end }}>Community</a>

layouts/partials/site-root.html

@@ -31,9 +31,9 @@ <h3>Reference</h3>
           </a>
         </li>
         <li>
-          <a href="{{ relURL "downloads" }}">
+          <a class="install-link" href="{{ relURL "install" }}">
             <img src="{{ relURL "images/icons/fa-down-long.svg" }}" width="74" height="74" />
-            <h3>Downloads</h3>
+            <h3>Install</h3>
             <p>Binary releases for all major platforms.</p>
           </a>
         </li>