add general overview and tabbed layout

_styles/elf.css

@@ -1,7 +1,72 @@
-.wy-side-nav-search > div.version a, .wy-side-nav-search > div.version a:visited {
+div.version {
+    margin-left: 1.5em;
+    color: gray;
+    margin-top: .5em;
+    margin-bottom: .5em;
+}
+
+nav#toggle-lookit-frameplayer ul {
+    list-style: none;
+    margin: 0;
+    padding: 0px;
+    margin-top: 2em;
+}
+
+nav#toggle-lookit-frameplayer li {
+    float: left;
+    border-bottom-width: 0;
+    border: thin solid whitesmoke;
+    padding: 10px 10px .5em 12px;
+    border-width: 1px 1px 0px 1px;
+    margin: 0 10px 0 0;
+    border-radius: 20px 8px 0px 0px;
+    background-color: #343131;
+}
+
+nav#toggle-lookit-frameplayer li a {
+    font-weight: bold;
+    color: #9a9a9a;
+}
+
+nav#toggle-lookit-frameplayer li a:visited  {
+    color: #9a9a9a;
+}
+
+#toggle-lookit-frameplayer #selected {
+    position: relative;
+    top: 1px;
+}
+
+#toggle-lookit-frameplayer #selected a, #toggle-lookit-frameplayer #selected a:visited {
     color: white;
 }
 
-.wy-side-nav-search > div.version a:hover {
-    background-color: hsla(0,0%,100%,.1);
+div.wy-side-nav-search {
+    clear: both;
+    display:inline-block;
+
+    border-bottom: thin solid whitesmoke;
+    margin-bottom: 0px !important;
+    padding-bottom: 0px !important;;
+}
+
+
+.wy-nav-side {
+    width: 20em;
+}
+
+.wy-side-scroll {
+    width: 22em;
+}
+
+.wy-side-nav-search {
+    width: 20em;
+}
+
+.wy-menu-vertical {
+    width: 20em;
+}
+
+.wy-nav-content-wrap {
+    margin-left: 20em;
 }

app/components/exp-frame-base/doc.rst

@@ -4,19 +4,18 @@ exp-frame-base
 ==============================================
 
 Overview
-------------------
+================
+
 
-Examples
-----------------
 
 
 Parameters
-----------------
+===============
 
 
 Data collected
 ----------------
 
 
 Events recorded
-----------------
+=================

app/conf.py

@@ -17,7 +17,7 @@
 
 # -- Project information -----------------------------------------------------
 
-project = 'lookit-frameplayer'
+project = 'Experiment runner'
 copyright = '2020, MIT'
 author = 'MIT'
 
@@ -56,4 +56,4 @@
 
 # These paths are either relative to html_static_path
 # or fully qualified paths (eg. https://...)
-html_css_files = ['../_styles/elf.css']
+html_css_files = ['elf.css']

app/index.rst

@@ -1,25 +1,61 @@
-Welcome to lookit-frameplayer's documentation!
-==============================================
+Welcome to the Lookit experiment runner's documentation!
+=========================================================
 
-The base frame
+Building a study on Lookit and using Lookit's own experiment runner? You're in the right place to learn how to put
+together the study protocol you have in mind. To the left you can find information about...
 
-Frames:
+Features common to all frames
+------------------------------
+
+There are some features that are common to all frames, like being able to set a ``generateProperties`` function to
+adjust parameters on-the-fly based on what the child has done so far:
+
+.. toctree::
+    :maxdepth: 2
+    :caption: Common to all frames
+    :hidden:
+
+    components/exp-frame-base/doc.rst
+
+Specific frames
+----------------
+
+These are you can use in your Lookit study, like instructions pages or looking-time trials.
+The documentation will tell you how each frame works, what data it collects, and what parameters you need to give it.
 
 .. toctree::
    :maxdepth: 2
-   :caption: Contents:
+   :caption: Frames
+   :hidden:
 
    components/exp-lookit-video/doc.rst
    components/exp-lookit-composite-video-trial/doc.rst
 
-Mixins:
+Mixins
+------------
+
+Some frames use "mixins" that provide some shared functionality. For instance, a few frames use the "infant-controlled-timing"
+mixin that allows you to specify a button for the parent to press to indicate the child isn't looking, and move on
+after a specified lookaway time. Each frame will say what mixins it uses, but to keep things concise, you'll find
+information about what parameters to include and what data will be collected here.
 
 .. toctree::
    :maxdepth: 2
-   :caption: Contents:
+   :caption: Mixins
+   :hidden:
+
+   mixins/expand-assets-doc.rst
+   mixins/video-record-doc.rst
+
+Randomizers
+------------
 
-Randomizers:
+This special type of frame allows you to randomize the study procedure without writing any code.
+These can be used to set up counterbalancing or condition assignment. The randomizers described here correspond to
+values for 'sampler' when you define a frame with type 'choice'. The documentation will tell you how each randomizer
+works and what parameters you need to give it.
 
 .. toctree::
    :maxdepth: 2
-   :caption: Contents:
+   :caption: Randomizers
+   :hidden: