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