From a9575d934d387e93cb5ff3ca1f5c51c4422f8875 Mon Sep 17 00:00:00 2001
From: Yehonal <yehonal.azeroth@gmail.com>
Date: Mon, 31 Dec 2018 12:44:35 +0100
Subject: Implemented external links icon (wikipedia style)

---
 _includes/git-wiki/sections/content/content.html |   4 +-
 _layouts/git-wiki-blog.html                      |   2 +-
 _layouts/git-wiki-bs-lux.html                    |   6 +-
 _layouts/git-wiki-bs-united.html                 |   4 +-
 _sass/git-wiki-style.scss                        | 288 +++++++++++++----------
 assets/images/external-link-ltr-icon.png         | Bin 0 -> 151 bytes
 assets/images/external.svg                       |   1 +
 assets/js/red-links.js                           |   5 +-
 8 files changed, 175 insertions(+), 135 deletions(-)
 create mode 100644 assets/images/external-link-ltr-icon.png
 create mode 100644 assets/images/external.svg

diff --git a/_includes/git-wiki/sections/content/content.html b/_includes/git-wiki/sections/content/content.html
index 58e4421..5d57689 100644
--- a/_includes/git-wiki/sections/content/content.html
+++ b/_includes/git-wiki/sections/content/content.html
@@ -1,4 +1,4 @@
-<div class="git-wiki-content">
+<div class="git-wiki-page">
   <section>
 
     {% include git-wiki/sections/tools/tools.html %}
@@ -17,7 +17,7 @@
     {% include {{ site.inc_before_content }} %}
     {% endif %}
 
-    <div id="content">
+    <div id="git-wiki-content">
       {{ content }}
     </div>
 
diff --git a/_layouts/git-wiki-blog.html b/_layouts/git-wiki-blog.html
index a934b72..ae6b994 100644
--- a/_layouts/git-wiki-blog.html
+++ b/_layouts/git-wiki-blog.html
@@ -9,7 +9,7 @@ layout: git-wiki-default
         <p class="author">
             <span class="date">{{ post.date | date: "%-d %B %Y"}}</span>
         </p>
-        <div class="content">
+        <div class="git-wiki-content">
             {{ post.excerpt }}
 
             <a href="{{ post.url | relative_url }}">...Read all</a>
diff --git a/_layouts/git-wiki-bs-lux.html b/_layouts/git-wiki-bs-lux.html
index 3de9169..1e5363a 100644
--- a/_layouts/git-wiki-bs-lux.html
+++ b/_layouts/git-wiki-bs-lux.html
@@ -22,7 +22,7 @@
     
     {% comment %} Hacky-Fix for lux theme {% endcomment %}
     <style>
