From f1f9c2e1175b950c8d90307c9033d04c78dd6d00 Mon Sep 17 00:00:00 2001
From: Michi <michivonah@gmail.com>
Date: Tue, 10 May 2022 18:56:19 +0200
Subject: [PATCH] Update style.css

---
 style.css | 110 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 90 insertions(+), 20 deletions(-)

diff --git a/style.css b/style.css
index 68ac7fc..baae387 100644
--- a/style.css
+++ b/style.css
@@ -8,10 +8,13 @@ body{
    text-align: left;
    font-family: "open sans", sans-serif;
    scroll-behavior: smooth;
-   --maincolor: #3498db;
-   --secondcolor: #2980b9;
+   --theme1: #3498db;
+   --theme2: #2980b9;
    --background: #181818;
    --color: #fff;
+   --margin: 15px;
+   --padding: 15px;
+   --borderRadius: 12px;
    }
 
    #content{
@@ -24,20 +27,10 @@ body{
      margin: auto;
    }
 
-   #home{
-     margin: 0;
-     width: 100%;
-     height: 100vh;
-     background-image: url("assets/bg_grey.svg");
-     background-size: cover;
-     background-repeat: repeat-x;
-     background-position: center;
-   }
-
    #navbar{
      width: 100%;
      height: 56px;
-     background: var(--maincolor);
+     background: var(--theme1);
      color: #fff;
      position: fixed;
      top: 0;
@@ -56,6 +49,11 @@ body{
 
    #navbar-links{
      float: right;
+     padding: 15px;
+   }
+
+   #navbar-links a{
+     margin: 0 5px;
    }
 
    #toggleNav{
@@ -65,43 +63,111 @@ body{
    }
 
    #home{
+     margin: 0;
+     width: 100%;
+     height: 100vh;
+     background-image: url("assets/bg_grey.svg");
+     background-size: cover;
+     background-repeat: repeat-x;
+     background-position: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
-     align-items: baseline;
+     align-items: center;
    }
 
    #home img{
-     width: 80%;
+     width: 100%;
      height: auto;
      background-image: url("blob1.svg");
      background-position: right;
      background-repeat: no-repeat;
    }
 
+   #home button{
+     width: 100%;
+     height: auto;
+     min-height: 40px;
+     margin: var(--margin);
+     background: var(--theme2);
+     color: #fff;
+     border: 2px solid #fff;
+     border-radius: var(--borderRadius);
+     font-size: 1rem;
+   }
+
+   #home button:hover{
+     background: var(--theme1);
+   }
+
    #footer{
      margin: 0;
      padding: 0;
      color: #fff;
      width: auto;
      height: auto;
+     font-size: 1.1rem;
    }
 
-   #imprint, #copyright{
-     display: none;
+   #footerExpanded{
+     display: none; /* FLEX */
+     flex-direction: row;
+     flex-wrap: wrap;
+     justify-content: space-around;
+     align-items: stretch;
+     background: var(--theme1);
+     padding-bottom: 30px;
    }
 
    #footerContent{
      width: calc(100% - 30px);
      height: auto;
      min-height: 60px;
-     background: var(--maincolor);
+     background: var(--theme1);
      margin: 0;
      margin-top: -21px;
      padding: 15px;
    }
 
+   #scroll-top{
+     width: 40px;
+     height: 40px;
+     background: var(--theme1);
+     border-radius: 12px;
+     margin: 15px;
+     bottom: 0;
+     right: 0;
+     position: fixed;
+     justify-content: center;
+     display: flex;
+     font-size: 28px;
+     color: #fff;
+     transition: .1s linear;
+   }
+
+   #scroll-top i{
+     margin-top: 0px;
+     transition: .1s linear;
+     stroke-width: 3px;
+   }
+
+   #scroll-top i:hover{
+     margin-top: -5px;
+   }
+
+   .sectionTitle{
+     color: var(--color);
+     font-size: 2rem;
+   }
+
+   .sectionTitle::before{
+     content: "#";
+     color: var(--theme2);
+     margin: 0 10px 0 0;
+     user-select: auto;
+   }
+
    a{
      color: inherit;
      text-decoration: none;
@@ -123,5 +189,9 @@ body{
      outline: none;
    }
 
-  ::selection {background: var(--maincolor); color: #ffffff; border-radius: 12px;}
-  ::-moz-selection {background: var(--maincolor); color: #ffffff; border-radius: 12px;}
+   var{
+     font-style: normal;
+   }
+
+  ::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
+  ::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}