Merge pull request 'develop' (#17) from develop into master

Reviewed-on: #17
2020-07-30 22:17:12 +00:00 · 2020-07-30 22:17:12 +00:00 · 796bd3cb5c
commit 796bd3cb5c
parent 670b0f1a44 b03dd1f1f3
6 changed files with 110 additions and 51 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -12,7 +12,24 @@ steps:
    commands:
      - npm install
      - npm run build
-  - name: deploy
+  - name: deploy-develop
+    image: alpine
+    environment:
+      FTP_HOST:
+        from_secret: FTP_HOST
+      FTP_USERNAME:
+        from_secret: FTP_USERNAME
+      FTP_PASSWORD:
+        from_secret: FTP_PASSWORD
+    commands:
+      - which lftp || ( apk --update add lftp )
+      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ dev.samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+    when:
+      branch:
+        - develop
+      event:
+        - push
+  - name: deploy-master
    image: alpine
    environment:
      FTP_HOST:
--- a/README.md
+++ b/README.md
@ -12,8 +12,8 @@ Website for samuel-philipp.de
 The following Parameters are set directly on the Web-Server.

 ```
-Content-Security-Policy: default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'
-Referrer-Policy: same-origin
+Content-Security-Policy: default-src 'none'; script-src 'self' https://plausible.sp-codes.de; object-src 'none'; style-src 'self'; img-src 'self' https://img.shields.io; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self' https://plausible.sp-codes.de
+Referrer-Policy: strict-origin-when-cross-origin
 Feature-Policy: sync-xhr 'self'
 Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
 X-Content-Type-Options: nosniff
--- a/renovate.json
+++ b/renovate.json
@ -3,7 +3,7 @@
    "samuel-p"
  ],
  "baseBranches": [
-    "master"
+    "develop"
  ],
  "rangeStrategy": "bump"
 }
--- a/src/img/bg.png
+++ b/src/img/bg.png
--- a/src/index.html
+++ b/src/index.html
@ -31,8 +31,15 @@
    <meta name="twitter:image" content="https://samuel-philipp.de/img/samuel-philipp.jpg">
    <link rel="shortcut icon" href="img/samuel.png">
    <link rel="stylesheet" href="css/main.min.css">
+    <script async defer data-domain="samuel-philipp.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
 </head>
 <body>
+<div class="site-container">
+    <div class="content">
+        <div class="follow">
+            <a rel="me" href="https://social.tchncs.de/@samuel_p">
+                <img alt="Mastodon Follow" src="https://img.shields.io/mastodon/follow/249926?domain=https%3A%2F%2Fsocial.tchncs.de"></a>
+        </div>
        <div id="developer" class="image"></div>
        <div id="magician" class="image"></div>
        <div class="headers">
@ -47,10 +54,10 @@
        <code id="links" class="image">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 version="1.1" width="100%" height="100%" viewBox="0 0 2560 1440" preserveAspectRatio="xMidYMid slice">
-        <a xlink:href="//sp-codes.de" style="width: 100%; height: 100%;">
+                <a xlink:href="//sp-codes.de" class="full-size">
                    <path d="M 0,796 C 0,796 1330,480 2560,460 L 2560,0 L 0,0 Z" fill-opacity="0"></path>
                </a>
-        <a xlink:href="//sp-magic.de" style="width: 100%; height: 100%;">
+                <a xlink:href="//sp-magic.de" class="full-size">
                    <path d="M 0,796 C 0,796 1330,480 2560,460 L 2560,1440 L 0,1440 Z" fill-opacity="0"></path>
                </a>
            </svg>
@ -63,8 +70,26 @@
            <div><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
                    class="fas fa-code mr-2"></span>Code</a></div>
        </div>
-<div class="d-none">
-    <a rel="me" href="https://social.tchncs.de/@samuel_p">Mastodon</a>
+    </div>
+    <div class="footer">
+        <div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
+            <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>
+            </div>
+            <div class="flex-sm-grow-1"></div>
+            <div class="d-flex justify-content-sm-start flex-wrap">
+                <div class="mr-3"><a href="//sp-codes.de/de/imprint"><span class="fas fa-info-circle mr-2"></span>Impressum</a>
+                </div>
+                <div class="mr-3"><a href="//sp-codes.de/de/privacy"><span class="fas fa-user-secret mr-2"></span>Datenschutz</a>
+                </div>
+                <div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
+                        class="fas fa-code mr-2"></span>Code</a></div>
+                <div><a target="_blank" href="https://plausible.sp-codes.de/samuel-philipp.de"><span
+                        class="fas fa-chart-line mr-2"></span>Statistiken</a></div>
+            </div>
+        </div>
+    </div>
 </div>
 <script type="text/javascript" src="js/main.min.js"></script>
 </body>
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@ -18,10 +18,24 @@ body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0;
  margin: 0;
+}

-  &.legal {
+.site-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .content {
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  .footer {
    background-image: url("../img/bg.png");
-    padding: 2%;
+    color: #ffffff;
+    z-index: 1;
  }
 }

@ -30,7 +44,7 @@ body {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
-  position: fixed;
+  position: absolute;
  top: -25px;
  left: -25px;
  width: calc(100% + 50px);
@ -38,6 +52,14 @@ body {
  z-index: 0;
 }

+.follow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  z-index: 1;
+}
+
 #developer {
  background-image: url('../img/sp-codes.png');
 }
@ -47,7 +69,7 @@ body {
 }

 .headers {
-  position: fixed;
+  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
@ -111,19 +133,14 @@ body {
 }

 .menu {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid #ffffff;
-  border-left: 1px solid #ffffff;
-  border-top-left-radius: 8px;
+
+  a {
+    color: #ffffff;
+  }
 }

-.menu a {
-  color: #000000;
-}
-
-.menu a:hover {
-  color: #222222;
+.full-size {
+  width: 100%;
+  height: 100%;
 }