add inherit to the templates to do more easy write new templates
kirbylife
parent
cdf1e409a8
commit
482b70e292
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>
|
||||
{% block title %}
|
||||
CódigoComentado - blog personal de kirbylife
|
||||
{% endblock title %}
|
||||
</title>
|
||||
<link href="/static/css/base.css" rel="stylesheet"/>
|
||||
{% block extracss %}
|
||||
{% endblock extracss %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" class="logo">{{ title }}</a>
|
||||
</header>
|
||||
{#
|
||||
<nav>
|
||||
<a href="">⍉ Item 1</a>
|
||||
<a href="">⍉ Item 2</a>
|
||||
<a href="">⍉ Item 3</a>
|
||||
</ul>
|
||||
</nav>
|
||||
#}
|
||||
<div class="container">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
<footer>
|
||||
<span>
|
||||
Hecho con Rust, Rocket y Emacs por <a href="https://kirbylife.gitlab.io">@kirbylife</a>
|
||||
</span>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +1,23 @@
|
|||
<!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>
|
||||
{% extends "base" %}
|
||||
|
||||
{% block extracss %}
|
||||
<link href="/static/css/index.css" rel="stylesheet"/>
|
||||
{% endblock extracss %}
|
||||
|
||||
{% block content %}
|
||||
{% for post in posts %}
|
||||
<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>{{ post.title }}</p>
|
||||
<p class="article-body"><strong>Article: </strong>{{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}</p>
|
||||
<div class="article-info">
|
||||
<span><strong>Author: </strong>kirbylife <strong>Date: </strong>{{ post.created_at | date(format="%Y-%m-%d") }}<strong> }</strong></span>
|
||||
</div>
|
||||
</article>
|
||||
<a class="article" href="/posts/{{ post.title | split(pat=' ') | join(sep='-') }}-{{ post.id }}">
|
||||
<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>{{ post.title }}</p>
|
||||
<p class="article-body"><strong>Article: </strong>{{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}</p>
|
||||
<div class="article-info">
|
||||
<span><strong>Author: </strong>kirbylife <strong>Date: </strong>{{ post.created_at | date(format="%Y-%m-%d") }}<strong> }</strong></span>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<footer>
|
||||
<span>
|
||||
Hecho con Rust, Rocket y Emacs por <a href="https://kirbylife.gitlab.io">@kirbylife</a>
|
||||
</span>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue