firstboot: Make logo image responsive during first setup

- Earlier the main logo image was not responsive. In a mobile layout, it would
overflow the page. Fix this by using correct CSS classes.

- Also move the message to bottom of the log (to be later replaced by the a
spinner).

Tests:

- Remove /var/lib/plinth/plinth.sqlite3 and start service. It will perform
first setup operations. During this time, visit web interface in mobile layout
and notice that logo is taking 100% of the width but not overflowing.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/templates/first_setup.html

@@ -13,6 +13,11 @@ no-brand
 
 {% block content %}
 
+  <div class="logo">
+    <img class="firstboot img-fluid" alt="{{ box_name }}"
+         src="{% static 'theme/img/freedombox-logo-standard.svg' %}"/>
+  </div>
+
   {% if is_first_setup_running %}
     <div class="alert alert-warning" role="alert">
       {% blocktrans trimmed %}
@@ -22,9 +27,4 @@ no-brand
     </div>
   {% endif %}
 
-  <p class="text-center">
-    <img src="{% static 'theme/img/freedombox-logo-standard.svg' %}"
-         alt="{{ box_name }}" width="640"/>
-  </p>
-
 {% endblock %}