.eleventy.js

@@ -1,20 +1,20 @@
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 
 module.exports = function(eleventyConfig) {
-    eleventyConfig.addWatchTarget("./src/scss/");
+    eleventyConfig.addWatchTarget("./scss/");
 
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.setUseGitIgnore(false);
     eleventyConfig.addPassthroughCopy({
-        "src/img": "img",
-        "src/font": "font",
+        "img": "img",
+        "font": "font",
         "node_modules/@fortawesome/fontawesome-free/webfonts/": "font",
         "node_modules/flag-icon-css/flags/4x3/(de|us)*": "flags"
     });
 
     return {
         dir: {
-            input: "src",
+            input: "sites",
             includes: "_includes",
             layouts: "_includes/layouts",
             output: "dist"

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "website for sp-codes.de",
   "scripts": {
-    "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/main.scss dist/css/main.css",
+    "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer scss/main.scss dist/css/main.css",
     "watch:eleventy": "eleventy --serve",
     "watch:sass": "npm run compile-sass -- --watch",
     "start": "npm-run-all compile-sass --parallel watch:*",
@@ -16,7 +16,7 @@
     "url": "https://git.sp-codes.de/samuel-p/sp-codes.de"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.26.12"
+    "browser-sync": "^2.26.10"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.11.0",

scss/main.scss

@@ -1,18 +1,18 @@
-@import "node_modules/bootstrap/scss/bootstrap-grid";
-@import "node_modules/bootstrap/scss/bootstrap-reboot";
-@import "node_modules/bootstrap/scss/utilities/align";
-@import "node_modules/bootstrap/scss/utilities/spacing";
-@import "node_modules/bootstrap/scss/utilities/display";
-@import "node_modules/bootstrap/scss/utilities/text";
-@import "node_modules/bootstrap/scss/utilities/float";
+@import "~bootstrap/scss/bootstrap-grid";
+@import "~bootstrap/scss/bootstrap-reboot";
+@import "~bootstrap/scss/utilities/align";
+@import "~bootstrap/scss/utilities/spacing";
+@import "~bootstrap/scss/utilities/display";
+@import "~bootstrap/scss/utilities/text";
+@import "~bootstrap/scss/utilities/float";
 
 $fa-font-path: "../font";
-@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
-@import "node_modules/@fortawesome/fontawesome-free/scss/solid";
-@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
-@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/brands";
+@import "~@fortawesome/fontawesome-free/scss/regular";
 $flag-icon-rect-path: '';
-@import "node_modules/flag-icon-css/sass/flag-icon";
+@import "~flag-icon-css/sass/flag-icon";
 
 html, body {
   height: 100%;
@@ -64,6 +64,19 @@ a {
   }
 }
 
+.menu-top {
+  border-bottom: 1px solid #ffffff;
+}
+
+.menu-bottom {
+  border-top: 1px solid #ffffff;
+}
+
+.border-top-bottom {
+  border-top: 1px solid #ffffff;
+  border-bottom: 1px solid #ffffff;
+}
+
 .border-top {
   border-top: 1px solid #ffffff;
 }
@@ -84,6 +97,19 @@ a {
   flex: 1;
 }
 
+@media (max-width: 767.98px) {
+  .sp-codes {
+    font-size: 3rem;
+  }
+  .logo {
+    max-width: 128px;
+    max-height: 128px;
+  }
+  .fa-4x {
+    font-size: 2em;
+  }
+}
+
 .service {
   background-color: #222;
   border: 1px solid #fff;
@@ -153,6 +179,19 @@ a {
   color: #ffffff !important;
 }
 
+.matrix-icon {
+  margin: 0 8px;
+  width: 4em;
+  height: 4em;
+}
+
+@media (max-width: 767.98px) {
+  .matrix-icon {
+    width: 2em;
+    height: 2em;
+  }
+}
+
 code {
   background-color: #fea500;
   color: #000000;
@@ -172,26 +211,3 @@ pre {
     border-radius: initial;
   }
 }
-
-@media (max-width: 767.98px) {
-  .logo {
-    max-width: 128px;
-    max-height: 128px;
-  }
-  .fa-4x {
-    font-size: 2em;
-  }
-}
-
-.matrix-icon {
-  margin: 0 8px;
-  width: 4em;
-  height: 4em;
-}
-
-@media (max-width: 767.98px) {
-  .matrix-icon {
-    width: 2em;
-    height: 2em;
-  }
-}

sites/_includes/layouts/base.njk

@@ -36,7 +36,7 @@ title: sp-codes
     <script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
 </head>
   <body>
-    <div class="d-flex justify-content-start flex-wrap p-2 menu border-bottom">
+    <div class="d-flex justify-content-start flex-wrap p-2 menu menu-top">
     {%- for entry in collections.all | eleventyNavigation %}
       {% if entry.url.includes(locale) %}
         <div {% if entry.url == page.url %} class="active"{% endif %}>
@@ -66,7 +66,7 @@ title: sp-codes
         {{ content | safe }}
       </div>
     </div>
-    <div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
+    <div class="d-flex justify-content-start flex-wrap p-2 menu menu-bottom">
         <div class="d-flex justify-content-start flex-wrap">
             <div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
             <div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>

sites/_includes/layouts/home.njk

@@ -3,7 +3,7 @@ layout: base.njk
 ---
 <div class="row py-5">
   <div class="col">
-    <img class="logo" src="img/samuel.png">
+    <img class="logo" src="/img/samuel.png">
   </div>
 </div>
 

sites/_includes/profiles.html

@@ -2,7 +2,7 @@
     <div class="m-2"><a href="mailto:mail@sp-codes.de"><span
             class="fas fa-fw fa-4x fa-envelope"></span></a></div>
     <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-        <img class="matrix-icon" src="../img/matrix.png" alt=""></a></div>
+        <img class="matrix-icon" src="img/matrix.png" alt=""></a></div>
     <div class="m-2"><a rel="me" href="https://social.tchncs.de/@samuel_p"><span
             class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
     <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p"><span

sites/de/404.md

@@ -0,0 +1,8 @@
+---
+layout: base.njk
+key: 404
+title: Nicht gefunden
+---
+# Nicht gefunden
+
+Diese Seite existiert (noch) nicht. Schau später nochmal vorbei, oder fang von vorne an: [Home](/{{locale}}/)

sites/en/404.md

@@ -0,0 +1,8 @@
+---
+layout: base.njk
+key: 404
+title: Not Found
+---
+# Not Found
+
+This page does not exist (yet). Come back later or take a look at the beginning: [Home](/{{locale}}/)