Archivos Estaticos
Las vistas y plantillas de autenticación funcionan, pero se ven muy simples en este momento. Se puede agregar CSS para dar estilo al diseño HTML que has construido. El estilo no cambia, por lo que es un archivo estático en lugar de una plantilla.

Flask automáticamente agrega una vista estática que toma una ruta relativa al directorio flask_todolist/static y la sirve. La plantilla base.html ya tiene un enlace al archivo style.css:
{{ url_for('static', filename='style.css') }}

Además de CSS, otros tipos de archivos estáticos pueden ser archivos con funciones de JavaScript o una imagen de logotipo. Todos ellos se colocan en el directorio flask_todolist/static y se referencian con url_for('static', filename='...').

Este tutorial no se centra en cómo escribir CSS, así que simplemente puedes copiar lo siguiente en el archivo

 flask_todolist/static/style.css:

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

Ve a http://127.0.0.1:5000/auth/login y la página debería verse con algo de estilo.

Puedes leer más sobre CSS en la documentación de Mozilla. Si modificas un archivo estático, actualiza la página del navegador. Si el cambio no se muestra, intenta borrar la caché del navegador.
 

Pueder echar un vistazo al proyecto en [Github]

← Templates | Continúa con el Blog Blueprint →