refactor(UI): update contest routes and styles

Simplified contest route URLs by removing the domain, now using relative paths. Utilized a proxy function for banner URLs for enhanced handling. Revamped CSS styling for a darker theme, improving readability and updating contest display to be more flexible and mobile-friendly. Removed deprecated elements from the template to streamline the presentation.

src/structables/routes/contest.py

@@ -31,12 +31,12 @@ def init_contest_routes(app):
         for contest in contests:
             contest_details = {
                 "title": contest["title"],
-                "link": f"https://www.instructables.com/{contest['urlString']}",
+                "link": f"/{contest['urlString']}",
                 "deadline": contest["deadline"],
                 "startDate": contest["startDate"],
                 "numEntries": contest["numEntries"],
                 "state": contest["state"],
-                "bannerUrl": contest["bannerUrlMedium"],
+                "bannerUrl": proxy(contest["bannerUrlMedium"]),
             }
             contest_list.append(contest_details)
 
@@ -139,8 +139,8 @@ def init_contest_routes(app):
         contest_list = []
         for contest in contests:
             contest_details = {
-                "link": f"https://www.instructables.com/{contest['urlString']}",
+                "link": f"/{contest['urlString']}",
-                "img": contest["bannerUrlMedium"],
+                "img": proxy(contest["bannerUrlMedium"]),
                 "alt": contest["title"],
                 "title": contest["title"],
                 "deadline": contest["deadline"],

src/structables/static/css/style.css

@@ -6,6 +6,9 @@
   --code-bg: #20232a;
   --code-color: #969ba6;
   --border-color: lightgrey;
+  --background-color: #1e1e2e;
+  --card-background: #2b2e3b;
+  --text-color: #f0f0f0;
 }
 
 body {
@@ -17,6 +20,7 @@ body {
   color: var(--main-color);
   padding: 0 10px;
   hyphens: auto;
+  background-color: var(--background-color);
 }
 
 a {
@@ -63,92 +67,94 @@ blockquote {
   margin-right: 10px;
 }
 
-.navbar-logo {
-  height: 64px;
-}
-
-.card {
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.card-body {
-  flex: 1;
-  padding: 1rem;
-}
-
-.card-footer {
-  padding: 1rem;
-  background-color: #f8f9fa;
-  border-top: 1px solid #ddd;
-  margin-top: auto;
-}
-
-.card-img-top {
-  max-width: 100%;
-  height: auto;
-  object-fit: cover;
-}
-
-.navbar-collapse {
-  display: flex;
-  justify-content: space-between;
-}
-
-.navbar-nav {
-  flex-direction: row;
-}
-
-.nav-item {
-  margin-left: 1rem;
-}
-
-@media (max-width: 768px) {
-  .navbar-nav {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .nav-item {
-    margin-left: 0;
-    margin-bottom: 0.5rem;
-  }
-
-  .navbar-collapse {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .form-control {
-    width: 100%;
-    margin-bottom: 0.5rem;
-  }
-}
-
 .contest-list {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-around;
   gap: 20px;
+  margin: 20px 0;
 }
 
-.contest-item {
+.contest-list-item {
-  background-color: #fff;
+  background-color: var(--card-background);
   padding: 20px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 500px;
+  color: var(--text-color);
+  text-align: center;
 }
 
-.contest-item img {
+.contest-list-item img {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
-  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.closed-contests {
+  margin-top: 40px;
+}
+
+.closed-contest {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.closed-contest-contest {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin-bottom: 15px;
+}
+
+.closed-contest-winner {
+  display: inline-block;
+  max-width: 200px;
+  margin: 10px;
+  text-align: center;
+  color: var(--text-color);
+}
+
+.closed-contest-winner-img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin-bottom: 5px;
+}
+
+.ible-small {
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.container {
+  margin-top: 20px !important;
+}
+
+header {
+  margin-bottom: 50px;
+}
+
+.wrap {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.navbar-logo {
+  height: 64px;
+}
+
+.img-fluid,
+video,
+iframe {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.text-muted {
+  color: #6c757d !important;
 }
 
 .pagination {
@@ -193,14 +199,6 @@ blockquote {
   cursor: not-allowed;
 }
 
-.container {
-  margin-top: 20px !important;
-}
-
-header {
-  margin-bottom: 50px;
-}
-
 .go_here_link {
   background-color: #4caf50;
   border: none;
@@ -216,30 +214,6 @@ header {
   color: black;
 }
 
-.wrap {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-.img-fluid {
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-video {
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-iframe {
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.text-muted {
-  color: #6c757d !important;
-}
-
 .sitemap-group {
   margin-top: 2em;
   display: inline-block;
@@ -253,7 +227,7 @@ iframe {
 }
 
 .sitemap-group .card {
-  background-color: var(--primary-bg);
+  background-color: var(--background-color);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   box-shadow: 0 2px 4px var(--shadow-color);

src/structables/templates/contests.html

@@ -9,7 +9,7 @@
             {% for contest in contests %}
             <div class="contest-list-item">
                 <a href="{{ contest.link }}">
-                    <img src="{{ contest.img }}" alt="{{ contest.alt }}" style="max-width:500px;">
+                    <img src="{{ contest.img }}" alt="{{ contest.alt }}">
                 </a>
                 <h2>{{ contest.title }}</h2>
                 <p>Closes: {{ contest.deadline }}</p>
@@ -17,25 +17,5 @@
             </div>
             {% endfor %}
         </div>
-        <div class="closed-contests" id="contest-winners">
-            <h2>Winner's Circle</h2>
-            {% for closed in closed %}
-            <div class="closed-contest">
-                <a href="{{ closed.link }}"><img class="closed-contest-contest" src="{{ closed.img }}"
-                        alt="{{ closed.alt }}"></a>
-                {% for featured_items in closed.featured_items %}
-                <div class="closed-contest-winner">
-                    <a href="{{ featured_items.link }}">
-                        <img class="closed-contest-winner-img" src="{{ featured_items.img }}"
-                            alt="{{ featured_items.title}}">
-                        <br>
-                        <b>{{ featured_items.title }}</b>
-                    </a>
-                    <p>by <a href="{{ featured_items.author_link }}">{{ featured_items.author }}</a></p>
-                </div>
-                {% endfor %}
-            </div>
-            {% endfor %}
-        </div>
     </center>
 {% endblock %}