invert more pictures and iprove dark theme
This commit is contained in:
parent
9b6e7bd011
commit
96b8f3ccef
|
@ -331,7 +331,10 @@ The surface can be broken into 8 groups of controls:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img alt="X-Touch Mini MC mode layout" src="/images/xtouch-mini-mcp.png">
|
<img
|
||||||
|
alt="X-Touch Mini MC mode layout"
|
||||||
|
src="/images/xtouch-mini-mcp.png"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
X-Touch Mini MC mode layout
|
X-Touch Mini MC mode layout
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
|
@ -11,7 +11,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img width="300px" src="/images/aux_routing.png" alt="Aux signal routing">
|
<img
|
||||||
|
width="300px"
|
||||||
|
src="/images/aux_routing.png"
|
||||||
|
alt="Aux signal routing"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
Aux signal routing
|
Aux signal routing
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
@ -24,7 +28,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img width="300px" src="/images/subgroup_routes.png" alt="sub group signal routing">
|
<img
|
||||||
|
width="300px"
|
||||||
|
src="/images/subgroup_routes.png"
|
||||||
|
alt="sub group signal routing"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
Sub group signal routing
|
Sub group signal routing
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
|
@ -5,7 +5,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img style="width:75%;" src="/images/countourdesign-shuttle.svg" alt="ContourDesign ShuttlePRO v2 and ShuttleXpress">
|
<img
|
||||||
|
style="width:75%;"
|
||||||
|
src="/images/countourdesign-shuttle.svg"
|
||||||
|
alt="ContourDesign ShuttlePRO v2 and ShuttleXpress"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
Contour Design ShuttlePRO v1 (left), ShuttlePRO v2 (middle), and
|
Contour Design ShuttlePRO v1 (left), ShuttlePRO v2 (middle), and
|
||||||
ShuttleXpress (right)
|
ShuttleXpress (right)
|
||||||
|
|
|
@ -5,7 +5,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img style="width:75%;" src="/images/novation-launch-control-xl.svg" alt="Novation Launch Control XL">
|
<img
|
||||||
|
style="width:75%;"
|
||||||
|
src="/images/novation-launch-control-xl.svg"
|
||||||
|
alt="Novation Launch Control XL"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
Novation Launch Control XL
|
Novation Launch Control XL
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
|
@ -4,7 +4,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img style="width:75%;" src="/images/steinberg-cc121.svg" alt="Steinberg CC121">
|
<img
|
||||||
|
style="width:75%;"
|
||||||
|
src="/images/steinberg-cc121.svg"
|
||||||
|
alt="Steinberg CC121"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
Steinberg CC121
|
Steinberg CC121
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
|
@ -7,7 +7,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img style="width:75%;" src="/images/tascam-us-2400-device.svg" alt="TASCAM US-2400">
|
<img
|
||||||
|
style="width:75%;"
|
||||||
|
src="/images/tascam-us-2400-device.svg"
|
||||||
|
alt="TASCAM US-2400"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
TASCAM US-2400
|
TASCAM US-2400
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
|
@ -4,7 +4,10 @@
|
||||||
<h3>External Monitoring</h3>
|
<h3>External Monitoring</h3>
|
||||||
|
|
||||||
<figure class="right">
|
<figure class="right">
|
||||||
<img src="/images/external-monitoring.png" alt="External monitoring">
|
<img
|
||||||
|
src="/images/external-monitoring.png"
|
||||||
|
alt="External monitoring"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption class="center">
|
<figcaption class="center">
|
||||||
External monitoring
|
External monitoring
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
@ -20,7 +23,10 @@
|
||||||
<h3 class="clear">Audio driver Hardware Monitoring</h3>
|
<h3 class="clear">Audio driver Hardware Monitoring</h3>
|
||||||
|
|
||||||
<figure class="right">
|
<figure class="right">
|
||||||
<img src="/images/jack-monitoring.png" alt="Hardware Monitoring">
|
<img
|
||||||
|
src="/images/jack-monitoring.png"
|
||||||
|
alt="Hardware Monitoring"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption class="center">
|
<figcaption class="center">
|
||||||
Hardware Monitoring
|
Hardware Monitoring
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
@ -38,7 +44,10 @@
|
||||||
<h3 class="clear">Software Monitoring</h3>
|
<h3 class="clear">Software Monitoring</h3>
|
||||||
|
|
||||||
<figure class="right">
|
<figure class="right">
|
||||||
<img src="/images/ardour-monitoring.png" alt="Software Monitoring">
|
<img
|
||||||
|
src="/images/ardour-monitoring.png"
|
||||||
|
alt="Software Monitoring"
|
||||||
|
class="invert-in-dark">
|
||||||
<figcaption class="center">
|
<figcaption class="center">
|
||||||
Software Monitoring
|
Software Monitoring
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
|
@ -98,6 +98,17 @@
|
||||||
if (localStorage.getItem('dark-theme') === 'true') {
|
if (localStorage.getItem('dark-theme') === 'true') {
|
||||||
changetheme();
|
changetheme();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// go to next page and previous page using arrow keys
|
||||||
|
window.addEventListener('keydown', e => {
|
||||||
|
if (e.target.tagName !== 'INPUT') {
|
||||||
|
if (e.key === 'ArrowRight') {
|
||||||
|
document.querySelector('.next a').click()
|
||||||
|
} else if (e.key === 'ArrowLeft') {
|
||||||
|
document.querySelector('.previous a').click()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -309,6 +309,7 @@ p.subsection {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* dark theme */
|
/* dark theme */
|
||||||
|
body.dark-theme,
|
||||||
body.dark-theme > .container-fluid {
|
body.dark-theme > .container-fluid {
|
||||||
background-color: #222222;
|
background-color: #222222;
|
||||||
color: #f7f1ff;
|
color: #f7f1ff;
|
||||||
|
@ -425,3 +426,13 @@ body.dark-theme #tree .active > a {
|
||||||
body.dark-theme .invert-in-dark {
|
body.dark-theme .invert-in-dark {
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.dark-theme pre {
|
||||||
|
background: #1f1f1f;
|
||||||
|
color: #9cdcfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .well {
|
||||||
|
background: darkgrey;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue