mirror/ffmprovisr
1
0
Fork 0
mirror of https://github.com/amiaopensource/ffmprovisr.git synced 2025-01-26 09:55:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #259 from kfrn/gh-pages

Browse Source 
Styling changes
This commit is contained in:
Ashley 2017-10-15 13:30:45 -04:00 committed by GitHub
commit 24b8c5ac35
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/css.css
View File

@ -1,5 +1,4 @@
html, body { html, body {
font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: #888888; color: #888888;
background-color: #060606; background-color: #060606;
@ -35,18 +34,18 @@ html, body {
text-align: center; text-align: center;
} }
@media only screen and (max-width: 999px) { @media only screen and (max-width: 999px) {
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: grid-template-areas:
"header" "header"
"sidebar" "sidebar"
"content" "content"
"footer"; "footer";
} }
} }
@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) {
.grid { .grid {
grid-gap: 1rem; grid-gap: 1rem;
grid-template-columns: 25% auto; grid-template-columns: 25% auto;
@ -57,6 +56,13 @@ html, body {
} }
} }
@media only screen and (min-width: 1500px) {
.grid {
max-width: 70%;
margin: 0 auto;
}
}
a { a {
color: #91cf91; color: #91cf91;
} }
@ -84,7 +90,13 @@ h1 {
} }
h2 { h2 {
font-size: 2.5em; font-size: 1.5em;
margin: 5px 8px 8px 8px;
}
.heading {
font-size: 2em;
margin: 6px 0px 12px 0px;
} }
h3 { h3 {
@ -179,7 +191,7 @@ button {
.contents-list { .contents-list {
color: white; color: white;
border: 1px solid black; border: 1px solid black;
background-color: dimgrey; background-color: #383838;
padding: 14px; padding: 14px;
font-family: "Montserrat"; font-family: "Montserrat";
font-weight: bold; font-weight: bold;

4
index.html
View File

@ -20,7 +20,7 @@
</div> </div>
<nav class="sidebar"> <nav class="sidebar">
<h2>Table of Contents</h2> <h2 class="heading">Table of Contents</h2>
<p class="link"></p> <p class="link"></p>
<a href="#about"><div class="contents-list">About this resource</div></a> <a href="#about"><div class="contents-list">About this resource</div></a>
<a href="#basics"><div class="contents-list">FFmpeg basics</div></a> <a href="#basics"><div class="contents-list">FFmpeg basics</div></a>
@ -47,7 +47,7 @@
<div class="content"> <div class="content">
<div class="well"> <div class="well">
<h2 id="about">About ffmprovisr</h2> <h2 class="heading">About ffmprovisr</h2>
<span class="intro-lead">Making FFmpeg Easier</span> <span class="intro-lead">Making FFmpeg Easier</span>
<p>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.</p> <p>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.</p>
<p>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.</p> <p>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.</p>