mirror/ffmprovisr
1
0
Fork 0
mirror of https://github.com/amiaopensource/ffmprovisr.git synced 2025-10-31 08:58:11 +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
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 {
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
View File

@@ -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">