From 8728d982e0a6fc164ce831499faf424172d123b7 Mon Sep 17 00:00:00 2001
From: Diego Henrique <diego.lima@toptal.com>
Date: Mon, 29 Mar 2021 12:12:34 -0300
Subject: [PATCH] [TRA-1262] GitIgnore: add <iframe> for internal linking page
 (#528)

* [TRA-1262] GitIgnore: add <iframe> for internal linking page

* getting internal linking page from same domain

* adding LESS documentation

* adding border to iframe instead of on the page

* fix for correct link
---
 Public/css/app.css         | 269 +++++++++++----------
 Public/css/app.less        | 481 +++++++++++++++++++------------------
 README.md                  |  23 +-
 Resources/Views/index.leaf |   1 +
 4 files changed, 408 insertions(+), 366 deletions(-)

diff --git a/Public/css/app.css b/Public/css/app.css
index 2aa7763..b9e6786 100755
--- a/Public/css/app.css
+++ b/Public/css/app.css
@@ -3,128 +3,120 @@
   font-weight: 100;
   font-family: "Proxima Nova";
   font-style: normal;
-  src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"),
-    url("./fonts/ProximaNova-Thin.woff") format("woff"),
-    url("./fonts/ProximaNova-Thin.otf") format("opentype");
+  src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"), url("./fonts/ProximaNova-Thin.woff") format("woff"), url("./fonts/ProximaNova-Thin.otf") format("opentype");
 }
 @font-face {
   font-display: swap;
   font-weight: 300;
   font-family: "Proxima Nova";
   font-style: normal;
-  src: url("./fonts/ProximaNova-Light.woff2") format("woff2"),
-    url("./fonts/ProximaNova-Light.woff") format("woff"),
-    url("./fonts/ProximaNova-Light.otf") format("opentype");
+  src: url("./fonts/ProximaNova-Light.woff2") format("woff2"), url("./fonts/ProximaNova-Light.woff") format("woff"), url("./fonts/ProximaNova-Light.otf") format("opentype");
 }
 @font-face {
   font-display: swap;
   font-weight: 400;
   font-family: "Proxima Nova";
   font-style: normal;
-  src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"),
-    url("./fonts/ProximaNova-Regular.woff") format("woff"),
-    url("./fonts/ProximaNova-Regular.otf") format("opentype");
+  src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"), url("./fonts/ProximaNova-Regular.woff") format("woff"), url("./fonts/ProximaNova-Regular.otf") format("opentype");
 }
 @font-face {
   font-display: swap;
   font-weight: 600;
   font-family: "Proxima Nova";
   font-style: normal;
-  src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"),
-    url("./fonts/ProximaNova-Semibold.woff") format("woff"),
-    url("./fonts/ProximaNova-Semibold.otf") format("opentype");
+  src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"), url("./fonts/ProximaNova-Semibold.woff") format("woff"), url("./fonts/ProximaNova-Semibold.otf") format("opentype");
 }
 @font-face {
   font-display: swap;
   font-weight: 700;
   font-family: "Proxima Nova";
   font-style: normal;
-  src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"),
-    url("./fonts/ProximaNova-Bold.woff") format("woff"),
-    url("./fonts/ProximaNova-Bold.otf") format("opentype");
+  src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"), url("./fonts/ProximaNova-Bold.woff") format("woff"), url("./fonts/ProximaNova-Bold.otf") format("opentype");
 }
