diff --git a/docs/css/extra.css b/docs/css/extra.css index 140069e3ff..b4a95f8af7 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -17,4 +17,82 @@ and https://github.com/readthedocs/sphinx_rtd_theme/issues/295 .wy-table-responsive { overflow: visible !important; -} \ No newline at end of file +} + + +ul.video-list { + counter-reset: section; + list-style: none; + padding-left: 0; + position:relative +} + +ul.video-list .video:not(:last-of-type) a { + border-bottom:2px solid #e6e6e6 +} + +ul.video-list a { + position: relative; + padding: 2rem 2rem 2rem 4.2rem; + display: block; + box-sizing:border-box +} + +ul.video-list a .info { + padding-top:0.25rem +} + +ul.video-list a .info::before { + counter-increment: section; + content: counter(section); + position: absolute; + left: 1.5rem; + color:black +} + +ul.video-list a .info > p, ul.video-list a .info > span { + color:black +} + +ul.video-list a .info .title { + margin-top: 0; + margin-bottom:0.7rem +} + +ul.video-list a .info .description { + margin-bottom: 1rem; + +} + +ul.video-list a .info .duration, ul.video-list a .info .duration span { + color: #6e6e6e; + +} + +ul.video-list a:hover, ul.video-list a:focus { + text-decoration:none +} + +ul.video-list a:hover { + background:#f2f2f2 +} + +ul.video-list a:hover::after { + content: ''; + display: block; + width: 6rem; + height: 6rem; + position: absolute; + background: url("/img/play.svg"); + background-size: 6rem; + top: 3rem; + left:8.6rem +} + +ul.video-list .thumb { + max-height: 8.2rem; + padding-right: 2rem; + position: relative; + float:left +} + diff --git a/docs/get-started/intro-videos.md b/docs/get-started/intro-videos.md new file mode 100644 index 0000000000..86fce6f8c9 --- /dev/null +++ b/docs/get-started/intro-videos.md @@ -0,0 +1,36 @@ +# Introductory Videos + +Start your journey using Lens with this set of introductory videos! These videos are designed to give you an overview of Lens various features and quickly get you familiar with them. + +
diff --git a/docs/img/play.svg b/docs/img/play.svg new file mode 100644 index 0000000000..a94d6e88ab --- /dev/null +++ b/docs/img/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index f9d5eaf2c9..4116ed961e 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -15,6 +15,8 @@ nav: - macOS: setup/macos.md - Windows: setup/windows.md - Network: setup/network.md + - Get Started: + - Intro Videos: get-started/intro-videos.md - Extensions: - Overview: extensions/overview.md - Get Started: