Modify the css for login modal to look good on smaller frame sizes

webapp/titanembeds/static/css/embedstyle.css

@@ -473,6 +473,112 @@ a {
   }
 }
 
+
+#loginmodal {
+  font-size: 9pt;
+}
+
+#loginmodal h4 {
+  font-size: 15pt;
+}
+
+#guest_login_instr {
+  margin: 0;
+}
+
+#loginmodal .flow-text {
+  font-size: 11pt;
+}
+
+@media screen and (max-width: 600px) {
+  #guest_login_instr {
+    display: none;
+  }
+
+  #loginmodal h4 {
+    font-size: 12pt;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  #modal_guildinfobox {
+    width: 100%;
+  }
+  
+  #modal_guildiconcircle {
+    float: left;
+  }
+  
+  #authfields {
+    width: 100%;
+  }
+  
+  #modal_guildiconcircle {
+    width: 55px;
+  }
+  
+  #modal_guildname {
+    margin: 5px;
+  }
+  
+  #authfield-choosetxt.flow-text {
+    font-size: 9pt;
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #authfields {
+    margin-top: 5px;
+  }
+  
+  #discordlogin_btn_warn {
+    display: none;
+  }
+  
+  #loginmodal a.btn, #loginmodal a.btn-large {
+    height: 30px;
+    line-height: 30px;
+    padding: 0;
+    font-size: 7pt;
+  }
+  
+  #loginmodal h4 {
+    display: none;
+  }
+  
+  #discordlogin_box {
+    width: 100%;
+  }
+  
+  #guestlogin_box {
+    width: 100%;
+  }
+  
+  #discordlogin_btn {
+    width: 100%;
+  }
+  
+  #custom_username_field {
+    margin-bottom: 0;
+  }
+  
+  #custom_username_field_label {
+    font-size: 6pt;
+  }
+  
+  #authfield-choosetxt {
+    font-size: 7pt;
+  }
+}
+
+@media screen and (max-width: 230px) {
+  #authfield-choosetxt {
+    display: none;
+  }
+}
+
 #nameplate {
   cursor: pointer;
   background: transparent;

webapp/titanembeds/templates/embed.html.j2

@@ -94,7 +94,7 @@
         <div class="modal-content">
           <h4>{{ login_greeting }}</h4>
           <div id="loginmodal-maincontent" class="row valign-wrap">
-            <div id="modal_guildinfobox" class="col m3 s12 center-align">
+            <div id="modal_guildinfobox" class="col s3 center-align">
               {% if guild['icon'] %}
               <img id="modal_guildiconcircle" class="circle" src="{{ generate_guild_icon( guild['id'], guild['icon']  ) }}">
               {% endif %}
@@ -105,21 +105,21 @@
               <a id="modal_invite_btn" class="waves-effect waves-light btn" target="_blank">discord.gg</a>
               {% endif %}
             </div>
-            <div class="col m9 s12">
+            <div id="authfields" class="col s9">
-              <p class="flow-text">{{ _("Please choose one of the following methods to authenticate!") }}</p>
+              <p id="authfield-choosetxt" class="flow-text">{{ _("Please choose one of the following methods to authenticate!") }}</p>
               <div class="progress" id="loginProgress" style="display: none;">
                   <div class="indeterminate"></div>
               </div>
               <div class="row">
-                <div class="col s12 l4">
+                <div id="discordlogin_box" class="col s6 l4">
                   <a id="discordlogin_btn" href="{% if not same_target %}{{ url_for("embed.login_discord", _external=True) }}{% else %}{{ url_for("user.login_authenticated", redirect=request.url+"&create_authenticated_user=true", _external=True) }}{% endif %}" class="waves-effect waves-light btn-large" {% if not same_target %}target="_blank"{% endif %}>{{ _("Discord Login") }}</a>
-                  <p>*{{ _("You will be invited into this server.") }}</p>
+                  <p id="discordlogin_btn_warn">*{{ _("You will be invited into this server.") }}</p>
                 </div>
                 {% if unauth_enabled %}
-                <div class="col s12 l8">
+                <div id="guestlogin_box" class="col s6 l8">
-                  <p>{{ _("Of course, you also have the option to login by picking a temporary username for your current browsing session.") }}</p>
+                  <p id="guest_login_instr">{{ _("Of course, you also have the option to login by picking a temporary username for your current browsing session.") }}</p>
                   <input id="custom_username_field" type="text" {% if session.unauthenticated and session.username %}value="{{ session['username'] }}"{% endif %}>
-                  <label class="active" for="custom_username_field">{{ _("Username (Hit ENTER/RETURN key to confirm)") }}</label>
+                  <label id="custom_username_field_label" class="active" for="custom_username_field">{{ _("Username (Hit ENTER/RETURN key to confirm)") }}</label>
                 </div>
                 {% endif %}
               </div>