theme: update styling to match the furo documentation theme

Author: davvid

_includes/download-box.html

@@ -1,76 +1,33 @@
-<style>
-.downloads-box {
-    -moz-border-radius: 8px;
-    border-radius: 8px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    color: #fff;
-    background-color: #111;
-    text-align: center;
-    max-width: 310px;
-}
-
-.downloads {
-    -moz-border-radius: 8px;
-    border-radius: 8px;
-    padding: 6px;
-    font-size: 0.8em;
-    margin: 6px;
-    color: #000;
-    background-color: #ffe9b7;
-    position: relative;
-    z-index: 3;
-}
-
-.downloads img {
-    border: none;
-}
-
-.downloads a:link {
-    text-decoration: underline;
-    background-color: transparent;
-}
-
-.downloads a:visited {
-    text-decoration: underline;
-    background-color: transparent;
-}
-
-.downloads a:hover {
-    text-decoration: underline;
-    background-color: transparent;
-    color: black;
-}
-</style>
-
 <div class="downloads-box">
-Download git-cola
+Download Git Cola
 
 <div class="downloads">
     The latest stable git-cola release is<br />
     <span style="font-size: 20pt;">
         <strong>v{{ site.cola_version }}</strong>
     </span>
     <br />
-    <a href="{{ page.prefix }}share/doc/git-cola/html/relnotes.html">release notes</a>
+    <a href="{{ page.prefix }}share/doc/git-cola/html/relnotes.html">
+        Release Notes
+    </a>
     ({{ site.cola_release_date }})
     <br />
     <br />
 
     <table width="100%">
     <tbody>
     <tr>
-    <td width="33%">
+    <td width="33%" class="imglink">
         <a href="{{ site.cola_downloads }}/v{{ site.cola_version }}/git-cola-{{ site.cola_version }}.windows.zip"
-        ><img src="images/windows_big.png" alt="windows logo"/></a>
+        ><img src="images/windows_big.png" alt="windows logo"></a>
     </td>
-    <td width="33%">
+    <td width="33%" class="imglink">
         <a href="https://github.com/git-cola/git-cola#macos"
-        ><img src="images/osx_big.png" alt="mac logo"/></a>
+        ><img src="images/osx_big.png" alt="mac logo"></a>
     </td>
-    <td width="33%">
+    <td width="33%" class="imglink">
         <a href="{{ site.cola_archive }}/v{{ site.cola_version }}.tar.gz"
-        ><img src="images/tux_big.png" alt="tarball logo"/></a>
+        ><img src="images/tux_big.png" alt="tarball logo"></a>
     </td>
 
     </tr>

cola.css

@@ -1,31 +1,48 @@
 * {box-sizing: border-box;}
 
 body {
-    font-size: 1.3em;
+    font-size: 16pt;
     font-family: "Helvetica", "Ubuntu", "Droid Sans", sans-serif;
     text-decoration: none;
-    color: #333;
-    background-color: #fff;
-    padding: 0;
+    color: #d0d0d0;
+    background-color: #202020;
     margin: 0;
 }
 
+a {
+    font-weight: bold;
+    text-decoration: none;
+    color: #368ce2;
+    padding: 0.2em;
+    padding-bottom: 0.1em;
+}
+
+a:hover {
+    color: white;
+}
+
+img {
+    border: 0;
+}
+
+ul {
+    list-style-type: none;
+}
+
 .headerbar {
     background: #000;
     height: 3em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 1px 2px #000;
-    margin-bottom: 2em;
+    margin-bottom: 1em;
 }
 
 .headerbar > :first-child {
     margin-left: 1em;
 }
 
