Add embed Mode (#23)

* add embed mode [#21]

* fix stupid typo c:

* fix typo - episode 2

* Recompile CSS & fix lien number container height

Co-authored-by: Lukas Schulte Pelkum <kbrt@protonmail.com>

web/assets/css/style.css

@@ -7,13 +7,30 @@ html, body {
   font-family: 'Source Code Pro', monospace;
 }
 
+html.embedded .navigation, body.embedded .navigation {
+  display: none;
+}
+
+html.embedded .container, body.embedded .container {
+  margin: 0;
+}
+
+html.embedded #content, html.embedded #linenos, body.embedded #content, body.embedded #linenos {
+  padding-top: 10px;
+  min-height: calc(100vh - 50px);
+}
+
+html.embedded #footer, body.embedded #footer {
+  font-size: 0.8em;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: none;
+  background: #000000;
 }
 
 ::-webkit-scrollbar-thumb {

web/assets/css/style.scss

@@ -6,6 +6,21 @@ html, body {
     background-color: #000000;
     color: #ffffff;
     font-family: 'Source Code Pro', monospace;
+    &.embedded {
+        .navigation {
+            display: none;
+        }
+        .container {
+            margin: 0;
+        }
+        #content, #linenos {
+            padding-top: 10px;
+            min-height: calc(100vh - 50px);
+        }
+        #footer {
+            font-size: 0.8em;
+        }
+    }
 }
 
 ::-webkit-scrollbar {
@@ -14,7 +29,7 @@ html, body {
 }
   
 ::-webkit-scrollbar-track {
-    background: none;
+    background: #000000;
 }
   
 ::-webkit-scrollbar-thumb {

web/assets/js/modules/state.js

@@ -45,6 +45,12 @@ export async function initialize() {
     setupButtonFunctionality();
     setupKeybinds();
 
+    // When embedded inside an iframe, add "embedded"
+    // class to body element.
+    if (window != window.parent) {
+        document.body.classList += " embedded";
+    }
+
     // Enable encryption if enabled from last session
     if (localStorage.getItem("encryption") === "true") {
         BUTTON_TOGGLE_ENCRYPTION_ELEMENT.classList.add("active");