post page already

static/css/index.css

@@ -8,7 +8,7 @@ article {
     grid-template-columns: 15em auto 20em;
     grid-template-rows: 1em 1em auto 1em;
 
-    grid-template-areas :
+    grid-template-areas:
         "image-key . ."
             "image title title"
             "image body body"

static/css/post.css

@@ -0,0 +1,36 @@
+div.container {
+    display: grid;
+    grid-template-columns: 7fr 1fr;
+    gird-template-rows: 1fr 1fr 1fr;
+
+    grid-template-areas:
+        "title title"
+        ". date"
+        "content content";
+}
+
+.title {
+    grid-area: title;
+    margin: 0;
+    margin-top: 10px;
+}
+
+article {
+    grid-area: content;
+}
+
+.date {
+    grid-area: date;
+    margin: 2px;
+}
+
+pre {
+    font-family: monospace;
+    background-color: #444444;
+    color: white;
+    padding-top: 0.7em;
+    padding-right: 0.7em;
+    padding-bottom: 0.7em;
+    padding-left: 0.5em;
+    width: auto;
+}

templates/post.html.tera

@@ -1,11 +1,15 @@
 {% extends "base" %}
 {% block title %}CódigoComentado - {{post.title}}{% endblock title %}
 
+{% block extracss %}
+<link href="/static/css/post.css" rel="stylesheet"/>
+{% endblock extracss %}
+
 {% block content %}
-<h1><strong>Title: </strong>{{ post.title }}</h1>
-<strong>Content:</strong>
+<h1 class="title"><strong>Title: </strong>{{ post.title }}</h1>
+<span class="date"><strong>Date: </strong>{{ post.created_at | date(format="%Y-%m-%d") }}</span>
 <article>
+  <strong>Content:</strong>
   {{ post.content | safe }}
 </article>
-
 {% endblock content %}