Main page info block and css style development, give some love to fancyboi stolen css

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"])

verse/static/css/editor.css

@@ -1,16 +1,22 @@
 .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 {
@@ -18,7 +24,6 @@ textarea {
   height: 100%;
   box-sizing: border-box;
   min-height: 250px;
-  overflow: scroll;
   background: #E0B0FF;
   outline: none;
   font-family: Courier, sans-serif;

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

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">

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>