From 40335b59515e4f974477b275e3209c991c8a87c1 Mon Sep 17 00:00:00 2001
From: Robert Martinez <mail@mray.de>
Date: Fri, 28 Sep 2018 14:55:40 +0200
Subject: [PATCH] Change card text style and position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This should close #1306 – changing text styles and position.

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/cards.html          |  2 +-
 static/themes/default/css/plinth.css | 23 ++++++++++++++---------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/plinth/templates/cards.html b/plinth/templates/cards.html
index 7edf9a75f..9bc5ed742 100644
--- a/plinth/templates/cards.html
+++ b/plinth/templates/cards.html
@@ -37,6 +37,7 @@
         {% for item in submenu.sorted_items %}
           <div class="card thumbnail">
             <a href="{{ item.url }}" class="nav-link">
+              <div class="card-title">{{ item.name }}</div>
               <div class="card-icon">
                 {% if 'glyphicon-' in item.icon %}
                   <span class="{{ item.icon }} glyphicon"></span>
@@ -44,7 +45,6 @@
                   <img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/>
                 {% endif %}
               </div>
-              <div class="card-title">{{ item.name }}</div>
               <div class="card-description">{{ item.short_description}}</div>
             </a>
           </div>
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index eb7c06eee..a4ad23450 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -327,21 +327,26 @@ a.menu_link_active {
 
 .card .nav-link {
     display: block;
-    padding: 20px 4px 4px 4px;
-}
-
-.card-title, .card-description {
-    margin: 4px;
-    color: #333;
+    padding: 4px;
+    color: #646464;
 }
 
 .card-title {
-    font-weight: bold;
-    font-size: 1.75rem;
+    font-style: italic;
+    font-weight: 800;
+    font-size: 20px;
+    padding: 12px 0;
 }
 
 .card-description {
-    font-size: small;
+   font-size: 18px;
+   font-weight: 400;
+   padding: 12px 0;
+}
+
+.card-description {
+    color: #646464;
+    font-size: 12px;
 }
 
 .card-icon {