fix: better buttons positionning for the homepage

umap/static/umap/content.css

@@ -145,6 +145,7 @@ h2.tabs a:hover {
 }
 .highlights {
     text-align: center;
+    margin-bottom: calc(var(--box-margin) * 2);
 }
 .highlights img.colophon {
     display: inline-block;
@@ -183,8 +184,6 @@ input[type="submit"],
 }
 .wrapper .button,
 .wrapper input {
-    height: 56px;
-    line-height: 43px;
     font-weight: bold;
 }
 

umap/static/umap/css/form.css

@@ -83,7 +83,7 @@ input[type="submit"] {
     border-radius: 2px;
     font-weight: normal;
     cursor: pointer;
-    padding: 3px 12px;
+    padding: var(--button-padding);
     border: none;
     text-decoration: none;
     background-color: white;
@@ -342,11 +342,12 @@ input.switch:checked ~ label:after {
     width: 100%
 }
 .button-bar {
-    grid-gap: 7px;
+    grid-gap: var(--gutter);
 }
 .umap-multiplechoice.by2,
 .button-bar.half {
     grid-template-columns: 1fr 1fr;
+    justify-items: center;
 }
 .button-bar.by3,
 .button-bar.by5,
@@ -363,6 +364,7 @@ input.switch:checked ~ label:after {
 .button-bar .button,
 .button-bar [type="button"] {
     display: inline-block;
+    width: 100%;
 }
 .umap-multiplechoice input[type='radio'] {
     display: none;

umap/static/umap/nav.css

@@ -41,7 +41,7 @@ footer .i18n_switch {
     display: flex;
     flex-direction: column;
 }
-.umap-nav a {
+.umap-nav a:not(.button) {
     color: var(--color-darkBlue);
     padding: .4rem;
 }
@@ -51,7 +51,7 @@ footer .i18n_switch {
 .umap-nav h1 {
     margin-bottom: 0;
 }
-.umap-nav h1 a {
+.umap-nav h1 a:not(.button) {
     background-image: url("./img/logo.svg");
     background-position: left center;
     background-repeat: no-repeat;
@@ -74,7 +74,6 @@ html[dir="rtl"] .umap-nav h1 a {
 .umap-nav .button,
 .umap-nav .button:hover {
     text-decoration: none;
-    min-width: 150px;
     margin-inline-start: 1rem;
 }
 

umap/static/umap/vars.css

@@ -24,6 +24,7 @@
     --button-primary-color: var(--color-darkBlue);
     --button-neutral-background: var(--color-lightGray);
     --button-neutral-color: var(--color-darkGray);
+    --button-padding: 8px 16px;
 
     /* Sizes and spaces */
     --gutter: 8px;

umap/templates/umap/about_summary.html

@@ -60,10 +60,10 @@
       {% spaceless %}
         <div class="button-bar {% if demo_map %}half{% endif %}">
           {% if not UMAP_READONLY %}
-            <a href="{% url 'map_new' %}" class="button button-primary half">{% trans "Create a map" %}</a>
+            <a href="{% url 'map_new' %}" class="button button-primary">{% trans "Create a map" %}</a>
           {% endif %}
           {% if demo_map %}
-            <a href="{{ demo_map.get_absolute_url }}" class="button half neutral">{% trans "Play with the demo" %}</a>
+            <a href="{{ demo_map.get_absolute_url }}" class="button neutral">{% trans "Play with the demo" %}</a>
           {% endif %}
         </div>
       {% endspaceless %}