From b3375c781665ea59f38f5afa1a10a250e6b10a34 Mon Sep 17 00:00:00 2001 From: Tomas Date: Fri, 20 Mar 2020 12:39:55 -0300 Subject: [PATCH] WIP Redesign youtube-dl website --- 80x15.png | Bin 0 -> 475 bytes index.html | 83 ++++++++++--------- index.html.in | 48 +++++++++++ style.css | 219 ++++++++++++++++++-------------------------------- 4 files changed, 171 insertions(+), 179 deletions(-) create mode 100644 80x15.png create mode 100644 index.html.in diff --git a/80x15.png b/80x15.png new file mode 100644 index 0000000000000000000000000000000000000000..003dd0a6cab766ce77bf5d11f7b6f481ee398dac GIT binary patch literal 475 zcmV<10VMv3P)T4p1;jAhnYlpjRqcy0mgV8ZNOYOE!h2|*HOFOPB3ugypqr7 z<7-1H1ptl9hE18NS^c7(RA7XW)vJ^uga80zOl!>;0{}vZQp!p$(Na*={ri68TnNAH z`#L^l-OgPCx9(a1FdmPMF@zA$^Ncb4GaSd!S_>hhl=ddVD5&bmbQ1aW&?1I5K7C)n zH@DXSpp?>Dug)#c^C+dORn0la7~8Dpm#67`8lx-Hb7;d)y}OmXg<-~+@B7v;=UfP} zG>o<|yrHg8A?zLaqleM5hozK`;{br~`#}#=N*9ZTF{W0l70-$r_VBM?zpm&10=Qf$ z=W@9eP3fT+Aau~}c4L5D*F8Qt`X~S4V03jlok-fMTg_&($v$bN>nxqBcn2uIbWB*_ RZomKl002ovPDHLkV1fX4+o}Kn literal 0 HcmV?d00001 diff --git a/index.html b/index.html index b2a5aab2d..2a5b213bd 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,48 @@ - - - -youtube-dl - - - - - - - - -
youtube-dlDownload videos from YouTube - (and more sites)
- -

youtube-dl is a command-line program to download videos from YouTube.com and a few more sites. It requires the Python interpreter (2.6, 2.7, or 3.2+), and it is not platform specific. We also provide a Windows executable that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.

- - - - - - - -
Documentation
Download
Support
Develop
About
- -

You can also contact us on the irc channel #youtube-dl (webchat) on freenode.

- -

If you like this project, you may donate here.

- -
- -Creative Commons License
-Copyright © 2006-2011 Ricardo Garcia Gonzalez
-Copyright © 2011-2020 youtube-dl developers -
- + + + + + youtube-dl + + + + + +
+

youtube-dl

+

Download videos from YouTube (and more sites)

+
+
+
+
+
+

# Latest version

+

$ youtube-dl --version

+

2020.03.08

+

Download

+

+

Description:

+

youtube-dl is a command-line program to download videos from YouTube.com and a few more sites. It requires the Python interpreter (2.6, 2.7, or 3.2+), and it is not platform specific. We also provide a Windows executable that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.

+
+

# Usage

+

$ youtube-dl [OPTIONS] URL [URL...]

+
+

You can also contact us on the irc channel #youtube-dl (webchat) on freenode.

+

If you like this project, you may donate here.

+ +
+
+ + Creative Commons License + +

Copyright © 2006-2011 Ricardo Garcia Gonzalez

+

Copyright © 2011-2020 youtube-dl developers

+
+ diff --git a/index.html.in b/index.html.in new file mode 100644 index 000000000..4fb455209 --- /dev/null +++ b/index.html.in @@ -0,0 +1,48 @@ + + + + + + youtube-dl + + + + + +
+

youtube-dl

+

Download videos from YouTube (and more sites)

+
+
+
+
+
+

# Latest version

+

$ youtube-dl --version

+

@PROGRAM_VERSION@

+

Download

+

+

Description:

+

youtube-dl is a command-line program to download videos from YouTube.com and a few more sites. It requires the Python interpreter (2.6, 2.7, or 3.2+), and it is not platform specific. We also provide a Windows executable that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.

+
+

# Usage

+

$ youtube-dl [OPTIONS] URL [URL...]

+
+

You can also contact us on the irc channel #youtube-dl (webchat) on freenode.

+

If you like this project, you may donate here.

+ +
+
+ + Creative Commons License + +

Copyright © 2006-2011 Ricardo Garcia Gonzalez

+

Copyright © 2011-2020 youtube-dl developers

