Added some text and improved the style.

index.php

@@ -34,99 +34,75 @@ echo "    </style>";
 
       <div class="topnav-placeholder"></div>
 
-      <p class="big-text">Seite von dem Wobbler</p>
+      <p class="big-text fat-text">Seite von dem Wobbler</p>
       <div class="glass inset">
         <p class="normal-text">
           Hallo, ich bin der Wobbler.
           <br>
           Ich kann ein wenig programmieren, am liebsten verwende ich Python.
           <br>
-          Ich verwende manchmal aber auch Kotlin, JavaScript, PHP, Lua, Bash, GDScript oder C.
+          Ich habe aber auch ein wenig Erfahrung mit den Sprachen Kotlin, JavaScript, PHP, Lua, Bash, GDScript und C.
           <br>
           Die Designsprachen HTML und CSS benutze ich auch manchmal, wobei mich CSS meistens zum ausrasten bringt.
           <br>
           Jedoch umgehe ich JavaScript, auch wenn ich dafür CSS verwenden muss.
           <br>
-          Ich verwende kein Arch btw. sondern Linux Mint.
+          Ich verwende kein Arch BTW, sondern Linux Mint.
+          <br>
+          Im Sommer kann man mich immer auf dem <a href="https://fedi.camp" target="_blank">Fedicamp</a> finden.
+          <br>
+          Ich bin ein großer Fan von dezentralen Netzwerken wie Mastodon und kann es kaum erwarten,
+          <br>
+          dass <a href="https://forgejo.org" target="_blank">Forgejo</a> auch bald Föderationsfähig seien wird.
 
         </p>
       </div>
+      <div class="glass inset" id="projects">
+        <p class="fat-text heading-text">Pojekte</p>
+        <a href="https://teapot.informationsanarchistik.de/Wobbl/Bread_Editor" class="button inout" target="_blank">Bread Editor</a>
+        <p class="tiny-text">Ein biteditor, den ich mit PyQt programmiert habe.</p>
+        <hr class="inset">
+        <a href="https://teapot.informationsanarchistik.de/Wobbl/wobbl_sand" class="button inout" target="_blank">Wobbl Sand</a>
+        <p class="tiny-text">Eine einfache aber schöne Sandsimulation.</p>
+        <hr class="inset">
+        <a href="https://teapot.informationsanarchistik.de/Wobbl/Screensaver" class="button inout" target="_blank">Wobbl's Screensaver</a>
+        <p class="tiny-text">
+          Ein einfaches Programm,
+          <br>
+          welches alle .svg-Dateien in einem Ordner bildschirmschonermäßig durch das Fenster fliegen lässt.
+        </p>
+        <hr class="inset">
+        <a href="https://teapot.informationsanarchistik.de/Wobbl/wobbl_tools" class="button inout" target="_blank">Wobbl Tools</a>
+        <p class="tiny-text">Ein Modul, das ich für viele meiner Projekte brauche.</p>
+      </div>
       <div class="glass inset">
-        <p class="fat-text">Wenn ihr mal mit mir schreiben, zocken, mir helfen oder Projekten beitragen wollt:</p>
+        <p class="heading-text fat-text">Wenn ihr mal mit mir schreiben, zocken, mir helfen oder Projekten beitragen wollt:</p>
-        <br>
         <a href="javascript:copyText('emil@i21k.de')" class="button inout" title="The button copies the address.">E-Mail</a>
         <br>
-        <br>
-        <br>
         <a href="javascript:copyText('eknr1@jabber.ccc.de')" class="button inout" title="The button copies the address.">XMPP</a>
         <br>
-        <br>
-        <br>
         <a href="https://teapot.informationsanarchistik.de/Wobbl" target="_blank" class="button inout">Git (Forgejo)</a>
         <br>
-        <br>
-        <br>
         <a href="https://gitlab.com/EKNr1" target="_blank" class="button inout">GitLab</a>
-        <p class="tiny-text">
+        <p class="tiny-text inline-text">
-          Ich bin nicht mehr aktiv auf GitLab,
+          (Ich bin nicht mehr aktiv auf GitLab,
           <br>
-          da Forgejo viel besser ist und auch bald Fediverse kompatibel seien wird.
+          da Forgejo viel besser ist und auch bald Fediverse kompatibel seien wird.)
         </p>
         <br>
         <a href="https://dizl.de/@eknr1" target="_blank" class="button inout">Mastodon</a>
         <br>
-        <br>
-        <br>
         <a href="https://peertube.art3mis.de/a/eknr01/" target="_blank" class="button inout">Peertube</a>
         <br>
