doc: cleanup unnecessary libs and code

- use cdn for thirdparty libs
- remove unnecessary css from code
- lots of other improvements

docs/_docs/usage/debugging.md

@@ -14,7 +14,7 @@ description: "When the game is running it is very useful to see the current stat
 
 ## Debugging in-game with the state chart debugger
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/state_chart_debugger.svg" class="mr-3" width="32" height="32" align="left"> When the game is running it is very useful to see the current state of the state chart for debugging purposes. For this, this library contains a state chart debugger that you can add to your scene. You can add it to your scene by pressing the "Instantiate child scene" icon above the node tree and then looking for "debugger":
+<img src="{{ site.baseurl }}/assets/img/manual/icons/state_chart_debugger.svg" class="state-icon"> When the game is running it is very useful to see the current state of the state chart for debugging purposes. For this, this library contains a state chart debugger that you can add to your scene. You can add it to your scene by pressing the "Instantiate child scene" icon above the node tree and then looking for "debugger":
 
 ![Adding the state chart debugger]({{ site.baseurl }}/assets/img/manual/add_statechart_debugger.gif)
 

docs/_docs/usage/events-and-transitions.md

@@ -18,7 +18,7 @@ description: "Transitions allow you to switch between states."
 - [Expression guards](#expression-guards)
 - [Event queueing mechanism](#event-queueing-mechanism)
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/transition.svg" class="mr-3" width="32" height="32" align="left"> Transitions allow you to switch between states. Rather than directly switching the state chart to a certain state, you send events to the state chart. You can send events to the state chart by calling the `send_event(event)` method. To send an event you first need to get hold of the state chart node. A simple way to do this is to use the `get_node` function:
+<img src="{{ site.baseurl }}/assets/img/manual/icons/transition.svg" class="state-icon"> Transitions allow you to switch between states. Rather than directly switching the state chart to a certain state, you send events to the state chart. You can send events to the state chart by calling the `send_event(event)` method. To send an event you first need to get hold of the state chart node. A simple way to do this is to use the `get_node` function:
 
 ```gdscript
 # my_node.gd

docs/_docs/usage/states.md

@@ -21,7 +21,7 @@ description: "States are the building blocks from which you build your state cha
 
 ## The _State Chart_ Node
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/state_chart.svg" class="mr-3" width="32" height="32" align="left"> The _State Chart_ node is your main way of interacting with the state charts. It allows you to send events to the state chart using the `send_event(event)` method. You can also set expression properties with the `set_expression_property(name, value)`  function, which can later be used by expression guards to determine whether a certain transition should be taken (see the section on expression guards for more information).
+<img src="{{ site.baseurl }}/assets/img/manual/icons/state_chart.svg" class="state-icon"> The _State Chart_ node is your main way of interacting with the state charts. It allows you to send events to the state chart using the `send_event(event)` method. You can also set expression properties with the `set_expression_property(name, value)`  function, which can later be used by expression guards to determine whether a certain transition should be taken (see the section on expression guards for more information).
 
 ## The States
 
@@ -78,11 +78,11 @@ If you want to connect signals from the editor UI you can just do it like you wo
 
 ## Atomic states
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/atomic_state.svg" class="mr-3" width="32" height="32" align="left"> Atomic states are the most basic type of state. They cannot have child states. Atomic states have no additional properties.
+<img src="{{ site.baseurl }}/assets/img/manual/icons/atomic_state.svg" class="state-icon"> Atomic states are the most basic type of state. They cannot have child states. Atomic states have no additional properties.
 
 ## Compound states
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/compound_state.svg" class="mr-3" width="32" height="32" align="left"> Compound states are states which have at least one child state (though having at least two child states makes more sense). Only one child state of a compound state can be active at any given time. Compound states have the following properties:
+<img src="{{ site.baseurl }}/assets/img/manual/icons/compound_state.svg" class="state-icon"> Compound states are states which have at least one child state (though having at least two child states makes more sense). Only one child state of a compound state can be active at any given time. Compound states have the following properties:
 
 - _Initial state_ - this property determines which child state will be activated when the compound state is entered directly. You can always activate a child state by explicitly transitioning to it. If you do not set an initial state then no child state will be activated and an error will be printed to the console.
 
@@ -95,11 +95,11 @@ Compound states have two signals in addition to the signals that all states have
 
 ## Parallel states
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/parallel_state.svg" class="mr-3" width="32" height="32" align="left"> Parallel states are similar to compound states in that they can have multiple child states. However, all child states of a parallel state are active at the same time when the parallel state is active. They allow you to model multiple states which are independent of each other. As such they are a great tool for avoiding combinatorial state explosion that you can get with simple state machines. Parallel states have no additional properties.
+<img src="{{ site.baseurl }}/assets/img/manual/icons/parallel_state.svg" class="state-icon"> Parallel states are similar to compound states in that they can have multiple child states. However, all child states of a parallel state are active at the same time when the parallel state is active. They allow you to model multiple states which are independent of each other. As such they are a great tool for avoiding combinatorial state explosion that you can get with simple state machines. Parallel states have no additional properties.
 
 ## History states
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/history_state.svg" class="mr-3" width="32" height="32" align="left"> History states are pseudo-states. They are not really a state but rather activate the last active state when being transitioned to. They can only be used as child states of compound states. They are useful when you temporarily want to leave a compound state and then return to the state you were in before you left. History states have the following properties:
+<img src="{{ site.baseurl }}/assets/img/manual/icons/history_state.svg" class="state-icon"> History states are pseudo-states. They are not really a state but rather activate the last active state when being transitioned to. They can only be used as child states of compound states. They are useful when you temporarily want to leave a compound state and then return to the state you were in before you left. History states have the following properties:
 
 - _Deep_ - if true the history state will capture and restore the state of the whole sub-tree below the compound state. If false the history state will only capture and restore the last active state of its immediate parent compound state.
 - _Default state_ - this is the state which will be activated if the history state is entered and no history has been captured yet. If you do not set a default state, the history state will not activate any state when it is entered and an error will be printed to the console.
@@ -113,7 +113,7 @@ To use a history state, set up a transition that transitions directly to the his
 
 > ⚠️ **Note**: this feature is currently experimental and may change or be replaced in the future.
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/animation_tree_state.svg" class="mr-3" width="32" height="32" align="left"> Animation tree states are a variation of atomic states. They can be linked to an animation tree. When an animation tree state is activated it will ask the animation tree to travel to the same state (the animation tree state and the state inside the animation tree should have the same name). This can be used to control animation trees with the same state chart events that you use to control your game logic. Animation tree states have the following properties:
+<img src="{{ site.baseurl }}/assets/img/manual/icons/animation_tree_state.svg" class="state-icon"> Animation tree states are a variation of atomic states. They can be linked to an animation tree. When an animation tree state is activated it will ask the animation tree to travel to the same state (the animation tree state and the state inside the animation tree should have the same name). This can be used to control animation trees with the same state chart events that you use to control your game logic. Animation tree states have the following properties:
 
 - _Animation tree_ - the animation tree that should be controlled by the animation tree state.
 - _State Name_ - the name of the state inside the animation tree that should be activated when the animation tree state is activated. This is optional, if you do not set a state name, the animation tree state will activate the state with the same name as the animation tree state.
@@ -129,7 +129,7 @@ Animation tree states are usually independent of the rest of the states, so it i
 
 > ⚠️ **Note**: this feature is currently experimental and may change or be replaced in the future.
 
-<img src="{{ site.baseurl }}/assets/img/manual/icons/animation_player_state.svg" class="mr-3" width="32" height="32" align="left"> Animation player states are similar to animation tree states. They can be linked to an animation player. When an animation player state is activated it will ask the animation player to play the same animation (the animation player state and the animation inside the animation player should have the same name). This can be used to control animation players with the same state chart events that you use to control your game logic. Animation player states have the following properties:
+<img src="{{ site.baseurl }}/assets/img/manual/icons/animation_player_state.svg" class="state-icon"> Animation player states are similar to animation tree states. They can be linked to an animation player. When an animation player state is activated it will ask the animation player to play the same animation (the animation player state and the animation inside the animation player should have the same name). This can be used to control animation players with the same state chart events that you use to control your game logic. Animation player states have the following properties:
 
 - _Animation player_ - the animation player that should be controlled by the animation player state.
 - _Animation Name_ - the name of the animation inside the animation player that should be played when the animation player state is activated. This is optional, if you do not set an animation name, the animation player state will play the animation with the same name as the animation player state.

docs/_includes/head.html

@@ -42,6 +42,18 @@
 
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/palette.css">
-    <script src="{{ site.baseurl }}/assets/js/jquery-3.3.1/jquery-3.3.1.min.js"
-        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+
+    <!-- jQuery -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <!-- Bootstrap -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js" integrity="sha512-7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+vX3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css" integrity="sha512-LopA1sokwAW/FNZdP+/5q8MGyb9CojL1LTz8JMyu/8YZ8XaCDn1EOm6L7RWIIOHRM7K4jwnHuOmyLZeeeYxSOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css" integrity="sha512-TPigxKHbPcJHJ7ZGgdi2mjdW9XHsQsnptwE+nOUWkoviYBn0rAAt0A5y3B1WGqIHrKFItdhZRteONANT07IipA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/brands.min.css" integrity="sha512-sKhd1NGM4i4pJj+3P+NVHisu2z5rKAwNG1IpWMdKsFWYlUHFSrsAO3geQ5QNKttkMPZNTo76tfg8jVx2ICP7qw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/fontawesome.min.js" integrity="sha512-txsWtB+FOLDRFFsBL75QF7cPI4rqSjVH7Q+jKuaLrEI+uPPfvNfX66+pHF/4pU4pgQS3ptJ25xOvC8Erm+P+rA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/brands.min.js" integrity="sha512-LGx1r1hs7PQc2npcsY2jKTwbFubaKcgnks+jSm+LfEIhCI6P31GMq6MINmqkkL+JCTD9fJISBIwQdVOkeq9miw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>

docs/_includes/header.html

@@ -1,5 +1,5 @@
 <header>
-    <nav style="background: #2c2c2c;" class="js-navbar-scroll navbar navbar-expand navbar-dark flex-column flex-md-row td-navbar">
+    <nav style="background: #2c2c2c;" class="js-navbar-scroll navbar navbar-fixed-top navbar-dark flex-column flex-md-row td-navbar">
         <a class="navbar-brand" href="{{ site.baseurl }}/">
             <span>
                 <img style="max-height: 34px; margin-left: 12px;"
@@ -8,7 +8,7 @@
         </a>
         <div style="margin-left: auto;" class="d-none d-md-block">
             <a href="{{ site.repo }}">
-                <i class="fab fa fa-github fa-2x" style="color: white; padding-right:12px; float:left; margin-top:5px"></i>
+                <i class="fab fa fa-github fa-3x" style="color: white; padding-right:12px; float:left; margin-top:5px"></i>
             </a>
         </div>
     </nav>

docs/_includes/sidebar.html

@@ -1,12 +1,12 @@
 <div id="td-sidebar-menu" class="td-sidebar__inner">
 
   <form class="td-sidebar__search d-flex align-items-center">
-    <input type="search" class="form-control td-search-input" placeholder="&#xf002 Search…" aria-label="Search this site…" autocomplete="off">
+    <input type="search" class="form-control td-search-input" placeholder="Search…" aria-label="Search this site…" autocomplete="off">
       <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
       </button>
   </form>
 
-  <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
+  <nav class="collapse td-sidebar-nav py-2 pl-4" id="td-section-nav">
     {% for section in site.data.toc %}
       <ul class="td-sidebar-nav__section pr-md-3">
         {% capture sectionUrl %}

docs/_layouts/default.html

@@ -8,12 +8,12 @@
     <div class="container-fluid td-outer">
       <div class="td-main">
         <div class="row flex-xl-nowrap">
-          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+          <div class="col-12 col-md-3 col-xl-2 td-sidebar py-0 d-print-none">
           {% include sidebar.html %}
           </div>
-          <main class="col-12 col-md-9 col-xl-10 pl-md-5" role="main">
-           <div class="td-content">
-	      {{ content }}	
+          <main class="col-12 col-md-9 col-xl-10 pl-md-5 pt-1 pt-md-5 main-column" role="main">
+           <div class=" pt-0 pt-md-5">
+	      {{ content }}
               {% if section.links %}<div class="section-index">
                <hr class="panel-line">{% for child in section.links %}
                  <div class="entry">

docs/_layouts/page.html

@@ -2,6 +2,5 @@
 layout: default
 ---
 {{ content }}
-{% include toc.html %}
 {% include permalinks.html %}
 {% include tags.html %}