.eleventy.js

@@ -7,7 +7,8 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.setUseGitIgnore(false);
     eleventyConfig.addPassthroughCopy({
         "src/img": "img",
-        "src/font": "font"
+        "src/font": "font",
+        "src/favicon.*": "",
     });
     eleventyConfig.addShortcode("translatedUrl", function (currentLocale, newLocale) {
         return this.page.url.replace(new RegExp(`\/${currentLocale}\/`), `/${newLocale}/`);

package.json

@@ -3,11 +3,13 @@
   "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/ -o dist/css/",
+    "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/main.scss -o dist/css/",
+    "p-minify-css": "purifycss dist/css/main.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html -i -m -o dist/css/main.css",
+    "minify-css": "uncss -n -H dist/ -o dist/css/main.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html",
     "watch:eleventy": "eleventy --serve",
-    "watch:sass": "npm run compile-sass -- --watch",
+    "watch:sass": "npm-run-all compile-sass minify-css -- --watch",
-    "start": "npm-run-all compile-sass --parallel watch:*",
+    "start": "npm-run-all compile-sass minify-css --parallel watch:*",
-    "build": "npm run compile-sass && eleventy && npm run move-index",
+    "build": "npm run compile-sass && npm run strip-css && eleventy && npm run move-index && npm run minify-css",
     "move-index": "cpx dist/de/index.html dist/"
   },
   "author": "samuel-p",
@@ -24,7 +26,8 @@
     "cpx": "^1.5.0",
     "node-sass": "^6.0.0",
     "node-sass-tilde-importer": "^1.0.2",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "uncss": "^0.17.3"
   },
   "dependencies": {
     "bootstrap": "^4.6.0"

src/_data/services.json

@@ -88,7 +88,7 @@
   },
   {
     "id": "translate",
-    "name": "LibreTranslate",
+    "name": "Translate",
     "icon": "i-language",
     "url": "https://translate.sp-codes.de",
     "status": "https://translate.sp-codes.de",

src/_includes/layouts/base.njk

@@ -31,8 +31,8 @@ title: sp-codes
     <meta name="twitter:title" content="sp-codes">
     <meta name="twitter:description" content="Samuel Philipp - Software Engineer from Magdeburg">
     <meta name="twitter:image" content="https://sp-codes.de/img/sp-codes.jpg">
-    <link rel="shortcut icon" href="img/sp-codes.ico">
+    <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="/css/logo.css">
+    <link rel="icon" type="image/png" href="favicon.png">
     <link rel="stylesheet" href="/css/main.css">
     <script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.outbound-links.js"></script>
 </head>

src/_includes/profiles.html

@@ -1,27 +1,27 @@
 <div class="d-flex justify-content-center flex-wrap my-3 contact-links">
     <div class="m-2"><a href="mailto:mail@sp-codes.de">
-        <span class="d-none d-md-inline-block i-envelope i-4x"></span>
+        <span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-envelope i-2x"></span>
+        <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
     </a></div>
     <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-        <span class="d-none d-md-inline-block i-matrix i-4x"></span>
+        <span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-matrix i-2x"></span>
+        <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
     </a></div>
     <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p">
-        <span class="d-none d-md-inline-block i-mastodon i-4x"></span>
+        <span class="d-none d-md-inline-block i-mastodon i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-mastodon i-2x"></span>
+        <span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span>
     </a></div>
     <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p">
-        <span class="d-none d-md-inline-block i-stackoverflow i-4x"></span>
+        <span class="d-none d-md-inline-block i-stackoverflow i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-stackoverflow i-2x"></span>
+        <span class="d-inline-block d-md-none i-stackoverflow i-2x i-fw"></span>
     </a></div>
     <div class="m-2"><a href="https://git.sp-codes.de/samuel-p">
-        <span class="d-none d-md-inline-block i-gitea i-4x"></span>
+        <span class="d-none d-md-inline-block i-gitea i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-gitea i-2x"></span>
+        <span class="d-inline-block d-md-none i-gitea i-2x i-fw"></span>
     </a></div>
     <div class="m-2"><a href="https://github.com/samuel-p">
-        <span class="d-none d-md-inline-block i-github i-4x"></span>
+        <span class="d-none d-md-inline-block i-github i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-github i-2x"></span>
+        <span class="d-inline-block d-md-none i-github i-2x i-fw"></span>
     </a></div>
 </div>
 <div class="d-flex justify-content-center mb-3">

src/_includes/services-extended.html

@@ -6,7 +6,7 @@
         <div class="beta">TEST-PHASE</div>
         {% endif %}
         <div class="inner">
-            <i class="{{service.icon}} i-4x"></i>
+            <i class="{{service.icon}} i-4x i-fw"></i>
             <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="i-external-link"></i></a>{% endif %}</h2>
             {% if service.status %}

src/_includes/services-simple.html

@@ -6,7 +6,7 @@
             {% if service.beta == true %}
             <div class="beta">TEST-PHASE</div>
             {% endif %}
-            <i class="{{service.icon}} i-2x"></i>
+            <i class="{{service.icon}} i-2x i-fw"></i>
             <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="i-external-link"></i></a>{% endif %}</h2>
         </div>

src/scss/main.scss

@@ -1,3 +1,9 @@
+@import "logo";
+$icomoon-font-path: "../font";
+@import "icons/style";
+$flag-icon-path: '../img';
+@import "icons/flags";
+
 @import "node_modules/bootstrap/scss/bootstrap-grid";
 @import "node_modules/bootstrap/scss/bootstrap-reboot";
 @import "node_modules/bootstrap/scss/utilities/align";
@@ -9,11 +15,6 @@
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins/_breakpoints";
 
-$icomoon-font-path: "../font";
-@import "icons/style";
-$flag-icon-path: '../img';
-@import "icons/flags";
-
 $primary: #fea500;
 $primary_dark: #e5a52e;
 
@@ -24,7 +25,7 @@ html, body {
 }
 
 body {
-  background-image: url("../img/bg.png");
+  background-image: url("../img/bg.jpg");
   color: #fff;
   font-weight: 300;
   min-height: 100vh;