mawacode/mawacode.de
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6 from malikwachter/redesign

Browse source 
Redesign
This commit is contained in:
Malik Wachter 2024-02-09 00:20:07 +01:00 committed by GitHub
parent d011055d89 e49dedfd5a
commit 0c779c5a17
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 147 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
aboutme.html
View file

@ -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>

3
aboutme/cats.html
View file

@ -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">

3
aboutme/linux.html
View file

@ -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">

2
aboutme/techno.html
View file

@ -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>

16
contactme.html
View file

@ -32,16 +32,11 @@
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="contacttitle"></h1>
<h2 id="contact"></h2>
<a id="popupButton">PGP Key</a>
<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>
@ -57,6 +52,15 @@
-----END PGP PUBLIC KEY BLOCK-----</p>
</div>
</div>
<div class="row">
<div class="col-1">
<h1 id="contacttitle"></h1>
<br>
<p id="contact"></p>
<br>
<a id="popupButton">PGP Key</a>
</div>
<div class="col-2">
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>

144
css/style.css
View file

@ -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: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%);
background-color: #111927;
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;
margin-top: 3em;
width: 190px;
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;
margin-top: 1em;
width: 190px;
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{

5
index.html
View file

@ -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">

2
js/popups.js
View file

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

BIN
pics/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 535 KiB

BIN
pics/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
pics/background2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 960 KiB

3
projects.html
View file

@ -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">

BIN
webicons/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 235 KiB

After

Width:  |  Height:  |  Size: 370 KiB

BIN
webicons/logo.xcf Normal file
View file

Binary file not shown.

BIN
webicons/menu.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB