Main site theme
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
acf-json
assets
img
inc
js
scss
template-parts
tribe-events
video
woocommerce/single-product
.editorconfig
.git-ftp-include
.gitattributes
.gitignore
404.php
Gruntfile.js
README.md
footer.php
functions.php
header.php
package-lock.json
package.json
page-fullwidth.php
page-sermons.php
page.php
phpcs.xml
report.txt
screenshot.png
sidebar-content-bottom.php
single.php
style.css
template-home.php

README.md

Introduction

This is a custom-developed WordPress theme based on TwentySixteen.

Homepage Video

The homepage video is chosen on the client’s side from several pre-generated sources based on the height of the container (header.site-header).

The dark gradient at the top should be rendered into the video.

To come up with a list of frame sizes to create new videos, measure the height of .site-header while changing the viewport width.

There are currently four static heights for .site-header, though I also created a 1920px-wide video for viewports >= 1600px.

Each framesize should be wide enough to cover the entire range of viewport widths for that given height.

Take a look at the video source files to help understand how the system works.

The low-mo bitrate refers to a low-motion version of the video (basically still images fading into each other) for site visitors who have prefers-reduced-motion enabled. (See this article for an introduction to the reduced motion media query.)

Viewport Width Container Height Framesize Bitrate Low-mo bitrate
>= 1600px 764px 1920x766 1800kb/s 1100kb/s
1600-985px 764px 1600x765 1500kb/s 825kb/s
910-984px 570px 990x430 750kb/s 400kb/s
710-909px 618px 920x620 700kb/s 400kb/s
<= 709px 532px 710x535 600kb/s 300kb/s

More export details:

Export settings