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
|
# @11ty/eleventy output
|
||||||
src/_site/
|
src/_site/
|
||||||
_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",
|
"version": "1.0.0",
|
||||||
"description": "My personal blog",
|
"description": "My personal blog",
|
||||||
"scripts": {
|
"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}"
|
"clean": "rm -rf {_site,./src/_site}"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
@ -13,5 +14,5 @@
|
|||||||
"keywords": ["blog", "@11ty/eleventy", "eleventy"],
|
"keywords": ["blog", "@11ty/eleventy", "eleventy"],
|
||||||
"author": "Cyper",
|
"author": "Cyper",
|
||||||
"license": "ISC",
|
"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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<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>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{{ content }}
|
<div class="container">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
</main>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user