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

11
templates/index.html
View File

@ -3,13 +3,21 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ config.title }}{% endblock %}</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<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>
<div class="wrap grid">
<aside>
<ul>
{% for item in config.extra.nav %}
@ -24,6 +32,7 @@
{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}
{% endblock %}
</main>
</div>
{% block script %}{% endblock %}
</body>
</html>