+
+ + diff --git a/style.css b/style.css index 3ffef747b..262cfd767 100644 --- a/style.css +++ b/style.css @@ -1,156 +1,91 @@ +html{ + position: relative; + min-height: 100%; +} + body { font-family: sans-serif; - margin-left: 10%; - margin-right: 10%; - margin-top: 2ex; + margin: 0; margin-bottom: 3ex; - background-color: white; - color: black; - /*background-color: #fff1db;*/ - background-color: white; - /* - background-image: url("gradient.png"); - background-repeat: repeat-x; - */ - /* - background-image: url("gradient2.png"); - background-repeat: repeat-y; - */ - /* - background-image: url("gradient3.png"); - background-repeat: repeat-x; - */ - /* - background-image: url("gradient4.png"); - background-repeat: repeat-y; - */ - background-image: url("gradient5.png"); - background-repeat: repeat-x; + background-color: #ffefdd; + color: #292929; + margin-left: 10vw; + margin-right: 10vw; } -.heading { - border: 0; - color: black; - font-size: xx-large; - font-weight: bold; - padding-bottom: 1ex; - border-bottom: 1px solid black; - margin-bottom: 2ex; - width: 100%; -} -.heading tr { - border: 0; -} -.heading td { - border: 0; -} -.heading a { + +.header h1 a { text-decoration: none; color: black; } -.title { - text-align: left; -} -.subtitle { - text-align: right; -} -.toc { - padding-left: 2ex; - border: 1px solid #aaaaaa; - background-color: white; - padding-bottom: 1ex; - border-radius: 10px; - -moz-border-radius: 10px; -} -.toc ul { - margin: 0; list-style-type: none; -} -hr { - margin-top: 3ex; - margin-bottom: 3ex; - width: 50%; -} -.note { - margin-top: 10ex; +.header { text-align: center; - font-size: x-small; + line-height: 1.5em; } -h1 { - font-size: x-large; - margin-top: 2ex; - color: black; - margin-left: 2%; - margin-right: 2%; -} -h2 { - font-size: large; - margin-left: 5%; - margin-right: 5%; -} -p { - margin-left: 5%; - margin-right: 5%; -} -ul { - margin-left: 5%; - margin-right: 5%; -} -li { - margin-left: 3%; - margin-top: 0.5ex; - margin-bottom: 0.5ex; -} -tt { - padding-left: 0.5ex; - padding-right: 0.5ex; - background: #dddddd; -} -#rgb { - width: 33%; - margin: 3ex auto; -} -.button { - color: white; - font-weight: bold; - font-size: x-large; - text-decoration: none; - text-align: center; + +.container { display: block; - padding: 2ex; - border-radius: 10px; - -moz-border-radius: 10px; + margin: 0 0 120px; } -#r { - background-color: #884444; - border: 2px solid #880000; +.terminal { + margin-top: 25px; + background-color: #2d2d2d; + color: #5eff00; + text-align: left; + padding-bottom: 25px; + line-height: 0.5em; + padding-top: 1px; + padding-left: 10px; + border-radius: 5px; + margin-bottom: 20px; } +.download { + text-align: center; + max-width: 50%; + margin-left: 25%; + margin-bottom: 50px; +} + +.note { + position: absolute; + left: 0; + bottom: 0; + text-align: center; + height: 85px; + width: 100%; + font-size: 12px; + line-height: 0.5em; + overflow: hidden; +} + +.download-button { + padding: 10px 20px; + text-align: center; + font-size: 20px; + line-height: 15px; + border-radius: 2px; + text-decoration: none; + color: white; + border: 1px solid #7d7d7d; +} + +.bottom-navbar { + font-size: x-large; + text-align: center; + margin-top: 30px; + line-height: 2em; +} + +.bottom-navbar a{ + padding: 5px; + text-decoration: none; + color: #004687; + border: 2px solid #004687; + margin-left: 20px; + margin-right: 20px; + border-radius: 5px; +} + #g { - background-color: #448844; - border: 2px solid #006600; + background-color: #007bff; + border-color: #007bff; } -#b { - background-color: #444488; - border: 2px solid #000088; -} -#y { - background-color: #888844; - border: 2px solid #666600; -} - -#main-support { - background-color: #448888; - border: 2px solid #008888; -} - -code.commands { - display:block; - margin-top: 0.4em; - padding: 0.7em; - background: #ccc; - background: rgba(200, 200, 200, 0.4); - white-space: pre; -} - -code.fingerprint { - font-weight: bold; - font-size: 140%; -} \ No newline at end of file