Restyle page
This commit is contained in:
parent
d011055d89
commit
e2c6abe241
|
@ -32,36 +32,37 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<div id="myPopup" class="Popup">
|
||||||
|
<div class="popupContent">
|
||||||
|
<span class="close">×</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 class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="contacttitle"></h1>
|
<h1 id="contacttitle"></h1>
|
||||||
<h2 id="contact"></h2>
|
<h2 id="contact"></h2>
|
||||||
<a id="popupButton">PGP Key</a>
|
<a id="popupButton">PGP Key</a>
|
||||||
|
|
||||||
<div id="myPopup" class="Popup">
|
|
||||||
<div class="popupContent">
|
|
||||||
<span class="close">×</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>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
|
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="socialmedia">
|
<div class="socialmedia">
|
||||||
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
|
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
|
||||||
|
|
119
css/style.css
119
css/style.css
|
@ -9,8 +9,12 @@
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
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 {
|
.content {
|
||||||
|
@ -22,9 +26,14 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #e2de84;
|
|
||||||
box-shadow: 5px 5px 5px;
|
box-shadow: 5px 5px 5px;
|
||||||
padding: 40px 0;
|
padding: 40px 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 {
|
.logo {
|
||||||
|
@ -33,6 +42,9 @@
|
||||||
margin-left: 8%;
|
margin-left: 8%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: rotate(-5deg);
|
transform: rotate(-5deg);
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon{
|
.menu-icon{
|
||||||
|
@ -51,7 +63,7 @@ nav ul li{
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a{
|
nav ul li a{
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
@ -59,7 +71,7 @@ nav ul li a{
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a:hover{
|
nav ul li a:hover{
|
||||||
color: #ecfeaa;
|
color: #aaaaaa;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,15 +92,15 @@ nav ul li a:hover{
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1{
|
||||||
color: black;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
color: #222222;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
color: #222222;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row{
|
.row{
|
||||||
|
@ -101,9 +113,15 @@ p{
|
||||||
.col-1{
|
.col-1{
|
||||||
flex-basis: 80%;
|
flex-basis: 80%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #e2de84;
|
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
box-shadow: 10px 10px 10px;
|
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 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -135,16 +153,22 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
#popupButton {
|
#popupButton {
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #e0d94c;
|
background-color: #e0d94c;
|
||||||
box-shadow: 5px 5px 5px black;
|
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{
|
#popupButton:hover{
|
||||||
color: #ecfeaa;
|
color: #aaaaaa;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -162,23 +186,27 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
.popupContent {
|
.popupContent {
|
||||||
background-color: #e2de84;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border: 1px solid #000000;
|
|
||||||
width: 80%;
|
width: 80%;
|
||||||
color: black;
|
color: white;
|
||||||
|
|
||||||
|
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 {
|
.close {
|
||||||
color: #aaaaaa;
|
color: white;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close:hover, .close:focus {
|
.close:hover, .close:focus {
|
||||||
color: #000;
|
color: #aaaaaa;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -187,9 +215,14 @@ p{
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #e2de84;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-shadow: 5px 5px 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{
|
.socialmedia{
|
||||||
|
@ -215,16 +248,21 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutmelinks li a{
|
#aboutmelinks li a{
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #e0d94c;
|
|
||||||
box-shadow: 5px 5px 5px black;
|
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{
|
#aboutmelinks li a:hover{
|
||||||
color: #ecfeaa;
|
color: #aaaaaa;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -235,35 +273,53 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
.technolist li{
|
.technolist li{
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #e0d94c;
|
|
||||||
box-shadow: 5px 5px 5px black;
|
box-shadow: 5px 5px 5px black;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
|
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{
|
table{
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
text-align: center;
|
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{
|
table tr th{
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
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{
|
table tr td{
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
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{
|
.neofetch{
|
||||||
|
@ -288,8 +344,13 @@ table tr td{
|
||||||
top: 100px;
|
top: 100px;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: #e2de84;
|
|
||||||
box-shadow: 10px 10px 10px;
|
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{
|
nav ul li{
|
||||||
|
|
BIN
pics/background.jpg
Normal file
BIN
pics/background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 535 KiB |
BIN
pics/background.png
Normal file
BIN
pics/background.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 154 KiB |
BIN
pics/background2.jpg
Normal file
BIN
pics/background2.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 960 KiB |
Binary file not shown.
Before Width: | Height: | Size: 235 KiB After Width: | Height: | Size: 188 KiB |
Loading…
Reference in a new issue