-
-body, html {
-	height: 100%;
-	background-color: transparent;
+body,
+html {
+  height: 100%;
+  background-color: transparent;
 }
 body {
-	min-width: 320px;
-	color: #000000;
-	margin: 0;
-	font-family: "Proxima Nova", Arial, sans-serif;
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.5;
-	display: flex;
-	flex-direction: column;
+  min-width: 320px;
+  color: #000000;
+  margin: 0;
+  font-family: "Proxima Nova", Arial, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
 }
 a {
-	color: #204ecf;
-	text-decoration: none;
+  color: #204ecf;
+  text-decoration: none;
 }
-a:hover, a:focus {
-	text-decoration: underline;
+a:hover,
+a:focus {
+  text-decoration: underline;
 }
-
 .content-wrapper {
-	min-height: 100%;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	padding-top: 72px;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-top: 72px;
 }
-
+/* --------- header --------- */
 header {
-	background: #204ecf;
-	color: #ffffff;
-	height: 72px;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	overflow-x: hidden;
-	z-index: 1100;
+  background: #204ecf;
+  color: #ffffff;
+  height: 72px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  overflow-x: hidden;
+  z-index: 1100;
 }
 header .container {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
 }
 header a {
-	display: block;
-	line-height: 0;
+  display: block;
+  line-height: 0;
 }
 header .header-left-column {
-	display: flex;
-	align-items: center;
-	padding: 0 10px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
 }
 header .header-left-column a {
-	padding-right: 16px;
+  padding-right: 16px;
 }
 header .header-left-column a img {
-	min-width: 100px;
-	height: 30px;
+  min-width: 100px;
+  height: 30px;
 }
 header .header-left-column h1 {
-	font-size: 17px;
-	line-height: 28px;
-	border-left: 1px solid #ebeced;
-	padding-left: 16px;
-	margin: 0;
+  font-size: 17px;
+  line-height: 28px;
+  border-left: 1px solid #ebeced;
+  padding-left: 16px;
+  margin: 0;
 }
 header .header-right-column img {
-	height: 24px;
+  height: 24px;
 }
+/* --------- END of header --------- */
+/* --------- main --------- */
 main {
-	width: 100%;
-	flex: 1 0 400px;
+  width: 100%;
+  flex: 1 0 400px;
 }
 @media (min-width: 768px) {
-	main {
-		display: flex;
-	}
+  main {
+    display: flex;
+  }
 }
 main .masthead {
   margin: 0 auto;
@@ -133,101 +125,109 @@ main .masthead {
   text-align: center;
 }
 main .masthead-top {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-bottom: 25px;
-	margin-top: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 25px;
+  margin-top: 120px;
 }
 @media (min-width: 768px) {
-	main .masthead-top {
-		margin-top: 180px;
-	}
+  main .masthead-top {
+    margin-top: 180px;
+  }
 }
 main .masthead-top img {
-	width: 100%;
-	max-width: 370px;
+  width: 100%;
+  max-width: 370px;
 }
 main .masthead-top h2 {
-	color: #455065;
-	margin: 20px 0;
-	font-size: 16px;
-	line-height: 16px;
+  color: #455065;
+  margin: 20px 0;
+  font-size: 16px;
+  line-height: 16px;
 }
 main .input-group {
-	overflow: auto;
+  overflow: auto;
 }
 main .masthead-bottom {
-	margin-top: 40px;
-	margin-bottom: 60px;
+  margin-top: 40px;
+  margin-bottom: 60px;
 }
 main .masthead-bottom ul {
   display: flex;
   flex-direction: column;
-	justify-content: center;
-	list-style: none;
-	margin: 0;
-	padding: 0;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 main .masthead-bottom ul li {
-	margin-bottom: 16px;
+  margin-bottom: 16px;
 }
 main .masthead-bottom ul li a {
-	font-size: 16px;
-	line-height: 16px;
-	padding-bottom: 8px;
+  font-size: 16px;
+  line-height: 16px;
+  padding-bottom: 8px;
 }
-main .masthead-bottom ul li a:hover, main .masthead-bottom ul li a:focus {
-	text-decoration: none;
-	border-bottom: 1px solid #204ecf;
+main .masthead-bottom ul li a:hover,
+main .masthead-bottom ul li a:focus {
+  text-decoration: none;
+  border-bottom: 1px solid #204ecf;
 }
+/* --------- END of main --------- */
+/* --------- footer --------- */
 footer {
-	height: 142px;
-	color: #000000;
-	padding-bottom: 64px;
+  height: 142px;
+  color: #000000;
+  padding-bottom: 64px;
 }
 footer > div {
-	width: 100%;
-	max-width: 624px;
+  width: 100%;
+  max-width: 624px;
   margin: 0 auto;
   padding: 0 16px;
 }
 footer .carbon-wrap {
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 footer a.carbon-img {
-	height: 78px;
+  height: 78px;
 }
 footer a.carbon-img img {
-	height: 100%;
+  height: 100%;
 }
 footer a.carbon-text {
-	font-size: 12px;
-	line-height: 20px;
-	padding-left: 8px;
+  font-size: 12px;
+  line-height: 20px;
+  padding-left: 8px;
 }
 footer .carbon-poweredby {
-	display: none;
+  display: none;
 }
+/* --------- END of footer --------- */
+/* --------- responsiveness --------- */
 .container {
   position: relative;
-	max-width: 100%;
-	padding-right: 16px;
-	padding-left: 16px;
-	margin-right: auto;
-	margin-left: auto;
+  max-width: 100%;
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1344px;
+  }
 }
 @media (min-width: 576px) {
-	.container {
+  .container {
     width: 540px;
   }
-
   main .masthead-bottom ul {
     flex-direction: row;
   }
-
   main .masthead-bottom ul li:not(:first-child)::before {
     display: inline-block;
     content: "";
@@ -238,31 +238,40 @@ footer .carbon-poweredby {
   }
 }
 @media (min-width: 768px) {
-	.container {
-		width: 720px;
+  .container {
+    width: 720px;
   }
 }
 @media (min-width: 992px) {
-	.container {
-		width: 960px;
+  .container {
+    width: 960px;
   }
 }
 @media (min-width: 1200px) {
-	.container {
-		width: 1376px;
+  .container {
+    width: 1376px;
   }
-
   header .header-right-column {
     padding-right: 98px;
   }
 }
-
+/* --------- END of responsiveness --------- */
 #input-gitignore {
   -webkit-appearance: none;
+  border: 1px solid #d8d9dc;
   border-radius: 0;
   height: 46px;
-  border: 1px solid #d8d9dc;
 }
 #input-gitignore::-ms-expand {
-	display: none;
+  display: none;
+}
+#internal-linking {
+  border: 0;
+  height: 56px;
+  box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1);
+}
+@media (max-width: 768px) {
+  #internal-linking {
+    height: 32px;
+  }
 }
diff --git a/Public/css/app.less b/Public/css/app.less
index 08fb3cb..2f8c91b 100755
--- a/Public/css/app.less
+++ b/Public/css/app.less
@@ -1,317 +1,328 @@
 @import "variables.less";
 
 @font-face {
-    font-display: swap;
-    font-weight: 100;
-    font-family: "Proxima Nova";
-    font-style: normal;
-    src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"),
-      url("./fonts/ProximaNova-Thin.woff") format("woff"),
-      url("./fonts/ProximaNova-Thin.otf") format("opentype");
+  font-display: swap;
+  font-weight: 100;
+  font-family: "Proxima Nova";
+  font-style: normal;
+  src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"),
+    url("./fonts/ProximaNova-Thin.woff") format("woff"),
+    url("./fonts/ProximaNova-Thin.otf") format("opentype");
 }
-  
+
 @font-face {
-    font-display: swap;
-    font-weight: 300;
-    font-family: "Proxima Nova";
-    font-style: normal;
-    src: url("./fonts/ProximaNova-Light.woff2") format("woff2"),
-      url("./fonts/ProximaNova-Light.woff") format("woff"),
-      url("./fonts/ProximaNova-Light.otf") format("opentype");
+  font-display: swap;
+  font-weight: 300;
+  font-family: "Proxima Nova";
+  font-style: normal;
+  src: url("./fonts/ProximaNova-Light.woff2") format("woff2"),
+    url("./fonts/ProximaNova-Light.woff") format("woff"),
+    url("./fonts/ProximaNova-Light.otf") format("opentype");
 }
-  
+
 @font-face {
-    font-display: swap;
-    font-weight: 400;
-    font-family: "Proxima Nova";
-    font-style: normal;
-    src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"),
-      url("./fonts/ProximaNova-Regular.woff") format("woff"),
-      url("./fonts/ProximaNova-Regular.otf") format("opentype");
+  font-display: swap;
+  font-weight: 400;
+  font-family: "Proxima Nova";
+  font-style: normal;
+  src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"),
+    url("./fonts/ProximaNova-Regular.woff") format("woff"),
+    url("./fonts/ProximaNova-Regular.otf") format("opentype");
 }
-  
+
 @font-face {
-    font-display: swap;
-    font-weight: 600;
-    font-family: "Proxima Nova";
-    font-style: normal;
-    src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"),
-      url("./fonts/ProximaNova-Semibold.woff") format("woff"),
-      url("./fonts/ProximaNova-Semibold.otf") format("opentype");
+  font-display: swap;
+  font-weight: 600;
+  font-family: "Proxima Nova";
+  font-style: normal;
+  src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"),
+    url("./fonts/ProximaNova-Semibold.woff") format("woff"),
+    url("./fonts/ProximaNova-Semibold.otf") format("opentype");
 }
-  
+
 @font-face {
-    font-display: swap;
-    font-weight: 700;
-    font-family: "Proxima Nova";
-    font-style: normal;
-    src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"),
-      url("./fonts/ProximaNova-Bold.woff") format("woff"),
-      url("./fonts/ProximaNova-Bold.otf") format("opentype");
+  font-display: swap;
+  font-weight: 700;
+  font-family: "Proxima Nova";
+  font-style: normal;
+  src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"),
+    url("./fonts/ProximaNova-Bold.woff") format("woff"),
+    url("./fonts/ProximaNova-Bold.otf") format("opentype");
 }
 
 body,
 html {
-    height: 100%;
-    background-color: @background;
+  height: 100%;
+  background-color: @background;
 }
 body {
-    min-width: 320px;
-    color: @text;
-    margin: 0;
-    font-family: "Proxima Nova", Arial, sans-serif;
-	font-size: 16px;
-	font-weight: @weight-regular;
-    line-height: 1.5;
-    display: flex;
-    flex-direction: column;
+  min-width: 320px;
+  color: @text;
+  margin: 0;
+  font-family: "Proxima Nova", Arial, sans-serif;
+  font-size: 16px;
+  font-weight: @weight-regular;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
 }
 a {
-    color: @link;
-    text-decoration: none;
+  color: @link;
+  text-decoration: none;
 
-    &:hover,
-    &:focus {
-        text-decoration: underline;
-    }
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
 }
 .content-wrapper {
-	min-height: 100%;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	padding-top: 72px;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-top: 72px;
 }
 
 /* --------- header --------- */
 header {
-    background: @blue;
-    color: @white;
-    height: 72px;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    overflow-x: hidden;
-    z-index: 1100;
+  background: @blue;
+  color: @white;
+  height: 72px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  overflow-x: hidden;
+  z-index: 1100;
 
-    .container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 100%;
-    }
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+  }
+
+  a {
+    display: block;
+    line-height: 0;
+  }
+
+  .header-left-column {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
 
     a {
-        display: block;
-        line-height: 0;
+      padding-right: 16px;
+
+      img {
+        min-width: 100px;
+        height: 30px;
+      }
     }
 
-    .header-left-column {
-        display: flex;
-        align-items: center;
-        padding: 0 10px;
-
-        a {
-            padding-right: 16px;
-
-            img {
-                min-width: 100px;
-                height: 30px;
-            }
-        }
-
-        h1 {
-            font-size: 17px;
-            line-height: 28px;
-            border-left: 1px solid @logo-divider;
-            padding-left: 16px;
-            margin: 0;
-        }
+    h1 {
+      font-size: 17px;
+      line-height: 28px;
+      border-left: 1px solid @logo-divider;
+      padding-left: 16px;
+      margin: 0;
     }
+  }
 
-    .header-right-column {
-        img {
-            height: 24px;
-        }
+  .header-right-column {
+    img {
+      height: 24px;
     }
+  }
 }
 /* --------- END of header --------- */
 
 /* --------- main --------- */
 main {
-    width: 100%;
-    flex: 1 0 400px;
+  width: 100%;
+  flex: 1 0 400px;
+
+  @media (min-width: 768px) {
+    display: flex;
+  }
+
+  .masthead {
+    margin: 0 auto;
+    max-width: 580px;
+    overflow-y: auto;
+    text-align: center;
+  }
+
+  .masthead-top {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 25px;
+    margin-top: 120px;
 
     @media (min-width: 768px) {
-        display: flex;
+      margin-top: 180px;
     }
 
-    .masthead {
-        margin: 0 auto;
-        max-width: 580px;
-        overflow-y: auto;
-        text-align: center;
+    img {
+      width: 100%;
+      max-width: 370px;
     }
 
-    .masthead-top {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 25px;
-        margin-top: 120px;
+    h2 {
+      color: @text-secondary;
+      margin: 20px 0;
+      font-size: 16px;
+      line-height: 16px;
+    }
+  }
 
-        @media (min-width: 768px) {
-            margin-top: 180px;
-        }
-
-        img {
-            width: 100%;
-            max-width: 370px;
-        }
-
-        h2 {
-            color: @text-secondary;
-            margin: 20px 0;
-            font-size: 16px;
-            line-height: 16px;
-        }
-    }
-
-    .input-group {
-        overflow: auto;
-    }
-
-    .masthead-bottom {
-        margin-top: 40px;
-        margin-bottom: 60px;
-
-        ul {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-
-            li {
-                margin-bottom: 16px;
-
-                a {
-                    font-size: 16px;
-                    line-height: 16px;
-                    padding-bottom: 8px;
-                
-                    &:hover,
-                    &:focus {
-                        text-decoration: none;
-                        border-bottom: 1px solid @link;
-                    }
-                }
-            }
+  .input-group {
+    overflow: auto;
+  }
+
+  .masthead-bottom {
+    margin-top: 40px;
+    margin-bottom: 60px;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin-bottom: 16px;
+
+        a {
+          font-size: 16px;
+          line-height: 16px;
+          padding-bottom: 8px;
+
+          &:hover,
+          &:focus {
+            text-decoration: none;
+            border-bottom: 1px solid @link;
+          }
         }
+      }
     }
+  }
 }
 /* --------- END of main --------- */
 
 /* --------- footer --------- */
 footer {
-    height: 142px;
-    color: @text;
-    padding-bottom: 64px;
+  height: 142px;
+  color: @text;
+  padding-bottom: 64px;
 
-    & > div {
-        width: 100%;
-        max-width: 624px;
-        margin: 0 auto;
-        padding: 0 16px;
+  & > div {
+    width: 100%;
+    max-width: 624px;
+    margin: 0 auto;
+    padding: 0 16px;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  a.carbon-img {
+    height: 78px;
+
+    img {
+      height: 100%;
     }
+  }
 
-    .carbon-wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+  a.carbon-text {
+    font-size: 12px;
+    line-height: 20px;
+    padding-left: 8px;
+  }
 
-    a.carbon-img {
-        height: 78px;
-
-        img {
-            height: 100%;
-        }
-    }
-
-    a.carbon-text {
-        font-size: 12px;
-        line-height: 20px;
-        padding-left: 8px;
-    }
-
-    .carbon-poweredby {
-        display: none;
-    }
+  .carbon-poweredby {
+    display: none;
+  }
 }
 /* --------- END of footer --------- */
 
 /* --------- responsiveness --------- */
 .container {
-    position: relative;
-	max-width: 100%;
-    padding-right: 16px;
-    padding-left: 16px;
-    margin-right: auto;
-    margin-left: auto;
+  position: relative;
+  max-width: 100%;
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-right: auto;
+  margin-left: auto;
 
-    @media (min-width: 1200px) {
-        max-width: 1344px;
-    }
+  @media (min-width: 1200px) {
+    max-width: 1344px;
+  }
 }
 @media (min-width: 576px) {
-	.container {
-        width: 540px;
-    }
+  .container {
+    width: 540px;
+  }
 
-    main .masthead-bottom ul {
-        flex-direction: row;
+  main .masthead-bottom ul {
+    flex-direction: row;
 
-        li:not(:first-child) {
-            &::before {
-                display: inline-block;
-                content: "";
-                width: 1px;
-                height: 12px;
-                background-color: @nav-divider;
-                margin: 0 21px;
-            }
-        }
+    li:not(:first-child) {
+      &::before {
+        display: inline-block;
+        content: "";
+        width: 1px;
+        height: 12px;
+        background-color: @nav-divider;
+        margin: 0 21px;
+      }
     }
+  }
 }
 @media (min-width: 768px) {
-	.container {
-		width: 720px;
-    }
+  .container {
+    width: 720px;
+  }
 }
 @media (min-width: 992px) {
-	.container {
-		width: 960px;
-    }
+  .container {
+    width: 960px;
+  }
 }
 @media (min-width: 1200px) {
-	.container {
-		width: 1376px;
-    }
+  .container {
+    width: 1376px;
+  }
 
-    header .header-right-column {
-        padding-right: 98px;
-    }
+  header .header-right-column {
+    padding-right: 98px;
+  }
 }
 /* --------- END of responsiveness --------- */
 
 #input-gitignore {
-	-webkit-appearance: none;
-    border: 1px solid @lightgray;
-    border-radius: 0;
-    height: 46px;
+  -webkit-appearance: none;
+  border: 1px solid @lightgray;
+  border-radius: 0;
+  height: 46px;
 }
 #input-gitignore::-ms-expand {
-    display: none;
+  display: none;
+}
+
+#internal-linking {
+  border: 0;
+  height: 56px;
+
+  box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 768px) {
+    height: 32px;
+  }
 }
diff --git a/README.md b/README.md
index cb45737..2687b2a 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,6 @@ Source templates for gitignore.io: https://github.com/toptal/gitignore
 
 Complete gitignore.io documentation: https://docs.gitignore.io/
 
-
 ## Docker Container
 
 ### Prerequisites
@@ -38,6 +37,7 @@ Complete gitignore.io documentation: https://docs.gitignore.io/
 ### Build
 
 #### Production
+
 ```
 $ docker-compose up --build
 ```
@@ -48,14 +48,27 @@ $ docker-compose up --build
 $ docker-compose -f ./docker-compose-dev.yml build
 $ docker-compose -f ./docker-compose-dev.yml up
 ```
+
 It will start the web server running on [http://localhost:8080](http://localhost:8080)
 
 Development mode mounts the following directories to docker volumes:
+
 - `/Public`
 - `/Resources `
 
+## LESS and CSS
+
+The app uses [LESS](http://lesscss.org/) as his CSS preprocessor for the files in `Public/css`.
+
+To process the less file you need to:
+
+- Install less compiler `yarn global add less`
+- Process the less file with `lessc app.less app.css`
+
 ## Environment Variables
+
 Please set your environment variables to docker configurations. All are optional.
+
 ```
 ...
 services:
@@ -68,23 +81,31 @@ services:
     ...
 ...
 ```
+
 ### HOST_ORIGIN
+
 Origin of your web server, falls back to https://www.toptal.com
+
 ```
 HOST_ORIGIN: http://www.example.com
 ```
 
 ### BASE_PREFIX
+
 If you want to host this web server under a subdirectory (http://www.example.com/foo/bar for example), please set this variable.
+
 ```
 BASE_PREFIX: /foo/bar
 ```
 
 ### GOOGLE_ANALYTICS_UID
+
 User ID for Google Tag Manager snippet
+
 ```
 GOOGLE_ANALYTICS_UID: UA-XXXXXXXX-X
 ```
+
 ## E2E Tests
 
 Tests are located in `e2e-tests` folder with:
diff --git a/Resources/Views/index.leaf b/Resources/Views/index.leaf
index 777fceb..22985dc 100644
--- a/Resources/Views/index.leaf
+++ b/Resources/Views/index.leaf
@@ -97,6 +97,7 @@
                 </div>
             </div>
         </main>
+        <iframe id="internal-linking" src="/internal-linking?site=GitIgnore">
     </div>
 
     <!-- Footer Scripts -->