feat: improve gist view styling

static/cache/css/main.css

@@ -116,8 +116,11 @@ main {
   flex: 4;
   width: 100%;
   margin: auto;
+
   display: flex;
+  /*
   align-items: center;
+  */
   justify-content: space-evenly;
 }
 
@@ -265,17 +268,16 @@ footer {
 }
 
 .gist__container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  height: auto;
 }
 
 pre {
   font-size: 13px;
   font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace;
-  margin: 10px 0;
-  border: 1px solid var(--color-border-default, #ddd);
-  border-radius: 6px;
   box-sizing: border-box;
-  padding: 10px 0;
-
 }
 
 .line {
@@ -314,10 +316,8 @@ summary::marker {
   display: block;
 }
 
-
 pre {
   box-sizing: border-box;
-  padding: 10px 0;
 }
 
 .line {
@@ -329,3 +329,64 @@ pre {
   min-width: 35px;
 }
 
+.gist_file {
+  background: #eeee;
+  border-radius: 6px;
+  padding-bottom: 0px;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+.gist__filename {
+  padding: 8px;
+}
+
+.gist__meta-container {
+  flex: 1;
+  max-height: 70px;
+  min-height: 70px;
+  display: flex;
+  align-items: left;
+  flex-direction: column;
+  width: 80%;
+  margin-top: 20px;
+}
+
+.gist__data-container {
+  width: 70%;
+  flex: 2;
+  margin: auto;
+}
+
+.gist__name {
+  margin-left: 60px;
+  display: flex;
+}
+
+.gist__description {
+  margin-left: 60px;
+}
+
+.gist__visibility {
+  display: inline-block;
+  padding: 0 7px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-radius: 2em;
+  background: #ffa500;
+  margin: auto 0px;
+}
+
+.gist__name-text {
+  display: inline;
+  width: auto;
+}

templates/pages/gists/view/_filename.html

@@ -1 +1,3 @@
-<div class="gist__filename">{{ payload_file.filename }}</div>
+<div class="gist__filename">
+  <a href="">{{ payload_file.filename }}</a>
+</div>

templates/pages/gists/view/index.html

@@ -1,31 +1,39 @@
 {% extends 'gistbase' %} 
 {% block gist_main %}
     {% include "error_comp" %}
-	<div class="gist__container>
+	<div class="gist__container">
 		{% if payload %}
 
-		  <p class="gist__name">
-		  <a href={{ gist_owner_link }}>{{ payload.owner }}</a>/<a href="">{{ payload.id | truncate(length=10) }}</a>
-		   <span class="gist__visibility">{{ payload.visibility}}</span>
-		  </p>
-
+        <div class="gist__meta-container">
+            <div class="gist__name">
+			<a href={{ gist_owner_link }}><h2 class="gist__name-text">~{{ payload.owner }}</a>/<a href="">{{ payload.id | truncate(length=10, end="") }}</h2></a><span class="gist__visibility">{{ payload.visibility }}</span>
+            </div>
 		  {% if payload.description %}
 			<p class="gist__description">{{ payload.description}}</p>
 		  {% endif %}
+        </div>
+
+        <div class="gist__data-container">
 		  {% for payload_file in payload.files %}
+		  
+          <div class="gist_file">
 			{% include "gist_filename" %}
 			{% if "file" in payload_file.content %}
 				{% include "gist_textfile" %}
 			{% endif %}
+          </div>
 
 			{% if "dir" in payload_file.content %}
 			  {% for payload_file in payload_file.content.dir %}
-				{% include "gist_filename" %}
-				{% include "gist_textfile" %}
+                <div class="gist_file">
+                  {% include "gist_filename" %}
+                  {% include "gist_textfile" %}
+                </div>
 			  {% endfor %}
 			{% endif %}
 
 		  {% endfor %}
 		{% endif %}
-	</div>
+      </div>
+    </div>
 {% endblock %}