Merge pull request #1 from Citizen-Knowledge-Graph/simple-theme-exper…

…iment Simple theme experiment
Citizen-Knowledge-Graph · Oct 25, 2023 · 3c14c1b · 3c14c1b
2 parents ee9377d + 50eebea
commit 3c14c1b
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 18 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,10 @@
+module.exports = function(eleventyConfig) {
+    eleventyConfig.addPassthroughCopy("./src/static/css");
+
+    return {
+        dir: {
+            input: "src",      // This sets the input directory to "src"
+            includes: "_includes", // This continues to look for the "_includes" folder within "src"
+        },
+    };
+};
diff --git a/src/_includes/mylayout.njk b/src/_includes/mylayout.njk
@@ -0,0 +1,30 @@
+---
+title: My Rad Blog
+---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Citizen Knowledge Graph</title>
+    <link rel="stylesheet" href="static/css/bundle.css">
+</head>
+<body>
+
+<!-- 1. Fixed Navbar -->
+<!-- Deactivate Navbar for now
+<div class="navbar">
+    <div class="navbar-inner">
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+        <a href="#contact">Contact</a>
+    </div>
+</div>
+-->
+
+<!-- 2. Central Scrollable Element -->
+<div class="central-container">
+    {{ content | safe }}
+</div>
+</body>
+</html>
diff --git a/index.html → src/index.md b/index.html → src/index.md
@@ -1,18 +1,8 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <title>Citizen Knowledge Graph</title>
-    <script defer data-domain="citizen-knowledge-graph.github.io/ckg-site" src="https://plausible.io/js/script.js"></script>
-</head>
-<style>
-    * {
-        font-family: Arial, serif;
-    }
-</style>
-<body>
-<div style="padding: 20px">
-    <h2 style="color: darkblue">Citizen Knowledge Graph</h2>
+---
+layout: mylayout.njk
+---
+<div>
+    <h2 class="title-header">Citizen Knowledge Graph</h2>
     <br/>
 
     <h3>Der Kontext</h3>
@@ -40,6 +30,4 @@ <h2>Resourcen</h2>
             <a href="https://youtu.be/2poGL8CeD8U">Demo-Video des Prototyp</a>
         </li>
     </ul>
-</div>
-</body>
-</html>
+</div>
diff --git a/src/static/css/bundle.css b/src/static/css/bundle.css
@@ -0,0 +1,74 @@
+/* Reset some default styles for better consistency */
+body, p, a {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+/* Fixed Navbar */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    padding: 20px 0;
+    z-index: 10;
+    display: flex;
+    justify-content: center; /* This will center the actual content within the navbar */
+}
+
+.navbar-inner {
+    width: 70%; /* Same width as the central container */
+    padding-left: 25%; /* Left padding */
+    padding-right: 25%; /* Right padding */
+    display: flex;
+    align-items: center; /* This vertically centers the items if you ever change the navbar height */
+}
+
+.navbar a {
+    color: darkblue;
+    font-weight: bold;
+    margin-right: 15px; /* Space between links, remove margin from the last link */
+    text-decoration: none;
+}
+
+.navbar a:last-child {
+    margin-right: 0;
+}
+
+.navbar a:hover {
+    text-decoration: underline;
+}
+
+/* Central Scrollable Element */
+.central-container {
+    margin-top: 90px; /* Adjust according to navbar's height */
+    padding-left: 25%; /* Left padding */
+    padding-right: 25%; /* Right padding */
+    max-width: 70%; /* Or adjust according to your needs */
+    margin-left: auto;
+    margin-right: auto;
+    overflow-y: scroll; /* For vertical scrolling */
+    height: calc(100vh - 50px); /* Adjust according to navbar's height */
+    border: none; /* Remove the border or outline */
+    background-color: #ffffff; /* Set the background color of the central container to white (or any other color you want) */
+}
+
+.central-container p {
+    margin-bottom: 20px; /* Space between paragraphs or content */
+}
+
+.title-header {
+    font-size: 60px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: darkblue;
+}
+
+@media (max-width: 768px) {  /* Typically, 768px is a breakpoint for tablets, adjust if needed */
+    .central-container {
+        padding-left: 8%;  /* Reduce padding for smaller screens */
+        padding-right: 8%; /* Reduce padding for smaller screens */
+    }
+}