From 8a14c6e5fbc8c0678dd58b8ae3f8b09d4d965667 Mon Sep 17 00:00:00 2001 From: Ashley Blewer Date: Mon, 9 Oct 2017 09:05:58 -0400 Subject: [PATCH] initial redesign: grow ffmprovsr --- css/css.css | 84 +++++++++++++++++++++++++++++++++++++++++------------ index.html | 69 ++++++++++++++++++++++--------------------- 2 files changed, 100 insertions(+), 53 deletions(-) diff --git a/css/css.css b/css/css.css index fab91eb..df0f927 100644 --- a/css/css.css +++ b/css/css.css @@ -1,9 +1,74 @@ +.grid { + display: grid; + align-content: center; + grid-template-areas: + "header" + "sidebar" + "content" + "footer" +} + +.header { + grid-area: header; + text-align: center; + +} + +.content { + grid-area: content; +} + +.sidebar { + grid-area: sidebar; +} + +.footer { + grid-area: footer; + text-align: center; +} + +@media only screen and (min-width: 1px) { +.grid { + grid-template-columns: 1fr; + grid-template-areas: + "header" + "sidebar" + "content" + "footer"; +} +} + +@media only screen and (min-width: 1000px) { + .grid { + grid-gap: 1rem; + grid-template-columns: 0.25fr auto; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + } +} + +.license img { + max-width: 10em; + display: inline; +} + h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; } +h1 { + letter-spacing: 0.1em; + font-size: 7vw; +} + h2 { - font-size: 24px; + font-size: 3em; +} + +h3 { + font-size: 2em; } .intro-lead { @@ -39,11 +104,6 @@ img { margin-bottom: 18px; } -h1 { - letter-spacing: 8px; - font-size: 86px; - line-height: 120px; -} div { font-family: 'Merriweather', serif; @@ -114,15 +174,3 @@ div { .footnote { font-size: 90%; } - -@media only screen and (min-width: 576px) { - img { - max-width: 60%; - } -} - -@media only screen and (min-width: 992px) { - img { - width: 100%; - } -} diff --git a/index.html b/index.html index 9920029..ec799e8 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ ffmprovisr - + @@ -13,36 +13,16 @@ -
+
-
-

➺ ffmprovisr ❥

-
+
+

➺ ffmprovisr ❥

+
- -
- -
- Making FFmpeg Easier -

FFmpeg is a powerful tool for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with a command line interface. This app helps users through the command generation process so that more people can reap the benefits of FFmpeg.

-

Each button displays helpful information about how to perform a wide variety of tasks using FFmpeg. To use this site, click on the task you would like to perform. A new window will open up with a sample command and a description of how that command works. You can copy this command and understand how the command works with a breakdown of each of the flags.

- Tutorials -

For FFmpeg basics, check out the program’s official website.

-

For instructions on how to install FFmpeg on Mac, Linux, and Windows, refer to Reto Kromer’s installation instructions.

-

For Bash and command line basics, try the Command Line Crash Course. For a little more context presented in an ffmprovisr style, try explainshell.com!

- License -

Creative Commons License
- This work is licensed under a Creative Commons Attribution 4.0 International License.

- Sister projects -

Script Ahoy: Community Resource for Archivists and Librarians Scripting

-

The Sourcecaster: an app that helps you use the command line to work through common challenges that come up when working with digital primary sources.

-

Cable Bible: A Guide to Cables and Connectors Used for Audiovisual Tech

-
- -
-
-

What do you want to do?

+ + +
+
+

About ffmprovisr

+ Making FFmpeg Easier +

FFmpeg is a powerful tool for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with a command line interface. This app helps users through the command generation process so that more people can reap the benefits of FFmpeg.

+

Each button displays helpful information about how to perform a wide variety of tasks using FFmpeg. To use this site, click on the task you would like to perform. A new window will open up with a sample command and a description of how that command works. You can copy this command and understand how the command works with a breakdown of each of the flags.

+ Tutorials +

For FFmpeg basics, check out the program’s official website.

+

For instructions on how to install FFmpeg on Mac, Linux, and Windows, refer to Reto Kromer’s installation instructions.

+

For Bash and command line basics, try the Command Line Crash Course. For a little more context presented in an ffmprovisr style, try explainshell.com!

+ License +

+ Creative Commons License
+ This work is licensed under a Creative Commons Attribution 4.0 International License. +

+ Sister projects +

Script Ahoy: Community Resource for Archivists and Librarians Scripting

+

The Sourcecaster: an app that helps you use the command line to work through common challenges that come up when working with digital primary sources.

+

Cable Bible: A Guide to Cables and Connectors Used for Audiovisual Tech

@@ -2485,14 +2486,12 @@ foreach ($file in $inputfiles) {
--> - -
-
- -
-

Made with ♥ at AMIA #AVhack15! Contribute to the project via our GitHub page!

+ + -
+