uuupah/11ty_neocities
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add a logo.webp and implement in index

Browse Source
This commit is contained in:
jonathan
2023-03-23 12:39:28 +10:30
parent f5fbccc94f
commit 8c35dd16fb
5 changed files with 115 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/_includes/layout/base.njk
View File

@ -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>

11
src/_includes/layout/blog.njk
View File

@ -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">
{% if nextPost %}<a href="{{ nextPost.url }}">&lt;== next</a>{% else %}x=={% endif %}
{% if previousPost %}<a href="{{ previousPost.url }}">prev ==&gt;</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> <article class="blog-post">{{ content | safe}}</article>
<div class="nav-buttons"> <div class="nav-buttons nav-buttons-bottom">
{% if nextPost %}<a href="{{ nextPost.url }}">&lt;== next</a>{% else %}x=={% endif %} {% if nextPost %}<a href="{{ nextPost.url }}">&lt;== next</a>{% else %}x=={% endif %}
{% if previousPost %}<a href="{{ previousPost.url }}">prev ==&gt;</a>{% else %}==x{% endif %} {% if previousPost %}<a href="{{ previousPost.url }}">prev ==&gt;</a>{% else %}==x{% endif %}
</div> </div>

50
src/_includes/layout/core.njk Normal file
View 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>

2
src/_includes/partials/link_tiles.njk
View File

@ -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>

66
src/_includes/styles.css
View File

@ -15,7 +15,7 @@
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif; "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--bg: #6a826a; --bg: #6a826a;
--container: #fffbef; --container: #fffbef;
--accent-bg: #b99b6c; --accent-bg: #b99b6c;
@ -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 {
@ -192,14 +192,14 @@ nav {
margin-top: 0; margin-top: 0;
padding-top: 5px; padding-top: 5px;
} }
.sidebar-contents { .sidebar-contents {
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
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 {
@ -354,4 +390,4 @@ footer {
// h2 { // h2 {
// font-size: 2.1rem; // font-size: 2.1rem;
// } // }
// } */ // } */