-        .git-wiki-content {
+        .git-wiki-page {
             padding-left: 0;   
         }
         
@@ -43,7 +43,7 @@
                 {% include git-wiki/sections/header/header.html %}
             </div>
             <div class="col-lg-9">
-                <div class="git-wiki-content">
+                <div class="git-wiki-page">
                     {% include git-wiki/sections/tools/tools.html %}
 
                     {% if site.inc_before_toc %}
@@ -60,7 +60,7 @@
                     {% include {{ site.inc_before_content }} %}
                     {% endif %}
 
-                    <div id="content">
+                    <div id="git-wiki-content">
                         {{ content }}
                     </div>
 
diff --git a/_layouts/git-wiki-bs-united.html b/_layouts/git-wiki-bs-united.html
index a11fc59..d33e4ac 100644
--- a/_layouts/git-wiki-bs-united.html
+++ b/_layouts/git-wiki-bs-united.html
@@ -29,7 +29,7 @@
     <div class="wrapper">
         <div class="row">
             <div class="col-lg-9">
-                <div class="git-wiki-content">
+                <div class="git-wiki-page">
                     {% include git-wiki/sections/tools/tools.html %}
 
                     {% if site.inc_before_toc %}
@@ -46,7 +46,7 @@
                     {% include {{ site.inc_before_content }} %}
                     {% endif %}
 
-                    <div id="content">
+                    <div id="git-wiki-content">
                         {{ content }}
                     </div>
 
diff --git a/_sass/git-wiki-style.scss b/_sass/git-wiki-style.scss
index b9072d1..51b69ce 100644
--- a/_sass/git-wiki-style.scss
+++ b/_sass/git-wiki-style.scss
@@ -4,105 +4,122 @@
 
 body {
   background-color: #fff;
-  padding:50px;
+  padding: 50px;
   font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color:#727272;
-  font-weight:400;
+  color: #727272;
+  font-weight: 400;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  color:#222;
-  margin:0 0 20px;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #222;
+  margin: 0 0 20px;
 }
 
-p, ul, ol, table, pre, dl {
-  margin:0 0 20px;
+p,
+ul,
+ol,
+table,
+pre,
+dl {
+  margin: 0 0 20px;
 }
 
-h1, h2, h3 {
-  line-height:1.1;
+h1,
+h2,
+h3 {
+  line-height: 1.1;
 }
 
 h1 {
-  font-size:28px;
+  font-size: 28px;
 }
 
 h2 {
-  color:#393939;
+  color: #393939;
 }
 
-h3, h4, h5, h6 {
-  color:#494949;
+h3,
+h4,
+h5,
+h6 {
+  color: #494949;
 }
 
 a {
-  color:#39c;
-  text-decoration:none;
+  color: #39c;
+  text-decoration: none;
 }
 
 a:hover {
-  color:#069;
+  color: #069;
 }
 
 a small {
-  font-size:11px;
-  color:#777;
-  margin-top:-0.3em;
-  display:block;
+  font-size: 11px;
+  color: #777;
+  margin-top: -0.3em;
+  display: block;
 }
 
 a:hover small {
-  color:#777;
+  color: #777;
 }
 
 .wrapper {
   /*width:860px;*/
-  margin:0 auto;
+  margin: 0 auto;
 }
 
 blockquote {
-  border-left:1px solid #e5e5e5;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
+  border-left: 1px solid #e5e5e5;
+  margin: 0;
+  padding: 0 0 0 20px;
+  font-style: italic;
 }
 
-code, pre {
-  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
-  color:#333;
-  font-size:12px;
+code,
+pre {
+  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
+  color: #333;
+  font-size: 12px;
 }
 
 pre {
-  padding:8px 15px;
+  padding: 8px 15px;
   background: #f8f8f8;
-  border-radius:5px;
-  border:1px solid #e5e5e5;
+  border-radius: 5px;
+  border: 1px solid #e5e5e5;
   overflow-x: auto;
 }
 
 table {
-  width:100%;
-  border-collapse:collapse;
+  width: 100%;
+  border-collapse: collapse;
 }
 
-th, td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
+th,
+td {
+  text-align: left;
+  padding: 5px 10px;
+  border-bottom: 1px solid #e5e5e5;
 }
 
 dt {
-  color:#444;
-  font-weight:700;
+  color: #444;
+  font-weight: 700;
 }
 
 th {
-  color:#444;
+  color: #444;
 }
 
 img {
-  max-width:100%;
+  max-width: 100%;
 }
 
 .w3-teal {
@@ -132,7 +149,8 @@ img {
   padding-bottom: 55px !important;
 }
 
-@media print, screen and (max-width: 992px) {
+@media print,
+screen and (max-width: 992px) {
   #git-wiki-sidebar {
     position: fixed !important;
     top: 50px;
@@ -141,8 +159,8 @@ img {
     border-radius: 10px;
   }
 
-  .git-wiki-content {
-    margin-top:60px;
+  .git-wiki-page {
+    margin-top: 60px;
   }
 }
 
@@ -151,122 +169,126 @@ img {
 }
 
 #git-wiki-sidebar .git-wiki-downloads {
-  list-style:none;
-  height:40px;
-  padding:0;
+  list-style: none;
+  height: 40px;
+  padding: 0;
   background: #f4f4f4;
-  border-radius:5px;
-  border:1px solid #e0e0e0;
-  width:270px;
+  border-radius: 5px;
+  border: 1px solid #e0e0e0;
+  width: 270px;
 }
 
 #git-wiki-sidebar .git-wiki-downloads li {
-  width:89px;
-  float:left;
-  border-right:1px solid #e0e0e0;
-  height:40px;
+  width: 89px;
+  float: left;
+  border-right: 1px solid #e0e0e0;
+  height: 40px;
 }
 
 #git-wiki-sidebar .git-wiki-downloads li:first-child a {
-  border-radius:5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
 }
 
 #git-wiki-sidebar .git-wiki-downloads li:last-child a {
-  border-radius:0 5px 5px 0;
+  border-radius: 0 5px 5px 0;
 }
 
 #git-wiki-sidebar .git-wiki-downloads a {
-  line-height:1;
-  font-size:11px;
-  color:#999;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:34px;
+  line-height: 1;
+  font-size: 11px;
+  color: #999;
+  display: block;
+  text-align: center;
+  padding-top: 6px;
+  height: 34px;
 }
 
 #git-wiki-sidebar .git-wiki-downloads a:hover {
-  color:#999;
+  color: #999;
 }
 
 #git-wiki-sidebar .git-wiki-downloads a:active {
-  background-color:#f0f0f0;
+  background-color: #f0f0f0;
 }
 
 strong {
-  color:#222;
-  font-weight:700;
+  color: #222;
+  font-weight: 700;
 }
 
-#git-wiki-sidebar .git-wiki-downloads li + li + li {
-  border-right:none;
-  width:89px;
+#git-wiki-sidebar .git-wiki-downloads li+li+li {
+  border-right: none;
+  width: 89px;
 }
 
 #git-wiki-sidebar .git-wiki-downloads a strong {
