startpage.css: rework rules for DL button on OS section

Moving the download button on top of the Swirl image, using also a more
clear light styling.
In 2015 WebKit has introduced a new styling element called
'backdrop-filter' which would be a really nice feature if we could use
this here, but Firefox don't understand this element even now in 2019!
:-(

Moving the button is "saving" the required space we would need otherwise
if the button is used below the swirl image.
Now both images in the columns are mostly equal in the height, that gives us
the possibility to let the lists of points we want to present start on
the same logical height. Works currently not perfectly as the images are
scaling differently in case the screen is resized by the user.

1 files changed, 30 insertions, 72 deletions

diff --git a/english/startpage.css b/english/startpage.css
index ae724815696..a36991b4b05 100644
--- a/english/startpage.css
+++ b/english/startpage.css
@@ -139,91 +139,49 @@ div .community {
   padding: 10px;
 }
 
-.debian-swirl {
-  width: 50%;
-  background: none;
-  margin: 0 auto; /* just to get an apsect ratio same as the SVG's: */
-  padding-top: 50%;
-  background-image: url(logos/openlogo-nd.svg);
-  background-size: cover;
-  background-size: 65%;
-  background-repeat: no-repeat;
-  background-position: center;
+/* Classes used within 'The Operating System' */
+.os-img-container {
+  position: relative;
+  width: 100%;
 }
 
-/* This is copied from the branch new-cd_distrib-section, needs to be melted together! */
-
-.btn {
-  display: inline-block;
-  text-align: center;
-  margin-top: 0px;
-  padding: 12px 24px;
-  border: 1px solid #0b7e34;
-  border-radius: 8px;
-  background: #12cd55;
-  background: -webkit-gradient(linear, left top, left bottom, from(#12cd55), to(#0b7e34));
-  background: -moz-linear-gradient(top, #12cd55, #0b7e34);
-  background: linear-gradient(to bottom, #12cd55, #0b7e34);
-  -webkit-box-shadow: #11be4e 1px -1px 10px 0px;
-  -moz-box-shadow: #11be4e 1px -1px 10px 0px;
-  box-shadow: #11be4e 1px 0px 21px 0px;
-  text-shadow: #074f21 1px 1px 1px;
-  font: normal normal bold 20px /*arial*/;
-  width: 350px;
-  font-size: 2.3em;
+.os-img-container img {
+  width: 100%;
+  height: auto;
+/*  margin: 20px 0 20px 0;*/
 }
 
-/* Don't use any decoration for href */
-a.btn {
-  color: white;
+.os-dl-btn {
+  width: 50%;
   text-decoration: none;
 }
 
-a.btn:hover {
-  color: #e7dfdf;
-}
-
-.btn:hover, .btn:focus {
-  border: 1px solid #0e9e41;
-  background: #16f666;
-  background: -webkit-gradient(linear, left top, left bottom, from(#16f666), to(#0d973e));
-  background: -moz-linear-gradient(top, #16f666, #0d973e);
-  background: linear-gradient(to bottom, #16f666, #0d973e);
+/* Unfortunately the 'backdrop-filter' element isn't working even in FF >= 60.x,
+   which would be a nice use case here, using the classical CSS button method
+   then.
+   For more info see: https://webkit.org/blog/3632/introducing-backdrop-filters/
+*/
+.os-img-container .os-dl-btn {
+  position: absolute;
+  top: 46%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  background-color: #8f8f8f99;
   color: white;
+  font-size: 2.3em;
+  padding: 16px 24px;
+  border: none;
+  cursor: pointer;
+  border-radius: 10px;
   text-decoration: none;
 }
 
-.btn:active {
-  background: #0b7e34;
-  background: -webkit-gradient(linear, left top, left bottom, from(#0b7e34), to(#0b7e34));
-  background: -moz-linear-gradient(top, #0b7e34, #0b7e34);
-  background: linear-gradient(to bottom, #0b7e34, #0b7e34);
+.os-img-container .os-dl-btn:hover {
+  background-color: black;
   color: white;
 }
-
-.btn:before{
-  content:  "\0000a0";
-  display: inline-block;
-  height: 30px;
-  width: 30px;
-  line-height: 24px;
-  margin: 0 4px 0px -10px;
-  position: relative;
-  top: 0px;
-  left: -10px;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB1UlEQVRIibXVMWgUURAG4O82p0UIQUQsDkEEETuDjTYGbUUkVbCyEewsBEshHGIhCOHQ1lqtRKI22qRJJxYWASsRSzEiRgmRi8XOmnXvvc0pcWDYeTPz/pk3O/NeB4X/SBX4MGMf7obcPEGx23JbADiOAVaxEbwaumPGoCLDXdwMwHUs4U7w89BthE+3BWfkWNX6HrbwEL2EXw+Pw2eQOH22RDAfGxcz9qL2rRKZTwXo1JQHcB6HcAVfcAo/EwHqtBevMYkH+IgX+FSPdAlrkUnFl1MZZeSrjb1rgQlmsYllzCh/2Ensb8m6GeBg7OkGxnJgznbwEkdxAt9aQP+GpvAW7yjbbbElu3+VB1gvEobc6C/YrvHCGP6/gVcwh2n5Ycm1ao6nA3OlwC3l0Cz58yfP1bJKXYZ1/dD29M8oJ70X2Nk2/RFBquz7NVu/EWxfgI60aTccHuEVLigH7QOu4UmU8EymRLeV7XxROaj3lUP3DJ+r5HK36SRu4E3LCTYj26c4LdFRXaNU1fU77gbnaE+LbQgTyvtoKyJ2GnwY13EOZ2MtbEdC/x5fE3sr3vFFq5emyf2E/4g8zqOfCtLspCzVp7mNmz95J//ki9Zcp8o1Vlkq+RdF139qw2G1QgAAAABJRU5ErkJggg==") no-repeat left center transparent;
-  background-size: 100% 100%;
-}
-/* ^^^^ END copied content */
-
-.btn-download {
-  margin-top: 50px;
-  width: auto;
-}
-
-.btn-download:before {
-  left: 0px;
-}
+/* END Classes used within 'The Operating System' */
 
 .styled-href-blue h2 a,
 .styled-href-blue li a,