Merge pull request #6 from malikwachter/redesign

Redesign

aboutme.html

@@ -35,12 +35,13 @@
         <div class="row">
           <div class="col-1">
             <h1 id="aboutmetitle"></h1>
-            <h2 id="aboutme1"></h2>
             <br>
-            <h2 id="aboutme2"></h2>
+            <p id="aboutme1"></p>
+            <br>
+            <p id="aboutme2"></p>
+            <br>
+            <p id="aboutme3"></p>
             <br>
-            <h2 id="aboutme3"></h2>
-
             <ul id="aboutmelinks">
               <li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
               <li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>

aboutme/cats.html

@@ -34,7 +34,8 @@
         <div class="row">
           <div class="col-1">
             <h1 id="catstitle"></h1>
-            <h2 id="cats"></h2>
+            <br>
+            <p id="cats"></p>
           </div>
 
           <div class="col-2" id="catpics">

aboutme/linux.html

@@ -35,6 +35,8 @@
         <div class="row">
           <div class="col-1">
             <h1 id="linuxtitle"></h1>
+            <br>
+
             <h2 id="linux1"></h2>
 
             <ul class="technolist">
@@ -64,6 +66,7 @@
               <li id="linuxli10"></li>
             </ul>
 
+            <br>
             <h2 id="linux4"></h2>
 
             <ul class="technolist">

aboutme/techno.html

@@ -35,7 +35,7 @@
         <div class="row">
           <div class="col-1">
             <h1 id="technotitle"></h1>
-            <h2 id="techno"></h2>
+            <p id="techno"></p>
 
             <ul class="technolist">
               <li id="technoli1"></li>

contactme.html

@@ -32,36 +32,40 @@
       </div>
 
       <div class="content">
+        <div id="myPopup" class="Popup">
+          <div class="popupContent">
+            <span class="close">&times;</span>
+            <h1>PGP Key</h1>
+            <br>
+            <p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
+              xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br> 
+              f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
+              ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
+              GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
+              FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
+              AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
+              1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
+              OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
+              MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
+              V1WPds4rTX6GEzj+Cw==<br>
+              =rzUE<br>
+              -----END PGP PUBLIC KEY BLOCK-----</p>
+          </div>
+        </div>
+        
         <div class="row">
           <div class="col-1">
             <h1 id="contacttitle"></h1>
-            <h2 id="contact"></h2>
+            <br>
+            <p id="contact"></p>
+            <br>
             <a id="popupButton">PGP Key</a>
             
-            <div id="myPopup" class="Popup">
-              <div class="popupContent">
-                <span class="close">&times;</span>
-                <h1>PGP Key</h1>
-                <p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
-                  xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br> 
-                  f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
-                  ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
-                  GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
-                  FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
-                  AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
-                  1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
-                  OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
-                  MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
-                  V1WPds4rTX6GEzj+Cw==<br>
-                  =rzUE<br>
-                  -----END PGP PUBLIC KEY BLOCK-----</p>
-              </div>
-            </div>
           </div>
           <div class="col-2">
             <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
           </div>
-        </div>
+      </div>
 
         <div class="socialmedia">
           <a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>

css/style.css

