From 34f5998d69f817b6f304e1abd6ed52d9135eb972 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Fri, 18 Jun 2021 17:23:25 +0200 Subject: [PATCH] convert Vimeo embedds to shortcode + responsive video wrapper styling --- README.md | 13 +++++++++++++ assets/scss/_kerberos.scss | 18 ++++++++++++++++++ content/_index.md | 2 +- .../enterprise/first-things-first/index.md | 5 ++--- content/enterprise/get-started/index.md | 4 +--- .../enterprise/installation-cloud/index.md | 9 +++------ content/vault/installation-cloud/index.md | 4 +--- layouts/{partials => shortcodes}/video.html | 0 ...s_1920d2ec1ff1120c91690141d2072447.content | 19 +++++++++++++++++++ 9 files changed, 58 insertions(+), 16 deletions(-) rename layouts/{partials => shortcodes}/video.html (100%) diff --git a/README.md b/README.md index e98f4a9..04f3439 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,19 @@ Run Hugo dev server with autocompile of assets $ yarn start +## Formatting notes + +**YouTube/Vimeo** + +Using Hugo's built-in video shortcodes ([source](https://gohugo.io/content-management/shortcodes/#vimeo)): + + {{< vimeo id="146022717" class="responsive-video ratio-16by10" title="My vimeo video" >}} + {{< youtube id="w7Ft2ymGmfc" title="A New Hugo Site in Under Two Minutes" >}} + +- keep the `responsive-video` class intact +- use `ratio-16by10` or `ratio-4by3` class to fix aspect ratio if video is different than 16:9 + + ## TODO - config/_default/params.toml diff --git a/assets/scss/_kerberos.scss b/assets/scss/_kerberos.scss index c728394..923cabf 100644 --- a/assets/scss/_kerberos.scss +++ b/assets/scss/_kerberos.scss @@ -83,6 +83,24 @@ img { // ----- UI ----- // +.responsive-video { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + margin: 2rem 0 0; + border-radius: var(--radius); + &.ratio-16by10 { padding-bottom: 62.5%; } + &.ratio-4by3 { padding-bottom: 75%; } + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + } +} // ----- Layout ----- // diff --git a/content/_index.md b/content/_index.md index 4a970ad..789094b 100644 --- a/content/_index.md +++ b/content/_index.md @@ -15,7 +15,7 @@ toc: true The **Kerberos(dot)io** project, is a video surveillance solution, which was initiated back in 2014. Over the years it has evolved into a trusted, stable and feature-rich video surveillance system. To set the expectations, watch the video below to understand what it can and can't do. If you want to install Kerberos(dot)io, it's recommended to have a look [at the architectures page](/prologue/deployments/) to find the best solution for your usecase. -
+{{< vimeo id="382090189" class="responsive-video ratio-16by10" title="Kerberos introduction" >}} ## The name: Kerberos.io diff --git a/content/enterprise/first-things-first/index.md b/content/enterprise/first-things-first/index.md index 94be05c..6d8a59b 100644 --- a/content/enterprise/first-things-first/index.md +++ b/content/enterprise/first-things-first/index.md @@ -30,9 +30,8 @@ The major key differentiators compared to to other solutions are: - Host anywhere, in the cloud or on premise, - Integration and extension, allowing to build custom apps, ML services and more. -
-
-

+{{< vimeo id="405037695" class="responsive-video ratio-16by10" title="Kerberos Enterprise introduction" >}} + ## Kubernetes diff --git a/content/enterprise/get-started/index.md b/content/enterprise/get-started/index.md index d2a001d..25ccfac 100644 --- a/content/enterprise/get-started/index.md +++ b/content/enterprise/get-started/index.md @@ -18,9 +18,7 @@ Once you've installed Kerberos Enterprise, you will have the Kerberos Enterprise Important to note is that this web app is relying on the Golang Kubernetes SDK, so that means from an administration point of view, you could simply use the well known `kubectl` command. The webapp just add (a lot of) functionalities on top of the Kubernetes API, which are specific to Kerberos Enterprise agents. -
-
-

+{{< vimeo id="405039357" class="responsive-video ratio-16by10" title="Kerberos Enterprise - Getting started" >}} ## Login page diff --git a/content/enterprise/installation-cloud/index.md b/content/enterprise/installation-cloud/index.md index 479cb12..0781ecc 100644 --- a/content/enterprise/installation-cloud/index.md +++ b/content/enterprise/installation-cloud/index.md @@ -16,17 +16,14 @@ toc: true Start by installing a Kubernetes cluster. This can be done on one of the hyperscalers (**AWS**, **GCP** or **Azure**), cloud providers (Digital Ocean, Scaleway, etc) or on-premise in your own private network. -
-
-

+{{< vimeo id="404813147" class="responsive-video ratio-16by10" title="Running a Kubernetes cluster in the cloud?" >}} + ## Installation Before setting up Kerberos Enterprise, some configuration needs to happen. First thing that we need to do is setting up the RBAC permissions (Role Based Access Control). We need to enable this to be able to query specific endpoints from the Kubernetes API. By default these endpoints are locked, so we need to unlock them. -
-
-

+{{< vimeo id="404767375" class="responsive-video ratio-16by10" title="Install Kerberos Enterprise in your cluster" >}} First clone the configrations from our Github repo. diff --git a/content/vault/installation-cloud/index.md b/content/vault/installation-cloud/index.md index 6c66852..b53894f 100644 --- a/content/vault/installation-cloud/index.md +++ b/content/vault/installation-cloud/index.md @@ -15,9 +15,7 @@ toc: true If not already the case, start by installing a Kubernetes cluster. This can be done on one of the hyperscalers (**AWS**, **GCP** or **Azure**), cloud providers (Digital Ocean, Scaleway, etc) or on-premise in your own private network. -
-
-

+{{< vimeo id="404813147" class="responsive-video ratio-16by10" title="Running a Kubernetes cluster in the cloud?" >}} ## Prerequisites diff --git a/layouts/partials/video.html b/layouts/shortcodes/video.html similarity index 100% rename from layouts/partials/video.html rename to layouts/shortcodes/video.html diff --git a/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content b/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content index f09e358..8247d21 100644 --- a/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content +++ b/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content @@ -9769,6 +9769,25 @@ strong { img { max-width: 100%; } +.responsive-video { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + margin: 2rem 0 0; + border-radius: var(--radius); } + .responsive-video.ratio-16by10 { + padding-bottom: 62.5%; } + .responsive-video.ratio-4by3 { + padding-bottom: 75%; } + .responsive-video iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; } + .navbar { margin-top: 6px; } .navbar .navbar-nav .nav-link, .navbar .navbar-nav .banner .nav a, .banner .nav .navbar .navbar-nav a {