[gimp-web/wip/Jehan/issue-236-new-sponsor-page: 24/25] themes: move the checksum hash of tarballs into a <details> tag.

[Jehan <jehanp src gnome org>]

commit 743a08f7d093bebded24e2959d113f93d0f9d54f
Author: Jehan <jehan girinstud io>
Date:   Sun Sep 19 18:50:45 2021 +0200

    themes: move the checksum hash of tarballs into a <details> tag.
    
    This makes the huge list a collapsible/expander widget, hence cleaning a
    bit the download page which still has too much of everything. Tarball
    hashes are important so we should not get rid of this information, but
    it feels better organized and less messy this way.
    
    Also reword a bit with less redundant test the Source section.
    
    Note: I am not very happy of my CSS styling, but I will let future
    contributors better at styling improving it.

 themes/newgimp/static/css/gimp.css      | 40 +++++++++++++++++++++++++++++++++
 themes/newgimp/templates/downloads.html | 17 +++++++++-----
 2 files changed, 52 insertions(+), 5 deletions(-)
---
diff --git a/themes/newgimp/static/css/gimp.css b/themes/newgimp/static/css/gimp.css
index 67e4ecff..e6eb594c 100644
--- a/themes/newgimp/static/css/gimp.css
+++ b/themes/newgimp/static/css/gimp.css
@@ -755,3 +755,43 @@ a.donate-orange {
 .donate-button a {
         color: white;
 }
+
+/* List of data checksum hashes. */
+
+details.hashes {
+        text-align: center;
+}
+details.hashes[open] {
+        border: 2px dotted black;
+}
+details.hashes summary {
+        display: inline-block;
+        border: 1px solid navy;
+        background: #777;
+        color: white;
+        padding-left: 1.3rem;
+        padding-right: 0.5rem;
+        position: relative;
+        cursor: pointer;
+}
+details.hashes[open] summary {
+        border: 2px solid navy;
+}
+details.hashes dt {
+    text-align: left;
+}
+details.hashes summary:before {
+  content: '';
+  border-width: .4rem;
+  border-style: solid;
+  border-color: transparent transparent transparent white;
+  position: absolute;
+  top: 0.4rem;
+  left: 0.5rem;
+  transform: rotate(0);
+  transform-origin: .2rem 50%;
+  transition: .25s transform ease;
+}
+details.hashes[open] > summary:before {
+  transform: rotate(90deg);
+}
diff --git a/themes/newgimp/templates/downloads.html b/themes/newgimp/templates/downloads.html
index 2f8f9026..3a8be864 100644
--- a/themes/newgimp/templates/downloads.html
+++ b/themes/newgimp/templates/downloads.html
@@ -396,15 +396,21 @@
     <div id='source'>
     <h2>Source for version {{ GIMP_MAJOR_MINOR_VERSION }} (Stable)</h2>
 
-    <p>GIMP releases available from gimp.org and its <a href="/donating/sponsors.html">mirrors</a> contain 
the source code and have to be compiled in order to be installed on your system.</p>
-
+    <p>GIMP releases are also available as source tarballs from gimp.org
+    and its <a href="/donating/sponsors.html">mirrors</a>, containing
+    the source code to compile for your system:
+    <a
+    href='//download.gimp.org/mirror/pub/gimp/v{{ GIMP_MAJOR_MINOR_VERSION 
}}/'>https://download.gimp.org/mirror/pub/gimp/v{{ GIMP_MAJOR_MINOR_VERSION }}/</a>
+    </p>
     <p>For instructions, how to build GIMP from source code, please see <a href='/source/'>this page</a>.</p>
 
-    <p>GIMP {{ GIMP_VERSION }} is now available at <a
-    href='//download.gimp.org/mirror/pub/gimp/v{{ GIMP_MAJOR_MINOR_VERSION 
}}/'>https://download.gimp.org/mirror/pub/gimp/v{{ GIMP_MAJOR_MINOR_VERSION }}/</a>. You may want to read the 
<a
+    <p>You may want to read the <a
     href='/release-notes/gimp-{{ GIMP_MAJOR_MINOR_VERSION }}.html'>Release Notes for GIMP {{ 
GIMP_MAJOR_MINOR_VERSION }}</a>.</p>
 
-    <p>To allow you to check the integrity of the tarballs, here are the hashes of the latest releases:</p>
+    <details class='hashes'>
+      <summary>
+        Hashes of latest releases to check the integrity of the tarballs:
+      </summary>
 
     {% if GIMP.STABLE %}
         <dl>
@@ -425,6 +431,7 @@
         {% endfor %}
         </dl>
     {% endif %}
+    </details>
 
 
     <p>