connections added arrows to links from and to

assets/dist/main.css

@@ -935,18 +935,26 @@ main#content.mode-text .opened-link .close-link-btn {
       bottom: 100%;
       margin-top: 15px;
       padding-bottom: 10px; }
+      .dot > nav.links.to:before {
+        content: "\2304";
+        display: flex;
+        align-items: flex-end; }
     .dot > nav.links.from {
       top: 100%;
       padding-top: 10px; }
+      .dot > nav.links.from:before {
+        content: "\2303"; }
     .dot > nav.links:before {
-      content: "";
       border-left: 1px solid #e2e2e2;
       position: absolute;
       top: 0;
       left: 65px;
       height: 100%;
-      width: 1px;
-      z-index: -1; }
+      width: 0;
+      z-index: -1;
+      text-indent: -0.45em;
+      line-height: 1;
+      color: #4a4848; }
   .dot:hover > p.summary, .dot.opened > p.summary, .dot.highlight > p.summary {
     opacity: 1;
     transition: opacity 0.4s ease-in-out; }

assets/main.scss

@@ -494,20 +494,30 @@ main#content.mode-connections{
       bottom:100%;
       margin-top: 15px;
       padding-bottom:10px;
+      &:before{
+        content: "\2304";
+        display: flex;
+        align-items: flex-end;
+      }
     }
     &.from{
       top:100%;
       padding-top:10px;
       // margin-bottom: 15px;
+      &:before{
+        content: "\2303";
+      }
     }
 
     &:before{
-      content: "";
       border-left: 1px solid #e2e2e2;
       position: absolute;
       top:0; left:$margin_left - 5px;
-      height: 100%; width:1px;
+      height: 100%; width:0;
       z-index: -1;
+      text-indent: -0.45em;
+      line-height: 1;
+      color: #4a4848;
     }
   }