new defaults

assets/scss/common/_global.scss

@@ -9,17 +9,22 @@ body {
   min-height: 100vh;
 }
 
+img,
+svg {
+  max-width: 100%;
+}
+
 .wrapper {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
-  padding: 0 10px;
+  padding: 0 20px;
 }
 
 .header,
 .footer {
-  padding: 10px;
-  background-color: #f6f6f6;
+  padding: 10px 20px;
+  background-color: var(--background);
 
   a {
     text-decoration: none;

assets/scss/common/_typo.scss

@@ -1,3 +1,9 @@
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  color: var(--typo);
+}
+
 a {
-  color: black;
+  color: var(--typo);
 }

assets/scss/common/_variables.scss

@@ -0,0 +1,4 @@
+:root {
+  --background: #f6f6f6;
+  --typo: #3e3e3e;
+}

assets/scss/components/_footer.scss

@@ -1,4 +1,8 @@
 .footer {
   margin-top: auto;
   text-align: right;
+
+  a:hover {
+    text-decoration: underline;
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kirby-bucket",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Kirby Bucket is a simple developer theme and boilerplate for the Kirby CMS, to build websites fast and easy.",
   "author": "Manuel Deutsch",
   "license": "ISC",

readme.md

@@ -38,6 +38,12 @@ For a simple and easy deploy, we use github actions.
 The action will run composer, npm build and copy the files via FTP to your Server.
 Don't forget to add your secrets within github settings!
 
+## 🧴 Links
+
+-   Kirby docs: https://getkirby.com/docs
+-   Parcel docs: https://parceljs.org/docs/
+-   Favicon Generation: https://favicon.io
+
 ## 💫 Inspirational Quote
 
 > Seek not for fresher founts afar, just drop your bucket where you are.

site/snippets/footer.php

@@ -1,5 +1,4 @@
 <footer class="footer">
   <span>&copy; <?= date("Y") ?></span> -
-  <a href="<?= url() ?>/imprint-privacy">Imprint & Privacy</a> |
-  <a href="<?= url() ?>/panel">Panel</a>
+  <a href="<?= url() ?>/imprint-privacy">Imprint & Privacy</a>
 </footer>

site/snippets/head.php

@@ -31,11 +31,11 @@
   <meta property="og:image" content="<?= $image->url() ?>" />
   <?php endif; ?>
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
-  <link rel="shortcut icon" type="image/x-icon" href="/assets/iconsfavicon.ico">
-  <link rel="manifest" href="/site.webmanifest">
+  <link rel="apple-touch-icon" sizes="180x180" href="<?= $site->url() ?>/assets/icons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="<?= $site->url() ?>/assets/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="<?= $site->url() ?>/assets/icons/favicon-16x16.png">
+  <link rel="shortcut icon" type="image/x-icon" href="<?= $site->url() ?>/assets/iconsfavicon.ico">
+  <link rel="manifest" href="<?= $site->url() ?>/site.webmanifest">
 
   <?= css(["assets/dist/scss/main.css?v1.0", "@auto"]) ?>
 </head>