Merge branch 'main' of https://stax.alwaysdata.net/gitea/staxriver/padelclub_backend

tournaments/static/tournaments/css/basics.css

@@ -6,6 +6,10 @@
 
 /* PADDING */
 
+.padding15 {
+    padding: 15px;
+}
+
 .padding20 {
     padding: 20px;
 }

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";

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="cell medium-6 large-3 padding15">
-                    <div class="center bubble blue-bubble">
+                    <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="cell medium-6 large-3 padding15">
-                    <div class="center bubble blue-bubble">
+                    <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="cell medium-6 large-3 padding15">
-                    <div class="center bubble blue-bubble">
+                    <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="cell medium-6 large-3 padding15">
-                    <div class="center bubble blue-bubble">
+                    <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