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

13
_includes/blog.html
View file

@ -1,6 +1,8 @@
{% for post in paginator.posts %} <main id="post-container">
{% for post in paginator.posts %}
<article class="post"> <article class="post">
<header class="post-header wrapper"> <header class="post-header">
<div class="post-title wrapper">
<h2 class="post-title"><a href="{{post.url}}" rel="bookmark">{{post.title}}</a></h2> <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"}}"> <p class="public-date">vom <time class="post-date" datetime="{{post.date | date: "%Y-%m-%d"}}">
{% assign m = post.date | date: "%-m" %} {% assign m = post.date | date: "%-m" %}
@ -22,11 +24,14 @@
{{ post.date | date: "%Y" }}</time> {{ post.date | date: "%Y" }}</time>
{% if post.external-url %} {% if post.external-url %}
&nbsp;|&nbsp;<a href="{{post.external-url}}">Org. Post</a> &nbsp;|&nbsp;<a href="{{post.external-url}}">Org. Post</a>
{% endif %}</p> {% endif %}
</p>
</div>
</header> </header>
<div class="post-content wrapper"> <div class="post-content wrapper">
{{post.content}} {{post.content}}
</div> </div>
</article> </article>
{% endfor %} {% endfor %}
</main>
{% include pagination.html %} {% include pagination.html %}

2
_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>

6
_layouts/post.html
View file

@ -1,7 +1,8 @@
--- ---
layout: default layout: default
--- ---
<article class="post"> <main id="post-container" class="single-post">
<article class="post">
<header class="post-header"> <header class="post-header">
{% if page.featured-image %}{% include post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}{% endif %} {% if page.featured-image %}{% include post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}{% endif %}
<div class="post-title wrapper"> <div class="post-title wrapper">
@ -41,4 +42,5 @@ layout: default
<div class="post-content wrapper"> <div class="post-content wrapper">
{{ content }} {{ content }}
</div> </div>
</article> </article>
</main>

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 {