em/em.0x45.cz
1
0
Fork 0
Code Actions

New header

Browse Source
This commit is contained in:
Emil Miler 2021-12-14 20:36:55 +01:00
parent 5403e0e556
commit 0e6723961d
2 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
sass/style.scss
View File

@ -23,32 +23,54 @@
url("/fonts/spectral-italic.ttf") format("truetype"); url("/fonts/spectral-italic.ttf") format("truetype");
} }
.wrap {
max-width: 55rem;
margin: 0 auto;
padding: 0 1rem;
}
.grid {
display: grid;
grid-template-columns: 10em auto;
grid-column-gap: 2em;
& aside>*:first-child,
& main>*:first-child,
& main>article:first-child h2
{ padding-top: 0; margin-top: 0; }
}
body { body {
font-family: spectral, serif; font-family: spectral, serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
margin: 0;
max-width: 45em;
margin: 0 auto;
padding: 1em;
display: grid;
grid-template-columns: 10em auto;
grid-column-gap: 2em;
} }
header { header {
grid-column: 1/-1; padding: 1rem 0;
padding: 2rem 0; margin-bottom: 5rem;
font-weight: bold; background-color: #000;
font-size: 1.5em; color: #fff;
line-height: 1;
a { color: inherit } a { color: inherit }
.wrap {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.title { font-size: 1.5em; }
.title:hover { text-decoration: none }
nav { font-size: 1rem }
} }
aside { aside {
margin-bottom: 4rem;
span.title { span.title {
display: block; display: block;
margin: 2em 0 1em 0; margin: 2em 0 1em 0;
@ -76,6 +98,7 @@ main {
margin-bottom: 5rem; margin-bottom: 5rem;
article h2 a { color: inherit } article h2 a { color: inherit }
.info { .info {
border-top: 1px solid #eee; border-top: 1px solid #eee;
margin: 2em 0; margin: 2em 0;
@ -91,6 +114,7 @@ main {
li { margin-right: 1em } li { margin-right: 1em }
} }
} }
img { img {
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -103,6 +127,7 @@ main {
text-align: center; text-align: center;
} }
} }
table { table {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
@ -110,6 +135,7 @@ main {
td, th { padding: 0 1em } td, th { padding: 0 1em }
} }
blockquote { blockquote {
margin: 1em 2em 1em 1.5em; margin: 1em 2em 1em 1.5em;
@ -118,6 +144,7 @@ main {
padding-left: 1.5em; padding-left: 1.5em;
} }
} }
p>code { p>code {
background-color: #2b303b; background-color: #2b303b;
color: #fff; color: #fff;
@ -125,12 +152,14 @@ main {
padding: .3em .5em; padding: .3em .5em;
border-radius: .3em; border-radius: .3em;
} }
pre { pre {
font-size: 14px; font-size: 14px;
padding: 1em; padding: 1em;
overflow: auto; overflow: auto;
border-radius: .3em; border-radius: .3em;
} }
input.search { input.search {
display: none; // Hide for non-js browsers display: none; // Hide for non-js browsers
box-sizing: border-box; box-sizing: border-box;
@ -149,6 +178,6 @@ a {
&:hover { text-decoration: underline } &:hover { text-decoration: underline }
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 50rem) {
body { grid-template-columns: auto } .grid { grid-template-columns: auto }
} }

39
templates/index.html
View File

@ -3,27 +3,36 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ config.title }}{% endblock %}</title> <title>{% block title %}{{ config.title }}{% endblock %}</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<header> <header>
<a href="{{ config.base_url }}">{{ config.title }}</a> <div class="wrap">
<a href="{{ config.base_url }}" class="title">{{ config.title }}</a>
<nav>
<a href="">Source</a>,
<a href="">RSS</a>
</nav>
</div>
</header> </header>
<aside> <div class="wrap grid">
<ul> <aside>
{% for item in config.extra.nav %} <ul>
<li><a href="{{ item.path }}">{{ item.title }}</a></li> {% for item in config.extra.nav %}
{% endfor %} <li><a href="{{ item.path }}">{{ item.title }}</a></li>
</ul> {% endfor %}
<span class="title">Categories</span> </ul>
{{ macros::list_taxonomy(kind="categories") }} <span class="title">Categories</span>
</aside> {{ macros::list_taxonomy(kind="categories") }}
<main> </aside>
{% block content %} <main>
{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }} {% block content %}
{% endblock %} {{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}
</main> {% endblock %}
</main>
</div>
{% block script %}{% endblock %} {% block script %}{% endblock %}
</body> </body>
</html> </html>