docs: Align Images perfectly on mobile (#1856)
* docs: Use Light codeblocks theme * docs: Fix image align * fix pixels * fix: Adjust all images
This commit is contained in:
parent
cc88de3926
commit
688963954a
@ -6,8 +6,8 @@ sidebar_label: Taking Photos/Recording Videos
|
|||||||
|
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
|
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
|
||||||
<image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469" />
|
<image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469" />
|
||||||
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
|
|||||||
import TabItem from '@theme/TabItem'
|
import TabItem from '@theme/TabItem'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
|
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
|
||||||
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
|
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
|
||||||
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -6,8 +6,8 @@ sidebar_label: Camera Errors
|
|||||||
|
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<img align="right" width="283" src={useBaseUrl("img/example_error.png")} />
|
<img width="283" src={useBaseUrl("img/example_error.png")} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Why?
|
## Why?
|
||||||
|
@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
|
|||||||
import TabItem from '@theme/TabItem'
|
import TabItem from '@theme/TabItem'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<img align="right" width="283" src={useBaseUrl("img/example.png")} />
|
<img width="283" src={useBaseUrl("img/example.png")} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## What are camera formats?
|
## What are camera formats?
|
||||||
|
@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
|
|||||||
import TabItem from '@theme/TabItem'
|
import TabItem from '@theme/TabItem'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
|
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
|
||||||
<image href={useBaseUrl("img/frame-processors.gif")} x="18" y="33" width="247" height="469" />
|
<image href={useBaseUrl("img/frame-processors.gif")} x="18" y="33" width="247" height="469" />
|
||||||
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
|
|||||||
import TabItem from '@theme/TabItem'
|
import TabItem from '@theme/TabItem'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
|
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
|
||||||
<image href={useBaseUrl("img/demo_drawing.mp4")} x="18" y="33" width="247" height="469" />
|
<image href={useBaseUrl("img/demo_drawing.mp4")} x="18" y="33" width="247" height="469" />
|
||||||
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -6,8 +6,8 @@ sidebar_label: Lifecycle
|
|||||||
|
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<img align="right" width="283" src={useBaseUrl("img/example.png")} />
|
<img width="283" src={useBaseUrl("img/example.png")} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## The `isActive` prop
|
## The `isActive` prop
|
||||||
|
@ -6,8 +6,8 @@ sidebar_label: Mocking
|
|||||||
|
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<img align="right" width="283" src={useBaseUrl("img/11_back.png")} />
|
<img width="283" src={useBaseUrl("img/11_back.png")} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Mocking VisionCamera
|
## Mocking VisionCamera
|
||||||
|
@ -9,8 +9,8 @@ import Tabs from '@theme/Tabs'
|
|||||||
import TabItem from '@theme/TabItem'
|
import TabItem from '@theme/TabItem'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<img align="right" width="283" src={useBaseUrl("img/example_intro.png")} />
|
<img width="283" src={useBaseUrl("img/example_intro.png")} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Installing the library
|
## Installing the library
|
||||||
|
@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
|
|||||||
import TabItem from '@theme/TabItem'
|
import TabItem from '@theme/TabItem'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<img align="right" width="283" src={useBaseUrl("img/11_back.png")} />
|
<img width="283" src={useBaseUrl("img/11_back.png")} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Steps to try
|
## Steps to try
|
||||||
|
@ -6,8 +6,8 @@ sidebar_label: Zooming
|
|||||||
|
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
|
||||||
<div>
|
<div class="image-container">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
|
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
|
||||||
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
|
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
|
||||||
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -19,7 +19,35 @@
|
|||||||
|
|
||||||
.docusaurus-highlight-code-line {
|
.docusaurus-highlight-code-line {
|
||||||
background-color: rgb(72, 77, 91);
|
background-color: rgb(72, 77, 91);
|
||||||
display: block;
|
display: flex;
|
||||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||||
padding: 0 var(--ifm-pre-padding);
|
padding: 0 var(--ifm-pre-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* align image to the right */
|
||||||
|
.image-container {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile screen; align center */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.image-container {
|
||||||
|
float: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* wider screen; align right again */
|
||||||
|
@media (min-width: 600px) and (max-width: 997px) {
|
||||||
|
.image-container {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
|
||||||
|
@media (min-width: 997px) and (max-width: 1145px) {
|
||||||
|
.image-container {
|
||||||
|
float: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user