-        <br>
-        <br>
         <a href="https://discord.com/invite/8htpyBfdan" target="_blank" class="button inout">Discord</a>
         <br>
         <br>
-        <br>
-      </div>
-      <div class="glass inset" id="mb-int">
-        <p class="normal-text">
-          Merge Box wurde ursprünglich von einem Typ benutzernamens "Debiankaios" auf Scratch entwickelt.
-          <br>
-          Damals fand ich das Spiel ganz gut und habs in Python nachprogrammiert.
-          <br>
-          Da wusste ich noch nicht, dass der Entwickler das spiel schon in Lua nachgeschrieben hat.
-          <br>
-          Jedenfalls war das das erste Spiel, das ich in Python geschrieben habe,
-          <br>
-          daher ist es äußerst unperformant, was vermutlich an den tausenden Einzügen im Code liegt.
-          <br>
-          Heutzutage würde mein Code deutlich sauberer aussehen und ich bin froh,
-          <br>
-          dass ich für die Verbrechen, die in dem Code des Spiels stecken, nicht gerecht bestraft wurde.
-          <br>
-          Trotzdem kann man es spielen und ihr könnt es hier downloaden, wenn ihr wollt.
-        </p>
-        <br>
-        <a href="merge-box" class="button inout">Download</a>
-        <br>
-        <br>
-        <br>
-      </div>
-      <div class="glass inset">
-        <p>
-          Ein weiteres Projekt war "PyBang".
-          <br>
-          Ich wollte dem Spiel noch mehrere Modi hinzufügen, doch es blieb nur ein vier-gewinnt-Spiel.
-        </p>
-        <br>
-        <a href="https://gitlab.com/games120/pybang" target="_blank" class="button inout">PyBang</a>
-        <br>
-        <br>
-        <br>
       </div>
       <div class="glass inset">
         <p>
           Hab hier nen kleinen Datenschrottplatz an Mist,
           <br>
-          den ich mal mit irgendwem teilen musste und ich deshalb hier auf den Server geladen hab.
+          den ich mal mit irgendwem teilen musste und deshalb hier auf den Server geladen hab.
           <br>
           Evtl. könnt ihr hier etwas brauchbares finden.
         </p>
@@ -143,7 +119,7 @@ echo "    </style>";
     <div class="topnav">
 
       <a class="topnav-active" href="">Start</a>
-      <a class="topnav-inactive" href="#mb-int">Merge Box</a>
+      <a class="topnav-inactive" href="#projects">Projekte</a>
 
     </div>
 

styles.php

@@ -41,7 +41,7 @@ label {
 }
 
 hr {
-    margin: 0px 16px 16px 0px;
+    margin: 0px 8px 16px 8px;
     border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
@@ -83,6 +83,7 @@ hr {
     text-align: center;
     padding: 5px 16px;
     text-decoration: none;
+    text-shadow: none;
     font-size: 17px;
 }
 
@@ -99,6 +100,7 @@ hr {
     padding: 5px 16px;
     text-decoration: none;
     font-size: 17px;
+    text-shadow: none;
 }
 
 .scriptsinactive:hover {
@@ -121,7 +123,7 @@ hr {
 .big-text {
     font-family: ubuntu, arial;
     color: white;
-    font-size: 26px;
+    font-size: 32px;
 }
 
 .heading-text {
@@ -164,6 +166,11 @@ hr {
     text-decoration: none;
 }
 
+.inline-text {
+    display: inline-block;
+    margin: 0px;
+}
+
 .search-folder {
     visibility: hidden;
 }
@@ -274,11 +281,12 @@ hr {
 .button {
     border: 2px solid rgba(255, 255, 255, 0.5);
     border-radius: 16px;
-    margin: 0px 16px 16px 16px;
+    margin: 4px 8px 4px 16px;
     padding: 8px;
     font-size: 16px;
     text-align: center;
     font-weight: bold;
+    display: inline-block;
 }
 
 ::-webkit-scrollbar {
@@ -296,4 +304,18 @@ hr {
     backdrop-filter: blur(16px);
     border-radius: 0px 16px 16px 0px;
     background-color: rgba(4, 170, 109, 0.4);
+}
+
+.hacked-checkbox {
+    position: absolute;
+    left: -100vw;
+}
+
+.hcb-label {
+    padding: 8px 16px;
+    margin: 16px 0px 0px 16px;
+    cursor: pointer;
+    border-radius: 16px 16px 0px 0px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    display: inline-block;
 }