added styling

This commit is contained in:
Luca Junge 2022-11-03 13:17:52 +01:00
parent d2ef65d336
commit ed7ab76ad9
16 changed files with 2349 additions and 26 deletions

View file

@ -1,8 +1,10 @@
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("css")
//eleventyConfig.addPassthroughCopy("css")
eleventyConfig.addPassthroughCopy("src/**/*.png")
eleventyConfig.addPassthroughCopy("src/**/*.jpg")
eleventyConfig.addPassthroughCopy("src/**/*.glb")
return {
passthroughFileCopy: true,
dir: {

6
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,6 @@
{
"emmet.includeLanguages": {
"njk": "html",
"nunjucks": "html"
}
}

2249
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -4,14 +4,25 @@
"description": "",
"main": "index.js",
"scripts": {
"build": "npx @11ty/eleventy",
"serve": "npx @11ty/eleventy --serve",
"test": "echo \"Error: no test specified\" && exit 1"
"start": "npm run dev",
"dev": "npm-run-all -p dev:*",
"dev:11ty": "npx @11ty/eleventy --serve",
"dev:tailwind": "tailwindcss -i src/css/tailwind.css -o _site/css/style.css --watch --postcss",
"build": "run-s build:*",
"build:11ty": "npx @11ty/eleventy",
"build:tailwind": "tailwindcss -i src/css/tailwind.css -o _site/css/style.css --postcss",
"deploy": "scp -r _site/* strato:www/"
},
"keywords": [],
"author": "Luca Junge",
"license": "GPL-3.0-or-later",
"devDependencies": {
"@11ty/eleventy": "^1.0.2"
"@11ty/eleventy": "^1.0.2",
"autoprefixer": "^10.4.13",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.18",
"prettier": "2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"tailwindcss": "^3.2.1"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

3
prettier.config.js Normal file
View file

@ -0,0 +1,3 @@
module.exports = {
tailwindConfig: "./tailwind.config.js"
}

View file

@ -4,18 +4,18 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="{{'css/style.css' | url}}">
<title>{{ title }}</title>
</head>
<body>
<nav>
<a href="/">Home</a>
</nav>
{% include "partials/nav.njk" %}
<main>
<div class="container mx-auto py-5 px-1">
{{ content | safe }}
</div>
</main>
<footer>
impressum bla bla
</foot>
{% include "partials/footer.njk" %}
</body>
</html>

View file

@ -0,0 +1,5 @@
<footer class="bg-gray-900 px-2 py-2 text-white font-bolder">
<div class="text-center">
luca-junge.de | made with eleventy and tailwind
</div>
</foot>

View file

@ -0,0 +1,6 @@
<nav class="bg-gray-900 px-2 py-2 text-white font-bold">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<span class="font-bold">luca-junge.de</span>
<a href="/">Home</a>
</div>
</nav>

18
src/_includes/post.njk Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>{{ title }}</title>
</head>
<body>
{% include "partials/nav.njk" %}
<div class="max-w-sm p-3 m-4 rounded-lg shadow-lg">Testing tailwind</div>
<main>
{{ content | safe }}
</main>
{% include "partials/footer.njk" %}
</body>
</html>

View file

@ -1,3 +0,0 @@
* {
color: red;
}

13
src/css/tailwind.css Normal file
View file

@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
@apply font-bold;
}
h2 {
@apply text-xl;
}
}

View file

@ -3,13 +3,12 @@ layout: layout.njk
title: The Best Eleventy Demo TM
---
<h1>luca-junge.de</h1>
<p>Welcome to my blog</p>
<ul>
<h1>Neueste Posts:</h1>
<ul class="list-disc list-inside">
{% for post in collections.post %}
<li>
<a href="{{ post.url }}">{{ post.data.title }}</a>
<a href="{{ post.url }}">
{{ post.data.title }}</a>
</li>
{% endfor %}
</ul>

View file

@ -1,8 +1,10 @@
---
layout: layout.njk
tags: post
title: Configuring Eleventy
---
# Configuring Eleventy
This is an image
<div class="text-red-200">heh</div>
![Image](image.png)

View file

@ -1,5 +1,6 @@
{
"layout": "layout.njk",
"layout": "post.njk",
"title": "Unbenannt",
"tags": "post"
"tags": "post",
"author": "Luca Junge"
}

7
tailwind.config.js Normal file
View file

@ -0,0 +1,7 @@
module.exports = {
content: ["./src/**/**/*.{njk,md}"],
theme: {
extend: {},
},
plugins: [],
}