From f34df498c517a462aad98f2ab528a6d15974e46c Mon Sep 17 00:00:00 2001
From: Matt Arnold
Date: Thu, 10 Apr 2025 19:24:21 -0400
Subject: The great ui commit css crimes

---
 app.py                |   5 +-
 models.py             |   9 ++++
 static/style.css      | 131 ++++++++++++++++++++++++++++++++++++++++++--------
 templates/base.html   |   6 ++-
 templates/create.html |   6 +--
 templates/post.html   |  38 +++++++++++++--
 6 files changed, 164 insertions(+), 31 deletions(-)

diff --git a/app.py b/app.py
index 137a6ca..02c4693 100644
--- a/app.py
+++ b/app.py
@@ -4,7 +4,7 @@ from urllib.parse import urlparse as url_parse
 from flask import Flask, render_template, request, redirect, url_for, flash
 from markdown import markdown, Markdown
 from config import config
-from models import Post, db, get_replies, Faccet
+from models import Post, db, get_replies, Faccet, get_previous
 from models import User as NewUser
 from forms import PostForm, LoginForm
 from flask_login import (
@@ -82,8 +82,9 @@ def logout():
 @login_required
 def post(post_id):
     post = Post.get(Post.id == post_id)
+    previous = get_previous(post_id)
     replies = get_replies(post_id)
-    return render_template("post.html", post=post, replies=replies)
+    return render_template("post.html", post=post, replies=replies, previous=previous)
 
 
 @app.route("/create", methods=["GET", "POST"])
diff --git a/models.py b/models.py
index 26934d9..4f76da7 100644
--- a/models.py
+++ b/models.py
@@ -47,4 +47,13 @@ def get_replies(post_id):
     return Post.select().where(Post.parent == post_id).order_by(Post.created_at.desc())
 
 
+def get_previous(post_id):
+    tlist = []
+    lp = Post.get(Post.id == post_id)
+    while lp.parent != 0:
+        tlist.append(lp)
+        lp = Post.get(Post.id == lp.parent)
+    return tlist
+
+
 db.create_tables([User, Post, Faccet])
diff --git a/static/style.css b/static/style.css
index 8e258e5..affd975 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,34 +1,125 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f4f4f4;
+main {
+    font-family: monospace, monospace;
+    max-width: 38rem;
+    padding: 2rem;
+    margin: auto;
 }
 
 header {
-    background-color: #333;
-    color: #fff;
-    padding: 1rem;
+    max-width: 50rem;
+    padding: 2rem;
+    margin: auto;
+    background-color: #040529;
+    color: #9978fc;
 }
 
-header h1 {
-    margin: 0;
+@media only screen and (max-device-width: 736px) {
+    main {
+        padding: 0rem;
+    }
+
+    header {
+        padding: 0rem;
+    }
 }
 
-header a {
-    color: #fff;
-    text-decoration: none;
+::selection {
+    background: #d3869b;
 }
 
-main {
-    padding: 1rem;
+body {
+    background: #282828;
+    color: #ebdbb2;
+}
+
+pre {
+    background-color: #3c3836;
+    padding: 1em;
+    border: 0;
+}
+
+a,
+a:active,
+a:visited {
+    color: #b16286;
+    background-color: #1d2021;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    margin-bottom: .1rem;
+}
+
+blockquote {
+    border-left: 1px solid #bdae93;
+    margin: 0.5em 10px;
+    padding: 0.5em 10px;
+}
+
+footer {
+    text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        background: #fbf1c7;
+        color: #3c3836;
+    }
+
+    pre {
+        background-color: #ebdbb2;
+        padding: 1em;
+        border: 0;
+    }
+
+    a,
+    a:active,
+    a:visited {
+        color: #b16286;
+        background-color: #f9f5d7;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        margin-bottom: .1rem;
+    }
+
+    blockquote {
+        border-left: 1px solid #655c54;
+        margin: 0.5em 10px;
+        padding: 0.5em 10px;
+    }
+}
+
+/* Style the button that is used to open and close the collapsible content */
+.collapsible {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
 }
 
-a {
-    color: #333;
-    text-decoration: none;
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active,
+.collapsible:hover {
+    background-color: #ccc;
 }
 
-a:hover {
-    text-decoration: underline;
+/* Style the collapsible content. Note: hidden by default */
+.content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 48b4d9c..d014cd9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blog</title>
+    <title>VibesHome</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+
 </head>
+
 <body>
     <header>
         <h1><a href="{{ url_for('index') }}">My Blog</a></h1>
@@ -14,4 +17,5 @@
         {% block content %}{% endblock %}
     </main>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/templates/create.html b/templates/create.html
index 4d48992..ccbbc67 100644
--- a/templates/create.html
+++ b/templates/create.html
@@ -7,7 +7,7 @@
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', 
     filename='bower_components/simplemde/dist/simplemde.min.css') }}">
 
-<h1>Blob Create</h1>
+<h1>Write to yourself </h1>
 
 
 
@@ -20,7 +20,7 @@
     <form method="post" novalidate>
         {{ form.hidden_tag() }}
         <p>
-	    {{form.title.label}}: {{form.title}} <br>
+            {{form.title.label}}: {{form.title}} <br>
             {{ form.content.label }}<br>
             {{ form.content(cols="80", rows="24") }}
         </p>
@@ -107,4 +107,4 @@
     renderMarkdown();
     document.getElementById('document-input').addEventListener('input', renderMarkdown);
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/post.html b/templates/post.html
index d759da4..b585cab 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,6 +1,25 @@
 {% extends 'base.html' %}
 
 {% block content %}
+<script>
+    function openNav() {
+        console.log("hello run started")
+        var coll = document.getElementsByClassName("collapsible");
+        var i;
+
+        for (i = 0; i < coll.length; i++) {
+            console.log("run loop")
+            coll[i].addEventListener("click", function () {
+                this.classList.toggle("active");
+                var content = this.nextElementSibling;
+                if (content.style.display === "block") {
+                    content.style.display = "none";
+                } else {
+                    content.style.display = "block";
+                }
+            });
+        }
+    } </script>
 {% if post.parent != 0 %}
 <a href="{{url_for('post', post_id=post.parent)}}"> Previous</a>
 <hr>
@@ -13,12 +32,21 @@
     <a href="{{ url_for('create', reply=post.id)}}"> Reply</a> ~
     <a href="{{ url_for('index') }}">Back to posts</a>
 </div>
-<hr>
-<h3> Replies to this</h3>
-<div class="post-replies">
+<button type="button" class="collapsible" onload="openNav()">Navigation</button>
+<div class="content">
+    <hr>
+    <h3>Previously to this </h3>
     <ul>
-        <li> {% for reply in replies %} <a href="{{ url_for('post', post_id=reply.id) }}">{{ reply.title }}</a> - {{
-            reply.created_at.strftime('%Y-%m-%d') }}</li> {% endfor %}
+        <li> {% for p in previous %} <a href="{{ url_for('post', post_id=p.id) }}">{{ p.title }}</a> - {{
+            p.created_at.strftime('%Y-%m-%d') }}</li> {% endfor %}
     </ul>
+    <hr>
+    <h3> Replies to this</h3>
+    <div class="post-replies">
+        <ul>
+            <li> {% for reply in replies %} <a href="{{ url_for('post', post_id=reply.id) }}">{{ reply.title }}</a> - {{
+                reply.created_at.strftime('%Y-%m-%d') }}</li> {% endfor %}
+        </ul>
+    </div>
 </div>
 {% endblock %}
\ No newline at end of file
-- 
cgit 1.4.1-2-gfad0