From f02b4785ac5b0f98631029bcab99277501a19548 Mon Sep 17 00:00:00 2001
From: kjeld Schouten-Lebbing <kjeld@schouten-lebbing.nl>
Date: Sun, 15 Aug 2021 13:14:19 +0200
Subject: [PATCH] whoops

---
 docs/_static/custom.css                       | 44 ++++++++-----------
 .../Quick-Start Guides/14-linking-apps.md     | 33 +++++++-------
 2 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 18b3a8b9c49..3d056dbbffb 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -6,15 +6,7 @@
 }
 
 
-body {
-  align-items: center;
-  background-color: #000;
-  display: flex;
-  justify-content: center;
-  height: 100vh;
-}
-
-.form {
+.form-form {
   background-color: #15172b;
   border-radius: 20px;
   box-sizing: border-box;
@@ -23,7 +15,7 @@ body {
   width: 320px;
 }
 
-.title {
+.form-form-title {
   color: #eee;
   font-family: sans-serif;
   font-size: 36px;
@@ -31,7 +23,7 @@ body {
   margin-top: 30px;
 }
 
-.subtitle {
+.form-form-subtitle {
   color: #eee;
   font-family: sans-serif;
   font-size: 16px;
@@ -39,21 +31,21 @@ body {
   margin-top: 10px;
 }
 
-.input-container {
+.form-form-input-container {
   height: 50px;
   position: relative;
   width: 100%;
 }
 
-.ic1 {
+.form-ic1 {
   margin-top: 40px;
 }
 
-.ic2 {
+.form-ic2 {
   margin-top: 30px;
 }
 
-.input {
+.form-input {
   background-color: #303245;
   border-radius: 12px;
   border: 0;
@@ -66,7 +58,7 @@ body {
   width: 100%;
 }
 
-.cut {
+.form-cut {
   background-color: #15172b;
   border-radius: 10px;
   height: 20px;
@@ -78,16 +70,16 @@ body {
   width: 76px;
 }
 
-.cut-short {
+.form-cut-short {
   width: 50px;
 }
 
-.input:focus ~ .cut,
-.input:not(:placeholder-shown) ~ .cut {
+.form-input:focus ~ .cut,
+.form-input:not(:placeholder-shown) ~ .cut {
   transform: translateY(8px);
 }
 
-.placeholder {
+.form-placeholder {
   color: #65657b;
   font-family: sans-serif;
   left: 20px;
@@ -99,20 +91,20 @@ body {
   top: 20px;
 }
 
-.input:focus ~ .placeholder,
-.input:not(:placeholder-shown) ~ .placeholder {
+.form-input:focus ~ .placeholder,
+.form-input:not(:placeholder-shown) ~ .placeholder {
   transform: translateY(-30px) translateX(10px) scale(0.75);
 }
 
-.input:not(:placeholder-shown) ~ .placeholder {
+.form-input:not(:placeholder-shown) ~ .placeholder {
   color: #808097;
 }
 
-.input:focus ~ .placeholder {
+.form-input:focus ~ .placeholder {
   color: #dc2f55;
 }
 
-.submit {
+.form-submit {
   background-color: #08d;
   border-radius: 12px;
   border: 0;
@@ -127,6 +119,6 @@ body {
   width: 100%;
 }
 
-.submit:active {
+.form-submit:active {
   background-color: #06b;
 }
diff --git a/docs/manual/Quick-Start Guides/14-linking-apps.md b/docs/manual/Quick-Start Guides/14-linking-apps.md
index c98844a22e0..13161cb3298 100644
--- a/docs/manual/Quick-Start Guides/14-linking-apps.md	
+++ b/docs/manual/Quick-Start Guides/14-linking-apps.md	
@@ -42,31 +42,32 @@ function process (form) {
 
 
 function generatesvc(name, app, service) {
-    let svcdns = name + app + service;
+    let svcname = name + "-" + app ;
+    let svcdns = svcname + "." + "ix-" + name + ".svc.cluster.local" ;
     return svcdns;
 };
 
 </SCRIPT>
 
 <FORM NAME="frameform" ACTION="" METHOD="GET"><BR>
-<div class="form">
-  <div class="subtitle">Generate Internal DNS Name:</div>
-  <div class="input-container ic1">
-    <input id="name" class="input" type="text" placeholder=" " />
-    <div class="cut"></div>
-    <label for="name" class="placeholder">Name:</label>
+<div class="form-form">
+  <div class="form-subtitle">Generate Internal DNS Name:</div>
+  <div class="form-input-container ic1">
+    <input id="name" class="form-input" type="text" placeholder=" " />
+    <div class="form-cut"></div>
+    <label for="name" class="form-placeholder">Name:</label>
   </div>
-  <div class="input-container ic2">
-    <input id="app" class="input" type="text" placeholder=" " />
-    <div class="cut"></div>
-    <label for="app" class="placeholder">App</label>
+  <div class="form-input-container ic2">
+    <input id="app" class="form-input" type="text" placeholder=" " />
+    <div class="form-cut"></div>
+    <label for="app" class="form-placeholder">App</label>
   </div>
-  <div class="input-container ic2">
-    <input id="service" class="input" type="text" placeholder=" " />
-    <div class="cut cut-short"></div>
-    <label for="service" class="placeholder">Service</>
+  <div class="form-input-container ic2">
+    <input id="service" class="form-input" type="text" placeholder=" " />
+    <div class="form-cut cut-short"></div>
+    <label for="service" class="form-placeholder">Service</>
   </div>
-  <INPUT TYPE="button" class="submit" NAME="button" Value="Generate" onClick="process(this.form)">
+  <INPUT TYPE="button" class="form-submit" NAME="button" Value="Generate" onClick="process(this.form)">
 </div>
 </FORM>