CSS and style fixes to improve mobile experience.

electionscience · Jul 23, 2024 · 703caa0 · 703caa0
1 parent ed8e611
commit 703caa0
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/approval_polls/settings.py b/approval_polls/settings.py
@@ -29,7 +29,8 @@
 
 DATABASES = {
     "default": {
-        "ENGINE": "django.db.backends.sqlite3",  # Add 'postgresql_psycopg2', 'mysql', 'sqlite3' or 'oracle'.
+        # Add 'postgresql_psycopg2', 'mysql', 'sqlite3' or 'oracle'.
+        "ENGINE": "django.db.backends.sqlite3",
         "NAME": db_path,  # Or path to database file if using sqlite3.
     }
 }
@@ -216,7 +217,8 @@
     "django.contrib.auth.backends.ModelBackend",
 ]  # Change your authentication backend
 
-FIDO_SERVER_ID = "vote.electionscience.org"  # Server rp id for FIDO2, it the full domain of your project
+# Server rp id for FIDO2, it the full domain of your project
+FIDO_SERVER_ID = "vote.electionscience.org"
 FIDO_SERVER_NAME = "vote.electionscience.org"
 if DEBUG:
     FIDO_SERVER_ID = (

diff --git a/approval_polls/staticfiles/style.css b/approval_polls/staticfiles/style.css
@@ -1,6 +1,7 @@
 .bg-primary {
   --bs-bg-opacity: 1;
   background-color: #000000 !important;
+  border-color: #000 !important;
 }
 
 .btn-secondary {
@@ -15,26 +16,28 @@
 }
 
 .btn {
-    background-color: var(--token-80553515-7ab0-44ac-b981-96d7680674fd, #ffffff);
-    --border-bottom-width: 1px;
-    --border-color: var(--token-8333892f-efe4-41b8-b3da-b102a8c97a9f, #d4d4d4);
-    border-radius: 3px;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
-    gap: 0px;
-    padding: 8px;
+  background-color: var(--token-80553515-7ab0-44ac-b981-96d7680674fd, #ffffff);
+  --border-bottom-width: 1px;
+  --border-color: var(--token-8333892f-efe4-41b8-b3da-b102a8c97a9f, #d4d4d4);
+  border-radius: 3px;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
+  gap: 0px;
+  padding: 8px;
 }
 
 a {
   color: #000;
-  font-weight: 600
+  font-weight: 600;
 }
 
 a:hover {
   color: #000;
 }
 
 .btn-primary {
-  background-color: #000;`
+  background-color: #000;
   border-color: #fff;
 }
 
@@ -79,32 +82,42 @@ a:hover {
 }
 
 body {
-  font-family: var(--framer-blockquote-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
+  font-family: var(
+    --framer-blockquote-font-family,
+    var(--framer-font-family, Inter, Inter Placeholder, sans-serif)
+  );
 }
 
 @font-face {
   font-family: Fragment Mono;
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(https://fonts.gstatic.com/s/fragmentmono/v4/4iCr6K5wfMRRjxp0DA6-2CLnB45HhrUI.woff2) format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
+  src: url(https://fonts.gstatic.com/s/fragmentmono/v4/4iCr6K5wfMRRjxp0DA6-2CLnB45HhrUI.woff2)
+    format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
 }
 
 @font-face {
   font-family: Fragment Mono;
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(https://fonts.gstatic.com/s/fragmentmono/v4/4iCr6K5wfMRRjxp0DA6-2CLnB41HhrUI.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
+  src: url(https://fonts.gstatic.com/s/fragmentmono/v4/4iCr6K5wfMRRjxp0DA6-2CLnB41HhrUI.woff2)
+    format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
   font-family: Fragment Mono;
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(https://fonts.gstatic.com/s/fragmentmono/v4/4iCr6K5wfMRRjxp0DA6-2CLnB4NHhg.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
-}
+  src: url(https://fonts.gstatic.com/s/fragmentmono/v4/4iCr6K5wfMRRjxp0DA6-2CLnB4NHhg.woff2)
+    format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/approval_polls/templates/base.html b/approval_polls/templates/base.html
@@ -96,33 +96,32 @@
         </nav>
         <div class="container mt-5 mb-5">
             <div class="row justify-content-center">
-                <div class="col-8">
+                <div class="col-sm-auto">
                     {% block content %}
                     {% endblock content %}
                 </div>
                 <div class="row-fluid mt-5">
                     <div class="col-md-12">
                         <hr>
                         <p class="text-center">
-                            This poll uses approval voting, instead of the more common plurality system.
+                            This poll uses <a href="https://www.electionscience.org/approval-voting">approval voting</a>, instead of the more common plurality system.
                             <br />
                             <a href="https://www.electionscience.org/approval-voting">Learn why it's better</a> and
                             <a href="{% url 'create' %}" target="_top">create your own poll</a>.
                         </p>
                         <div class="container mt-5">
-                            <div class="col-3 mx-auto">
-                                <a class="img-fluid  text-center"
-                                   href="https://www.electionscience.org"
-                                   target="_blank">
-                                    <img class="img-fluid  align-self-center mr-3"
-                                         src="{% static 'images/ces-horizontal-stack.png' %}"
-                                         width="100%"
-                                         height="100%"
-                                         border="0"
-                                         alt="Election Science Logo">
-                                </a>
-                            </div>
-                        </div>
+                          <div class="row justify-content-center">
+                              <div class="col-12 col-sm-10 col-md-8 col-lg-6 text-center">
+                                  <a href="https://www.electionscience.org" target="_blank" rel="noopener noreferrer">
+                                      <img src="{% static 'images/ces-horizontal-stack.png' %}"
+                                           class="img-fluid mx-auto d-block"
+                                           alt="Election Science Logo"
+                                           style="max-width: 100%; min-width: 200px;">
+                                  </a>
+                              </div>
+                          </div>
+                      </div>
+
                     </div>
                 </div>
             </div>