minor refactoring

berkeleymt · Oct 14, 2023 · becf48b · becf48b
1 parent 430ef09
commit becf48b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 59 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -36,57 +36,55 @@
     onload="renderMathInElement(document.body);"></script>
 </head>
 
-<body>
-  <div class="max-w-4xl p-8 mx-auto flex flex-col gap-8">
-    {% block header %}
-    <nav class="flex flex-col items-center gap-4">
-      <a href="/"><img src="/assets/logo.png" alt="BMT Logo" width="80"></a>
-      <p class="text-2xl font-bold">Berkeley Math Tournament</p>
-
-      <div class="flex gap-4">
-        {{ macros::nav_link(path="@/_index.md", label="Home") }}
-        {{ macros::nav_link(path="@/news/_index.md", label="News") }}
-        {{ macros::nav_link(path="@/about.md", label="About") }}
-        {{ macros::nav_link(path="@/sponsors/index.md", label="Sponsors") }}
-        {{ macros::nav_link(path="@/events/bmt-2023.md", label="BMT 2023") }}
-      </div>
-    </nav>
-    {% endblock %}
+<body class="max-w-4xl p-8 mx-auto flex flex-col gap-8">
+  {% block header %}
+  <nav class="flex flex-col items-center gap-4">
+    <a href="/"><img src="/assets/logo.png" alt="BMT Logo" width="80"></a>
+    <p class="text-2xl font-bold">Berkeley Math Tournament</p>
+
+    <div class="flex gap-4">
+      {{ macros::nav_link(path="@/_index.md", label="Home") }}
+      {{ macros::nav_link(path="@/news/_index.md", label="News") }}
+      {{ macros::nav_link(path="@/about.md", label="About") }}
+      {{ macros::nav_link(path="@/sponsors/index.md", label="Sponsors") }}
+      {{ macros::nav_link(path="@/events/bmt-2023.md", label="BMT 2023") }}
+    </div>
+  </nav>
+  {% endblock %}
 
-    <hr>
+  <hr>
 
-    <div class="flex flex-col gap-8">
-      {% block content %}{% endblock %}
-    </div>
+  <div class="flex flex-col gap-8">
+    {% block content %}{% endblock %}
+  </div>
 
-    <hr>
+  <hr>
 
-    {% block footer %}
-    <div class="flex flex-col items-center justify-between md:items-start text-center md:flex-row gap-4 mb-12">
-      <div class="flex flex-col gap-6 items-center md:items-start">
-        <img class="-ml-1 grayscale brightness-0" src="/assets/logo.png" alt="BMT Logo" width="50">
+  {% block footer %}
+  <div class="flex flex-col items-center justify-between md:items-start text-center md:flex-row gap-4 mb-12">
+    <div class="flex flex-col gap-6 items-center md:items-start">
+      <img class="-ml-1 grayscale brightness-0" src="/assets/logo.png" alt="BMT Logo" width="50">
 
-        <div class="flex gap-4 text-xl">
-          <a href="https://www.instagram.com/berkeley_mt/"><i class="bi bi-instagram"></i></a>
-          <a href="https://www.tiktok.com/@berkeley_mt"><i class="bi bi-tiktok"></i></a>
-          <a href="mailto:[email protected]"><i class="bi bi-envelope-fill"></i></a>
-        </div>
+      <div class="flex gap-4 text-xl">
+        <a href="https://www.instagram.com/berkeley_mt/"><i class="bi bi-instagram"></i></a>
+        <a href="https://www.tiktok.com/@berkeley_mt"><i class="bi bi-tiktok"></i></a>
+        <a href="mailto:[email protected]"><i class="bi bi-envelope-fill"></i></a>
       </div>
+    </div>
 
-      <div class="flex flex-col gap-4 items-center md:items-end md:text-right max-w-xs">
-        <a href="https://ocf.berkeley.edu">
-          <img src="http://ocf.berkeley.edu/hosting-logos/ocf-hosted-penguin-dark.svg" width="80"
-            alt="Hosted by the OCF" />
-        </a>
+    <div class="flex flex-col gap-4 items-center md:items-end md:text-right max-w-xs">
+      <a href="https://ocf.berkeley.edu">
+        <img src="http://ocf.berkeley.edu/hosting-logos/ocf-hosted-penguin-dark.svg" width="80"
+          alt="Hosted by the OCF" />
+      </a>
 
-        <p class="text-xs">
-          We are a student group acting independently of the University of California. We take full responsibility for
-          our organization and this web site.
-        </p>
-      </div>
+      <p class="text-xs">
+        We are a student group acting independently of the University of California. We take full responsibility for
+        our organization and this web site.
+      </p>
     </div>
-    {% endblock %}
   </div>
+  {% endblock %}
 </body>
 
 </html>
diff --git a/templates/index.html b/templates/index.html
@@ -1,27 +1,38 @@
 {% extends "base.html" %}
 
-{% block content %}
+{# Macro for news post notifications #}
+
+{% macro news_post(title, href) %}
+<a class="bg-rose-50 hover:bg-rose-100 hover:-translate-y-1 transition-all border border-rose-200 p-4 rounded-xl flex items-center gap-2"
+  href="{{ href }}">
+  <div class="flex-1 flex flex-col gap-2">
+    <p class="uppercase text-xs text-gray-500 flex gap-2 items-center">
+      <i class="bi bi-megaphone-fill"></i>
+      <span>News</span>
+    </p>
+    <p class="text-base font-medium">{{ title }}</p>
+  </div>
+
+  <i class="bi bi-chevron-right"></i>
+</a>
+{% endmacro %}
 
-{% set news_section = get_section(path="news/_index.md") %}
-{% set new_news_post = news_section.pages | first %}
-{% if new_news_post %}
-<a href="{{ new_news_post.permalink }}"
-  class="bg-rose-50 hover:bg-rose-100 hover:-translate-y-1 transition-all border border-rose-200 p-4 rounded-xl grid grid-cols-[1fr_auto] gap-2">
-  <p class="uppercase text-xs text-gray-500 flex gap-2 items-center">
-    <i class="bi bi-megaphone-fill"></i>
-    <span>News</span>
-  </p>
+{# =============================== #}
+{# = STARTING THE ACTUAL CONTENT = #}
+{# =============================== #}
 
-  <span class="row-span-2 flex items-center">
-    <i class="bi bi-chevron-right"></i>
-  </span>
+{% block content %}
 
-  <p class="text-base font-medium">
-    {{ new_news_post.title }}
-  </p>
-</a>
+{# News post notification, if there is one #}
+
+{% set news_section = get_section(path="news/_index.md") %}
+{% set news_post = news_section.pages | first %}
+{% if news_post %}
+{{ self::news_post(title=news_post.title, href=news_post.permalink) }}
 {% endif %}
 
+{# Main banner & description #}
+
 <div id="banner" class="bg-black p-8 rounded-xl">
   <p class="h-full text-3xl font-bold text-white flex flex-col justify-between">
     <span class="order-0 after:content-['…'] text-left">Promoting advanced math</span>
@@ -42,6 +53,8 @@
 
 <hr>
 
+{# Rest of content (rendered from markdown) #}
+
 <div class="{{ prose_cls }}">
   {{ section.content | safe }}
 </div>

diff --git a/templates/macros.html b/templates/macros.html
@@ -2,6 +2,6 @@
 {% set href = get_url(path=path) %}
 <p class="first:hidden text-gray-400">⁄</p>
 <a href="{{ href }}" class="{% if current_url == href %} font-semibold {% endif %}">
-    {{ label }}
+  {{ label }}
 </a>
 {% endmacro nav_link %}