-
-
 .headerbar-logo-container {
     max-height: 3em;
     position: relative;
@@ -66,33 +83,16 @@ body {
     color: #e0dfdb;
 }
 .headerbar-nav a:hover {
-    background-color: #ef5033;
-    color: #fff;
-}
-
-ul {
-    list-style-type: none;
-}
-
-a {
-    font-weight: bold;
-    text-decoration: none;
-    color: #333;
-    padding: 0.2em;
-    padding-bottom: 0.1em;
-}
-
-a:hover {
     color: white;
-    background-color: #ef5033;
+    background-color: #368ce2;
 }
 
-a.button {
+.button a {
+    border-radius: 0.7em;
     color: white;
-    background-color: #ef5033;
-    font-size: 2em;
+    background-color: #368ce2;
+    font-size: 1.5em;
     font-weight: bold;
-    color: white;
     white-space: nowrap;
     padding: 0.5ex;
     padding-left: 1ex;
@@ -101,9 +101,86 @@ a.button {
     z-index: 3;
 }
 
-a.button:hover {
-    background-color: #ef5033;
-    text-decoration: underline;
+.button {
+    margin: 1.5em;
+}
+
+.button a:hover {
+    color: #368ce2;
+    background-color: white;
+}
+
+.code {
+    font-family: monospace;
+}
+
+.screenshot {
+    clear: both;
+    text-align: center;
+    overflow: hidden;
+}
+
+.screenshot img {
+    width: 60%;
+}
+
+.screenshot a:hover {
+    background-color: transparent;
+}
+
+.page {
+    text-align: left;
+}
+
+.top-margin {
+    margin-top: 2em;
+}
+
+.center {
+    text-align: center;
+}
+
+.caption {
+    font-variant: small-caps;
+    margin-bottom: 4em;
+    text-align: left;
+    margin-left: 20%;
+}
+
+.downloads-box {
+    font-weight: bold;
+    color: #d0d0d0;
+    background-color: #368ce2;
+    text-align: center;
+    border-radius: 8px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    max-width: 310px;
+}
+
+.downloads {
+    font-weight: normal;
+    background-color: #d0d0d0;
+    color: #373737;
+    border-radius: 8px;
+    padding: 6px;
+    font-size: 0.8em;
+    margin: 6px;
+    position: relative;
+    z-index: 3;
+}
+
+.downloads a {
+    text-decoration: none;
+}
+
+.downloads a:hover {
+    background-color: #368ce2;
+    border-radius: 0.5em;
+}
+
+.imglink a:hover {
+    background-color: transparent;
 }
 
 @media screen and (max-width: 1080px) {
@@ -113,13 +190,24 @@ a.button:hover {
     .headerbar > :last-child {
         margin-right: 0;
     }
+    .caption {
+        margin-left: 10%;
+    }
+    .screenshot img {
+        width: 80%;
+    }
 }
 
 @media screen and (max-width: 767px) {
     .headerbar {
         height: auto;
     }
-
+    .caption {
+        margin-left: 5%;
+    }
+    .screenshot img {
+        width: 90%;
+    }
 }
 
 @media screen and (max-width: 767px) and (orientation: portrait) {

downloads.html

@@ -3,42 +3,39 @@
 layout: headerbar
 ---
 <style>
-img.title { border: 0; }
 h1.title { margin-bottom: 0.5em; }
 h2.title { margin-bottom: 0.5em; }
 
 .cmd {
-	font-family: monospace;
-	font-size: 20pt;
-	display: inline-block;
-	padding: 3px;
+    font-family: monospace;
+    display: inline-block;
+    font-size: 20pt;
+    padding: 3px;
 }
 
 .page {
-    margin: 1em;
-    float: left;
-    padding-right: 300px;
+    padding-right: 310px;
 }
-
 </style>
 
 <div style="
     margin-right: 1em;
     margin-top: 1em;
-    margin-left: -330px;
-    position: relative;
+    position: absolute;
+    right: 0;
     float: right;
     clear: right;">
 {% include download-box.html %}
 </div>
 
-<div class="page">
+<div class="page" style="margin-left: 2em">
 
 <h2 class="title">
     <img class="title" src="images/logo-tar.png"/>
     Source Releases
-</h2><ul>
+</h2>
 
+<ul>
 <li>
 <a href="{{ site.cola_archive }}/v{{ site.cola_version }}.tar.gz">
     Git Cola v{{ site.cola_version }}</a> (latest stable release)