diff --git a/README.md b/README.md
index f643934..6f4823f 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1 @@
-
-
-
-
-liba.lol
-
-now open-source! yay 🎉
-
-[License (MPL-2.0)](LICENSE.md) • [Live Site](https://liba.lol)
-
-_Note: I will probably rewrite this sometime in some kind of framework, like React or Nuxt_
-
-_**P.S.:** You are free to use this site, as long as **you credit me, the original author.** For more information, read the license._
-
-
-
-
+utalom a ciganyokat
diff --git a/css/style.css b/css/style.css
index bdbb593..eae4428 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
padding: 0;
@@ -7,68 +8,69 @@
}
body {
- background-color: #121212;
- color: #FFFFFF;
- font-family: "Lato", sans-serif;
- user-select: none;
+ background-color: #121212;
+ color: #FFFFFF;
+ font-family: "Fredoka", sans-serif;
+ user-select: none;
}
.hide {
- opacity: 0;
+ opacity: 0;
}
.fade {
- animation: fade .5s ease-in;
+ animation: fade .5s ease-in;
}
@keyframes fade {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
}
h1 {
- font-size: 3em;
- margin-bottom: 10px;
- font-weight: 1000;
+ font-size: 3em;
+ margin-bottom: 10px;
+ font-weight: 1000;
}
p {
- font-size: 1.2em;
- margin-bottom: 20px;
+ font-size: 1.2em;
+ margin-bottom: 20px;
+ font-family: 'Montserrat', sans-serif;
}
a {
- color: #efefef;
- transition: color 0.1s, background-color 0.1s;
- background-color: #35405733;
- text-decoration: none;
- border-radius: 4px;
- padding: 0.16em 0.3em;
- margin: -0.2em 0;
- line-height: 1.7;
- white-space: nowrap;
-}
-
-a::after {
- content: " →";
+ display: block;
+ font-family: 'Montserrat', sans-serif;
+ color: #efefef;
+ transition: color 0.1s, background-color 0.1s;
+ background-color: #35405733;
+ text-decoration: none;
+ border-radius: 4px;
+ padding: 0.16em 0.6em;
+ margin: 0.4em 0;
+ line-height: 1.7;
+ white-space: nowrap;
+ width: 9%;
}
a:hover {
- color: #fff;
- background-color: #3b82f633;
+ color: #fff;
+ background-color: #3b82f633;
}
.rain {
- overflow: hidden;
- position: absolute;
- left: 0;
- width: 100%;
- height: 100vh;
- z-index: -99;
+ overflow: hidden;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ z-index: -99;
}
.rain.back-row {
@@ -91,9 +93,11 @@ a:hover {
0% {
transform: translateY(0vh);
}
+
75% {
transform: translateY(90vh);
}
+
100% {
transform: translateY(90vh);
}
@@ -111,25 +115,28 @@ a:hover {
0% {
opacity: 1;
}
+
65% {
opacity: 1;
}
+
75% {
opacity: 0;
}
+
100% {
opacity: 0;
}
}
.splat {
- width: 15px;
- height: 10px;
- border-top: 2px dotted rgba(255, 255, 255, 0.5);
- border-radius: 50%;
- opacity: 1;
- transform: scale(0);
- animation: splat 0.5s linear infinite;
+ width: 15px;
+ height: 10px;
+ border-top: 2px dotted rgba(255, 255, 255, 0.5);
+ border-radius: 50%;
+ opacity: 1;
+ transform: scale(0);
+ animation: splat 0.5s linear infinite;
}
@keyframes splat {
@@ -137,27 +144,30 @@ a:hover {
opacity: 1;
transform: scale(0);
}
+
80% {
opacity: 1;
transform: scale(0);
}
+
90% {
opacity: 0.5;
transform: scale(1);
}
+
100% {
opacity: 0;
transform: scale(1.5);
}
}
-.container{
- padding:5rem;
+.container {
+ padding: 5rem;
}
img.emoji {
- height: 1em;
- width: 1em;
- margin: 0 .05em 0 .1em;
- vertical-align: -0.1em;
+ height: 1em;
+ width: 1em;
+ margin: 0 .05em 0 .1em;
+ vertical-align: -0.1em;
}
\ No newline at end of file