-  font-size:14px;
-  display:block;
-  color:#222;
+  font-size: 14px;
+  display: block;
+  color: #222;
 }
 
-.git-wiki-content {
+.git-wiki-page {
   /*width:500px;
   float:right;*/
   padding-left: 320px;
-  padding-bottom:50px;
+  padding-bottom: 50px;
 }
 
 small {
-  font-size:11px;
+  font-size: 11px;
 }
 
 hr {
-  border:0;
-  background:#e5e5e5;
-  height:1px;
-  margin:0 0 20px;
+  border: 0;
+  background: #e5e5e5;
+  height: 1px;
+  margin: 0 0 20px;
 }
 
 footer {
   padding-left: 320px;
-  float:left;
-  bottom:50px;
-  -webkit-font-smoothing:subpixel-antialiased;
+  float: left;
+  bottom: 50px;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .tools-element {
-    border-left: aqua;
-    border-left-style: solid;
-    padding-left: 10px;
-    padding-right: 10px; 
+  border-left: aqua;
+  border-left-style: solid;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
-@media print, screen and (max-width: 960px) {
+@media print,
+screen and (max-width: 960px) {
 
   div.wrapper {
-    width:auto;
-    margin:0;
+    width: auto;
+    margin: 0;
   }
 
-  #git-wiki-sidebar, .git-wiki-content, footer {
-    float:none;
-    position:static;
-    width:auto;
+  #git-wiki-sidebar,
+  .git-wiki-page,
+  footer {
+    float: none;
+    position: static;
+    width: auto;
   }
 
-  #git-wiki-sidebar{
-    padding-right:320px;
+  #git-wiki-sidebar {
+    padding-right: 320px;
   }
 
-  .git-wiki-content, footer {
-    border:1px solid #e5e5e5;
-    border-width:1px 0;
-    padding:20px 0;
-    margin:60px 0 20px;
+  .git-wiki-page,
+  footer {
+    border: 1px solid #e5e5e5;
+    border-width: 1px 0;
+    padding: 20px 0;
+    margin: 60px 0 20px;
   }
 
   #git-wiki-sidebara small {
-    display:inline;
+    display: inline;
   }
 
   /*#git-wiki-sidebar .git-wiki-downloads {
@@ -277,43 +299,48 @@ footer {
 }
 
 
-@media print, screen and (max-width: 720px) {
+@media print,
+screen and (max-width: 720px) {
   body {
-    word-wrap:break-word;
+    word-wrap: break-word;
   }
 
-  #git-wiki-sidebar{
-    padding:0;
+  #git-wiki-sidebar {
+    padding: 0;
   }
 
-  #git-wiki-sidebar .git-wiki-downloads, #git-wiki-sidebarp.view {
-    position:static;
+  #git-wiki-sidebar .git-wiki-downloads,
+  #git-wiki-sidebarp.view {
+    position: static;
   }
 
-  pre, code {
-    word-wrap:normal;
+  pre,
+  code {
+    word-wrap: normal;
   }
 }
 
-@media print, screen and (max-width: 480px) {
+@media print,
+screen and (max-width: 480px) {
   body {
-    padding:15px;
+    padding: 15px;
   }
 
   #git-wiki-sidebar .git-wiki-downloads {
-    width:99%;
+    width: 99%;
   }
 
-  #git-wiki-sidebarli, #git-wiki-sidebar .git-wiki-downloads li + li + li {
-    width:33%;
+  #git-wiki-sidebarli,
+  #git-wiki-sidebar .git-wiki-downloads li+li+li {
+    width: 33%;
   }
 }
 
 @media print {
   body {
-    padding:0.4in;
-    font-size:12pt;
-    color:#444;
+    padding: 0.4in;
+    font-size: 12pt;
+    color: #444;
   }
 }
 
@@ -321,7 +348,8 @@ footer {
   Pagination rules
 */
 
-.pagination a, .pagination span {
+.pagination a,
+.pagination span {
   padding: 7px 18px;
   border: 1px solid #eee;
   margin-left: -2px;
@@ -330,10 +358,10 @@ footer {
   display: inline-block;
 }
 
-.pagination a {    
+.pagination a {
   &:hover {
-      background-color: #f1f1f1;
-      color: #333;
+    background-color: #f1f1f1;
+    color: #333;
   }
 }
 
@@ -342,9 +370,17 @@ footer {
 }
 
 .post-item {
-   margin-bottom: 50px;
+  margin-bottom: 50px;
 }
 
 #results-container li {
   list-style-type: none;
+}
+
+.external-link {
+  background-position: center right;
+  background-repeat: no-repeat;
+  background-image: url("../images/external-link-ltr-icon.png");
+  background-image: linear-gradient(transparent, transparent), url("../images/external.svg");
+  padding-right: 13px;
 }
\ No newline at end of file
diff --git a/assets/images/external-link-ltr-icon.png b/assets/images/external-link-ltr-icon.png
new file mode 100644
index 0000000..9e97d37
Binary files /dev/null and b/assets/images/external-link-ltr-icon.png differ
diff --git a/assets/images/external.svg b/assets/images/external.svg
new file mode 100644
index 0000000..766d890
--- /dev/null
+++ b/assets/images/external.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"> <path fill="#fff" stroke="#36c" d="M1.5 4.518h5.982V10.5H1.5z"/> <path fill="#36c" d="M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z"/> <path fill="#fff" d="M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z"/> </svg>
\ No newline at end of file
diff --git a/assets/js/red-links.js b/assets/js/red-links.js
index 065d3a9..8c1d719 100644
--- a/assets/js/red-links.js
+++ b/assets/js/red-links.js
@@ -7,8 +7,11 @@
             function () {
                 $('a').each(function () {
                     // avoid red link for external urls
-                    if (this.hostname != window.location.hostname)
+                    if (this.hostname != window.location.hostname) {
+                        if ($(this).parents('#git-wiki-content').length > 0)
+                            $(this).addClass("external-link");
                         return;
+                    }
 
                     var ext = this.href.split('.').pop().split(/\#|\?/)[0];
 
-- 
cgit