diff --git a/static/css/style.css b/static/css/base.css similarity index 60% rename from static/css/style.css rename to static/css/base.css index 73750ec..76e2575 100644 --- a/static/css/style.css +++ b/static/css/base.css @@ -3,10 +3,8 @@ body{ padding: 0; margin: 0; border: 0; - height: 100%; } - .logo { font-family: monospace; font-size: 40px; @@ -16,9 +14,16 @@ header, nav { background-color: #444444; color: #f0f0f0; text-align: center; - padding: 10px; + text-decoration: none; + padding: 20px; } +header a { + color: #f0f0f0; + text-decoration: none; +} + +/* nav { display: grid; grid-template-colums: auto 1em 1em 1em auto; @@ -36,7 +41,6 @@ nav a:nth-child(2) { nav a:nth-child(3) { grid-area: item3; } - nav a { color: #f0f0f0; padding: 10px; @@ -49,59 +53,13 @@ nav a:hover { background-color: #f0f0f0; color: black; } +*/ -section { +div.container { 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; -} - footer { bottom: 0; position: fixed; diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..14c5a16 --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,51 @@ +a.article { + text-decoration: none; + color: black; +} + +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; +} diff --git a/templates/base.html.tera b/templates/base.html.tera index e69de29..ba01b16 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -0,0 +1,36 @@ + + + + + + {% block title %} + CódigoComentado - blog personal de kirbylife + {% endblock title %} + + + {% block extracss %} + {% endblock extracss %} + + +
+ +
+ {# + + #} +
+ {% block content %} + {% endblock content %} +
+ + + diff --git a/templates/index.html.tera b/templates/index.html.tera index cdc49f6..af93c66 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -1,39 +1,23 @@ - - - - - CódigoComentado - blog personal de kirbylife - - - -
- -
- -
+{% extends "base" %} + +{% block extracss %} + +{% endblock extracss %} + +{% block content %} {% for post in posts %} -
- { image: -
- -
-

title: {{ post.title }}

-

Article: {{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}

-
- Author: kirbylife Date: {{ post.created_at | date(format="%Y-%m-%d") }} } -
-
+ +
+ { image: +
+ +
+

title: {{ post.title }}

+

Article: {{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}

+
+ Author: kirbylife Date: {{ post.created_at | date(format="%Y-%m-%d") }} } +
+
+ {% endfor %} -
- - - +{% endblock content %}