nyansen/nicojensen.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New Page Header

Browse source
This commit is contained in:
Nico Jensen 2021-06-21 18:50:40 +02:00
parent 8e9f9d3cf4
commit 617e2fd7d2
5 changed files with 125 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
_includes/blog.html
View file

@ -1,32 +1,37 @@
{% for post in paginator.posts %}
<article class="post">
<header class="post-header wrapper">
<h2 class="post-title"><a href="{{post.url}}" rel="bookmark">{{post.title}}</a></h2>
<p class="public-date">vom <time class="post-date" datetime="{{post.date | date: "%Y-%m-%d"}}">
{% assign m = post.date | date: "%-m" %}
{{ post.date | date: "%d" }}
{% case m %}
{% when '1' %}Januar
{% when '2' %}Februar
{% when '3' %}M&auml;rz
{% when '4' %}April
{% when '5' %}Mai
{% when '6' %}Juni
{% when '7' %}Juli
{% when '8' %}August
{% when '9' %}September
{% when '10' %}Oktober
{% when '11' %}November
{% when '12' %}Dezember
{% endcase %}
{{ post.date | date: "%Y" }}</time>
{% if post.external-url %}
&nbsp;|&nbsp;<a href="{{post.external-url}}">Org. Post</a>
{% endif %}</p>
</header>
<div class="post-content wrapper">
{{post.content}}
</div>
</article>
{% endfor %}
<main id="post-container">
{% for post in paginator.posts %}
<article class="post">
<header class="post-header">
<div class="post-title wrapper">
<h2 class="post-title"><a href="{{post.url}}" rel="bookmark">{{post.title}}</a></h2>
<p class="public-date">vom <time class="post-date" datetime="{{post.date | date: "%Y-%m-%d"}}">
{% assign m = post.date | date: "%-m" %}
{{ post.date | date: "%d" }}
{% case m %}
{% when '1' %}Januar
{% when '2' %}Februar
{% when '3' %}M&auml;rz
{% when '4' %}April
{% when '5' %}Mai
{% when '6' %}Juni
{% when '7' %}Juli
{% when '8' %}August
{% when '9' %}September
{% when '10' %}Oktober
{% when '11' %}November
{% when '12' %}Dezember
{% endcase %}
{{ post.date | date: "%Y" }}</time>
{% if post.external-url %}
&nbsp;|&nbsp;<a href="{{post.external-url}}">Org. Post</a>
{% endif %}
</p>
</div>
</header>
<div class="post-content wrapper">
{{post.content}}
</div>
</article>
{% endfor %}
</main>
{% include pagination.html %}

4
_includes/header.html
View file

@ -1,6 +1,4 @@
<header class="header" role="banner">
<div class="wrapper">
<h1><a href="/">Nico Jensen</a></h1>
<p>Was kostet die Welt?! Achso... hm, dann nehm ich ne kleine Cola!</p>
</div>
</header>
</header>

4
_layouts/default.html
View file

@ -8,9 +8,7 @@ layout: compress
<body>
{% include header.html %}
{% include navigation.html %}
<main>
{{ content }}
</main>
{{content}}
{% include footer.html %}
</body>
</html>

82
_layouts/post.html
View file

