added folders

2019-11-13 01:17:15 -06:00 · 2019-11-13 01:17:15 -06:00 · 77b0bf000c
parent c65aacfc1f
commit 77b0bf000c
2 changed files with 134 additions and 0 deletions
--- a/static/css/style.css
+++ b/static/css/style.css
@ -0,0 +1,102 @@
+body{
+    background-color: white;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+
+.logo {
+    font-family: monospace;
+    font-size: 40px;
+}
+
+header, nav {
+    background-color: #444444;
+    color: #f0f0f0;
+    text-align: center;
+    padding: 10px;
+}
+
+nav {
+    display: grid;
+    grid-template-colums: auto 1em 1em 1em auto;
+    grid-template-areas: ". item1 item2 item3 .";
+}
+
+nav a:nth-child(1) {
+    grid-area: item1;
+}
+
+nav a:nth-child(2) {
+    grid-area: item2;
+}
+
+nav a:nth-child(3) {
+    grid-area: item3;
+}
+
+nav a {
+    color: #f0f0f0;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 20px;
+    text-decoration: none;
+}
+
+nav a:hover {
+    background-color: #f0f0f0;
+    color: black;
+}
+
+section {
+    margin: auto;
+    width: 80%;
+}
+
+article {
+    display: grid;
+    grid-template-columns: 15em auto 20em;
+    grid-template-rows: 1em 1em auto 1em;
+
+    grid-template-areas :
+        "image-key . ."
+        "image title title"
+        "image body body"
+        "image . info";
+}
+
+article > span:first-child {
+    grid-area: image-key;
+    margin: 0;
+}
+
+article figure {
+    grid-area: image;
+}
+
+article figure img {
+    max-height: 10em;
+    max-width: 10em;
+    min-height: 10em;
+    min-width: 10em;
+}
+
+.article-title {
+    font-size: 20px;
+    grid-area: title;
+}
+
+.article-body {
+    font-size: 20px;
+    grid-area: body;
+}
+
+.article-info {
+    grid-area: info;
+}
+
+article strong {
+    font-family: monospace;
+    font-size: 10px;
+}
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8"/>
+  <title>CódigoComentado - blog personal de kirbylife</title>
+  <link href="/static/css/style.css" rel="stylesheet"/>
+</head>
+<body>
+  <header>
+    <a class="logo">{{ title }}</a>
+  </header>
+  <nav>
+    <a href="">⍉ Item 1</a>
+    <a href="">⍉ Item 2</a>
+    <a href="">⍉ Item 3</a>
+    </ul>
+  </nav>
+  <section>
+    <article>
+        <span><strong>{ image: </strong></span>
+      <figure>
+        <img src="https://files.realpython.com/media/MProc.7cf3be371bbc.png">
+      </figure>
+      <p class="article-title"><strong>title: </strong>Foo bar</p>
+      <p class="article-body"><strong>Article: </strong>Lorem Ipsum</p>
+      <div class="article-info">
+        <span><strong>Author: </strong>kirbylife <strong>Date: </strong>12/11/2019<strong> }</strong></span>
+      </div>
+    </article>
+  </section>
+</body>
+</html>