From a6dc3d3b2018060decccefc6158e853738f5b9d8 Mon Sep 17 00:00:00 2001
From: crunk <dvanderkleij@gmail.com>
Date: Sun, 23 Jan 2022 16:42:59 +0100
Subject: [PATCH] Main page info block and css style development, give some
 love to fancyboi stolen css

---
 verse/start.py              |  6 +++---
 verse/static/css/editor.css | 15 ++++++++++-----
 verse/static/css/style.css  | 38 +++++++++++++++++++++++++++++++++++--
 verse/templates/editor.html |  2 +-
 verse/templates/index.html  | 23 ++++++++++++++--------
 5 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/verse/start.py b/verse/start.py
index cac1ec7..71cd405 100644
--- a/verse/start.py
+++ b/verse/start.py
@@ -61,10 +61,10 @@ def session_handler():
 @APP.route("/")
 def index():
     users = User.query.filter(User.distribusiname.isnot(None)).all()
-    distribusinames = []
+    distribusies = {}
     for user in users:
-        distribusinames.append(user.distribusiname)
-    return render_template("index.html", distribusinames=distribusinames)
+        distribusies.update({user.email: user.distribusiname})
+    return render_template("index.html", distribusies=distribusies)
 
 
 @APP.route("/login", methods=["GET", "POST"])
diff --git a/verse/static/css/editor.css b/verse/static/css/editor.css
index 5241df7..b764e96 100644
--- a/verse/static/css/editor.css
+++ b/verse/static/css/editor.css
@@ -1,24 +1,29 @@
 .editareas {
-  width: 100%;
   margin: auto;
   display: flex;
   justify-content: flex-start;
 }
 .editarea {
-  border: 1px solid #E0B0FF;
+  width: 30%;
+  border: 3px solid #E0B0FF;
+  border-style: outset;
   margin-right: 1em;
+  margin-left: 0;
 }
 
 .editor {
-  min-width: 40%;
+  min-width: 35%;
+}
+.editform {
+  width: 100%%;
+  margin: 0 auto;
 }
 
 textarea {
   width: 100%;
-  height: 100%; 
+  height: 100%;
   box-sizing: border-box;
   min-height: 250px;
-  overflow: scroll;
   background: #E0B0FF;
   outline: none;
   font-family: Courier, sans-serif;
diff --git a/verse/static/css/style.css b/verse/static/css/style.css
index 44f8073..c269892 100644
--- a/verse/static/css/style.css
+++ b/verse/static/css/style.css
@@ -3,6 +3,7 @@ body
   font-family: monospace;
   background-color: #383C4A;
   color:#E0B0FF;
+  word-wrap: break-word;
 }
 
 div#login{
@@ -21,7 +22,7 @@ div#login form {
 }
 
 input[type=text], input[type=password], input[type=file]{
-  background-color: #383C4A;
+  background-color: #2D3039;
   color: white;
   border: 1px solid #E0B0FF;
 }
@@ -38,6 +39,7 @@ div#upload form {
   background-color:#383C4A;
   text-decoration: none;
   scroll-behavior: smooth;
+  border-style: outset;
 }
 #mainworkflow
 {
@@ -87,7 +89,7 @@ input:hover {
 input[type="submit"]:disabled:hover,
 input[type="submit"]:disabled,
 input[type="submit"]:disabled:focus {
-  background: #777777;
+  background-color: #2D3039;
   color: #d28cff;
 }
 
@@ -110,6 +112,38 @@ a:hover {
 a:active {
  color: white;
 }
+/* STOLEN GOODS */
+#fancyboi::before {
+	content: "$ ";
+}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes flash {
+    50% { opacity: 0; }
+  }
+  @keyframes reveal {
+    from { width: 2em; } /* Width of ::before */
+    to { width: 55%; }
+  }
+  #fancyboi {
+    width: 55%;
+    padding: 0.5em;
+    overflow: hidden;
+    white-space: nowrap;
+    animation: reveal 4s linear;
+    text-overflow: "█";
+    background-color: #2D3039;
+  }
+  #fancyboi::after {
+    content: "█";
+    animation: flash 0.5s step-end infinite;
+  }
+}
+div.maincontent{
+  width: 55%;
+  border: 3px solid #E0B0FF;
+  padding: 0.5em;
+  border-style: outset;
+}
 /*
 Project colors so far.
 light
diff --git a/verse/templates/editor.html b/verse/templates/editor.html
index f59ef2f..4346feb 100644
--- a/verse/templates/editor.html
+++ b/verse/templates/editor.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block main %}
-  <form method="POST" enctype="multipart/form-data" action="{{ url_for('editor') }}">
+  <form method="POST" enctype="multipart/form-data" action="{{ url_for('editor') }}" class="editform">
     <div class="editareas">
       <div class="editarea editor">
         <fieldset class="required">
diff --git a/verse/templates/index.html b/verse/templates/index.html
index 272f1bd..b5daf71 100644
--- a/verse/templates/index.html
+++ b/verse/templates/index.html
@@ -25,17 +25,24 @@
 	</div>
 	{% endif %}
 </div>
-
-{% if current_user.is_authenticated %}
-  <h2> Hi {{ current_user.email }}! </h2>
-{% endif %}
-
+	{% if current_user.is_authenticated %}
+	  <h2 id="fancyboi"> Hi {{ current_user.email }}!</h2>
+	{% else %}
+		<h2 id="fancyboi"> Welcome to distribusi-verse</h2>
+	{% endif %}
+<div class="maincontent">
+	<p>Distribusi is a content management system for the web that produces static index pages based on folders in the files system. It is inspired by the automatic index functions featured in several popular web servers. Distribusi works by traversing the file system and directory hierarchy to automatically list all the files in the directory, detect the file types and providing them with relevant html classes and tags for easy styling.
+	</p>
+	<hr>
+	<p>
+	This particular work in progress project is an attempt to make distribusi into a webinterface that can be operated remotely without any knowlegde of CLI. Trying to somehow combine the ideas of distribusi with the ideas of a <a href="https://tildeverse.org/">Tildeverse</a> or <a href="https://tilde.club/">Tilde club</a>, but also be neither of these ideas.</p>
+</div>
 	<!-- a div with all the distribusis listed in the distribusiverse	-->
-<div id="distribusiverse">
+<div id="distribusiverse" class="maincontent">
 	<h2>List of distribusis</h2>
 	<ul>
-		{% for distribusiname in distribusinames %}
-			<li><a href="stash/{{distribusiname}}/index.html">{{distribusiname}}</a></li>
+		{% for distribusi in distribusies %}
+			<li><a href="stash/{{distribusies[distribusi]}}/index.html">{{distribusi}}: {{distribusies[distribusi]}}</a></li>
 		{% endfor%}
 	</ul>
 </div>