@ -1,44 +1,46 @@
---
layout: default
---
<article class="post">
<header class="post-header">
{% if page.featured-image %}{% include post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}{% endif %}
<div class="post-title wrapper">
<h2>
{% if page.external-url %}
<a href="{{ page.external-url }}">{{ page.title }}</a>
{% else %}
{{ page.title }}
{% endif %}
</h2>
<p class="public-date">vom <time class="page-date" datetime="{{ page.date | date: "%Y-%m-%d"}}">
{% assign m = page.date | date: "%-m" %}
{{ page.date | date: "%d" }}
{% case m %}
{% when '1' %}Januar
{% when '2' %}Februar
{% when '3' %}M&auml;rz
{% when '4' %}April
{% when '5' %}Mai
{% when '6' %}Juni
{% when '7' %}Juli
{% when '8' %}August
{% when '9' %}September
{% when '10' %}Oktober
{% when '11' %}November
{% when '12' %}Dezember
{% endcase %}
{{ page.date | date: "%Y" }}
</time>
{% if page.external-url %}
&nbsp;|&nbsp;<a href="{{ page.external-url }}">Org. Post</a>
{% endif %}
</p>
<main id="post-container" class="single-post">
<article class="post">
<header class="post-header">
{% if page.featured-image %}{% include post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}{% endif %}
<div class="post-title wrapper">
<h2>
{% if page.external-url %}
<a href="{{ page.external-url }}">{{ page.title }}</a>
{% else %}
{{ page.title }}
{% endif %}
</h2>
<p class="public-date">vom <time class="page-date" datetime="{{ page.date | date: "%Y-%m-%d"}}">
{% assign m = page.date | date: "%-m" %}
{{ page.date | date: "%d" }}
{% case m %}
{% when '1' %}Januar
{% when '2' %}Februar
{% when '3' %}M&auml;rz
{% when '4' %}April
{% when '5' %}Mai
{% when '6' %}Juni
{% when '7' %}Juli
{% when '8' %}August
{% when '9' %}September
{% when '10' %}Oktober
{% when '11' %}November
{% when '12' %}Dezember
{% endcase %}
{{ page.date | date: "%Y" }}
</time>
{% if page.external-url %}
&nbsp;|&nbsp;<a href="{{ page.external-url }}">Org. Post</a>
{% endif %}
</p>
</div>
</header>
<div class="post-content wrapper">
{{ content }}
</div>
</header>
<div class="post-content wrapper">
{{ content }}
</div>
</article>
</article>
</main>

57
_sass/main.scss
View file

@ -22,24 +22,44 @@ a:hover {
background: none;
}
header.header {
padding-top: 6rem;
padding-bottom: 3rem;
overflow: hidden;
.header {
position: fixed;
z-index: 20;
width: 100%;
height: 7rem;
border-bottom: #EBF2F6 1px solid;
padding: 1rem 0 1rem 2rem;
background-color:hsla(0,0%,100%,.95);
}
header.header h1 {
.header:after {
display: block;
content: "";
width: 7px;
height: 7px;
border: #E7EEF2 1px solid;
position: relative;
bottom: -20px;
left: 50%;
margin-left: -25px;
background-color:hsla(0,0%,100%,.95);
border-radius: 100%;
}
.header h1 {
margin: 0 0 1rem 0;
padding: 0;
font: 400 32px/1 'Open Sans', sans-serif;
letter-spacing: -1px;
color: #333;
margin-bottom: 6px;
text-decoration: none;
}
header.header p {
.header p {
margin: 0;
padding: 0 0 0 2px;
font: 700 14px/1 'Open Sans', sans-serif;
color: #444444;
padding: 0 0 0 2px;
}
.red {
@ -101,8 +121,12 @@ blockquote {
padding-bottom: 3.6rem;
}
.single-post {
padding-top: 10rem;
}
article.post:first-child {
padding-top: 3.6rem;
padding-top: 0;
}
article.post header.post-header div.post-title h2 {
@ -116,6 +140,7 @@ article.post header.post-header div.post-featured-image {
article.post header.post-header div.post-featured-image img {
max-width: 100%;
width: 760px;
opacity: 75%;
}
article.post header.post-header p.public-date {
@ -124,10 +149,14 @@ article.post header.post-header p.public-date {
}
footer.site-footer div.wrapper, article .post-header, .pagination {
padding-top: 3.6rem;
padding-top: 2rem;
border-top: #EBF2F6 1px solid;
}
article.post:first-child .post-header {
padding-top: 10rem;
}
footer.site-footer div.wrapper:before, article.post header.post-header:before, .pagination:before {
display: block;
content: "";
@ -135,12 +164,16 @@ footer.site-footer div.wrapper:before, article.post header.post-header:before, .
height: 7px;
border: #E7EEF2 1px solid;
position: relative;
top: -41px;
top: -25px;
left: 50%;
margin-left: -5px;
background: #FFF;
border-radius: 100%;
box-shadow: #FFF 0 0 0 5px;
}
article.post:first-child header.post-header,
article.post:first-child header.post-header:before {
border: none!important;
}
footer.site-footer {