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

4
_includes/header.html
View file

@ -1,6 +1,4 @@
<header class="header" role="banner"> <header class="header" role="banner">
<div class="wrapper">
<h1><a href="/">Nico Jensen</a></h1> <h1><a href="/">Nico Jensen</a></h1>
<p>Was kostet die Welt?! Achso... hm, dann nehm ich ne kleine Cola!</p> <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> <body>
{% include header.html %} {% include header.html %}
{% include navigation.html %} {% include navigation.html %}
<main> {{content}}
{{ content }}
</main>
{% include footer.html %} {% include footer.html %}
</body> </body>
</html> </html>

82
_layouts/post.html
View file

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

57
_sass/main.scss
View file

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