Update responsive styles.

Author: toddbirchard

class_views/views.py

@@ -6,7 +6,6 @@
 from django.core.mail import send_mail
 from django.http import HttpResponseRedirect
 from django.shortcuts import get_object_or_404, render
-
 from django.views import View
 from django.views.generic import RedirectView
 from django.views.generic.base import TemplateView
@@ -18,6 +17,7 @@
 
 class GenericClassView(View):
     """Generic class-based view."""
+
     form_class = ContactForm
     initial = {"key": "value"}
     template_name = "form_template.html"

homepage/static/homepage/css/home.css

@@ -39,13 +39,6 @@
     .section-title {
         font-size: 1.1em !important;
     }
-
-    .card {
-        margin: 40px auto 0;
-        padding: 40px 20px;
-        width: 90%;
-        max-width: unset;
-    }
 }
 
 @media (max-width: 600px) {
@@ -67,7 +60,6 @@
     }
 
     .card {
-        padding: 35px 25px;
         margin: 0;
         height: 100%;
     }
@@ -147,7 +139,8 @@ svg {
     content: " ";
 }
 
-.tooltip-toggle::before, .tooltip-toggle::after {
+.tooltip-toggle::before,
+.tooltip-toggle::after {
     color: #efefef;
     font-family: monospace;
     font-size: 16px;
@@ -156,7 +149,10 @@ svg {
     pointer-events: none;
 }
 
-.tooltip-toggle:focus::before, .tooltip-toggle:focus::after, .tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
+.tooltip-toggle:focus::before,
+.tooltip-toggle:focus::after,
+.tooltip-toggle:hover::before,
+.tooltip-toggle:hover::after {
     -webkit-transition: all 0.75s ease;
     opacity: 1;
     transition: all 0.75s ease;
@@ -165,6 +161,5 @@ svg {
 .fas,
 i {
     font-size: .9em;
-    margin-left: 3px;
     opacity: .5;
-}
+}

homepage/static/homepage/css/styles.css

@@ -35,6 +35,7 @@ a {
     color: #0297f6;
     font-weight: 500;
     text-decoration: none;
+    white-space: nowrap;
     transition: all .2s ease;
 }
 
@@ -49,19 +50,15 @@ a:hover {
 
 .card {
     width: 900px;
-    max-width: 93%;
+    max-width: 90vw;
     height: fit-content;
-    margin: 80px auto 0;
-    padding: 50px;
+    margin: 5vw 5vw 0;
+    padding: 5vw;
     background: white;
     box-shadow: 0 0 5px rgba(65, 67, 144, 0.15);
 }
 
 @media (max-width: 800px) {
-    .card {
-        padding: 40px 0;
-        width: unset;
-    }
 
     .apps-container {
         justify-content: space-between;

poetry.lock

@@ -6,3 +6,4 @@ python-dotenv==1.0.0 ; python_version >= "3.10" and python_version < "4.0"
 sqlparse==0.4.4 ; python_version >= "3.10" and python_version < "4.0"
 typing-extensions==4.9.0 ; python_version >= "3.10" and python_version < "3.11"
 tzdata==2023.4 ; python_version >= "3.10" and python_version < "4.0" and sys_platform == "win32"
+uwsgi==2.0.23 ; python_version >= "3.10" and python_version < "4.0"

requirements.txt

@@ -39,12 +39,12 @@
     .section-title {
         font-size: 1.1em !important;
     }
+}
 
+@media(max-width: 800px) {
     .card {
-        margin: 40px auto 0;
-        padding: 40px 20px;
-        width: 90%;
-        max-width: unset;
+        margin: 0;
+        width: 100%;
     }
 }
 
@@ -65,12 +65,6 @@
     .section-title {
         font-size: 1.4em !important;
     }
-
-    .card {
-        padding: 35px 25px;
-        margin: 0;
-        height: 100%;
-    }
 }
 
 .part-title {
@@ -147,7 +141,8 @@ svg {
     content: " ";
 }
 
-.tooltip-toggle::before, .tooltip-toggle::after {
+.tooltip-toggle::before,
+.tooltip-toggle::after {
     color: #efefef;
     font-family: monospace;
     font-size: 16px;
@@ -156,7 +151,10 @@ svg {
     pointer-events: none;
 }
 
-.tooltip-toggle:focus::before, .tooltip-toggle:focus::after, .tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
+.tooltip-toggle:focus::before,
+.tooltip-toggle:focus::after,
+.tooltip-toggle:hover::before,
+.tooltip-toggle:hover::after {
     -webkit-transition: all 0.75s ease;
     opacity: 1;
     transition: all 0.75s ease;
@@ -165,6 +163,5 @@ svg {
 .fas,
 i {
     font-size: .9em;
-    margin-left: 3px;
     opacity: .5;
-}
+}

static/homepage/css/home.css

@@ -49,18 +49,16 @@ a:hover {
 
 .card {
     width: 900px;
-    max-width: 93%;
-    height: fit-content;
-    margin: 80px auto 0;
-    padding: 50px;
+    margin: 5vw 5vw 0;
+    padding: 5vw;
     background: white;
     box-shadow: 0 0 5px rgba(65, 67, 144, 0.15);
 }
 
 @media (max-width: 800px) {
     .card {
-        padding: 40px 0;
-        width: unset;
+        margin: 0;
+        width: 100%;
     }
 
     .apps-container {
@@ -84,13 +82,7 @@ a:hover {
     }
 }
 
-@media (max-width: 600px) {
-    .card {
-        width: 90%;
-        padding: 30px;
-        margin: 0;
-    }
-
+@media (max-width: 800px) {
     .app {
         margin-bottom: 30px;
     }