mirror/ffmprovisr
1
0
Fork 0
mirror of https://github.com/amiaopensource/ffmprovisr.git synced 2024-12-26 11:48:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

turns ToC buttons into div link table

Browse Source
This commit is contained in:
Ashley Blewer 2017-10-13 23:16:45 -04:00
parent 132a00f9e7
commit 80ba7cfaa6
2 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
css/css.css
View File

@ -1,3 +1,7 @@
html, body {
font-size: 16px;
}
.grid { .grid {
display: grid; display: grid;
align-content: center; align-content: center;
@ -40,7 +44,7 @@
@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: 30% auto; grid-template-columns: 25% auto;
grid-template-areas: grid-template-areas:
"header header" "header header"
"sidebar content" "sidebar content"
@ -48,6 +52,18 @@
} }
} }
a {
color: #91cf91;
}
a:hover {
color: #5cb85c;
}
a:visited {
color: #449d44;
}
.license img { .license img {
max-width: 10em; max-width: 10em;
display: inline; display: inline;
@ -63,20 +79,16 @@ h1 {
} }
h2 { h2 {
font-size: 3em; font-size: 2.5em;
} }
h3 { h3 {
font-size: 2em; font-size: 1.5em;
} }
.intro-lead { .intro-lead {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-size: 20px; font-size: 1em;
}
.select-from {
font-size: 16px;
} }
code { code {
@ -146,15 +158,31 @@ div {
} }
.contents-list { .contents-list {
color: black; color: white;
border: 1px solid black;
background-color: dimgrey;
padding: 14px;
font-family: "Montserrat";
font-weight: bold;
font-size: 1em;
border:1px solid rgba(255, 255, 255, 0);
transition:all .5s ease-in-out;
}
.sidebar a {
text-decoration: none;
} }
.contents-list:hover { .contents-list:hover {
color: #2a9fd6; color: black;
font-size: 1.05em;
background-color: #449d44;
border:1px solid black;
} }
.contents-list:before { .contents-list:before {
content: "📼" content: "📼";
padding-right: 1em;
} }
.codeblock { .codeblock {

47
index.html
View File

@ -19,31 +19,30 @@
<h1>➺ ffmprovisr ❥</h1> <h1>➺ ffmprovisr ❥</h1>
</div> </div>
<nav class="well sidebar"> <nav class="sidebar">
<h3>Table of Contents</h3> <h2>Table of Contents</h2>
<p class="link"></p> <p class="link"></p>
<p class="select-from">Click one of the following categories to see commands of that type:</p> <a href="#about"><div class="contents-list">About this resource</div></a>
<a href="#about"><button type="button" class="btn contents-list">About this resource</button></a> <a href="#basics"><div class="contents-list">FFmpeg basics</div></a>
<a href="#basics"><button type="button" class="btn contents-list">FFmpeg basics</button></a> <a href="#concepts"><div class="contents-list">Advanced FFmpeg concepts</div></a>
<a href="#concepts"><button type="button" class="btn contents-list">Advanced FFmpeg concepts</button></a> <a href="#rewrap"><div class="contents-list">Change container (rewrap)</div></a>
<a href="#rewrap"><button type="button" class="btn contents-list">Change container (rewrap)</button></a> <a href="#transcode"><div class="contents-list">Change codec (transcode)</div></a>
<a href="#transcode"><button type="button" class="btn contents-list">Change codec (transcode)</button></a> <a href="#properties"><div class="contents-list">Change video properties</div></a>
<a href="#properties"><button type="button" class="btn contents-list">Change video properties</button></a> <a href="#join-trim"><div class="contents-list">Join/trim/create an excerpt</div></a>
<a href="#join-trim"><button type="button" class="btn contents-list">Join/trim/create an excerpt</button></a> <a href="#interlacing"><div class="contents-list">Work with interlaced video</div></a>
<a href="#interlacing"><button type="button" class="btn contents-list">Work with interlaced video</button></a> <a href="#filters-scopes"><div class="contents-list">Use filters or scopes</div></a>
<a href="#filters-scopes"><button type="button" class="btn contents-list">Use filters or scopes</button></a> <a href="#metadata"><div class="contents-list">View or strip metadata</div></a>
<a href="#metadata"><button type="button" class="btn contents-list">View or strip metadata</button></a> <a href="#create-thumbnails"><div class="contents-list">Generate image files from a video</div></a>
<a href="#create-thumbnails"><button type="button" class="btn contents-list">Generate image files from a video</button></a> <a href="#animated-gif"><div class="contents-list">Generate an animated GIF</div></a>
<a href="#animated-gif"><button type="button" class="btn contents-list">Generate an animated GIF</button></a> <a href="#create-video"><div class="contents-list">Create a video from image(s) and audio</div></a>
<a href="#create-video"><button type="button" class="btn contents-list">Create a video from image(s) and audio</button></a> <a href="#overlay"><div class="contents-list">Overlay timecode or text on a video</div></a>
<a href="#overlay"><button type="button" class="btn contents-list">Overlay timecode or text on a video</button></a> <a href="#normalise-audio"><div class="contents-list">Normalize/equalize audio</div></a>
<a href="#normalise-audio"><button type="button" class="btn contents-list">Normalize/equalize audio</button></a> <a href="#preservation"><div class="contents-list">Preservation tasks</div></a>
<a href="#preservation"><button type="button" class="btn contents-list">Preservation tasks</button></a> <a href="#test-files"><div class="contents-list">Generate test files</div></a>
<a href="#test-files"><button type="button" class="btn contents-list">Generate test files</button></a> <a href="#repair"><div class="contents-list">Repair a file</div></a>
<a href="#repair"><button type="button" class="btn contents-list">Repair a file</button></a> <a href="#ocr"><div class="contents-list">Use OCR</div></a>
<a href="#ocr"><button type="button" class="btn contents-list">Use OCR</button></a> <a href="#perceptual-similarity"><div class="contents-list">Compare similarity of videos</div></a>
<a href="#perceptual-similarity"><button type="button" class="btn contents-list">Compare similarity of videos</button></a> <a href="#other"><div class="contents-list">Something else</div></a>
<a href="#other"><button type="button" class="btn contents-list">Something else</button></a>
</nav> </nav>
<div class="content"> <div class="content">