@@ -1,7 +1,7 @@
 *{
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
 .container{
@@ -9,8 +9,12 @@
     min-height: 100vh;
     box-sizing: border-box;
     overflow: hidden;
-    background: rgb(56,56,56);
+    background-color: #111927;
-    background: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%); 
+    background-image: radial-gradient(at 30% 30%, hsl(70, 100%, 20%) 0, transparent 59%), radial-gradient(at 70% 70%, hsl(230, 100%, 20%) 0, transparent 55%);
+    background: url(../pics/background.jpg) no-repeat;  
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
 }
 
 .content {
@@ -19,20 +23,28 @@
 }
 
 .navbar {
+    z-index: 2;
+    position: relative;
     width: 100%;
     display: flex;
     align-items: center;
-    background-color: #e2de84;
     box-shadow: 5px 5px 5px;
-    padding: 40px 0;
+    padding: 30px 0;
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 0 12px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 .logo {
-    width: 180px;
+    width: 190px;
-    margin-top: 3em;
+    margin-top: 3.5em;
     margin-left: 8%;
     position: absolute;
-    transform: rotate(-5deg);
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    border-radius: 15px;
 }
 
 .menu-icon{
@@ -51,15 +63,16 @@ nav ul li{
 }
 
 nav ul li a{
-    color: black;
+    color: #bbadbe;
     font-size: 120%;
     text-decoration: none;
     padding-left: 20px;
     font-style: italic; 
+
 }
 
 nav ul li a:hover{
-    color: #ecfeaa;
+    color: #af83b9;
     cursor: pointer;
 }
 
@@ -80,15 +93,16 @@ nav ul li a:hover{
 }
 
 h1{
-    color: black;
+    color: #bbadbe;
 }
 
 h2{
-    color: #222222;
+    color: #bbadbe;
 }
 
 p{
-    color: #222222;
+    color: #bbadbe;
+    font-size: 100%;
 }
 
 .row{
@@ -101,10 +115,16 @@ p{
 .col-1{
     flex-basis: 80%;
     position: relative;
-    background-color: #e2de84;
     padding: 2%;
     box-shadow: 10px 10px 10px;
-    z-index: 2;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
+
+    z-index: 1;
 }
 
 .col-2{
@@ -135,23 +155,29 @@ p{
 }
 
 #popupButton {
-    color: black;
+    color: white;
     font-size: 100%;
     padding: 5px;
     text-decoration: none;
     background-color: #e0d94c;
     box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 #popupButton:hover{
-    color: #ecfeaa;
+    color: #af83b9;
     cursor: pointer;
 }
 
 .Popup {
     display: none;
     position: fixed;
-    z-index: 1;
+    z-index: 3;
     padding-top: 100px;
     left: 0;
     top: 0;
@@ -162,23 +188,27 @@ p{
 }
   
 .popupContent {
-    background-color: #e2de84;
     margin: auto;
     padding: 20px;
-    border: 1px solid #000000;
     width: 80%;
-    color: black;
+    color: #bbadbe;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 .close {
-    color: #aaaaaa;
+    color: #bbadbe;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }
 
 .close:hover, .close:focus {
-    color: #000;
+    color: #af83b9;
     text-decoration: none;
     cursor: pointer;
 }
@@ -187,9 +217,14 @@ p{
     height: 30px;
     margin: 5px;
     cursor: pointer;
-    background-color: #e2de84;
     padding: 5px;
     box-shadow: 5px 5px 5px;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 .socialmedia{
@@ -215,16 +250,21 @@ p{
 }
 
 #aboutmelinks li a{
-    color: black;
+    color: #bbadbe;
     font-size: 100%;
     padding: 5px;
     text-decoration: none;
-    background-color: #e0d94c;
     box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 #aboutmelinks li a:hover{
-    color: #ecfeaa;
+    color: #af83b9;
     cursor: pointer;
 }
 
@@ -235,35 +275,53 @@ p{
 }
 
 .technolist li{
-    color: black;
+    color: #bbadbe;
     font-size: 100%;
     padding: 5px;
     margin: 10px;
     text-decoration: none;
-    background-color: #e0d94c;
     box-shadow: 5px 5px 5px black;
     list-style: none;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(50, 50, 50, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 table{
     margin-left: 10%;
     text-align: center;
+    box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 table tr th{
-    color: black;
+    color: #bbadbe;
     font-size: 100%;
     padding: 5px;
-    background-color: #e0d94c;
+
-    box-shadow: 5px 5px 5px black;
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 table tr td{
-    color: black;
+    color: #bbadbe;
     font-size: 100%;
     padding: 5px;
-    background-color: #e2de84;
+
-    box-shadow: 5px 5px 5px black;
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
 }
 
 .neofetch{
@@ -285,11 +343,16 @@ table tr td{
     nav ul{
         width: 100%;
         position: absolute;
-        top: 100px;
+        top: 90px;
         right: 0;
         z-index: 2;
-        background-color: #e2de84;
         box-shadow: 10px 10px 10px;
+
+        backdrop-filter: blur(10px) saturate(100%);
+        -webkit-backdrop-filter: blur(10px) saturate(100%);
+        background-color: rgba(30, 30, 30, 0.75);
+        border-radius: 0 0 12px 12px;
+
     }
 
     nav ul li{
@@ -329,14 +392,13 @@ table tr td{
 
     .logo{
         margin-left: 4%;
-        width: 150px;
+        width: 190px;
-        margin-top: 1em;
         z-index: 4;
     }
 
     .row{
         flex-direction: column;
-        margin: 50px 0
+        margin: 50px 0;
     }
 
     .col-2{
@@ -356,6 +418,8 @@ table tr td{
 
     .col-1{
         flex-basis: 100%;
+        margin-top: 2em;
+        z-index: 1;
     }
 
     #aboutmelinks li{

index.html

@@ -35,9 +35,10 @@
         <div class="row">
           <div class="col-1">
             <h1 id="welcometitle">Looks like you have JavaScript deactivated. Please activate JavaScript. My entire JavaScript is Open-Source btw. https://github.com/malikwachter/mawacode.de/blob/main/js/lang.js</h1>
-            <h2 id="welcome1"></h2>
             <br>
-            <h2 id="welcome2"></h2>
+            <p id="welcome1"></p>
+            <br>
+            <p id="welcome2"></p>
           </div>
           <div class="col-2">
             <img src="pics/cat_frontpage.png" class="catFront">

js/popups.js

@@ -1,5 +1,5 @@
 
-
+//Full res picture site
 var fullpic = document.getElementById("fullpic")
 
 if(window.location.href.indexOf("desktop") > -1){

projects.html

@@ -35,7 +35,8 @@
         <div class="row">
           <div class="col-1">
             <h1 id="projectstitle"></h1>
-            <h2 id="projects"></h2>
+            <br>
+            <p id="projects"></p>
           </div>
 
           <div class="col-2">