Font changes, better recipe view

templates/base.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Recipe Database{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
     <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
 </head>
@@ -12,7 +15,7 @@
         <nav class="sidebar">
             <div class="sidebar-content">
                 <div class="brand">
-                    <a href="{{ url_for('index') }}">Butter Garden</a>
+                    <a href="{{ url_for('index') }}">🧈 Butter Garden</a>
                 </div>
                 <div class="nav-links">
                     <a class="nav-link" href="{{ url_for('index') }}">Home</a>

templates/recipe_detail.html

@@ -1,25 +1,25 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="card">
-    <div class="card-body">
-        <h1 class="card-title mb-4">{{ recipe.title }}</h1>
-        
-        <h4 class="mb-3">Ingredients</h4>
-        <div class="mb-4">
+<div class="recipe-detail">
+    <h1>{{ recipe.title }}</h1>
+    
+    <div class="recipe-content">
+        <div class="recipe-section">
+            <h2>Ingredients</h2>
             {% for ingredient in recipe.ingredients.split('\n') %}
-            <div>{{ ingredient }}</div>
+                <div class="ingredient-item">{{ ingredient }}</div>
             {% endfor %}
         </div>
 
-        <h4 class="mb-3">Instructions</h4>
-        <div class="mb-4">
+        <div class="recipe-section">
+            <h2>Instructions</h2>
             {% for step in recipe.instructions.split('\n') %}
-            <p>{{ step }}</p>
+                <div class="instruction-item">{{ step }}</div>
             {% endfor %}
         </div>
-
-        <a href="{{ url_for('index') }}" class="btn btn-primary">Back to Recipes</a>
     </div>
 </div>
+
+<a href="{{ url_for('index') }}" class="btn btn-primary back-button">Back to Recipes</a>
 {% endblock %}