diff --git a/static/fonts/rubik-v28-latin-regular.woff2 b/static/fonts/rubik-v28-latin-regular.woff2 new file mode 100644 index 0000000..ac6ff68 Binary files /dev/null and b/static/fonts/rubik-v28-latin-regular.woff2 differ diff --git a/static/index.html b/static/index.html index b4e6af7..786313c 100644 --- a/static/index.html +++ b/static/index.html @@ -17,51 +17,56 @@ -

Univerter

+
+

Univerter

-
-

Video URL:

- - -

Quality:

- - -

Format:

- - - - - -
- -
-
-

Univerter uses yt-dlp as its backend, and supports a wide variety of platforms. yt-dlp's list can be found here, but be aware many of them wont work.

+
+

Video URL:

+ + +
+
+

Quality:

+ +
+ +
+

Format:

+ +
+
+ + + -

Please consider donating or host the website yourself! Anything - helps! (Check Codeberg for more info)

-

- Powered by yt-dlp
- Inspired by Cobalt
-

+ +
+
+ +

+ Powered by yt-dlp +
+ Inspired by Cobalt
+

+
\ No newline at end of file diff --git a/static/style.css b/static/style.css index 248d296..13e8428 100644 --- a/static/style.css +++ b/static/style.css @@ -1,18 +1,50 @@ +@font-face { + font-display: swap; + font-family: 'Rubik'; + font-style: normal; + font-weight: 400; + src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2'); +} + :root { - --primary-color: rgb(230, 210, 255); - --text-color: rgb(230, 230, 255); - --background-color: rgb(50, 35, 75); + --primary-color: rgb(205, 188, 255); + --text-color: rgb(255, 255, 255); + --background-color: rgb(20, 23, 50); --second-bg-color: black; } +@media screen and (min-width: 650px) { + .grid-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 10px; + width: 80%; + margin: auto; + } + + .grid-child { + width: 100%; + margin: auto; + align-content: center; + /* border: 2px white solid; */ + } + + select { + width: 70%; + max-width: 200px; + } +} + + * { text-align: center; color: var(--text-color); - font-family: Verdana, Geneva, Tahoma, sans-serif; + font-family: "Rubik", Verdana, Geneva, Tahoma, sans-serif; } h1, h1>* { + font-size: 3rem; color: var(--primary-color); font-weight: 100; } @@ -22,34 +54,60 @@ hr { } p, -select, -input, li { - font-size: 1.3rem; + font-size: 1.1rem; + line-height: 1.75rem; } p { margin: 5px; } -body, -html { +body { background-color: var(--background-color); + padding: 0 3%; + max-width: 700px; + margin: auto; + /* outline: 3px blue solid; */ + + margin: auto; + + display: flex; + align-items: center; } -body { - padding: 10px; +.mainDiv { + width: 100%; + /* outline: 2px white solid; */ + +} + +@media screen and (min-height: 500px) { + html, + body { + height: 100%; + } } select, input { - background-color: var(--second-bg-color); + font-size: 1.3rem; + background-color: rgba(0, 0, 20, 0.5); color: var(--text-color); margin: 5px auto; - border: 2px var(--primary-color) solid; + border: 2px rgb(150, 135, 165) solid; border-radius: 5px; padding: 7px; display: inline; + + transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +input[type="url"] { + border: none; + border-bottom: 2px white solid; + width: 80%; + font-size: 1.15remd; } a { @@ -65,6 +123,10 @@ input:hover { border-color: var(--text-color) } +option { + background-color: rgba(0, 0, 20); +} + #adv { accent-color: var(--primary-color); width: 1.15rem;