add a logo.webp and implement in index
This commit is contained in:
@ -1,53 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
---
|
||||||
<html lang="en">
|
layout: layout/core.njk
|
||||||
<head>
|
---
|
||||||
<meta charset="UTF-8"/>
|
<h2>{{ title }}</h2>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
{{ content | safe}}
|
||||||
<meta property="og:image" content="/_assets/img/cropped.png"/>
|
|
||||||
<link rel="icon" type="image/x-icon" href="/_assets/img/fav.png">
|
|
||||||
{# <link rel="stylesheet" href="/_assets/css/normalize.css" /> #}
|
|
||||||
{# <link rel="stylesheet" href="/_assets/css/styles.css"/> #}
|
|
||||||
|
|
||||||
{% set normalise %}
|
|
||||||
{% include "normalize.css" %}
|
|
||||||
{% endset %}
|
|
||||||
<style>
|
|
||||||
{{normalise | cssmin | safe}}
|
|
||||||
</style>
|
|
||||||
{% set css %}
|
|
||||||
{% include "styles.css" %}
|
|
||||||
{% endset %}
|
|
||||||
<style>
|
|
||||||
{{css | cssmin | safe}}
|
|
||||||
</style>
|
|
||||||
{% if title %}
|
|
||||||
<title>{{ site.title }} - {{ title }}</title>
|
|
||||||
{% else %}
|
|
||||||
<title>{{ site.title }}</title>
|
|
||||||
{% endif %}
|
|
||||||
{% if description %}
|
|
||||||
<meta name="description" content="{{ description }}">
|
|
||||||
{% else %}
|
|
||||||
<meta name="description" content="{{ site.description }}">
|
|
||||||
{% endif %}
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<div>
|
|
||||||
{# <header>{% include 'partials/header.njk' %}</header> #}
|
|
||||||
{# <hr/> #}
|
|
||||||
<article>
|
|
||||||
<h2>{{ title }}</h2>
|
|
||||||
{{ content | safe }}
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
{% include 'partials/footer.njk' %}
|
|
||||||
</footer>
|
|
||||||
</main>
|
|
||||||
<aside>{% include 'partials/sidebar.njk' %}</aside>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,11 +1,16 @@
|
|||||||
---
|
---
|
||||||
layout: layout/base.njk
|
layout: layout/core.njk
|
||||||
---
|
---
|
||||||
{% set previousPost = collections.post | getPreviousCollectionItem(page) %}
|
{% set previousPost = collections.post | getPreviousCollectionItem(page) %}
|
||||||
{% set nextPost = collections.post | getNextCollectionItem(page) %}
|
{% set nextPost = collections.post | getNextCollectionItem(page) %}
|
||||||
<sup>{{ page.date.toLocaleDateString("en-UK") }}</sup>
|
<div class="nav-buttons nav-buttons-top">
|
||||||
<article class="blog-post">{{ content | safe}}</article>
|
{% if nextPost %}<a href="{{ nextPost.url }}"><== next</a>{% else %}x=={% endif %}
|
||||||
<div class="nav-buttons">
|
{% if previousPost %}<a href="{{ previousPost.url }}">prev ==></a>{% else %}==x{% endif %}
|
||||||
|
</div>
|
||||||
|
<h2>{{ title }}</h2>
|
||||||
|
<span class="date-tag">{{ page.date.toLocaleDateString("en-UK") }}</span>
|
||||||
|
<article class="blog-post">{{ content | safe}}</article>
|
||||||
|
<div class="nav-buttons nav-buttons-bottom">
|
||||||
{% if nextPost %}<a href="{{ nextPost.url }}"><== next</a>{% else %}x=={% endif %}
|
{% if nextPost %}<a href="{{ nextPost.url }}"><== next</a>{% else %}x=={% endif %}
|
||||||
{% if previousPost %}<a href="{{ previousPost.url }}">prev ==></a>{% else %}==x{% endif %}
|
{% if previousPost %}<a href="{{ previousPost.url }}">prev ==></a>{% else %}==x{% endif %}
|
||||||
</div>
|
</div>
|
50
src/_includes/layout/core.njk
Normal file
50
src/_includes/layout/core.njk
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<meta property="og:image" content="/_assets/img/cropped.png"/>
|
||||||
|
<link rel="icon" type="image/x-icon" href="/_assets/img/fav.png">
|
||||||
|
{# <link rel="stylesheet" href="/_assets/css/normalize.css" /> #}
|
||||||
|
{# <link rel="stylesheet" href="/_assets/css/styles.css"/> #}
|
||||||
|
|
||||||
|
{% set normalise %}
|
||||||
|
{% include "normalize.css" %}
|
||||||
|
{% endset %}
|
||||||
|
<style>
|
||||||
|
{{normalise | cssmin | safe}}
|
||||||
|
</style>
|
||||||
|
{% set css %}
|
||||||
|
{% include "styles.css" %}
|
||||||
|
{% endset %}
|
||||||
|
<style>
|
||||||
|
{{css | cssmin | safe}}
|
||||||
|
</style>
|
||||||
|
{% if title %}
|
||||||
|
<title>{{ site.title }} - {{ title }}</title>
|
||||||
|
{% else %}
|
||||||
|
<title>{{ site.title }}</title>
|
||||||
|
{% endif %}
|
||||||
|
{% if description %}
|
||||||
|
<meta name="description" content="{{ description }}">
|
||||||
|
{% else %}
|
||||||
|
<meta name="description" content="{{ site.description }}">
|
||||||
|
{% endif %}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="page-content">
|
||||||
|
{# <header>{% include 'partials/header.njk' %}</header> #}
|
||||||
|
{# <hr/> #}
|
||||||
|
{{ content | safe }}
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<hr/>
|
||||||
|
{% include 'partials/footer.njk' %}
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
<aside>{% include 'partials/sidebar.njk' %}</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -1,5 +1,5 @@
|
|||||||
<div class="link_tiles_grid">
|
<div class="link_tiles_grid">
|
||||||
<a href="{{ collections.post[-1].page.url }}">
|
<a class="bouncy" href="{{ collections.post[-1].page.url }}">
|
||||||
<img src="_assets/img/most_recent.jpg" alt="Mitsuami from the Splatoon manga saying 'pyo'. The image links to the most recent post on the website."/>
|
<img src="_assets/img/most_recent.jpg" alt="Mitsuami from the Splatoon manga saying 'pyo'. The image links to the most recent post on the website."/>
|
||||||
newest!
|
newest!
|
||||||
</a>
|
</a>
|
||||||
|
@ -68,7 +68,7 @@ a:visited {
|
|||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transform: translate(0px,-2px);
|
transform: translate(0px, -2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
@ -199,7 +199,7 @@ nav {
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-contents>img{
|
.sidebar-contents>img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -232,16 +232,29 @@ nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* switch to two tiles when it gets really small */
|
/* switch to two tiles when it gets really small */
|
||||||
@media all and (max-width: 545px) {
|
@media all and (max-width: 545px) {
|
||||||
.link_tiles_grid>a,
|
|
||||||
.link_tiles_grid>a>img {
|
|
||||||
width: calc((100vw - 85px)/2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link_tiles_grid>a>img {
|
.link_tiles_grid>a,
|
||||||
height: calc((100vw - 100px)/2);
|
.link_tiles_grid>a>img {
|
||||||
}
|
width: calc((100vw - 85px)/2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link_tiles_grid>a>img {
|
||||||
|
height: calc((100vw - 100px)/2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
/* TODO fix this magic number */
|
||||||
|
min-height: calc(100vh - 95px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tag {
|
||||||
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
||||||
article>p {
|
article>p {
|
||||||
@ -256,7 +269,7 @@ details {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pages-article>p{
|
.pages-article>p {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -279,7 +292,30 @@ footer {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-buttons-bottom {
|
||||||
|
justify-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bouncy {
|
||||||
|
animation: bounce 1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
animation-delay: 3s; /* add a 3 second delay before restarting the animation */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* body > footer {
|
/* body > footer {
|
||||||
|
Reference in New Issue
Block a user