From 6ad0fcf014429cc203de47bc822d5d574612aab1 Mon Sep 17 00:00:00 2001 From: EKNr1 Date: Tue, 22 Oct 2024 15:35:45 +0200 Subject: [PATCH] Made some fancy styles. --- index.php | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.php | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 162 insertions(+), 2 deletions(-) create mode 100644 index.php diff --git a/index.php b/index.php new file mode 100644 index 0000000..c10f086 --- /dev/null +++ b/index.php @@ -0,0 +1,81 @@ + + + + + + + Wobbelnde Seite + + + + + + + + + + + +
+ +
+ +

Seite von dem Wobbler

+
+

+ Hallo, ich bin der Wobbler. +
+ Ich kann ein wenig programmieren, am liebsten verwende ich Python. +
+ Ich verwende manchmal aber auch Kotlin, JavaScript, PHP, Lua, Bash, GDScript oder C. +
+ Die Designsprachen HTML und CSS benutze ich auch manchmal, wobei mich CSS meistens zum ausrasten bringt. +
+ Jedoch umgehe ich JavaScript, auch wenn ich dafür CSS verwenden muss. +
+ Ich verwende kein Arch btw. sondern Linux Mint. + +

+
+
+

+ Hier könnt ihr mich erreichen: +
+
+ Email: emil@i21k.de +

+
+
+

+ Merge Box wurde ursprünglich von einem Typ benutzernamens "Debiankaios" auf Scratch entwickelt. +
+ Damals fand ich das Spiel ganz gut und habs in Python nachprogrammiert. +
+ Da wusste ich noch nicht, dass der Entwickler das spiel schon in Lua nachgeschrieben hat. +
+ Jedenfalls war das das erste Spiel, das ich in Python geschrieben habe, +
+ daher ist es äußerst unperformant, was vermutlich an den tausenden Einzügen im Code liegt. +
+ Heutzutage würde mein Code deutlich sauberer aussehen und ich bin froh, +
+ dass ich für die Verbrechen, die in dem Code des Spiels stecken, nicht gerecht bestraft wurde. +
+ Trotzdem kann man es spielen und ihr könnt es hier downloaden, wenn ihr wollt. + Download +

+
+
+ +
+
+ + Start + Merge Box + +
+ + + + + diff --git a/styles.php b/styles.php index 53cc60a..d01c5d0 100644 --- a/styles.php +++ b/styles.php @@ -27,7 +27,7 @@ a { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; - min-height: 400px; + min-height: 800px; border-radius: 16px; } @@ -133,11 +133,90 @@ a { .glass { backdrop-filter: blur(4px); border-radius: 16px; - margin: 8px; + margin: 32px 16px 64px; + animation-name: glassdiff; + animation-duration: 0.3s; +} + +.glass:hover { + backdrop-filter: blur(0px); + border-radius: 16px; + animation-name: glassclear; + animation-duration: 0.3s; +} + +@keyframes glassdiff { + 0% { + backdrop-filter: blur(0px); + } + 100% { + backdrop-filter: blur(4px); + } +} + +@keyframes glassclear { + 0% { + backdrop-filter: blur(4px); + } + 100% { + backdrop-filter: blur(0px); + } } .inset { box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset, -4px -4px 4px rgba(255, 255, 255, 0.2) inset; border: 1px solid rgba(255, 255, 255, 0.2); + animation-name: pushins; + animation-duration: 0.3s; +} + +.inset:hover { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2), + -4px -4px 4px rgba(255, 255, 255, 0.2); + animation-name: pullins; + animation-duration: 0.3s; +} + +@keyframes pushins { + 0% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2), + -4px -4px 4px rgba(255, 255, 255, 0.2); + } + 50% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0), + -4px -4px 4px rgba(255, 255, 255, 0); + } + 51% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0) inset, + -4px -4px 4px rgba(255, 255, 255, 0) inset; + } + 100% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset, + -4px -4px 4px rgba(255, 255, 255, 0.2) inset; + } +} + +@keyframes pullins { + 0% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset, + -4px -4px 4px rgba(255, 255, 255, 0.2) inset; + } + 50% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0) inset, + -4px -4px 4px rgba(255, 255, 255, 0) inset; + } + 51% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0), + -4px -4px 4px rgba(255, 255, 255, 0); + } + 100% { + box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2), + -4px -4px 4px rgba(255, 255, 255, 0.2); + } +} + +.ascii-art { + color: white; + background-color: rgba(51, 51, 51, 0.2); } \ No newline at end of file