Add blog/post header.
This commit is contained in:
parent
031305f5de
commit
8d831af216
@ -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>
|
||||||
|
@ -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%;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user