mirror of
https://github.com/amiaopensource/ffmprovisr.git
synced 2024-12-25 03:08:20 +01:00
Merge pull request #256 from amiaopensource/toc-buttons
turns ToC buttons into div link table
This commit is contained in:
commit
21a019612c
50
css/css.css
50
css/css.css
@ -1,3 +1,7 @@
|
||||
html, body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
@ -40,7 +44,7 @@
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.grid {
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: 30% auto;
|
||||
grid-template-columns: 25% auto;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar content"
|
||||
@ -48,6 +52,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #91cf91;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #449d44;
|
||||
}
|
||||
|
||||
.license img {
|
||||
max-width: 10em;
|
||||
display: inline;
|
||||
@ -63,20 +79,16 @@ h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3em;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.intro-lead {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.select-from {
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
code {
|
||||
@ -146,15 +158,31 @@ div {
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #2a9fd6;
|
||||
color: black;
|
||||
font-size: 1.05em;
|
||||
background-color: #449d44;
|
||||
border:1px solid black;
|
||||
}
|
||||
|
||||
.contents-list:before {
|
||||
content: "📼"
|
||||
content: "📼";
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.codeblock {
|
||||
|
47
index.html
47
index.html
@ -19,31 +19,30 @@
|
||||
<h1>➺ ffmprovisr ❥</h1>
|
||||
</div>
|
||||
|
||||
<nav class="well sidebar">
|
||||
<h3>Table of Contents</h3>
|
||||
<nav class="sidebar">
|
||||
<h2>Table of Contents</h2>
|
||||
<p class="link"></p>
|
||||
<p class="select-from">Click one of the following categories to see commands of that type:</p>
|
||||
<a href="#about"><button type="button" class="btn contents-list">About this resource</button></a>
|
||||
<a href="#basics"><button type="button" class="btn contents-list">FFmpeg basics</button></a>
|
||||
<a href="#concepts"><button type="button" class="btn contents-list">Advanced FFmpeg concepts</button></a>
|
||||
<a href="#rewrap"><button type="button" class="btn contents-list">Change container (rewrap)</button></a>
|
||||
<a href="#transcode"><button type="button" class="btn contents-list">Change codec (transcode)</button></a>
|
||||
<a href="#properties"><button type="button" class="btn contents-list">Change video properties</button></a>
|
||||
<a href="#join-trim"><button type="button" class="btn contents-list">Join/trim/create an excerpt</button></a>
|
||||
<a href="#interlacing"><button type="button" class="btn contents-list">Work with interlaced video</button></a>
|
||||
<a href="#filters-scopes"><button type="button" class="btn contents-list">Use filters or scopes</button></a>
|
||||
<a href="#metadata"><button type="button" class="btn contents-list">View or strip metadata</button></a>
|
||||
<a href="#create-thumbnails"><button type="button" class="btn contents-list">Generate image files from a video</button></a>
|
||||
<a href="#animated-gif"><button type="button" class="btn contents-list">Generate an animated GIF</button></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"><button type="button" class="btn contents-list">Overlay timecode or text on a video</button></a>
|
||||
<a href="#normalise-audio"><button type="button" class="btn contents-list">Normalize/equalize audio</button></a>
|
||||
<a href="#preservation"><button type="button" class="btn contents-list">Preservation tasks</button></a>
|
||||
<a href="#test-files"><button type="button" class="btn contents-list">Generate test files</button></a>
|
||||
<a href="#repair"><button type="button" class="btn contents-list">Repair a file</button></a>
|
||||
<a href="#ocr"><button type="button" class="btn contents-list">Use OCR</button></a>
|
||||
<a href="#perceptual-similarity"><button type="button" class="btn contents-list">Compare similarity of videos</button></a>
|
||||
<a href="#other"><button type="button" class="btn contents-list">Something else</button></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="#concepts"><div class="contents-list">Advanced FFmpeg concepts</div></a>
|
||||
<a href="#rewrap"><div class="contents-list">Change container (rewrap)</div></a>
|
||||
<a href="#transcode"><div class="contents-list">Change codec (transcode)</div></a>
|
||||
<a href="#properties"><div class="contents-list">Change video properties</div></a>
|
||||
<a href="#join-trim"><div class="contents-list">Join/trim/create an excerpt</div></a>
|
||||
<a href="#interlacing"><div class="contents-list">Work with interlaced video</div></a>
|
||||
<a href="#filters-scopes"><div class="contents-list">Use filters or scopes</div></a>
|
||||
<a href="#metadata"><div class="contents-list">View or strip metadata</div></a>
|
||||
<a href="#create-thumbnails"><div class="contents-list">Generate image files from a video</div></a>
|
||||
<a href="#animated-gif"><div class="contents-list">Generate an animated GIF</div></a>
|
||||
<a href="#create-video"><div class="contents-list">Create a video from image(s) and audio</div></a>
|
||||
<a href="#overlay"><div class="contents-list">Overlay timecode or text on a video</div></a>
|
||||
<a href="#normalise-audio"><div class="contents-list">Normalize/equalize audio</div></a>
|
||||
<a href="#preservation"><div class="contents-list">Preservation tasks</div></a>
|
||||
<a href="#test-files"><div class="contents-list">Generate test files</div></a>
|
||||
<a href="#repair"><div class="contents-list">Repair a file</div></a>
|
||||
<a href="#ocr"><div class="contents-list">Use OCR</div></a>
|
||||
<a href="#perceptual-similarity"><div class="contents-list">Compare similarity of videos</div></a>
|
||||
<a href="#other"><div class="contents-list">Something else</div></a>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
|
Loading…
Reference in New Issue
Block a user