Remove gradients/replace with different title style

Author: klieret

static/css/core.css

@@ -84,18 +84,18 @@
 
 .hero {
   display: flex;
-  flex-direction: column;
-  height: 100px;
+  align-items: center;
   justify-content: center;
-  margin-bottom: 1em;
-  padding: 1em 0 1em 2.25em;
+  gap: 1rem;
+  height: 100px;
+  margin-bottom: 0.5em;
+  padding: 1em 0;
   font-family: var(--font-anta);
   font-size: var(--text-2xl);
-  background: linear-gradient(135deg, #fdfdfd 0%, #fdfdfd 20%, #01552b 100%);
 }
 
-:root[data-theme="dark"] .hero {
-  background: linear-gradient(135deg, #0b0b0b 0%, #0b0b0b 20%, #026134 100%);
+.hero img {
+  height: 3.5rem;
 }
 
 /* Logo styling for dark mode */

static/css/layout.css

@@ -201,11 +201,25 @@ nav {
 }
 
 /* Insights */
+.insights-container {
+    width: 75%;
+    margin: 0 auto;
+}
+
 .insight-card {
     padding-bottom: 2em;
     line-height: 1.4;
 }
 
+.insight-card a {
+    transition: color 0.3s;
+}
+
+.insight-card a:hover {
+    color: var(--accent);
+    border-bottom-color: transparent;
+}
+
 .insight-card p {
     margin: 0.25em 0;
 }
@@ -233,7 +247,7 @@ nav {
 
 /* Arenas grid */
 .arenas-container {
-    padding: 1rem;
+    padding: 0 1rem 1rem 1rem;
 }
 
 .arenas-grid {
@@ -281,6 +295,11 @@ nav {
 }
 
 /* Team grid */
+.team-container {
+    width: 75%;
+    margin: 0 auto;
+}
+
 .team-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

templates/arenas.html

@@ -2,7 +2,9 @@
 
 {% block content %}
 <div class="hero">
+    <img src="/static/images/logos/clash_g.svg" alt="Clash Green">
     <h1>Arenas</h1>
+    <img src="/static/images/logos/clash_r.svg" alt="Clash Red">
 </div>
 
 <div class="arenas-container">

templates/insights.html

@@ -2,19 +2,23 @@
 
 {% block content %}
   <div class="hero">
+    <img src="/static/images/logos/clash_g.svg" alt="Clash Green">
     <h1>Insights</h1>
+    <img src="/static/images/logos/clash_r.svg" alt="Clash Red">
   </div>
 
-  {% for page in pages | sort(attribute='date', reverse=True) %}
-    <div class="insight-card">
-      <a href="{{ url_for("page", path=page.path) }}">
-        <p class="insight-title">{{ page.title }}</p>
-        <p><span class="subtext">{{ page.date }}</span> &bull; {{ page.description }}</p>
-        <p>by {{ page.authors }}</p>
-      </a>
-    </div>
-  {% else %}
-    No posts yet!
-  {% endfor %}
+  <div class="insights-container">
+    {% for page in pages | sort(attribute='date', reverse=True) %}
+      <div class="insight-card">
+        <a href="{{ url_for("page", path=page.path) }}">
+          <p class="insight-title">{{ page.title }}</p>
+          <p><span class="subtext">{{ page.date }}</span> &bull; {{ page.description }}</p>
+          <p>by {{ page.authors }}</p>
+        </a>
+      </div>
+    {% else %}
+      No posts yet!
+    {% endfor %}
+  </div>
 
 {% endblock content %}

templates/team.html

@@ -2,9 +2,12 @@
 
 {% block content %}
 <div class="hero">
+    <img src="/static/images/logos/clash_g.svg" alt="Clash Green">
     <h1>Team</h1>
+    <img src="/static/images/logos/clash_r.svg" alt="Clash Red">
 </div>
 
+<div class="team-container">
 <div class="team-grid">
 {% for contributor in data.contributors %}
     <a href="{{ contributor.link }}" class="team-card">
@@ -23,7 +26,7 @@ <h1>Team</h1>
 {% endfor %}
 </div>
 
-<div style="width:95%; margin:0 auto; display:flex; flex-direction:column;">
+<div style="display:flex; flex-direction:column;">
 <h3 style="margin: 1.5em 0 1em 0">Get in Touch</h3>
 <span>
 We're excited about future work on CodeClash!
@@ -49,5 +52,7 @@ <h3 style="margin: 2em 0 1em 0">Funding Support</h3>
     </a>
 {% endfor %}
 </div>
+</div>
+
 </div>
 {% endblock content %}