[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
04/05: website: Add documentation videos.
|
From: |
Florian Pelz |
|
Subject: |
04/05: website: Add documentation videos. |
|
Date: |
Sat, 26 Oct 2019 09:23:50 -0400 (EDT) |
pelzflorian pushed a commit to branch master
in repository guix-artwork.
commit a15c635cb7459676995408746da95e94a9bfcb80
Author: Florian Pelz <address@hidden>
Date: Sat Oct 26 11:56:18 2019 +0000
website: Add documentation videos.
With feedback from sirgazil <address@hidden>.
* website/static/videos/img/everyday-use-01.png: New file.
* website/static/videos/img/everyday-use-02.png: New file.
* website/static/videos/img/help.png: New file.
* website/static/videos/img/installation-from-script.png: New file.
* website/static/videos/img/packaging-01.png: New file.
* website/static/videos/img/packaging-02.png: New file.
* website/static/videos/img/packaging-03.png: New file.
* website/apps/media/data.scm (playlists): List videos here.
* website/apps/media/types.scm (<track>, <video>): New records.
(track, video): New procedure.
* website/apps/media/utils.scm: New file.
* website/apps/media/templates/components.scm (video->shtml, video-content,
video-preview): New procedures.
* website/apps/media/templates/video-list.scm: New file.
(video-list-t): New procedure.
* website/apps/media/templates/video.scm: New file.
(video-t): New procedure.
* website/apps/media/builder.scm (videos-builder, video-list-builder):
New procedures.
(builder): Add them.
* website/apps/base/templates/components.scm
(navbar): Add videos and screenshots overview pages to navbar.
(link-light): New procedure.
* website/static/base/css/common.css (link-light): Add CSS code.
* website/apps/base/templates/screenshots-overview.scm
(screenshots-overview-t): Update active menu item.
* website/apps/base/templates/screenshot.scm (screenshot-t): Likewise.
* website/static/base/css/navbar.css: Increase size at which website
switches to mobile mode.
* website/apps/base/templates/home.scm (home-t): Show videos in
Discover Guix section.
* website/apps/base/builder.scm (home-builder): Add videos to
context for home-t.
---
website/apps/base/builder.scm | 4 +-
website/apps/base/templates/components.scm | 23 ++++
website/apps/base/templates/home.scm | 13 ++-
website/apps/media/builder.scm | 31 +++++-
website/apps/media/data.scm | 67 +++++++++++-
website/apps/media/templates/components.scm | 56 +++++++++-
website/apps/media/templates/screenshot.scm | 2 +-
.../apps/media/templates/screenshots-overview.scm | 2 +-
website/apps/media/templates/video-list.scm | 46 ++++++++
website/apps/media/templates/video.scm | 52 +++++++++
website/apps/media/types.scm | 116 ++++++++++++++++++++-
website/apps/media/utils.scm | 19 ++++
website/static/base/css/common.css | 18 +++-
website/static/base/css/navbar.css | 2 +-
website/static/videos/img/everyday-use-01.png | Bin 0 -> 102437 bytes
website/static/videos/img/everyday-use-02.png | Bin 0 -> 120292 bytes
website/static/videos/img/help.png | Bin 0 -> 89485 bytes
.../static/videos/img/installation-from-script.png | Bin 0 -> 91881 bytes
website/static/videos/img/packaging-01.png | Bin 0 -> 115007 bytes
website/static/videos/img/packaging-02.png | Bin 0 -> 112823 bytes
website/static/videos/img/packaging-03.png | Bin 0 -> 117896 bytes
21 files changed, 441 insertions(+), 10 deletions(-)
diff --git a/website/apps/base/builder.scm b/website/apps/base/builder.scm
index 3433fcc..4882dc5 100644
--- a/website/apps/base/builder.scm
+++ b/website/apps/base/builder.scm
@@ -21,6 +21,7 @@
#:use-module (haunt page)
#:use-module (haunt post)
#:use-module (haunt utils)
+ #:use-module (srfi srfi-1)
#:export (builder))
@@ -104,7 +105,8 @@
(list
(cons "screenshots" screenshots)
(cons "posts" (posts/latest posts 3))
- (cons "contact-media" (list-head contact-media 3)))))
+ (cons "contact-media" (list-head contact-media 3))
+ (cons "videos" (take (flatten playlists) 3)))))
(make-page "guix.html" (home-t context) sxml->html)))
diff --git a/website/apps/base/templates/components.scm
b/website/apps/base/templates/components.scm
index d5d0a90..ec4aab9 100644
--- a/website/apps/base/templates/components.scm
+++ b/website/apps/base/templates/components.scm
@@ -21,6 +21,7 @@
contact->shtml
horizontal-separator
link-more
+ link-light
link-subtle
link-yellow
navbar
@@ -193,6 +194,21 @@
,label))
+(define* (link-light #:key (label "More") (url "#"))
+ "Return an SHTML a element with light-colored label text.
+
+ LABEL (string)
+ The text for the link. For example: 'Installation from Script'.
+
+ URL (string)
+ A URL to use for the href attribute of the a element. If not
+ specified, the value defaults to #."
+ `(a
+ (@ (class "link-light")
+ (href ,url))
+ ,label))
+
+
(define* (link-subtle #:key (label "link") (url "#"))
"Return an SHTML a element that does not stand too much on white backgrounds.
@@ -293,6 +309,13 @@
,(menu-item #:label "Download" #:active-item active-item #:url (guix-url
"download/"))
,(menu-item #:label "Packages" #:active-item active-item #:url (guix-url
"packages/"))
,(menu-item #:label "Blog" #:active-item active-item #:url (guix-url
"blog/"))
+
+ ,(menu-dropdown #:label "Media" #:active-item active-item
+ #:items
+ (list
+ (menu-item #:label "Videos" #:active-item active-item #:url (guix-url
"videos/"))
+ (menu-item #:label "Screenshots" #:active-item active-item #:url
(guix-url "screenshots/"))))
+
,(menu-item #:label "Help" #:active-item active-item #:url (guix-url
"help/"))
,(menu-item #:label "Donate" #:active-item active-item #:url (guix-url
"donate/"))
diff --git a/website/apps/base/templates/home.scm
b/website/apps/base/templates/home.scm
index e751eff..1de787c 100644
--- a/website/apps/base/templates/home.scm
+++ b/website/apps/base/templates/home.scm
@@ -115,8 +115,19 @@
,(screenshots-box (context-datum context "screenshots"))
+ (h3 "Instructional videos")
+
(div
- (@ (class "action-box centered-text"))
+ ,@(map video-preview (context-datum context "videos")))
+
+ (div
+ (@ (class "fields-box"))
+
+ ,(button-big
+ #:label "VIDEOS"
+ #:url (guix-url "videos/")
+ #:light #true)
+ " "
,(button-big
#:label "ALL PACKAGES"
#:url (guix-url "packages/")
diff --git a/website/apps/media/builder.scm b/website/apps/media/builder.scm
index 807ba6f..53378e6 100644
--- a/website/apps/media/builder.scm
+++ b/website/apps/media/builder.scm
@@ -8,10 +8,15 @@
#:use-module (apps media data)
#:use-module (apps media templates screenshot)
#:use-module (apps media templates screenshots-overview)
+ #:use-module (apps media templates video)
+ #:use-module (apps media templates video-list)
#:use-module (apps media types)
#:use-module (haunt html)
#:use-module (haunt page)
#:use-module (haunt utils)
+ #:use-module (apps aux web)
+ #:use-module (apps media utils)
+ #:use-module (srfi srfi-1)
#:export (builder))
@@ -37,7 +42,9 @@
application. See Haunt <page> objects for more information."
(flatten
(list (screenshots-overview-builder)
- (screenshots-builder))))
+ (screenshots-builder)
+ (videos-builder)
+ (video-list-builder))))
;;;
@@ -64,3 +71,25 @@
(make-page "screenshots/index.html"
(screenshots-overview-t screenshots)
sxml->html))
+
+
+(define (videos-builder)
+ "Return a list of Haunt pages representing videos."
+ (map-in-order
+ (lambda (playlist)
+ (map-in-order
+ (lambda (previous video next)
+ (make-page (video->url video)
+ (video-t previous video next)
+ sxml->html))
+ (cons #f (drop-right playlist 1))
+ playlist
+ (append (cdr playlist) '(#f))))
+ playlists))
+
+
+(define (video-list-builder)
+ "Return a Haunt page displaying all videos."
+ (make-page (url-path-join "videos" "index.html")
+ (video-list-t)
+ sxml->html))
diff --git a/website/apps/media/data.scm b/website/apps/media/data.scm
index 40eea61..d674a6b 100644
--- a/website/apps/media/data.scm
+++ b/website/apps/media/data.scm
@@ -1,17 +1,82 @@
;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
;;; Initially written by sirgazil who waves all
;;; copyright interest on this file.
(define-module (apps media data)
#:use-module (apps base utils)
#:use-module (apps media types)
- #:export (screenshots))
+ #:use-module (srfi srfi-19)
+ #:export (playlists
+ screenshots))
;;;
;;; Data.
;;;
+
+(define playlists
+ ;; List of "playlists" of related videos in proper order.
+ (list
+ (list
+ (video
+ #:title "Installation from Script"
+ #:description
+ '(p "Explains how to install Guix on distributions not running
+GNU Guix.")
+ #:url
"https://archive.org/download/guix-videos/01-installation-from-script.webm";
+ #:poster (guix-url "static/videos/img/installation-from-script.png")
+ #:last-updated (string->date "2019-10-25T20:00:00" "~Y-~m-~dT~H:~M:~S")))
+ (list
+ (video
+ #:title "Everyday use of GNU Guix, Part One"
+ #:description
+ '(p "How to install packages and how to manage software package
+generations.")
+ #:url
"https://archive.org/download/guix-videos/02-everyday-use-part-one.webm";
+ #:poster (guix-url "static/videos/img/everyday-use-01.png")
+ #:last-updated (string->date "2019-10-25T20:00:00" "~Y-~m-~dT~H:~M:~S"))
+ (video
+ #:title "Everyday use of GNU Guix, Part Two"
+ #:description
+ '(p "How to upgrade software and how to reclaim storage space.")
+ #:url
"https://archive.org/download/guix-videos/02-everyday-use-part-two.webm";
+ #:poster (guix-url "static/videos/img/everyday-use-02.png")
+ #:last-updated (string->date "2019-10-25T20:00:00" "~Y-~m-~dT~H:~M:~S")))
+ (list
+ (video
+ #:title "Asking for help"
+ #:description
+ '(p "How to get help from the Guix community.")
+ #:url "https://archive.org/download/guix-videos/03-help-new-version.webm";
+ #:poster (guix-url "static/videos/img/help.png")
+ #:last-updated (string->date "2019-10-25T20:00:00" "~Y-~m-~dT~H:~M:~S")))
+ (list
+ (video
+ #:title "Packaging, Part One"
+ #:description
+ '(p "How to set up a development environment for GNU Guix.")
+ #:url
"https://archive.org/download/guix-videos/04-packaging-part-one.webm";
+ #:poster (guix-url "static/videos/img/packaging-01.png")
+ #:last-updated (string->date "2019-10-25T20:00:00" "~Y-~m-~dT~H:~M:~S"))
+ (video
+ #:title "Packaging, Part Two"
+ #:description
+ '(p "How to create a package recipe for not yet packaged software.")
+ #:url
"https://archive.org/download/guix-videos/04-packaging-part-two.webm";
+ #:poster (guix-url "static/videos/img/packaging-02.png")
+ #:last-updated (string->date "2019-10-25T20:00:00" "~Y-~m-~dT~H:~M:~S"))
+ (video
+ #:title "Packaging, Part Three"
+ #:description
+ '(p "How to submit a package for inclusion in the GNU Guix
+distribution.")
+ #:url
"https://archive.org/download/guix-videos/04-packaging-part-three.webm";
+ #:poster (guix-url "static/videos/img/packaging-03.png")
+ #:last-updated (string->date "2019-10-25T20:00:00"
"~Y-~m-~dT~H:~M:~S")))))
+
+
(define screenshots
(list
(screenshot
diff --git a/website/apps/media/templates/components.scm
b/website/apps/media/templates/components.scm
index 6bd7b1f..057f0a5 100644
--- a/website/apps/media/templates/components.scm
+++ b/website/apps/media/templates/components.scm
@@ -8,10 +8,16 @@
(define-module (apps media templates components)
#:use-module (apps aux lists)
#:use-module (apps aux web)
+ #:use-module (apps base templates components)
#:use-module (apps base utils)
#:use-module (apps media types)
+ #:use-module (apps media utils)
+ #:use-module (srfi srfi-19)
#:export (screenshot->shtml
- screenshots-box))
+ screenshots-box
+ video->shtml
+ video-content
+ video-preview))
;;;
@@ -46,3 +52,51 @@ top."
'("top-shadow-bg")
'())))))
,@(map screenshot->shtml (take-random screenshots n))))
+
+
+
+(define (video->shtml video)
+ "Return SHTML for a representation of the given video object.
+
+ VIDEO (<video>)
+ A video object as defined in (apps media types)."
+ `(video
+ (@ (class "video-preview")
+ (src ,(video-url video))
+ (poster ,(video-poster video))
+ (controls "controls"))
+ ;; TODO: Insert missing video-tracks.
+ (p
+ "Download video: "
+ ,(link-subtle
+ #:label (video-title video)
+ #:url (video-url video)))))
+
+
+(define (video-preview video)
+ "Return SHTML for a box with a representation of the given video
+object.
+
+ VIDEO (<video>)
+ A video object as defined in (apps media types)."
+ `(div
+ (@ (class "item-preview"))
+ ,(video->shtml video)
+ ,(link-light
+ #:label (video-title video)
+ #:url (guix-url (video->url video)))))
+
+
+(define (video-content video)
+ "Return SHTML with a representation and detailed information for the
+given video object.
+
+ VIDEO (<video>)
+ A video object as defined in (apps media types)."
+ `(div
+ ,(video->shtml video)
+ ,(video-description video)
+ ,(let ((date (video-last-updated video)))
+ (if date
+ `(p "Last updated: " ,(date->string date))
+ ""))))
diff --git a/website/apps/media/templates/screenshot.scm
b/website/apps/media/templates/screenshot.scm
index 9bf9c2a..c6e4ffa 100644
--- a/website/apps/media/templates/screenshot.scm
+++ b/website/apps/media/templates/screenshot.scm
@@ -23,7 +23,7 @@
"Operating system" "GNU Hurd" "GNU Guix package manager"
"GNU Guile" "Guile Scheme" "Transactional upgrades"
"Functional package management" "Reproducibility")
- #:active-menu-item "Overview"
+ #:active-menu-item "Media"
#:css (list (guix-url "static/base/css/index.css")
(guix-url "static/media/css/screenshots.css"))
#:content
diff --git a/website/apps/media/templates/screenshots-overview.scm
b/website/apps/media/templates/screenshots-overview.scm
index 7605705..babbdd6 100644
--- a/website/apps/media/templates/screenshots-overview.scm
+++ b/website/apps/media/templates/screenshots-overview.scm
@@ -20,7 +20,7 @@
"Operating system" "GNU Hurd" "GNU Guix package manager"
"GNU Guile" "Guile Scheme" "Transactional upgrades"
"Functional package management" "Reproducibility")
- #:active-menu-item "Overview"
+ #:active-menu-item "Media"
#:css (list (guix-url "static/base/css/index.css")
(guix-url "static/base/css/screenshots.css"))
#:content
diff --git a/website/apps/media/templates/video-list.scm
b/website/apps/media/templates/video-list.scm
new file mode 100644
index 0000000..99f8724
--- /dev/null
+++ b/website/apps/media/templates/video-list.scm
@@ -0,0 +1,46 @@
+;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
+;;; Initially written by sirgazil who waves all
+;;; copyright interest on this file.
+
+(define-module (apps media templates video-list)
+ #:use-module (apps base templates components)
+ #:use-module (apps base templates theme)
+ #:use-module (apps base types)
+ #:use-module (apps base utils)
+ #:use-module (apps media data)
+ #:use-module (apps media templates components)
+ #:use-module (apps media types)
+ #:use-module (apps media utils)
+ #:export (video-list-t))
+
+
+(define (video-list-t)
+ "Return a list of videos in SHTML."
+ (theme
+ #:title '("Videos")
+ #:description
+ "Video about GNU Guix."
+ #:keywords
+ '("GNU" "Linux" "Unix" "Free software" "Libre software"
+ "Operating system" "GNU Hurd" "GNU Guix package manager"
+ "Help resources" "Videos")
+ #:active-menu-item "Videos"
+ #:css (list
+ (guix-url "static/base/css/page.css")
+ (guix-url "static/base/css/index.css"))
+ #:crumbs (list (crumb "Videos" (guix-url "videos/")))
+ #:content
+ `(main
+ (@ (class "page centered-block limit-width"))
+ ,(map-in-order
+ (lambda (playlist)
+ `(,(map-in-order
+ (lambda (video)
+ `((h2 ,(link-subtle
+ #:label (video-title video)
+ #:url (guix-url (video->url video))))
+ ,(video-content video)))
+ playlist)
+ ,(horizontal-separator)))
+ playlists))))
diff --git a/website/apps/media/templates/video.scm
b/website/apps/media/templates/video.scm
new file mode 100644
index 0000000..18b90ee
--- /dev/null
+++ b/website/apps/media/templates/video.scm
@@ -0,0 +1,52 @@
+;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
+;;; Initially written by sirgazil who waves all
+;;; copyright interest on this file.
+
+(define-module (apps media templates video)
+ #:use-module (apps base templates components)
+ #:use-module (apps base templates theme)
+ #:use-module (apps base types)
+ #:use-module (apps base utils)
+ #:use-module (apps media templates components)
+ #:use-module (apps media types)
+ #:use-module (apps media utils)
+ #:export (video-t))
+
+
+(define (video-t previous video next)
+ "Return a page in SHTML for the given VIDEO. If true, links to the
+PREVIOUS and NEXT videos are added."
+ (theme
+ #:title (list "Video" (video-title video))
+ #:description
+ "Video about GNU Guix."
+ #:keywords
+ '("GNU" "Linux" "Unix" "Free software" "Libre software"
+ "Operating system" "GNU Hurd" "GNU Guix package manager"
+ "Help resources" "Videos")
+ #:active-menu-item "Videos"
+ #:css (list
+ (guix-url "static/base/css/page.css")
+ (guix-url "static/base/css/index.css"))
+ #:crumbs (list (crumb "Videos" (guix-url "videos/"))
+ (crumb (video-title video) "./"))
+ #:content
+ `(main
+ (@ (class "page centered-block limit-width"))
+ (h2 ,(video-title video))
+ ,(video-content video)
+ ,(if (or previous next)
+ `(div
+ (@ (class "fields-box"))
+ ,(if previous
+ (button-big
+ #:label "← Previous"
+ #:url (guix-url (video->url previous)))
+ "")
+ ,(if next
+ (button-big
+ #:label "Next →"
+ #:url (guix-url (video->url next)))
+ ""))
+ ""))))
diff --git a/website/apps/media/types.scm b/website/apps/media/types.scm
index 020b89c..95dace3 100644
--- a/website/apps/media/types.scm
+++ b/website/apps/media/types.scm
@@ -1,4 +1,5 @@
;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
;;; Initially written by sirgazil who waves all
;;; copyright interest on this file.
@@ -10,7 +11,20 @@
screenshot-image
screenshot-preview
screenshot-slug
- screenshot-title))
+ screenshot-title
+ track
+ track?
+ track-label
+ track-kind
+ track-lang
+ track-url
+ video
+ video?
+ video-description
+ video-last-updated
+ video-poster
+ video-title
+ video-url))
;;;
@@ -58,3 +72,103 @@
(define* (screenshot #:key title slug image preview caption)
"Return a <screenshot> object with the given attributes."
(make-screenshot title slug image preview caption))
+
+
+;;;
+;;; Data types.
+;;;
+
+;;; Track (record type)
+;;; ---------------------
+;;;
+;;; A track object represents subtitles, closed captions or similar
+;;; text tracks for HTML video. Track objects are mapped to HTML
+;;; <track> elements.
+;;;
+;;; Objects of this type can be created with the "track" procedure as
+;;; well (see Helper procedures below).
+;;;
+;;; Fields:
+;;;
+;;; label (string)
+;;; The title of the track. For example: "English"
+;;;
+;;; kind (string)
+;;; The kind of track as a string. For example "subtitles" or "captions".
+;;;
+;;; lang (string)
+;;; A language code.
+;;;
+;;; url (string)
+;;; A URL to the track file.
+;;;
+(define-record-type <track>
+ (make-track label kind lang url)
+ track?
+ (label track-label)
+ (kind track-kind)
+ (lang track-lang)
+ (url track-url))
+
+;;; Helper procedures.
+
+(define* (track #:key (label "") (kind "") (lang "") (url ""))
+ "Return a <track> object with the given attributes."
+ (make-track label kind lang url))
+
+
+;;;
+;;; Data types.
+;;;
+
+;;; Video (record type)
+;;; ---------------------
+;;;
+;;; A video object represents something viewable in an HTML video
+;;; element and accessible from the videos list on the website.
+;;;
+;;; Objects of this type can be created with the "video" procedure as
+;;; well (see Helper procedures below).
+;;;
+;;; Fields:
+;;;
+;;; title (string)
+;;; The full name of the video. For example:
+;;; "Everyday use of GNU Guix, Part One".
+;;;
+;;; description (SXML)
+;;; A short description. For example:
+;;; '(p "How to install packages and how to manage software package
+;;; generations.")
+;;;
+;;; url (string)
+;;; A URL to the video file.
+;;;
+;;; poster (string)
+;;; A URL to a representative preview image for the video.
+;;;
+;;; tracks (list of <track> objects)
+;;; A URL to the closed captions or subtitles track for the video.
+;;; FIXME: This field is not used anywhere yet.
+;;;
+;;; last-updated (date)
+;;; Optional SRFI-19 upload date of the video file's most recent
+;;; version, or #f. This should be specified for videos that
+;;; possibly become outdated over time such as documentation videos.
+;;;
+(define-record-type <video>
+ (make-video title description url poster tracks last-updated)
+ video?
+ (title video-title)
+ (description video-description)
+ (url video-url)
+ (poster video-poster)
+ (tracks video-tracks)
+ (last-updated video-last-updated))
+
+;;; Helper procedures.
+
+(define* (video #:key (title "") (description "")
+ (url "") (poster "") (tracks '()) (last-updated #f))
+ "Return a <video> object with the given attributes."
+ (make-video title description url poster tracks last-updated))
diff --git a/website/apps/media/utils.scm b/website/apps/media/utils.scm
new file mode 100644
index 0000000..129b085
--- /dev/null
+++ b/website/apps/media/utils.scm
@@ -0,0 +1,19 @@
+;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
+;;; Initially written by sirgazil who waives all
+;;; copyright interest on this file.
+
+(define-module (apps media utils)
+ #:use-module (apps aux web)
+ #:use-module (apps media types)
+ #:use-module (ice-9 regex)
+ #:export (video->url))
+
+
+(define (video->url video)
+ (url-path-join
+ "videos"
+ (string-downcase
+ (regexp-substitute/global #f "[ \t]+" (video-title video)
+ 'pre "-" 'post))
+ "index.html"))
diff --git a/website/static/base/css/common.css
b/website/static/base/css/common.css
index a91bed6..df24f49 100644
--- a/website/static/base/css/common.css
+++ b/website/static/base/css/common.css
@@ -86,6 +86,22 @@
color: #E6E6E6;
}
+.link-light:active,
+.link-light:focus,
+.link-light:hover {
+ color: black;
+}
+
+.link-light:link,
+.link-light:visited {
+ border-style: none;
+ color: #E6E6E6;
+ font-size: 1.2em;
+ line-height: 20px;
+ margin: 20px 0px;
+ padding-right: 30px;
+}
+
.link-subtle:link,
.link-subtle:visited {
border-color: transparent;
@@ -163,4 +179,4 @@
.sheet-padded {
padding-right: 20px;
}
-}
\ No newline at end of file
+}
diff --git a/website/static/base/css/navbar.css
b/website/static/base/css/navbar.css
index d699d89..d975aa8 100644
--- a/website/static/base/css/navbar.css
+++ b/website/static/base/css/navbar.css
@@ -107,7 +107,7 @@
-@media screen and (min-width: 850px) {
+@media screen and (min-width: 900px) {
.navbar {
position: relative;
overflow: visible;
diff --git a/website/static/videos/img/everyday-use-01.png
b/website/static/videos/img/everyday-use-01.png
new file mode 100644
index 0000000..c5b1859
Binary files /dev/null and b/website/static/videos/img/everyday-use-01.png
differ
diff --git a/website/static/videos/img/everyday-use-02.png
b/website/static/videos/img/everyday-use-02.png
new file mode 100644
index 0000000..9da2623
Binary files /dev/null and b/website/static/videos/img/everyday-use-02.png
differ
diff --git a/website/static/videos/img/help.png
b/website/static/videos/img/help.png
new file mode 100644
index 0000000..4ee6c89
Binary files /dev/null and b/website/static/videos/img/help.png differ
diff --git a/website/static/videos/img/installation-from-script.png
b/website/static/videos/img/installation-from-script.png
new file mode 100644
index 0000000..c02aae7
Binary files /dev/null and
b/website/static/videos/img/installation-from-script.png differ
diff --git a/website/static/videos/img/packaging-01.png
b/website/static/videos/img/packaging-01.png
new file mode 100644
index 0000000..d5d70d5
Binary files /dev/null and b/website/static/videos/img/packaging-01.png differ
diff --git a/website/static/videos/img/packaging-02.png
b/website/static/videos/img/packaging-02.png
new file mode 100644
index 0000000..9701a17
Binary files /dev/null and b/website/static/videos/img/packaging-02.png differ
diff --git a/website/static/videos/img/packaging-03.png
b/website/static/videos/img/packaging-03.png
new file mode 100644
index 0000000..e895f0a
Binary files /dev/null and b/website/static/videos/img/packaging-03.png differ