add inherit to the templates to do more easy write new templates
kirbylife
parent
cdf1e409a8
commit
482b70e292
|
|
@ -3,10 +3,8 @@ body{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
|
|
@ -16,9 +14,16 @@ header, nav {
|
||||||
background-color: #444444;
|
background-color: #444444;
|
||||||
color: #f0f0f0;
|
color: #f0f0f0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
text-decoration: none;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
color: #f0f0f0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
nav {
|
nav {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-colums: auto 1em 1em 1em auto;
|
grid-template-colums: auto 1em 1em 1em auto;
|
||||||
|
|
@ -36,7 +41,6 @@ nav a:nth-child(2) {
|
||||||
nav a:nth-child(3) {
|
nav a:nth-child(3) {
|
||||||
grid-area: item3;
|
grid-area: item3;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
color: #f0f0f0;
|
color: #f0f0f0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -49,59 +53,13 @@ nav a:hover {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
section {
|
div.container {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 80%;
|
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 {
|
footer {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
position: fixed;
|
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>
|
{% extends "base" %}
|
||||||
<html lang="es">
|
|
||||||
<head>
|
{% block extracss %}
|
||||||
<meta charset="UTF-8"/>
|
<link href="/static/css/index.css" rel="stylesheet"/>
|
||||||
<title>CódigoComentado - blog personal de kirbylife</title>
|
{% endblock extracss %}
|
||||||
<link href="/static/css/style.css" rel="stylesheet"/>
|
|
||||||
</head>
|
{% block content %}
|
||||||
<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>
|
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<article>
|
<a class="article" href="/posts/{{ post.title | split(pat=' ') | join(sep='-') }}-{{ post.id }}">
|
||||||
<span><strong>{ image: </strong></span>
|
<article>
|
||||||
<figure>
|
<span><strong>{ image: </strong></span>
|
||||||
<img src="https://files.realpython.com/media/MProc.7cf3be371bbc.png">
|
<figure>
|
||||||
</figure>
|
<img src="https://files.realpython.com/media/MProc.7cf3be371bbc.png">
|
||||||
<p class="article-title"><strong>title: </strong>{{ post.title }}</p>
|
</figure>
|
||||||
<p class="article-body"><strong>Article: </strong>{{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}</p>
|
<p class="article-title"><strong>title: </strong>{{ post.title }}</p>
|
||||||
<div class="article-info">
|
<p class="article-body"><strong>Article: </strong>{{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}</p>
|
||||||
<span><strong>Author: </strong>kirbylife <strong>Date: </strong>{{ post.created_at | date(format="%Y-%m-%d") }}<strong> }</strong></span>
|
<div class="article-info">
|
||||||
</div>
|
<span><strong>Author: </strong>kirbylife <strong>Date: </strong>{{ post.created_at | date(format="%Y-%m-%d") }}<strong> }</strong></span>
|
||||||
</article>
|
</div>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</section>
|
{% endblock content %}
|
||||||
<footer>
|
|
||||||
<span>
|
|
||||||
Hecho con Rust, Rocket y Emacs por <a href="https://kirbylife.gitlab.io">@kirbylife</a>
|
|
||||||
</span>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue