From b75e761b156b518cb74c8ce359ae2e5b4bba6adb Mon Sep 17 00:00:00 2001
From: Laurent <laurent@staxriver.com>
Date: Fri, 12 Jul 2024 15:52:44 +0200
Subject: [PATCH] minor improvements for download page

---
 tournaments/static/tournaments/css/basics.css |  4 ++
 .../static/tournaments/css/blue_style.css     | 37 +++++++++++++++++--
 .../templates/tournaments/download.html       | 20 +++++-----
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/tournaments/static/tournaments/css/basics.css b/tournaments/static/tournaments/css/basics.css
index 148c14b..13cc1b7 100644
--- a/tournaments/static/tournaments/css/basics.css
+++ b/tournaments/static/tournaments/css/basics.css
@@ -6,6 +6,10 @@
 
 /* PADDING */
 
+.padding15 {
+    padding: 15px;
+}
+
 .padding20 {
     padding: 20px;
 }
diff --git a/tournaments/static/tournaments/css/blue_style.css b/tournaments/static/tournaments/css/blue_style.css
index 45d6510..f1c1690 100644
--- a/tournaments/static/tournaments/css/blue_style.css
+++ b/tournaments/static/tournaments/css/blue_style.css
@@ -196,13 +196,44 @@ p {
     height: 50px;
 }
 
+#picto-bubble {
+    /* height: 180px; */
+    padding: 20px 70px;
+}
+
+@media print, screen and (min-width: 40em) {
+    #picto-bubble {
+        height: 200px;
+        padding: 30px;
+    }
+}
+
+/* @media print, screen and (min-width: 45em) {
+    #picto-bubble {
+        height: 200px;
+        padding: 40px;
+    }
+} */
+
+@media print, screen and (min-width: 60em) {
+    #picto-bubble {
+        height: 250px;
+        padding: 40px;
+    }
+}
+
+@media print, screen and (min-width: 75em) {
+    #picto-bubble {
+        height: 230px;
+        padding: 40px;
+    }
+}
+
 .blue-bubble {
-    padding: 40px;
     color: white;
     background-color: #233876;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
-    height: 230px;
 }
 .blue-bubble p {
     font-family: "Montserrat-SemiBold";
diff --git a/tournaments/templates/tournaments/download.html b/tournaments/templates/tournaments/download.html
index 3f4d26d..89ce8f7 100644
--- a/tournaments/templates/tournaments/download.html
+++ b/tournaments/templates/tournaments/download.html
@@ -85,12 +85,12 @@
 
             <section class="grid-x topmargin40">
 
-                <div class="cell large-6 topblock my-block">
+                <div class="cell medium-6 large-6 topblock my-block">
                     <img src="{% static 'tournaments/images/photo1@2x.png' %}" />
                     <img src="{% static 'tournaments/images/photo2@2x.png' %}" class="topmargin40" />
                 </div>
 
-                <div class="cell large-6 topblock my-block">
+                <div class="cell medium-6 large-6 topblock my-block">
                     <div class="bubble">
                         <h4 class="orange">Avant le tournoi</h4>
                         <ul>
@@ -157,8 +157,8 @@
 
             <section class="grid-x topmargin40">
 
-                <div class="cell medium-6 large-3 padding20">
-                    <div class="center bubble blue-bubble">
+                <div class="cell medium-6 large-3 padding15">
+                    <div id="picto-bubble" class="center bubble blue-bubble">
                         <img src="{% static 'tournaments/images/picto_stopwatch@2x.png' %}" class="img-picto" />
                         <p>
                             Moins de temps d'attente entre les matchs
@@ -166,8 +166,8 @@
                     </div>
                 </div>
 
-                <div class="cell medium-6 large-3 padding20">
-                    <div class="center bubble blue-bubble">
+                <div class="cell medium-6 large-3 padding15">
+                    <div id="picto-bubble" class="center bubble blue-bubble">
                         <img src="{% static 'tournaments/images/picto_send@2x.png' %}" class="img-picto" />
                         <p>
                             Convocations plus rapides
@@ -175,8 +175,8 @@
                     </div>
                 </div>
 
-                <div class="cell medium-6 large-3 padding20">
-                    <div class="center bubble blue-bubble">
+                <div class="cell medium-6 large-3 padding15">
+                    <div id="picto-bubble" class="center bubble blue-bubble">
                         <img src="{% static 'tournaments/images/picto_share@2x.png' %}" class="img-picto" />
                         <p>
                             Suivi des résultats pour tous avec envoi aux amis
@@ -184,8 +184,8 @@
                     </div>
                 </div>
 
-                <div class="cell medium-6 large-3 padding20">
-                    <div class="center bubble blue-bubble">
+                <div class="cell medium-6 large-3 padding15">
+                    <div id="picto-bubble" class="center bubble blue-bubble">
                         <img src="{% static 'tournaments/images/picto_medal@2x.png' %}" class="img-picto" />
                         <p>
                             Indication du nombre de points gagnés