Add blog/post header.

This commit is contained in:
Sergio Martínez Portela 2022-07-25 12:19:10 +02:00
parent 031305f5de
commit 8d831af216
2 changed files with 63 additions and 5 deletions

View File

@ -9,9 +9,28 @@
<link rel="stylesheet" href="../css/dark-syntax.css" /> <link rel="stylesheet" href="../css/dark-syntax.css" />
</head> </head>
<body> <body>
<div class="site-header">
<h1 class="site-name"><a href="/">Codigo para llevar</a></h1>
<nav class="site-links">
<span class="fancy-link">
<a href="https://codigoparallevar.com/">Home</a>
</span>
<span class="fancy-link">
<a href="https://github.com/kenkeiras">GitHub</a>
</span>
<span class="fancy-link">
<a href="https://gitlab.com/kenkeiras">GitLab</a>
</span>
<span class="fancy-link">
<a href="https://programaker.com/users/kenkeiras">PrograMaker</a>
</span>
</nav>
</div>
<div class="content">
<article class="post"> <article class="post">
<h2 class="post-title">{{ title }}</h2> <h2 class="post-title">{{ title }}</h2>
{{ content | safe }} {{ content | safe }}
</article> </article>
</div>
</body> </body>
</html> </html>

View File

@ -1,4 +1,9 @@
/* Default theme */ /* Default theme */
html, body {
margin: 0;
padding: 0;
}
/* Node styling */ /* Node styling */
.node { .node {
max-width: min(650px, 100ex); max-width: min(650px, 100ex);
@ -87,10 +92,33 @@ code {
font-size: 85%; font-size: 85%;
} }
.content {
margin: 1ex;
}
article.post { article.post {
max-width: min(650px, 100ex); max-width: min(650px, 100ex);
margin: 0 auto; margin: 0 auto;
} }
/* Header */
.site-header {
background-color: #F7F7FF;
border-bottom: rgba(0,0,0,0.1) 1px solid;
text-align: center;
padding: 1ex;
}
.site-header h1 {
margin-top: 0;
font-size: 200%;
}
.site-header .site-links .fancy-link {
border-right: 1px solid #000;
padding-left: 0.75ex;
}
.site-header .site-links .fancy-link:last-child {
border: none;
}
/* Dark mode. */ /* Dark mode. */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -108,6 +136,18 @@ article.post {
margin-top: 0; margin-top: 0;
color: #f7da4a; color: #f7da4a;
} }
/* Header */
.site-header {
background-color: #303330;
border-bottom: rgba(0,0,0,0.1) 1px solid;
}
.site-header h1 {
color: #fff;
}
.site-header .site-links .fancy-link {
border-right: 1px solid #fff;
}
/* Code blocks */ /* Code blocks */
pre { pre {
padding: 0.5ex; padding: 0.5ex;
@ -127,6 +167,5 @@ article.post {
color: #FFF; color: #FFF;
font-family: Menlo, Monaco, "Courier New", monospace; font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 85%; font-size: 85%;
} }
} }