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

add boilerplate

Browse Source
This commit is contained in:
uuupah
2023-02-21 00:02:35 +10:30
commit 80ee80e014
19 changed files with 3964 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/_includes/layout/base.njk Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/styles.css" />
<title>{{ title }}</title>
</head>
<body>
<header>{% include 'partials/header.njk' %}</header>
<nav>{% include 'partials/navigation.njk' %}</nav>
<main>
<h1>{{ title }}</h1>
{{ content | safe }}
</main>
<footer>{% include 'partials/footer.njk' %}</footer>
</body>
</html>

5
src/_includes/layout/blog.njk Normal file
View File

@ -0,0 +1,5 @@
---
layout: layout/base.njk
---
<article>{{ content | safe}}</article>

1
src/_includes/partials/footer.njk Normal file
View File

@ -0,0 +1 @@
<p>This is my footer | © 2022 Me.</p>

1
src/_includes/partials/header.njk Normal file
View File

@ -0,0 +1 @@
<h1>Welcome to my Homepage</h1>

7
src/_includes/partials/navigation.njk Normal file
View File

@ -0,0 +1,7 @@
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/links/">Links</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
{#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#}

6
src/about.html Normal file
View File

@ -0,0 +1,6 @@
---
title: About Me
layout: layout/base.njk
---
<p>Heya 👋 this is my homepage.</p>

15
src/blog.html Normal file
View File

@ -0,0 +1,15 @@
---
title: This Is My Blog
layout: layout/base.njk
---
These are all of my amazing blog posts, enjoy!
<ul>
{% for post in collections.blog | reverse %}
<li>
<a href="{{ post.data.page.fileSlug }}">{{ post.data.title }}</a>
</li>
{% endfor %}
</ul>
<!-- post.data contents are at https://github.com/11ty/eleventy/discussions/2284 -->

4
src/blog/blog.json Normal file
View File

@ -0,0 +1,4 @@
{
"layout": "layout/blog",
"tags": "blog"
}

5
src/blog/my-first-post.html Normal file
View File

@ -0,0 +1,5 @@
---
title: My First Blog Post
---
<p>This is my first blog post</p>

5
src/blog/my-second-post.html Normal file
View File

@ -0,0 +1,5 @@
---
title: My Second Blog Post
---
<p>This is my second blog post</p>

5
src/blog/my-third-post.html Normal file
View File

@ -0,0 +1,5 @@
---
title: My Third Blog Post
---
<p>This is my third and final blog post</p>

6
src/contact.html Normal file
View File

@ -0,0 +1,6 @@
---
title: Contact Me
layout: layout/base.njk
---
<p>Heya 👋 this is my contact page</p>

144
src/css/styles.css Normal file
View File

@ -0,0 +1,144 @@
/* Global variables. */
:root {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Default (light) theme */
--bg: #fff;
--accent-bg: #f5f7ff;
--text: #333;
--text-light: #585858;
--border: #d8dae1;
--accent: #0d47a1;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: #212121;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--border: #666;
--accent: #ffb300;
}
}
* {
box-sizing: border-box;
}
html {
/* Set the font globally */
font-family: var(--sans-font);
scroll-behavior: smooth;
}
/* Make the body a nice central block */
body {
color: var(--text);
background: var(--bg);
font-size: 1.15rem;
line-height: 1.5;
margin: 0 auto;
max-width: 40em;
padding: 0 1em;
}
body > header {
text-align: center;
padding: 0 0.5rem 2rem 0.5rem;
box-sizing: border-box;
}
body > header h1 {
max-width: 100%;
margin: 1rem auto;
}
/* Format navigation */
nav {
border-bottom: 1px solid var(--border);
font-size: 1rem;
line-height: 2;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 2rem;
}
nav a {
margin: 1rem 1rem 0 0;
color: var(--text) !important;
padding: 0.1rem 1rem;
}
nav a:hover {
color: var(--accent) !important;
}
nav a:last-child {
margin-right: 0;
}
/* Reduce nav side on mobile */
@media only screen and (max-width: 750px) {
nav a {
border: none;
padding: 0;
color: var(--accent);
text-decoration: underline;
line-height: 1;
}
}
/* Add a little padding to ensure spacing is correct between content and nav */
main {
padding-top: 1.5rem;
}
body > footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
}
/* Format headers */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.6rem;
margin-top: 3rem;
}
/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.1rem;
}
}
/* Format links */
a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}

22
src/index.html Normal file
View File

@ -0,0 +1,22 @@
---
title: Hello World!
layout: layout/base.njk
comment: created with help from https://flamedfury.com/guides/11ty-homepage-neocities/
---
<p>
Check out your cool new static site built with
<a href="https://11ty.dev">11ty</a> on
<a href="https://neocities.org/">Neocities</a>.
</p>
<p>This homepage template is perfect for:</p>
<ul>
<li>Creating your own space on the web</li>
<li>Expressing yourself</li>
<li>Displaying all the gifs you've collected</li>
</ul>
<h2>Why do you want a homepage?</h2>
<p>The web was made for personal homepages, make this one yours</p>

12
src/links.html Normal file
View File

@ -0,0 +1,12 @@
---
title: Links
layout: layout/base.njk
---
<p>These are some of my favourite websites 🔗</p>
<ul>
<li><a href="https://flamedfury.com">fLaMEdFury.com</a></li>
<li><a href="https://11ty.dev">11ty</a></li>
<li><a href="https://neocities.org">Neocities</a></li>
<li><a href="https://yesterweb.org/">The Yesterweb</a></li>
</ul>