From 2b36d6e8ee943a6caba30a13f49e2f0bf3a47c7a Mon Sep 17 00:00:00 2001 From: wbglaeser Date: Wed, 25 Oct 2023 11:01:39 +0200 Subject: [PATCH 1/3] start building site with more structure --- .eleventy.js | 10 +++++++ src/_includes/mylayout.njk | 28 ++++++++++++++++++ index.html => src/index.md | 22 ++++---------- src/static/css/bundle.css | 59 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 102 insertions(+), 17 deletions(-) create mode 100644 .eleventy.js create mode 100644 src/_includes/mylayout.njk rename index.html => src/index.md (89%) create mode 100644 src/static/css/bundle.css diff --git a/.eleventy.js b/.eleventy.js new file mode 100644 index 0000000..8fe48be --- /dev/null +++ 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" + }, + }; +}; \ No newline at end of file diff --git a/src/_includes/mylayout.njk b/src/_includes/mylayout.njk new file mode 100644 index 0000000..48f1366 --- /dev/null +++ b/src/_includes/mylayout.njk @@ -0,0 +1,28 @@ +--- +title: My Rad Blog +--- + + + + + + Citizen Knowledge Graph + + + + + +
+
+ Home + About + Contact +
+
+ + +
+ {{ content | safe }} +
+ + diff --git a/index.html b/src/index.md similarity index 89% rename from index.html rename to src/index.md index d57b544..efe58cb 100644 --- a/index.html +++ b/src/index.md @@ -1,17 +1,7 @@ - - - - - Citizen Knowledge Graph - - - - -
+--- +layout: mylayout.njk +--- +

Citizen Knowledge Graph


@@ -40,6 +30,4 @@

Resourcen

Demo-Video des Prototyp -
- - +
\ No newline at end of file diff --git a/src/static/css/bundle.css b/src/static/css/bundle.css new file mode 100644 index 0000000..ca68729 --- /dev/null +++ b/src/static/css/bundle.css @@ -0,0 +1,59 @@ +/* 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: darkblue; + 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: white; + 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 */ +} From 84e4321d355513855b7494e3975768a015c70f1e Mon Sep 17 00:00:00 2001 From: wbglaeser Date: Wed, 25 Oct 2023 11:04:39 +0200 Subject: [PATCH 2/3] increase size of title --- src/index.md | 2 +- src/static/css/bundle.css | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/index.md b/src/index.md index efe58cb..17813d0 100644 --- a/src/index.md +++ b/src/index.md @@ -2,7 +2,7 @@ layout: mylayout.njk ---
-

Citizen Knowledge Graph

+

Citizen Knowledge Graph


Der Kontext

diff --git a/src/static/css/bundle.css b/src/static/css/bundle.css index ca68729..a3d306f 100644 --- a/src/static/css/bundle.css +++ b/src/static/css/bundle.css @@ -11,7 +11,7 @@ body, p, a { top: 0; left: 0; width: 100%; - background-color: darkblue; + background-color: white; padding: 20px 0; z-index: 10; display: flex; @@ -27,7 +27,8 @@ body, p, a { } .navbar a { - color: white; + color: darkblue; + font-weight: bold; margin-right: 15px; /* Space between links, remove margin from the last link */ text-decoration: none; } @@ -57,3 +58,10 @@ body, p, a { .central-container p { margin-bottom: 20px; /* Space between paragraphs or content */ } + +.title-header { + font-size: 60px; + font-weight: bold; + margin-bottom: 20px; + color: darkblue; +} From 50eebeab08657ff49d8148ba44684d9823e4b486 Mon Sep 17 00:00:00 2001 From: wbglaeser Date: Wed, 25 Oct 2023 11:15:10 +0200 Subject: [PATCH 3/3] adjust size for smaller screens --- src/_includes/mylayout.njk | 2 ++ src/static/css/bundle.css | 7 +++++++ 2 files changed, 9 insertions(+) diff --git a/src/_includes/mylayout.njk b/src/_includes/mylayout.njk index 48f1366..5927f91 100644 --- a/src/_includes/mylayout.njk +++ b/src/_includes/mylayout.njk @@ -12,6 +12,7 @@ title: My Rad Blog +
diff --git a/src/static/css/bundle.css b/src/static/css/bundle.css index a3d306f..d4c6961 100644 --- a/src/static/css/bundle.css +++ b/src/static/css/bundle.css @@ -65,3 +65,10 @@ body, p, a { 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 */ + } +} \ No newline at end of file