Merge pull request #3176 from jessica-mitchell/new-diagram

Add conceptual diagram to NEST docs index page

doc/htmldoc/index.rst

@@ -1,29 +1,35 @@
-Welcome to the NEST Simulator documentation
-===========================================
-
-
+Welcome to the NEST Simulator documentation!
+============================================
 
 
 .. grid::
+  :gutter: 2
 
   .. grid-item::
 
-    NEST is used in computational neuroscience to model and study behavior of large networks of neurons.
+     .. grid:: 1 1 1 1
+       :gutter: 2
 
-    The models describe single neuron and synapse behavior and their connections.
-    Different mechanisms of plasticity can be used to investigate artificial learning
-    and help to shed light on the fundamental principles of how the brain works.
+       .. grid-item::
+
+          NEST is used in computational neuroscience to model and study behavior of large networks of neurons.
 
-    NEST offers convenient and efficient commands to define and connect large networks,
-    ranging from algorithmically determined connections to data-driven connectivity.
-    Create connections between neurons using numerous synapse models from STDP to gap junctions.
+          The models describe single neuron and synapse behavior and their connections.
+          Different mechanisms of plasticity can be used to investigate learning
+          and help to shed light on the fundamental principles of how the brain works.
 
-    .. button-ref:: tutorials_guides
-       :ref-type: ref
-       :shadow:
-       :color: primary
+          NEST offers convenient and efficient commands to define and connect large networks,
+          ranging from algorithmically determined connections to data-driven connectivity.
+          Create connections between neurons using numerous synapse models from STDP to gap junctions.
 
-       Start exploring NEST
+       .. grid-item::
+
+          .. button-ref:: tutorials_guides
+             :ref-type: ref
+             :shadow:
+             :color: primary
+
+             Start exploring NEST
 
   .. grid-item::
 
@@ -47,7 +53,7 @@ Welcome to the NEST Simulator documentation
                 .. figure:: static/img/astrocyte_interaction.png
 
 
-                  Investigate neuron and astrocyte interactions
+                  Inspect neuron and astrocyte interactions
 
 
                 .. figure:: static/img/hpc_benchmark_connectivity.svg
@@ -58,7 +64,7 @@ Welcome to the NEST Simulator documentation
                 .. figure:: static/img/pong_sim.gif
 
 
-                  Play PONG with NEST
+                  Simulate a game of PONG with NEST
 
                 .. figure:: static/img/gapjunctions.png
 
@@ -76,6 +82,36 @@ Welcome to the NEST Simulator documentation
              Discover all our examples!
 
 
+How NEST works --- The Big Picture
+----------------------------------
+
+.. grid::
+
+    .. grid-item::
+
+        .. raw:: html
+
+           <object data="_static/img/excalidraw_nestconcept_horiz.svg" type="image/svg+xml"></object>
+
+
+.. grid::
+
+    .. grid-item::
+
+
+        A NEST simulation is created with input from :doc:`stimulation devices </models/index_generator>`,
+        :doc:`neuron models </models/index_neuron>`, and :doc:`synapse models </models/index_synapse>`,
+        along with  :ref:`connection rules <connectivity_concepts>`.
+        You can choose what data to record with :doc:`recording devices </models/index_recorder>`.
+        After simulation, the output is ready for analysis with NEST's built in :py:mod:`.raster_plot` and :py:mod:`.voltage_trace`
+        modules or external tools such as :doc:`Elephant <elephant:index>`.
+
+
+        You can find these components in NEST or you can implement your own custom
+        models and extend NEST's functionalities using :doc:`NESTML <nestml:index>` and the :doc:`NEST extension module <extmod:index>`, respectively.
+        Check out our wide-ranging list of :doc:`network model <examples/index>` examples.
+
+
 .. toctree::
    :caption: USAGE
    :hidden:

doc/htmldoc/static/css/custom.css

@@ -115,6 +115,20 @@ section#kernel-attributes-nest-nestmodule dd {
 	padding-bottom: 20px !important;
   box-shadow: 3px 3px var(--nest-orange) !important;
 }
+
+
+.center {
+
+  text-align: center;
+  font-style: italic;
+}
+/* Provide a specific height to the svg object on index page
+ * Reason: Safari does not interpret percentages or max-content
+ * correctly
+ * there is an additional @media setting for <768px screens*/
+section#welcome-to-the-nest-simulator-documentation  object {
+  height: 400px;
+}
 /*************************************************************
  * Rules for  mermaid diagrams
  *************************************************************/
@@ -141,12 +155,6 @@ figure.align-default {
 	outline-style: groove;
 }
 
-.center {
-
-  text-align: center;
-  font-style: italic;
-}
-
 /**************************************************************************************
  * Rules for carousel
  * ***********************************************************************************/
@@ -212,10 +220,11 @@ div[role="main"] .md-source {
 	border-radius: 5px;
 }
 /* Add padding around buttons on index page */
-#welcome-to-the-nest-simulator-documentation [data-md-color-primary="orange"] .md-typeset a {
+#welcome-to-the-nest-simulator-documentation [data-md-color-primary="orange"] .sd-button {
    padding: 6px;
 }
 
+
 .md-typeset details {
    background-color: white;
 }
@@ -347,6 +356,11 @@ nav.md-nav.md-nav--secondary label.md-nav__title:after{
   font-weight: bold;
   display: flex;
   align-items: center;
+
+}
+
+#welcome-to-the-nest-simulator-documentation .sd-row-cols-lg-1 > *{
+width: 85%;
 }
 
 #pynest-examples img.sd-card-img-top {
@@ -975,7 +989,11 @@ This is for the larger monitors and possibly full screen viewers.
 @media only screen and (min-width: 1240px) {
 #hero h1{ font-size:2em;}
 }
-
+@media only screen and (max-width: 768px) {
+ section#welcome-to-the-nest-simulator-documentation  object {
+  height: 200px;
+ }
+}
 /*
 RETINA (2x RESOLUTION DEVICES)
 This applies to the retina iPhone (4s) and iPad (2,3) along with