diff --git a/doc/_static/custom.css b/doc/_static/custom.css index fd823a163..b2196be67 100644 --- a/doc/_static/custom.css +++ b/doc/_static/custom.css @@ -23,4 +23,37 @@ table.docutils td p { table.docutils td li { line-height: 18px; -} \ No newline at end of file +} + +/* Elevation +* +* The box-shadows style is from Material Design's idea of elevation. These particular numbers are taken from here: +* +* https://github.com/material-components/material-components-web +* https://material-components-web.appspot.com/elevation.html +* +* The div.youtube-video styling is done to get the YouTube video to size dynamically +* to 100% of the content width. + */ + +.rst-content div.youtube-video { + position: relative; + width: 100%; + height: 0px; + /* This must be equal to the inverse of the aspect ratio of the video */ + /* The current value is: 56.25% = 315/560 */ + padding-bottom: 56.25%; + border: none; + /* MD Elevation 8 */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), + 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); + margin-bottom: 24px; +} + +.rst-content div.youtube-video iframe { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; +} diff --git a/doc/getting_started/overview.rst b/doc/getting_started/overview.rst index 995d02b42..f26377352 100644 --- a/doc/getting_started/overview.rst +++ b/doc/getting_started/overview.rst @@ -31,5 +31,13 @@ handled automatically. Building on this declarative plotting idea, a surprising of simple to sophisticated plots and visualizations can be created using a relatively concise grammar. +For a more detailed overview of the Altair's visualization grammar, see the following + +.. raw:: html + +