download style WIP

Author: SPRINX0\prochazka

assets/css/_layout.scss

@@ -39,3 +39,89 @@ div.highlight {
 .is-linux { display: none; }
 .is-mac { display: none; }
 .is-windows { display: none; }
+
+// Download page styling
+.download-section {
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    border: 1px solid #e9ecef;
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
+    transition: all 0.3s ease;
+
+    &:hover {
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+    }
+}
+
+.os-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #e9ecef;
+}
+
+.os-icon-container {
+    background: linear-gradient(135deg, #188eac 0%, #1a9bc0 100%);
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1.5rem;
+    box-shadow: 0 4px 12px rgba(24, 142, 172, 0.3);
+}
+
+.os-icon {
+    font-size: 1.8rem;
+    color: white;
+}
+
+.os-info {
+    flex: 1;
+}
+
+.os-name {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #2c3e50;
+    margin: 0 0 0.5rem 0;
+    letter-spacing: -0.02em;
+}
+
+.os-description {
+    color: #6c757d;
+    font-size: 0.95rem;
+    margin: 0;
+    font-weight: 400;
+}
+
+.download-options {
+    .button {
+        border-radius: 8px;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        border: 2px solid transparent;
+
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(24, 142, 172, 0.25);
+        }
+
+        &.is-primary {
+            background: linear-gradient(135deg, #188eac 0%, #1a9bc0 100%);
+            
+            &:hover {
+                background: linear-gradient(135deg, #156d85 0%, #1788a0 100%);
+            }
+        }
+    }
+
+    .column {
+        margin-bottom: 0.75rem;
+    }
+}

layouts/shortcodes/download.html

@@ -12,8 +12,8 @@ <h2>Download DbGate Premium</h2>
     Download from dbgate.io
 </a>
 
-<a class="button is-medium is-primary ml-4" href="/review"
-    data-goatcounter-click="button-write-review" data-goatcounter-title="Button: Write a review">
+<a class="button is-medium is-primary ml-4" href="/review" data-goatcounter-click="button-write-review"
+    data-goatcounter-title="Button: Write a review">
     <i class="fas fa-comment-dollar mr-2"></i>
     Obtain PREMIUM license for free
 </a>
@@ -31,14 +31,17 @@ <h2>Download DbGate Community</h2>
 
 {{ range $items }}
 {{ $osname := .text }}
-<div class="columns mb-6 ">
-    <div class="column is-3">
-        <button class="button is-medium is-static mr-5 is-fullwidth">
-            <i class="{{.icon}} mr-2"></i>
-            {{.text}}
-        </button>
+<div class="download-section mb-6">
+    <div class="os-header">
+        <div class="os-icon-container">
+            <i class="{{.icon}} os-icon"></i>
+        </div>
+        <div class="os-info">
+            <h3 class="os-name">{{.text}}</h3>
+            <p class="os-description">{{ if eq .text "Windows" }}Compatible with Windows 10, 11 and Server editions{{ else if eq .text "Linux" }}Supports major Linux distributions{{ else if eq .text "MacOS" }}For macOS 10.15 Catalina and later{{ else if eq .text "Web" }}Platform-independent solutions{{ else if eq .text "Source code" }}Build from source{{ end }}</p>
+        </div>
     </div>
-    <div class="column">
+    <div class="download-options">
         <div class="columns is-multiline">
             {{ range .items }}
 
@@ -79,8 +82,8 @@ <h2>Please provide your e-mail address</h2>
             <div class="field">
                 <label class="label">Email</label>
                 <div class="control has-icons-left has-icons-right">
-                    <input class="input" type="email" placeholder="Your e-mail" oninput="emailChanged()" style="width: 400px"
-                        id="email-input" />
+                    <input class="input" type="email" placeholder="Your e-mail" oninput="emailChanged()"
+                        style="width: 400px" id="email-input" />
                     <span class="icon is-small is-left">
                         <i class="fas fa-envelope"></i>
                     </span>
@@ -113,8 +116,8 @@ <h2>Please provide your e-mail address</h2>
             <div class="field">
                 <label class="label">How did you hear about DbGate? - optional</label>
                 <div class="control">
-                    <input class="input" type="text" placeholder="Your answer here helps us very much" oninput="emailChanged()" style="width: 400px"
-                        id="referer-input" />
+                    <input class="input" type="text" placeholder="Your answer here helps us very much"
+                        oninput="emailChanged()" style="width: 400px" id="referer-input" />
                 </div>
             </div>
 
@@ -125,7 +128,7 @@ <h2>Please provide your e-mail address</h2>
                     Download
                 </a>
 
-                <a href='#' id="download-no-email" >Continue without email</a>
+                <a href='#' id="download-no-email">Continue without email</a>
             </div>
         </div>
     </div>