Add icons for external links

2018-06-24 14:53:03 +03:00
parent 8899990c09
commit 288ff73fd4
6 changed files with 35 additions and 2 deletions
--- a/source/_assets/base_style.scss
+++ b/source/_assets/base_style.scss
@@ -4,6 +4,7 @@ html,
 body {
    font-size: $base-font-size;
    font-family: $base-font-family;
+    color: $base-font-color;
    padding: 0;
    margin: 0;

@@ -20,3 +21,26 @@ h5,
 h6 {
    font-weight: normal;
 }
+
+%external-link-icon {
+    display: inline-block;
+    margin-left: 0.6em;
+    color: $base-font-color;
+    font-size: $base-font-size - 4px;
+
+    @media (max-width: $first-media-step) {
+        font-size: $base-font-size - 2px;
+    }
+}
+
+a[href*="//github.com"]:after {
+    @extend %external-link-icon;
+    font-family: 'Font Awesome 5 Brands', serif;
+    content: '\f09b';
+}
+
+a[target="_blank"]:not([href*="//github.com"]):after {
+    @extend %external-link-icon;
+    font-family: 'Font Awesome 5 Free', serif;
+    content: '\f35d';
+}
--- a/source/_assets/vars.scss
+++ b/source/_assets/vars.scss
@@ -2,6 +2,7 @@ $base-font-family: 'PT Serif', serif;

 // Базовый размер шрифта
 $base-font-size: 20px;
+$base-font-color: #333;

 // Ширина страницы
 $preferred-width: 700px;
--- a/source/_includes/font-awesome.twig
+++ b/source/_includes/font-awesome.twig
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/brands.css" integrity="sha384-7xAnn7Zm3QC1jFjVc1A6v/toepoG3JXboQYzbM0jrPzou9OFXm/fY6Z/XiIebl/k" crossorigin="anonymous">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -2,8 +2,9 @@
 <html>
 <head>
  {% include 'head.twig' %}
-  <link rel="stylesheet" href="/static/layout_default.css?v={{ date().timestamp }}"></head>
+  <link rel="stylesheet" href="/static/layout_default.css?v={{ date().timestamp }}">
  {% block css %}{% endblock %}
+</head>
 <body>

  <main class="content">
@@ -14,5 +15,7 @@

  <script async src="/static/layout_default.js?v={{ date().timestamp }}"></script>
  {% block js %}{% endblock %}
+
+  {% include 'font-awesome.twig' %}
 </body>
 </html>
--- a/source/_layouts/internal.html.twig
+++ b/source/_layouts/internal.html.twig
@@ -21,5 +21,7 @@

  <script async src="/static/layout_internal.js?v={{ date().timestamp }}"></script>
  {% block js %}{% endblock %}
+
+  {% include 'font-awesome.twig' %}
 </body>
 </html>
--- a/source/projects/predictor/index.html.twig
+++ b/source/projects/predictor/index.html.twig
@@ -31,7 +31,7 @@ description: Демо-версия электронной гадалки Шен

  <ul>
    <li>
-      <a href="https://github.com/anwinged/predictor" target="_blank">Код гадалки на Github</a>
+      <a href="https://github.com/anwinged/predictor" target="_blank">Код гадалки</a>
    </li>
    <li>
      <a href="https://github.com/anwinged/homepage/blob/master/source/_assets/predictor/demo.vue" target="_blank">Код этого примера</a>