feat: added better css styling

widget_casanatics/calendar_app/templates/calendar_app/calendar.html

@@ -6,7 +6,7 @@
 <h1>Widget's Calendar of Activities</h1>
 <ul>
     {% for object in object_list %}
-        <li style="list-style-type: circle;"><a href="{{ object.get_absolute_url }}">{{ object.activity }}</a></li>
+        <li><a href="{{ object.get_absolute_url }}">{{ object.activity }}</a></li>
     {% endfor %}
 </ul>
 

widget_casanatics/static/css/style.css

-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;500&family=Roboto:wght@700&display=swap');
 
 :root {
   --fg: #b7bdf8;
@@ -8,18 +8,62 @@
 body {
   background-color: var(--bg);
   color: var(--fg);
+  padding: 2rem;
+  text-align: center;
 }
 
 a:visited {
   color: var(--fg);
 }
+
 a:link {
   color: var(--fg);
 }
+
+a:hover {
+  color: var(--desert);
+  font-size: 1.1rem;
+}
+
+a {
+  transition: color 0.25s ease;
+  transition: font-size 0.1s ease;
+  font-family: 'Roboto';
+  text-decoration: none;
+}
+
 ul {
   list-style-type: none;
+  padding: 0;
+}
+
+li {
+  padding: 0.15rem;
 }
 
 h1 {
   font-family: 'Poppins', sans-serif;
 }
+
+h2 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 200;
+}
+
+button {
+  border-radius: 0.15rem;
+  padding: 0.5rem;
+  border: none;
+  background-color: var(--desert);
+  color: var(--bg);
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  text-transform: capitalize;
+  box-shadow: 6px 5px 14px 1px rgba(19, 8, 54, 0.64);
+  -webkit-box-shadow: 6px 5px 14px 1px rgba(19, 8, 54, 0.64);
+  -moz-box-shadow: 6px 5px 14px 1px rgba(19, 8, 54, 0.64);
+}
+
+.nav-bar {
+  padding: 0.5rem;
+}