From 8c8d5afc8eb4757bcf994b442687a3e696a2ae99 Mon Sep 17 00:00:00 2001 From: giteaadmin Date: Thu, 7 Aug 2025 12:22:25 -0400 Subject: [PATCH] updated css, removed base.njk --- docker-compose.yml | 1 + src/_data/users.json | 14 +++++++ src/_includes/base.njk | 89 ------------------------------------------ src/_includes/post.njk | 2 +- src/css/style.css | 80 ++++++++++++++++++++++++++++++++++--- src/posts/test.md | 36 ++++++++++------- 6 files changed, 112 insertions(+), 110 deletions(-) create mode 100644 src/_data/users.json delete mode 100644 src/_includes/base.njk diff --git a/docker-compose.yml b/docker-compose.yml index 7664562..c2e9618 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,6 +13,7 @@ services: - .:/usr/src/app # Anonymize the node_modules directory to prevent conflicts with local modules - /app/node_modules + restart: unless-stopped labels: diun.enable: false homepage.group: Tools diff --git a/src/_data/users.json b/src/_data/users.json new file mode 100644 index 0000000..c083657 --- /dev/null +++ b/src/_data/users.json @@ -0,0 +1,14 @@ +[ + { + "name": "Alice", + "role": "Developer" + }, + { + "name": "Bob", + "role": "Designer" + }, + { + "name": "Charlie", + "role": "Project Manager" + } +] diff --git a/src/_includes/base.njk b/src/_includes/base.njk deleted file mode 100644 index 67a93ba..0000000 --- a/src/_includes/base.njk +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: "Base" -layout: "layout.njk" ---- - - - - - - {{ title }} - - - - - - -
-
-

{{ title }}

-

A demonstration of what's possible with this powerful static site generator.

-
-
-
-
- {{ content | safe }} -
-
- - - - \ No newline at end of file diff --git a/src/_includes/post.njk b/src/_includes/post.njk index d17072d..651e7d7 100644 --- a/src/_includes/post.njk +++ b/src/_includes/post.njk @@ -1,7 +1,7 @@ --- layout: "layout.njk" --- -
+

{{ title }}

Published on: {{ date | readableDate }}


diff --git a/src/css/style.css b/src/css/style.css index ac16e87..319abe4 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -81,18 +81,88 @@ body { margin-right: 1rem; color: #4299e1; } +article { + max-width: 66.66vw; + margin-left: auto; + margin-right: auto; + color: #d1d5db; + line-height: 1.6; +} +article h1, article h2, article h3, article h4, article h5, article h6 { + font-weight: 700; + color: #f9fafb; /* White headings */ + margin-top: 2em; + margin-bottom: 0.25em; + line-height: 1.2; +} +article h1 { font-size: 2.5em; } +article h2 { font-size: 2em; } +article h3 { font-size: 1.75em; } +article h4 { font-size: 1.5em; } +article h5 { font-size: 1.25em; } +article h6 { font-size: 1em; } + +article a { + color: #60a5fa; + text-decoration: none; +} +article a:hover { + text-decoration: underline; +} +article code { + background-color: #374151; + color: #e5e7eb; + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + border-radius: 3px; +} +article pre { + background-color: #1f2937; + color: #f9fafb; + padding: 1em; + border-radius: 0.5rem; + overflow-x: auto; +} +article pre code { + background-color: transparent; + padding: 0; +} +article blockquote { + border-left: 4px solid #4a5568; + padding-left: 1em; + font-style: italic; + color: #9ca3af; +} +article table { + width: 100%; + border-collapse: collapse; + margin-top: 1.5em; + margin-bottom: 1.5em; +} +article th, article td { + border: 1px solid #4a5568; + padding: 0.5em; + color: #f9fafb; +} +article th { + background-color: #374151; +} +article hr { + border: none; + border-top: 1px solid #4a5568; + margin: 2.5em 0; +} article ul { list-style-type: disc; - padding-left: 2rem; /* Adjust for indentation */ + padding-left: 2rem; margin-bottom: 1rem; } - article ol { list-style-type: decimal; - padding-left: 2rem; /* Adjust for indentation */ + padding-left: 2rem; margin-bottom: 1rem; } - article li { margin-bottom: 0.5rem; -} +} \ No newline at end of file diff --git a/src/posts/test.md b/src/posts/test.md index 1781c18..b0b6fe4 100644 --- a/src/posts/test.md +++ b/src/posts/test.md @@ -1,24 +1,24 @@ --- title: "Second blog post" date: "2025-08-06" -layout: "base.njk" +layout: "post.njk" --- -## Purpose +### Purpose This post is moreso a feature showcase of what I can do with Markdown -## What is Eleventy? +### What is Eleventy? Eleventy (or 11ty) is a simpler static site generator. It's written in JavaScript and transforms a directory of templates of various types into a folder of plain HTML files. It's known for its flexibility, speed, and the fact that it doesn't ship any client-side JavaScript by default. *** -## Markdown Features +### Markdown Features Eleventy has excellent support for Markdown. Here are some examples of what you can do. -### Basic Formatting +#### Basic Formatting You can use **bold text**, *italic text*, and even ***both***. You can also create links, like this one to the [official Eleventy website](https://www.11ty.dev/). -### Lists +#### Lists * Unordered list item 1 * Unordered list item 2 * Nested item @@ -26,7 +26,7 @@ You can use **bold text**, *italic text*, and even ***both***. You can also crea 1. Ordered list item 1 2. Ordered list item 2 -### Code Blocks +#### Code Blocks You can include inline code like `
` within a sentence. For larger code blocks, you can use fenced code blocks with syntax highlighting: ```js @@ -37,25 +37,31 @@ function greet(name) { greet('World'); ``` -### Tables +#### Tables | Feature | Description | | --------------- | ----------------------------------------------------------- | | Templating | Supports over 10 different templating languages. | | Data Cascade | Merge data from different sources to use in your templates. | -### Blockquotes +#### Blockquotes > "The web should be a platform for creativity and expression. Eleventy helps make that a reality." -### Markdown Plugins +#### Markdown Plugins You can extend Markdown's functionality with plugins. For example, with `markdown-it-emoji`, you can write things like :tada: and get 🎉. *** -## Templating and Data -Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/users.json` file. You could then use a templating language like Nunjucks within your Markdown file to loop through this data: +### Templating and Data +Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/users.json` file. +
[
+    { "name": "Alice", "role": "Developer" },
+    { "name": "Bob", "role": "Designer" }
+]
+
+You could then use a templating language like Nunjucks within your Markdown file to loop through this data: -### Team Members: +#### Team Members:
    {%- for user in users -%}
  • {{ user.name }} - {{ user.role }}
    • @@ -64,7 +70,7 @@ Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/u *** -## Shortcodes +### Shortcodes Shortcodes are reusable snippets of content. You could create a shortcode for a callout box like this: {% callout "Heads up!" %} @@ -73,7 +79,7 @@ This is a custom callout box created with a shortcode. It's a great way to creat *** -## Layouts +### Layouts Layouts allow you to wrap your content in a parent template. For example, this entire page could be a Markdown file that uses a main layout file to provide the header, footer, and overall page structure. This avoids repeating the same HTML in every file. In your Markdown file's front matter, you would specify the layout like this: