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 }
} }

11
templates/index.html
View File

@ -3,13 +3,21 @@
<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>
<div class="wrap grid">
<aside> <aside>
<ul> <ul>
{% for item in config.extra.nav %} {% for item in config.extra.nav %}
@ -24,6 +32,7 @@
{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }} {{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}
{% endblock %} {% endblock %}
</main> </main>
</div>
{% block script %}{% endblock %} {% block script %}{% endblock %}
</body> </body>
</html> </html>