Add icons for external links

This commit is contained in:
Anton Vakhrushev 2018-06-24 14:53:03 +03:00
parent 8899990c09
commit 288ff73fd4
6 changed files with 35 additions and 2 deletions

View File

@ -4,6 +4,7 @@ html,
body { body {
font-size: $base-font-size; font-size: $base-font-size;
font-family: $base-font-family; font-family: $base-font-family;
color: $base-font-color;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -20,3 +21,26 @@ h5,
h6 { h6 {
font-weight: normal; 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';
}

View File

@ -2,6 +2,7 @@ $base-font-family: 'PT Serif', serif;
// Базовый размер шрифта // Базовый размер шрифта
$base-font-size: 20px; $base-font-size: 20px;
$base-font-color: #333;
// Ширина страницы // Ширина страницы
$preferred-width: 700px; $preferred-width: 700px;

View File

@ -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">

View File

@ -2,8 +2,9 @@
<html> <html>
<head> <head>
{% include 'head.twig' %} {% 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 %} {% block css %}{% endblock %}
</head>
<body> <body>
<main class="content"> <main class="content">
@ -14,5 +15,7 @@
<script async src="/static/layout_default.js?v={{ date().timestamp }}"></script> <script async src="/static/layout_default.js?v={{ date().timestamp }}"></script>
{% block js %}{% endblock %} {% block js %}{% endblock %}
{% include 'font-awesome.twig' %}
</body> </body>
</html> </html>

View File

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

View File

@ -31,7 +31,7 @@ description: Демо-версия электронной гадалки Шен
<ul> <ul>
<li> <li>
<a href="https://github.com/anwinged/predictor" target="_blank">Код гадалки на Github</a> <a href="https://github.com/anwinged/predictor" target="_blank">Код гадалки</a>
</li> </li>
<li> <li>
<a href="https://github.com/anwinged/homepage/blob/master/source/_assets/predictor/demo.vue" target="_blank">Код этого примера</a> <a href="https://github.com/anwinged/homepage/blob/master/source/_assets/predictor/demo.vue" target="_blank">Код этого примера</a>