uj design mert unatkozok

README.md

@@ -1,17 +1 @@
-<div align=center>
-
-<summary>
-
-<h1>liba.lol</h1>
-
-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._
-
-</summary>
-
-</div>
+utalom a ciganyokat

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,53 +115,59 @@ 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 {
   0% {
     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;
 }