Compare commits
3 Commits
75b67b2c14
...
7aded68457
| Author | SHA1 | Date | |
|---|---|---|---|
| 7aded68457 | |||
| f5f43578ec | |||
| 2b99f7b3e9 |
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,3 +1,6 @@
|
||||
# @11ty/eleventy output
|
||||
src/_site/
|
||||
_site/
|
||||
|
||||
# MacOS files
|
||||
.DS_Store
|
||||
6
eleventy.config.js
Normal file
6
eleventy.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
|
||||
export default async function(eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy(
|
||||
{'./public/': '/'}
|
||||
)
|
||||
}
|
||||
@ -3,7 +3,8 @@
|
||||
"version": "1.0.0",
|
||||
"description": "My personal blog",
|
||||
"scripts": {
|
||||
"start": "npx @11ty/eleventy --input ./src",
|
||||
"start": "npx @11ty/eleventy --input ./src --serve",
|
||||
"build": "npx @11ty/eleventy --input .src",
|
||||
"clean": "rm -rf {_site,./src/_site}"
|
||||
},
|
||||
"repository": {
|
||||
@ -13,5 +14,5 @@
|
||||
"keywords": ["blog", "@11ty/eleventy", "eleventy"],
|
||||
"author": "Cyper",
|
||||
"license": "ISC",
|
||||
"type": "commonjs"
|
||||
"type": "module"
|
||||
}
|
||||
|
||||
117
public/css/style.css
Normal file
117
public/css/style.css
Normal file
@ -0,0 +1,117 @@
|
||||
:root {
|
||||
--navbar-height: 96px;
|
||||
--footer-height: 24px;
|
||||
|
||||
/* Unused - just for reference */
|
||||
--teal: 162, 223, 203;
|
||||
--black: 25, 23, 30;
|
||||
--brown: 81, 73, 65;
|
||||
--tan: 158, 144, 112;
|
||||
--lightblue: 147, 225, 242;
|
||||
|
||||
--background-color: white;
|
||||
--header-color: rgb(var(--lightblue));
|
||||
--footer-color: rgba(var(--teal));
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
}
|
||||
|
||||
html, body, p, h1, h2, h3, h4, h5, h6 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--header-color);
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--footer-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-logo > img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.nav-logo > p {
|
||||
color: red;
|
||||
}
|
||||
.nav-logo > p > span {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav-title > ul {
|
||||
list-style: none;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-title > ul > li {
|
||||
display: inline;
|
||||
float: left;
|
||||
}
|
||||
.nav-title > ul > li > a {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* -xs */
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
/* -sm */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
/* -md */
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
/* -lg */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
/* -xl */
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
BIN
public/img/logo.png
Normal file
BIN
public/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
20
src/_data/metadata.js
Normal file
20
src/_data/metadata.js
Normal file
@ -0,0 +1,20 @@
|
||||
const date = new Date();
|
||||
const formattedDate = date.toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
export default {
|
||||
author: {
|
||||
name: "Cyper",
|
||||
url: "https://cyper.cc"
|
||||
},
|
||||
|
||||
title: "Cy by Side!",
|
||||
url: "https://cy.cyper.cc/",
|
||||
language: "en",
|
||||
description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
|
||||
date: formattedDate,
|
||||
year: date.getFullYear()
|
||||
}
|
||||
11
src/_data/wordCount.js
Normal file
11
src/_data/wordCount.js
Normal file
@ -0,0 +1,11 @@
|
||||
export default function (data) {
|
||||
if (typeof data.content === 'string') {
|
||||
const words = data.content.trim().split(/\s+/).length;
|
||||
const minutes = Math.ceil(words / 200); // avg reading speed
|
||||
data.wordCount = words;
|
||||
data.readingTime = `${minutes} min read`;
|
||||
data.readingTimeMinutes = minutes;
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -3,15 +3,49 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
|
||||
<!-- TODO: Meta tags for embedding -->
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>CyBySide - Cyper's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>{{ title | default: "Bloggy" }}</h1>
|
||||
<nav class="container h-100">
|
||||
<div class="nav-logo">
|
||||
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
|
||||
</div>
|
||||
<div class="nav-title">
|
||||
<h1>{{ metadata.title }}</h1>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/posts">Posts</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-socials">
|
||||
<i data-lucide="twitter"></i>
|
||||
<i data-lucide="youtube"></i>
|
||||
<i data-lucide="rss"></i>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{{ content }}
|
||||
<div class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> © {{ metadata.year }}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user