Articles reactions #539

sirpravdi · 2019-03-24T17:30:34Z

No description provided.

PolinaShneider · 2019-03-28T13:53:51Z

www/package.json

@@ -59,5 +59,8 @@
    "stylelint-webpack-plugin": "^0.10.5",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
+  },
+  "dependencies": {
+    "@codexteam/reactions": "^1.0.2"


Почему dependencies, a не devDependencies?

Потому что этот модуль нужен не во время разработки, а во время продакшена

PolinaShneider · 2019-03-28T13:54:07Z

www/public/app/js/main.js

@@ -128,6 +128,7 @@ codex.vkWidget = require('./modules/vkWidget');
 codex.codeStyling = require('./modules/codeStyling');
 codex.deeplinker = require('@codexteam/deeplinker');
 codex.pluginsFilter = require('./modules/pluginsFilter');
+codex.reaction = require('@codexteam/reactions');


Может, лучше codex.reactions?

PolinaShneider · 2019-03-28T13:55:37Z

www/application/views/templates/articles/article.php

+
+<script type="text/javascript" src="/public/build/codex.bundle.js"></script>
+<script>


Мы решили отказаться от использования инлайновых скриптов. Создай модуль с методом init и вызови его через ModuleDispatcher

PolinaShneider · 2019-03-28T13:56:25Z

www/application/views/templates/articles/article.php

@@ -178,6 +178,9 @@
        <?= View::factory('templates/quizzes/quiz', array('quizData' => $quiz->quiz_data)); ?>
    <? endif ?>

+    <div class='reactions-page_voting'></div>


Используй класс с префиксом js_

PolinaShneider

Всякие мелочи остались

PolinaShneider · 2019-04-08T18:51:58Z

www/application/views/templates/articles/article.php

@@ -178,6 +178,14 @@
        <?= View::factory('templates/quizzes/quiz', array('quizData' => $quiz->quiz_data)); ?>
    <? endif ?>

+    <div class='js_reactions-page_voting' data-module="reactionsCreate">


Придерусь к неодинаковым (одинарным|двойным) кавычкам

PolinaShneider · 2019-04-08T18:54:50Z

www/application/views/templates/articles/article.php

+    <div class='js_reactions-page_voting' data-module="reactionsCreate">
+        <textarea name="module-settings" hidden>
+            {
+                "parent" : ".js_reactions-page_voting"


Давай в настройки передавать просто класс, без точки. Точку для querySelector можно дописать прямо в js-модуле

PolinaShneider · 2019-04-08T18:55:25Z

www/public/app/js/modules/reactions.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**


Звездочки не выровнены. Поправь, плиз

PolinaShneider · 2019-04-08T18:56:00Z

www/public/app/js/modules/reactions.js

+'use strict';
+
+/**
+* Module for reactions init


Не очень понятный коммент. Можешь емко описать, что эта за класс и где он используется?

PolinaShneider · 2019-04-18T11:11:19Z

www/public/app/js/main.js

@@ -128,12 +128,16 @@ codex.vkWidget = require('./modules/vkWidget');
 codex.codeStyling = require('./modules/codeStyling');
 codex.deeplinker = require('@codexteam/deeplinker');
 codex.pluginsFilter = require('./modules/pluginsFilter');
+codex.reactions = require('@codexteam/reactions');


Не нужно реквайрить пакет в общую сборку. Лучше сделай это в модуле

PolinaShneider · 2019-04-18T11:11:37Z

www/public/app/js/main.js


 import EditorLanding from './modules/editorLanding';
 codex.editorLanding = new EditorLanding();

 import ArticleCreate from './modules/articleCreate';
 codex.articleCreate = new ArticleCreate();

+import Reactions from './modules/reactionsArticles';
+codex.reactionsCreate = new Reactions();


А этот модуль назови codex.reactions

PolinaShneider

👍🏼

neSpecc

Почему столько много кода добавлено в сборки, хотя в package.json ни одного нового пакета?

talyguryn · 2019-04-18T20:28:46Z

www/application/views/templates/articles/article.php

+
+
+<script type="text/javascript" src="/public/build/codex.bundle.js"></script>


зачем? этот бандл и так подключается в главном шаблоне всех страниц

talyguryn · 2019-04-18T20:29:44Z

www/public/app/js/modules/reactionsArticles.js

+     * @param {Object} settings - reactions parameters
+     * @param {String} settings.parent - container's class name for reactions module
+     * @param {String} settings.title - title for reactions module
+     *


Suggested change

*

talyguryn · 2019-04-18T20:29:50Z

www/public/app/js/modules/reactionsArticles.js

+ */
+
+export default class Reactions {
+


Suggested change

talyguryn · 2019-04-18T20:30:28Z

www/public/app/js/modules/reactionsArticles.js

+     * @param {Object} settings - reactions parameters
+     * @param {String} settings.parent - container's class name for reactions module
+     * @param {String} settings.title - title for reactions module
+     *


тогда уж и массив с эмоциями можно тоже передавать через настройки

talyguryn · 2019-04-18T20:30:43Z

www/application/views/templates/articles/article.php

+            {
+                "parent" : "js_reactions-voting",
+                "title" : "How do you like this article?"
+            }


эмоции можно тоже тут задавать, а не в модуле

talyguryn · 2019-04-18T20:31:46Z

www/public/app/js/modules/reactionsArticles.js

+     */
+    init(settings) {
+
+        let parentElement = document.querySelector('.' + settings.parent),


после поиска parentElement нужно проверять, нашелся ли такой. а вдруг нет?

talyguryn · 2019-04-18T20:33:17Z

www/public/app/js/modules/reactionsArticles.js

+     */
+    init(settings) {
+
+        let parentElement = document.querySelector('.' + settings.parent),


'.' + settings.parent — то есть строго ограничиваем задание патента через класс? а через # и id не будем давать возможность?

Я изначально сделала так, что можно любой передевать селектор, но меня попросили переделать только на класс. Тоже считаю, что правильнее дать возможность передавать какой-то еще селектор

talyguryn · 2019-04-18T20:33:27Z

www/public/app/js/modules/reactionsArticles.js

+     */
+    init(settings) {
+
+        let parentElement = document.querySelector('.' + settings.parent),


Suggested change

let parentElement = document.querySelector('.' + settings.parent),

let parentElement = document.querySelector(settings.parent),

talyguryn · 2019-04-18T20:33:46Z

www/public/app/js/modules/reactionsArticles.js

+    /**
+     * Initialize reactions on pages
+     * @param {Object} settings - reactions parameters
+     * @param {String} settings.parent - container's class name for reactions module


Suggested change

* @param {String} settings.parent - container's class name for reactions module

* @param {String} settings.parent - container's selector for reactions module

talyguryn · 2019-04-18T20:35:55Z

www/public/build/codex.css

@@ -0,0 +1,3 @@
+:root{--text-gray:#6c7580;--text-green:#00b693;--text-pink:#bc1453;--color-link:#2969b9;--color-hover:#2c7fe5;--bg-button:#c5dff5;--bg-button-submut:#4592da;--bg-light:#f4f5f9;--line-light:#e7e9f5;--timing-bounce:cubic-bezier(0.6,-0.28,0.735,0.045);--layout-header-height:50px;--article-max-width:650px;--serif-font:"Lucida Grande","Lucida Sans Unicode","Lucida Sans"}


этот файл больше не используется. его нужно удалить

talyguryn · 2019-04-18T20:39:47Z

www/public/build/codex.bundle.css

@@ -1 +1 @@
-/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:codex_ic;src:url(/public/app/fonts/codex_icons/codex_ic.eot?2);src:url(/public/app/fonts/codex_icons/codex_ic.eot?2#iefix) format("embedded-opentype"),url(/public/app/fonts/codex_icons/codex_ic.woff?2) format("woff"),url(/public/app/fonts/codex_icons/codex_ic.ttf?2) format("truetype"),url(/public/app/fonts/codex_icons/codex_ic.svg?2#codex_ic) format("svg");font-weight:400;font-style:normal}[class*=" icon-"]:before,[class^=icon-]:before{font-family:codex_ic;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-vkontakte:before{content:"\E800"}.icon-twitter:before{content:"\E801"}.icon-facebook-squared:before{content:"\E802"}.icon-github-circled:before{content:"\E803"}.icon-heart:before{content:"\E804"}.icon-star:before{content:"\E805"}.icon-star-empty:before{content:"\E806"}.icon-search:before{content:"\E807"}.icon-rss:before{content:"\E808"}.icon-link:before{content:"\E809"}.icon-chat:before{content:"\E80A"}.icon-pencil:before{content:"\E80B"}.icon-pin:before{content:"\E80C"}.icon-attach:before{content:"\E80D"}.icon-tags:before{content:"\E80E"}.icon-up-big:before{content:"\E80F"}.icon-down-big:before{content:"\E810"}.icon-eye:before{content:"\E811"}.icon-instagram:before{content:"\E812"}.icon-briefcase:before{content:"\E813"}.icon-users:before{content:"\E814"}.icon-user:before{content:"\E815"}.icon-user-add:before{content:"\E816"}.icon-forward:before{content:"\E817"}.icon-cog-1:before{content:"\E818"}.icon-ok:before{content:"\E819"}.icon-cancel:before{content:"\E81A"}.icon-spin4:before{content:"\E81B"}.icon-picture:before{content:"\E81C"}.icon-cog:before{content:"\E81D"}.icon-paper-plane:before{content:"\E81E"}.icon-facebook:before{content:"\E81F"}::selection{background:#b3d4fc}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5em;letter-spacing:.1px}.center_side{max-width:1100px;margin:0 auto}@media (max-width:1140px){.center_side{padding:0 20px}}.hide{display:none!important}.block{display:block}.p_rel{position:relative}.pointer{cursor:pointer}a{color:#2969b9;text-decoration:none}a:hover{color:#2c7fe5}.align_c{text-align:center}textarea{resize:vertical}.clearfix:after{content:" ";display:table;clear:both}.fl_l{float:left}.fl_r{float:right}.constrain{overflow:hidden}.no-selection{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;border-radius:2px;border:0;font-size:15px;font-family:inherit;outline:none;background:#f4f5f8}.input:focus{background:#eef5fd}.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:30px;border:0;display:inline-block;padding:12px 24px;color:#3f4b63;vertical-align:top;cursor:pointer;text-decoration:none;font-family:inherit;background:#ecf3f9;line-height:1em}.button:hover{background:#4592da;color:#fff;text-decoration:none}.button--master{background:#5c95cf;color:#fff}.button--master:hover{background:#3c7ab9;color:#fff}.button--green{background:#00ad7c;color:#fff}.button--green:hover{background:#0d936d;color:#fff}.button i{margin:0 .74em 0 -.3em}.button.loading{position:relative;overflow:hidden;background:#f5f5f5;color:#434c61}.button.loading:before{position:absolute;left:0;top:0;content:"";width:100%;height:100%;display:block;background:url(/public/app/img/load_pattern.gif);opacity:.1}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0);transform:translateX(0)}15%{-webkit-transform:translateX(-1%) rotate(-5deg);transform:translateX(-1%) rotate(-5deg)}30%{-webkit-transform:translateX(3%) rotate(3deg);transform:translateX(3%) rotate(3deg)}45%{-webkit-transform:translateX(-1%) rotate(-3deg);transform:translateX(-1%) rotate(-3deg)}60%{-webkit-transform:translateX(3%) rotate(2deg);transform:translateX(3%) rotate(2deg)}75%{-webkit-transform:translateX(-1%) rotate(-1deg);transform:translateX(-1%) rotate(-1deg)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble{0%{-webkit-transform:translateX(0);transform:translateX(0)}15%{-webkit-transform:translateX(-1%) rotate(-5deg);transform:translateX(-1%) rotate(-5deg)}30%{-webkit-transform:translateX(3%) rotate(3deg);transform:translateX(3%) rotate(3deg)}45%{-webkit-transform:translateX(-1%) rotate(-3deg);transform:translateX(-1%) rotate(-3deg)}60%{-webkit-transform:translateX(3%) rotate(2deg);transform:translateX(3%) rotate(2deg)}75%{-webkit-transform:translateX(-1%) rotate(-1deg);transform:translateX(-1%) rotate(-1deg)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-iteration-count:1;animation-iteration-count:1}.show-in-mobile{display:none!important}@media (max-width:980px){.mobile-hide{display:none!important}.show-in-mobile{display:block!important}}.codex-logo{display:inline-block;background:url(/public/app/img/codex-logo.svg) no-repeat;width:224px;height:224px}.technic{display:inline-block;background:color(#bc1453 alpha(7%));padding:0 7px;margin-right:.2em;border-radius:2px;color:#bc1453;text-decoration:none;font-size:.9em}.site-header{position:relative;height:50px;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #e7e9f5;z-index:2}.site-header__content{display:-webkit-box;display:-ms-flexbox;display:flex}.site-header a{display:inline-block;text-decoration:none;letter-spacing:.2px;line-height:50px}.site-header__menu-item:not(:first-of-type){margin-left:30px}@media (max-width:980px){.site-header__menu-item:not(:first-of-type){margin-left:10px}}.site-header__right{margin-left:auto}.site-header__social{position:absolute;left:50%;-webkit-transform:translate(-50%,-2px);transform:translate(-50%,-2px);font-size:1.4em}.site-header__github-icon{vertical-align:text-bottom;line-height:.7em;font-size:1.66em}.site-header__photo{display:inline-block;border-radius:50%;width:22px;height:22px;vertical-align:middle;margin-right:5px;background-color:#f4f5f9;overflow:hidden;font-size:3em;line-height:1em;letter-spacing:1.9em;font-size:1.5em;font-weight:700}.site-header__action{margin-right:30px}.site-header__action--write{color:#00b693}.site-header__action--edit{color:#bc1453}.site-footer{border-top:1px solid #e7e9f5;padding:30px 0;margin-top:30px;font-size:13px}@media (max-width:980px){.site-footer{padding:25px 0}}.site-footer .center_side{display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width:980px){.site-footer .center_side{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.site-footer__section{max-width:420px}@media (max-width:980px){.site-footer__section{max-width:none}.site-footer__section:not(:last-of-type){margin-bottom:25px}}.site-footer__section--contacts{margin-left:auto;margin-right:45px}@media (max-width:980px){.site-footer__section--contacts{margin-left:0;margin-right:0}}.site-footer ul{list-style:none;padding-left:0;line-height:1.8em}.site-footer a{text-decoration:none}.site-footer h5{margin:0 0 10px;font-size:1.02em}.site-footer h5 a{color:inherit;text-decoration:none}.site-footer p{margin:0}.site-footer .desclimer{opacity:.5}.random_articles{padding:35px 0;margin:0 auto;max-width:650px;font-size:15px;line-height:1.6em}.random_articles h3{margin-bottom:8px;font-size:1.4em;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans}.random_articles p{margin:10px 0 30px}.random_articles .article-card:not(:last-of-type){margin-bottom:20px}@media (max-width:980px) and (max-width:690px){.random_articles{margin:0 20px;padding-bottom:0;font-size:14px}}.event_alert{padding:80px 0;max-width:700px;margin:0 auto;border-bottom:1px solid #ebe8e8;text-align:center;font-size:1.8em}@media (max-width:980px){.event_alert{font-size:1.5em}}.event_alert__day{min-width:70px;line-height:1.3em;letter-spacing:1.2px;font-size:2.3em}.event_alert__month{letter-spacing:2px}.event_alert__title{margin-top:1.4em;font-size:.62em;color:#ea6e6e}.event_alert__description{margin-top:1em;font-size:.64em}@media (max-width:980px){.event_alert__description{font-size:1.5em}.event_alert__description:after,.event_alert__description:before{display:none}}.event_alert__link{display:inline-block;color:inherit}.event_alert__link,.event_alert__link:hover{text-decoration:none}.event_alert__icon_delimiter{font-size:.7em}.contest_alert a{display:block;margin:-20px 40px 40px;text-align:center;text-decoration:none;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant:small-caps;letter-spacing:1.4px;color:#988e8e}.contest_alert .line{position:relative;margin:0 70px 70px;height:1px;background:#ebe8e8}.contest_alert .line:before{content:"";position:absolute;left:50%;top:-19px;width:40px;height:40px;margin-left:-20px;background:#fff url(../78fe36d5335d9f6c65fdf26754d2c5f0.png) no-repeat 50% 50%}.page_menu{margin:30px;padding:0;list-style:none;text-align:center;font-size:0;letter-spacing:0}.page_menu li{position:relative;display:inline-block;font-size:15px}.page_menu li:after{content:"\30FB";display:inline-block;padding:0 2px;vertical-align:middle;color:#c1c8da;font-size:18px}.page_menu li:last-child:after{display:none}.dnd-default-avatar{position:absolute;pointer-events:none;z-index:100}.dnd-default-target-highlight{border:1px solid #eee}.dnd-avatar,.dnd-avatar td{background:#fafafd!important}.draggable{cursor:move}.feed{background:#fff}.feed--gray{background:#e8ecf2}.feed-item--dnd{background:#fff;border:1px solid #e8ecf2}.no-display{display:none}.page-header{padding:60px 0}.page-header__title{font-size:1.68em;line-height:1.2em;letter-spacing:.2px}.page-header__description{max-width:500px}.icon_telegram{display:inline-block;width:28px;height:28px;background:url(/public/app/img/icon_telegram.png) no-repeat}@media (-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx),(min-resolution:120dpi),print{.icon_telegram{background:url(/public/app/img/icon_telegram@2x.png) no-repeat;background-size:28px 28px}}.best-developers{position:absolute;right:30px;top:90px;width:150px;text-align:left;font-size:13px}.best-developers__heading{max-width:120px;border-bottom:1px solid #e8e6e3;padding-bottom:.5em;font-weight:400;line-height:1.2em;font-size:1em;color:#ac7c0d}.best-developers__item{position:relative;display:block;padding-left:50px;margin-bottom:10px;color:inherit;text-decoration:none;cursor:pointer;line-height:1.4em}.best-developers__photo{position:absolute;left:0;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:18px}@media (max-width:980px){.best-developers{position:static;width:auto;max-width:300px;margin:50px auto 0;text-align:center}.best-developers__heading{max-width:none}.best-developers__item{line-height:1.8em;padding-left:0}.best-developers__photo{position:static;vertical-align:text-bottom;width:24px;height:24px}}.breadcrumb{margin-bottom:50px;padding-left:20px;border-left:3px solid #d6d6d6;color:#a2a2a2}.breadcrumb h1{display:inline-block;margin:0 5px;font-size:inherit;font-weight:400}.breadcrumb a{display:inline-block;margin-right:5px;color:inherit}.news{display:block;max-width:500px;border-top:1px solid #e7e9f5;border-bottom:1px solid #e7e9f5;padding:40px 0;margin:40px auto 0;font-size:14px}.news__list_item{position:relative;padding:5px 0;list-style:none;line-height:1.6em}.news__list_item--hidden{display:none!important}.news__list_item:before{content:attr(data-time);position:absolute;left:-70px;width:50px;text-align:right;color:#6c7580;white-space:nowrap}.news__bage{display:inline-block;margin-right:.5em;color:#f85879;letter-spacing:2px;font-size:1.1em;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant:small-caps}.news__showmore{display:inline-block;margin-top:.5em;cursor:pointer;color:#6c7580}@media (max-width:980px) and (max-width:690px){.news{padding:20px 0;margin:30px 0;max-width:none}.news__list_item:not(:last-of-type){margin-bottom:5px}.news__list_item:before{position:static;display:block;text-align:left;margin:0 0 1px;font-size:.89em}.news__showmore{margin-top:0}}.scroll-up{position:fixed;bottom:30px;left:30px;padding:32px 27px;border-radius:2px;background:rgba(93,104,156,.08);font-size:18px;text-align:center;cursor:pointer;color:rgba(85,97,125,.6);opacity:0;-webkit-transition:opacity .15s ease-in;transition:opacity .15s ease-in}.scroll-up:hover{background:rgba(93,104,156,.15)}.scroll-up:before{font-family:codex_ic;content:"\E80F"}.scroll-up.show{opacity:1}@media (max-width:980px){.scroll-up{left:auto;bottom:0;right:0;padding:12px 14px;font-size:12px}}.sharing{display:-webkit-box;display:-ms-flexbox;display:flex;padding:30px;border-radius:3px;background:#f1f5f8;color:#616c98}@media (max-width:980px){.sharing{text-align:center;display:block}}.sharing__offer{max-width:250px}@media (max-width:980px){.sharing__offer{max-width:none}}.sharing__button{margin:auto 0 auto 13px;cursor:pointer;color:#a1acc1;font-size:20px}.sharing__button:hover{color:#5d75bd}.sharing__button.tw:hover{color:#6e98fd}.sharing__button.tg{font-size:17px}.sharing__button.tg:hover{color:#41adff}@media (max-width:980px){.sharing__button{margin:0 8px}}.sharing__main-button{margin:auto 15px auto auto;padding:10px 24px;border-radius:25px;background:#507299;color:#fff;cursor:pointer}@media (max-width:980px){.sharing__main-button{display:block;max-width:120px;margin:20px auto}}.sharing__main-button:hover{background:color(#507299 blackness(5%))}.sharing__main-button i{margin:0 4px 0 -5px}@media (max-width:980px){.sharing{text-align:center}.sharing .main_but{float:none;display:block;margin:0 0 15px}.sharing .but{display:inline-block;float:none;margin:0 7px 18px}}.vk_groups{max-width:650px;margin:50px auto 0}@media (max-width:980px) and (max-width:690px){.vk_groups{max-width:none;width:calc(100% - 40px);margin-left:20px;margin-right:20px}}.quiz{position:relative;margin:auto;max-width:700px;background:#fff;padding:30px 50px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #eceff6;border-radius:3px;font-size:15px}.quiz__question-title{font-size:1.15em;font-weight:600;margin-bottom:1em}.quiz__question-counter{float:right;color:#828282;letter-spacing:3px}.quiz__question-button{padding:10px 28px;margin-top:22px;border:0;border-radius:30px;outline:none;font:inherit;background:#5c95cf;color:#fff}.quiz__question-button:focus,.quiz__question-button:hover{background:#3c7ab9;color:#fff}.quiz__question-button:disabled,.quiz__question-button:disabled:focus,.quiz__question-button:disabled:hover{cursor:default}.quiz__question-button_next{cursor:pointer}.quiz__question-answer{position:relative;padding:.5em 0 .5em 36px;cursor:pointer;line-height:1.4em}.quiz__question-answer:not(:last-of-type){margin-bottom:.4em}.quiz__question-answer:before{position:absolute;left:0;top:.46em;display:inline-block;content:"";width:16px;height:16px;border-radius:50%;border:4px solid #404040;-webkit-box-shadow:inset 0 0 0 4px #fff;box-shadow:inset 0 0 0 4px #fff}.quiz__question-answer:hover:before{background:#404040}.quiz__question-answer_selected.quiz__question-answer_right:before{border-color:#34b98e;-webkit-box-shadow:none;box-shadow:none;background:#34b98e url(/public/app/img/quizzes/checked.svg)!important;background-size:cover!important}.quiz__question-answer_selected.quiz__question-answer_wrong:before{border-color:#ec6d6d;background:#ec6d6d!important}.quiz__question-answer_right:before{border-color:#34b98e;background:#34b98e!important}.quiz__answer-message{margin:-.5em 0 .5em 36px;color:#717888}.quiz__result-score{margin:.7em 0 1em;font-size:2.7em;font-weight:700;text-align:center;letter-spacing:.2em;color:#0081d2}.quiz__result-message{text-align:center;font-size:2em;line-height:1.25em;letter-spacing:.02em;font-weight:700}.quiz__retry-button{position:relative;left:40%;display:inline-block;margin-top:.5em;cursor:pointer;color:#186ebd}.quiz__retry-button:before{content:"";display:inline-block;margin-bottom:-.3em;margin-right:.4em;background-image:url(/public/app/img/quizzes/retry.svg);background-size:cover;height:20px;width:20px}.quiz__sharing{text-align:center;padding:40px 0 30px;border-radius:3px;color:#616c98}.quiz__sharing .but{margin:0 10px;padding:6px 20px;border-radius:20px;cursor:pointer;color:#fff;background:#3c7dce;font-size:1.2em!important;-webkit-box-sizing:border-box;box-sizing:border-box}.quiz__sharing .but:hover{background:transparent;-webkit-box-shadow:inset 0 0 0 2px #5d75bd;box-shadow:inset 0 0 0 2px #5d75bd;color:#5d75bd}.quiz__sharing .tw:hover{-webkit-box-shadow:inset 0 0 0 2px #6e98fd;box-shadow:inset 0 0 0 2px #6e98fd;color:#6e98fd}.quiz__sharing .tg:hover{-webkit-box-shadow:inset 0 0 0 2px #41adff;box-shadow:inset 0 0 0 2px #41adff;color:#41adff}@media (max-width:980px){.quiz{padding:20px}.quiz__sharing .but{display:inline-block;padding:0;font-size:1em;width:40px;height:40px}.quiz__sharing .but i{line-height:40px}.quiz__retry-button{left:26%}}.quiz-form{margin-top:50px}.quiz-form__page-title{font-size:30px;line-height:45px}.quiz-form__label{padding:0;font-size:16px;font-weight:400;text-align:left}.quiz-form__quiz-description,.quiz-form__quiz-title{margin:5px 0 20px}.quiz-form__question-holder{margin:20px 0;padding:25px;border:1px solid #e5e7e8;border-radius:3px}.quiz-form__question-number{font-size:20px;font-weight:700}.quiz-form__question-destroy-button{float:right}.quiz-form__question-title-label{display:block;margin-top:20px}.quiz-form__question-title{margin:5px 0 20px}.quiz-form__messages-holder,.quiz-form__question-answers-holder{border-collapse:collapse}.quiz-form__messages-head,.quiz-form__question-answers-head{border-bottom:5px solid transparent}.quiz-form__question-answer-message-column,.quiz-form__question-answer-text-column,.quiz-form__question-answers-label,.quiz-form__question-messages-label{width:44%}.quiz-form__message-message-column,.quiz-form__question-answer-text-column{padding-left:0}.quiz-form__message-destroy-button,.quiz-form__message-score,.quiz-form__question-answer-destroy-button,.quiz-form__question-answer-score{height:37px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;outline:none;border:none;border-radius:2px}.quiz-form__message-score,.quiz-form__question-answer-score{width:100%;background:#f4f5f8}.quiz-form__message-score:focus,.quiz-form__question-answer-score:focus{background:#eef5fd}.quiz-form__question-answer-destroy-button-column{width:34px;padding-right:0}.quiz-form__message-destroy-button,.quiz-form__question-answer-destroy-button,.quiz-form__question-destroy-button{cursor:pointer;opacity:.3}.quiz-form__message-destroy-button:hover,.quiz-form__question-answer-destroy-button:hover,.quiz-form__question-destroy-button:hover{opacity:1}.quiz-form__add-message-button-column,.quiz-form__question-add-answer-button-column{padding:10px 0}.quiz-form__add-message-button,.quiz-form__add-question-button,.quiz-form__question-add-answer-button{padding:12px 0;line-height:16px;cursor:pointer;color:#454c5d;background:none}.quiz-form__add-message-button:hover,.quiz-form__question-add-answer-button:hover{color:#1a2235}.quiz-form__button-plus{margin-right:9px;vertical-align:text-bottom}.quiz-form__button-cross{vertical-align:middle}.quiz-form__messages{width:100%;margin-top:20px;table-layout:fixed}.quiz-form__message-message-label{width:38%}.quiz-form__message-score-label{width:12%}.quiz-form__share-message-label{width:50%}.quiz-form__messages-holder-column{padding:0}.quiz-form__messages-holder-column,.quiz-form__share-message-column{width:50%;vertical-align:top}.quiz-form__message-message-column{width:76.4%}.quiz-form__message-destroy-button-column{width:34px}.quiz-form__quiz-buttons-holder{margin-top:20px}.site-section{margin:60px 0 90px;font-size:15.9px;line-height:1.6em}.site-section__title{font-size:1.315em;margin-bottom:.5em;font-weight:400;text-align:center;letter-spacing:.026em}.site-section__desc{max-width:400px;margin:0 auto 40px;text-align:center}.site-section__go-more-link{margin:30px auto 0;display:block;max-width:200px;text-align:center;text-decoration:none}.site-section--articles-list{margin:60px 0 40px}.site-section--articles-list .site-section__desc{margin-top:13px}@media (max-width:980px){.site-section--articles-list{margin:0 0 60px}}.article-card{position:relative;padding:20px 20px 75px;border:1px solid #e7e9f5;border-radius:3px;font-size:12.4px}.article-card a{text-decoration:none;color:inherit}.article-card__footer{position:absolute;bottom:20px;left:20px;right:20px;height:34px;line-height:1.54em;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.article-card__cover{display:block;background-color:#f4f5f9;height:100px;margin:-21px -21px 20px;border-radius:3px 3px 0 0;background-position:0 30%;background-size:cover}.article-card__title{margin-bottom:15px;font-size:17.9px;font-weight:700;line-height:1.2em;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans}@media (max-width:980px){.article-card__title{font-size:15.9px;letter-spacing:-.013em}}.article-card__photo{float:left;margin-right:10px}.article-card__photo--with-coauthor{margin-right:0;border-left:0}.article-card__photo--coauthor{margin-left:-25px;margin-right:0}.article-card__photo img{display:block;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background-color:#f4f5f9;overflow:hidden;font-size:3em;line-height:1em;letter-spacing:1.9em}.article-card__user-name:not(:last-of-type):after{content:","}.article-card__read-time{color:#6c7580;line-height:1.1em}@media (min-width:1050px){.articles-grid__item .article-card{width:100%}}.product-card{border-radius:5px;padding:30px;margin-bottom:30px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e7e9f5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}@media (min-width:1050px){.product-card{min-height:415px;padding:60px;margin-bottom:60px}}@supports (display:grid){.product-card{display:grid;grid-template-columns:auto 360px;grid-template-rows:60px auto 100px;grid-template-areas:"title-area right-area" "content-area right-area" "footer-area right-area"}@media (max-width:980px){.product-card{grid-template-columns:auto;grid-template-rows:auto auto auto auto;grid-template-areas:"title-area" "content-area" "right-area" "footer-area"}}}.product-card__title{display:block;margin-bottom:20.3px;font-size:43px;letter-spacing:-.36px;font-weight:700;line-height:1em;color:inherit}.product-card__title:hover{color:inherit}@media (max-width:980px){.product-card__title{font-size:32px}}.product-card__caption{max-width:450px;margin-bottom:30px;font-size:20px;color:#626262;line-height:1.5em}.product-card__screen{display:block;width:360px;-webkit-box-shadow:0 22px 31px 0 rgba(0,0,0,.63);box-shadow:0 22px 31px 0 rgba(0,0,0,.63);border-radius:5px}@media (max-width:980px){.product-card__screen{max-width:100%;height:auto}}.product-card__repo{display:inline-block;margin-top:30px;color:#626262}.product-card__button{display:inline-block;padding:12px 26px 12px 18px;margin-top:30px;background:#fff;border:1px solid #e7e9f5;-webkit-box-shadow:0 2px 3px 0 rgba(38,45,67,.02);box-shadow:0 2px 3px 0 rgba(38,45,67,.02);border-radius:3px;color:inherit;color:#000;font-size:18px;letter-spacing:-.3px;text-decoration:none}.product-card__button:not(:last-of-type){margin-right:20px}.product-card__button svg{display:inline-block;width:26px;height:26px;vertical-align:middle;margin-right:.5em;margin-top:-.3em}.product-card__button:hover{background-color:#fdfdfd;color:#000;color:initial;text-decoration:none}@media (max-width:980px){.product-card__button{padding:6px 15px 6px 13px;margin:20px 20px 0 0;font-size:14px}.product-card__button svg{width:20px;height:20px}}.product-card__right-heading{margin:0 0 20px;font-size:22px;font-weight:400}.product-card__application{display:inline-block;margin-bottom:15px;width:40px;height:40px}.product-card__application svg{width:40px;height:40px}.product-card__application:not(:last-of-type){margin-right:10px}.product-card__right-link{margin-top:7px;display:inline-block;color:#8c8888;line-height:1.5em}.product-card__actions{margin-top:40px}.product-card__loved-by{margin-top:45px}.product-card__loved-by-title{font-size:18px;font-weight:400;margin-bottom:10px}.product-card__loved-by-item{display:inline-block;vertical-align:top;padding:10px 25px 10px 0;height:27px}.product-card__loved-by-item:not(:last-of-type){border-right:1px solid #e7e9f5}.product-card__loved-by-item:not(:first-of-type){padding-left:23px}@media (max-width:980px){.product-card__loved-by-item{padding:5px 10px 5px 0}.product-card__loved-by-item:not(:first-of-type){padding-left:10px}}.product-card__download{position:relative;display:inline-block;min-width:150px;padding:10px 20px;margin:0 20px 20px 0;border:1px solid #e0e1e6;border-radius:3px;font-size:13.1px;line-height:1.5em;color:#25262e;overflow:hidden}.product-card__download[href="#"]{color:#9699a8}.product-card__download[href="#"]:after{content:"Soon";background:#ff1769;border-radius:3px;padding:3px 6px;line-height:1em;color:#fff;font-weight:500;position:absolute;right:5px;top:5px;letter-spacing:-.5px}.product-card__download[href="#"] svg{opacity:.5}.product-card__download[href="#"]:hover{color:#9699a8!important}.product-card__download:hover{color:#25262e}.product-card__download b{display:block;font-size:16px;font-weight:500}.product-card__download svg{float:left;margin-top:5px;margin-right:15px}.product-card__download--win svg{margin-top:7px}.product-card__download--linux svg{margin-top:8px}.product-card__download--appstore{background-color:#0c0c0c;border:0;color:#fff}.product-card__download--appstore svg{fill:#fff!important}.product-card__download--appstore:hover{color:#fff}.product-card__watch-button{display:inline-block;background:#000;padding:11px 25px;border-radius:30px;color:#fff;white-space:nowrap;font-size:18px;cursor:pointer;font-weight:400}.product-card__watch-button:before{display:inline-block;content:"";width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff;margin-right:8px;margin-left:5px;vertical-align:text-bottom}.product-card__advantages{margin:30px 0 0;padding:0;list-style:none;line-height:1.8em}.product-card__disclaimer{margin-top:20px;font-size:15px;line-height:1.53em}.product-card__video{max-width:100%;margin-left:-55px}@media (max-width:980px){.product-card__video{margin-left:0}}.product-card__right-caption{margin-top:10px}.product-card__right-caption a{color:#6c7580}.product-card__right-caption a:hover{color:#2c7fe5}.product-card__right-menu{margin:10px 0}.product-card__right-menu a{color:#2969b9;font-size:15px}.product-card__right-menu a:not(:last-of-type):after{content:"";display:inline-block;vertical-align:middle;width:4px;height:4px;border-radius:50%;background:#6c7580;margin:0 .25em 0 .45em;opacity:.8}@supports (display:grid){.product-card__caption{grid-area:content-area}.product-card__right{grid-area:right-area;position:relative}.product-card__repo{grid-area:footer-area;align-self:end}}.product-card--hawk{background-image:linear-gradient(176deg,#2e2e3c,#262633 99%,#252533);border:0}.product-card--hawk .product-card__title{color:#fff}.product-card--hawk .product-card__title img{width:44px;vertical-align:text-bottom;margin-right:13px;-webkit-transform:translateY(-3px);transform:translateY(-3px)}@media (max-width:980px){.product-card--hawk .product-card__title img{width:34px}}.product-card--hawk .product-card__caption,.product-card--hawk .product-card__screen{color:#a4b1d0}.product-card--hawk .product-card__caption a,.product-card--hawk .product-card__screen a{color:#59a3ff}.product-card--hawk .product-card__repo{color:#878ca0}.product-card--hawk .product-card__repo:hover{color:#fff}.product-card--hawk .product-card__caption{padding-top:10px}.product-card--hawk .product-card__screen{background-color:#2a2835}.product-card--notes{background-image:linear-gradient(9deg,#f4f5fb,#f9fafb 99%);border:0}.product-card--notes .product-card__caption{margin-bottom:10px}.product-card--media{background-color:#0b0b0b;border:0}@supports (display:grid){.product-card--media{grid-template-rows:130px auto 100px}@media (max-width:980px){.product-card--media{grid-template-rows:auto}}}.product-card--media .product-card__title{font-size:70px;font-weight:500;max-width:200px;color:#fff}.product-card--media .product-card__caption{margin:30px 0;color:#757575;font-weight:300;font-size:25px}.product-card--media .product-card__advantages{color:#fff;font-weight:400;font-size:15px}.product-card--media .product-card__repo:hover{color:#fff}.product-card--ar-tester{background-image:url(/public/app/img/products/ar-tester-bg.jpg),linear-gradient(69deg,#f575a0 8%,#187cb8);background-size:cover,auto;border:0}@supports (display:grid){.product-card--ar-tester{grid-template-columns:auto 300px}@media (max-width:980px){.product-card--ar-tester{grid-template-columns:auto}}}.product-card--ar-tester .product-card__caption,.product-card--ar-tester .product-card__disclaimer,.product-card--ar-tester .product-card__repo,.product-card--ar-tester .product-card__title{color:#fff}.product-card--ar-tester .product-card__caption{margin-top:20px;font-size:24px;font-weight:300;line-height:1.36em}.product-card--ar-tester .product-card__disclaimer{font-weight:400}.product-card--ar-tester .product-card__title{font-size:53px}.product-card--ar-tester .product-card__screen{-webkit-box-shadow:none;box-shadow:none;width:256px;margin-top:20px}.product-card--ar-tester .product-card__download{padding:14px 20px 17px;font-size:13px;border-radius:8px;opacity:.3;position:absolute;left:50%;bottom:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media (max-width:980px){.product-card--ar-tester .product-card__download{display:none}}.product-card--ar-tester .product-card__download svg{margin-right:15px;margin-top:4px}.product-card--ar-tester .product-card__download b{font-size:19px;font-weight:400}.product-card--ar-tester .product-card__repo{opacity:.5}.product-card--ar-tester .product-card__repo:hover{opacity:1}@supports (display:grid){.products-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-auto-rows:1fr;grid-gap:30px}.products-grid__item{margin:0!important}@media (max-width:980px){.products-grid{grid-template-columns:1fr;grid-auto-rows:auto}}}.product-cell{position:relative;border:1px solid #e7e9f5;padding:30px 30px 102px;border-radius:2px;color:#6c7580;font-size:15px;margin-bottom:30px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width:980px){.product-cell{margin-bottom:20px;padding:20px}}.product-cell__name{display:block;font-size:19px;font-weight:500;margin:0;color:#000;letter-spacing:-.17px;font-weight:700}.product-cell__logo{float:right;margin-left:30px}.product-cell__desc{margin-top:10px;line-height:1.6em}.product-cell__tags{position:absolute;bottom:62px}@media (max-width:980px){.product-cell__tags{margin-top:15px;position:static}}.product-cell__repo{position:absolute;bottom:25px;display:inline-block;margin-top:15px;color:inherit;font-size:13px}@media (max-width:980px){.product-cell__repo{position:static}}.product-cell__tag{display:inline-block;margin-right:5px;padding:4px 8px;border:1px solid #efc8db;font-size:14.3px;line-height:1em;color:#995175;border-radius:3px}@media (max-width:980px){.product-cell__tag{margin-top:5px}}.product-cell__tag svg{margin-right:.12em;vertical-align:text-bottom}.product-cell__tag--pypi{border-color:#adcbe3;color:#3573a7}.product-cell__tag--pypi:hover{color:color(#3573a7 blackness(20%))}.product-cell__tag--npm{border-color:#f9b7b7;color:#b72b2a}.product-cell__tag--npm:hover{color:color(#b72b2a blackness(20%))}.product-cell__tag--npm svg{vertical-align:middle}.product-cell__tag--composer{border-color:#d0cdc8;color:#6d6d6d}.product-cell__tag--composer:hover{color:color(#6d6d6d blackness(20%))}.follow-block{text-align:center}.follow-block__photos{display:block;margin:25px 0}.follow-block__photos img{width:60px;height:60px;opacity:.9;margin:0 10px;vertical-align:bottom;border-radius:2px}@media (max-width:980px){.follow-block__photos img{width:46px;height:46px;margin:0 3px}}.follow-block .button{background:transparent;margin:0 7.5px;border:1px solid #c2c2c2;color:#373737;font-size:14.5px;border-radius:3px;padding:4px 9px;line-height:22px;letter-spacing:.012em;vertical-align:top}.follow-block .button svg{vertical-align:middle;margin-right:.2em}@media (max-width:980px){.follow-block .button{font-size:14px;padding:3px 7px;margin:0 2px 10px}.follow-block .button svg{height:auto;width:1.1em;margin-right:.1em}}.follow-block .button--instagram{border-color:#eec6dc;color:#871f4d}.follow-block .button--instagram svg{margin-top:-2px}.follow-block .button--github svg{margin-top:-2px;height:18px}.follow-block .button--vk{border-color:#bcc6df;color:#2a5ba2}.follow-block .button--vk svg{vertical-align:middle;width:17px;height:auto}.follow-block .button--twitter{border-color:#a3caf8;color:#509dec}.follow-block .button--twitter svg{width:17px;height:auto}.follow-block .button--telegram{color:#0b98da;border-color:#99cfed}.follow-block .button--telegram svg{margin-top:-3px;height:14px}.course-navigation-wrapper{position:absolute;padding-top:150px;max-width:155px}.course-navigation-wrapper--previous{left:0}.course-navigation-wrapper--next{right:0}.course-navigation{display:block;padding:15px;text-align:center;text-decoration:none;color:inherit}.course-navigation:hover{text-decoration:none;cursor:pointer;background:rgba(93,104,156,.08)}.course-navigation--previous{border-radius:0 3px 3px 0}.course-navigation--next{border-radius:3px 0 0 3px}.course-navigation__icon{display:block;margin:20px auto 15px;width:15px;height:28px}.course-navigation__icon--next{background:url(../b16ca1e261bbf304218e643476493658.svg) no-repeat}.course-navigation__icon--previous{background:url(../627cb0932775ac5157ef6458f4e8d84b.svg) no-repeat}.course-navigation__avatar{display:block;margin:25px auto 5px;border-radius:50%;width:30px;height:30px}.course-navigation__author{max-width:100px;margin:10px auto;color:#5f6a75;line-height:1.26em;font-size:.9em}@media (max-width:1250px){.course-navigation-wrapper{display:none}}.video-overlay{background:#000;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;text-align:center;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;will-change:opacity}.video-overlay--showed{opacity:1}.video-overlay video{max-height:100%;max-width:100%;opacity:.1;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;will-change:opacity}.video-overlay--loaded video{opacity:1}.video-overlay__close{display:inline-block;position:absolute;right:20px;top:20px;cursor:pointer;opacity:.8;width:25px;height:25px;background:rgba(0,0,0,.8);padding:5px;border-radius:50%}.video-overlay__close:hover{opacity:1}.video-overlay__close:after,.video-overlay__close:before{content:"";width:2px;height:25px;background:#fff;border-radius:2px;display:block;position:absolute;left:49%;top:5px}.video-overlay__close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.video-overlay__close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.follow-telegram{max-width:380px;margin:120px auto 0}.follow-telegram:before{display:block;width:30px;height:30px;content:"";background:url(/public/app/img/codex-logo-gray.svg);background-size:cover;border:3px solid #eaf2f7;background-color:#eaf2f7;border-radius:50%;float:left}.follow-telegram__contents{position:relative;border-radius:9.5px;border-top-left-radius:0;border:1px solid #d7e3ec;padding:15px 17px;margin-left:46.5px}.follow-telegram__contents:before{position:absolute;left:-8px;top:-1px;width:9px;height:20px;content:"";background:url(/public/app/img/bubble-corner.svg)}.follow-telegram__title{display:inline-block;font-size:15px;letter-spacing:-.4px;line-height:1em;color:#2c86cd;font-weight:600;margin-bottom:6px}.follow-telegram__desc{line-height:1.5em;font-size:13.6px}.follow-telegram__button{display:inline-block;background:#5ca9e6;border-radius:25px;font-size:14.2px;letter-spacing:.3px;color:#fff;margin-top:10px;margin-left:46.5px;padding:8px 20px}.follow-telegram__button:hover{background-color:#52a1e0;color:#fff}.follow-telegram__button svg{display:inline-block;vertical-align:middle;margin:-2px 7px 0 -2px}@media (max-width:980px){.follow-telegram{width:auto;margin:0 auto}.follow-telegram__contents{padding:11px 15px}.follow-telegram__title{font-size:14px}.follow-telegram__desc{font-size:13px}}.join-component{margin:156px 0 152px;text-align:center}.join-component--compact{margin:50px 0 80px}.join-component__desc{max-width:322px;margin-bottom:32px}.join-component__label{color:#6c7580;margin-bottom:15px}.join-component__button{font-size:16.9px;font-weight:500;color:#fff;border-radius:3px;background-color:#4a90e2;padding:10px 35.5px;-webkit-box-shadow:0 7px 12px -4px rgba(65,140,227,.7);box-shadow:0 7px 12px -4px rgba(65,140,227,.7)}.join-component__button:hover{color:#fff;background:#4484db}.join-component__time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:24px;font-weight:500;line-height:1.08;color:#6c7580;margin-bottom:60px}.join-component__time-delimiter{padding:0 8px}.join-component__time-delimiter:after,.join-component__time-delimiter:before{content:"";display:block;border-radius:50%;width:4px;height:4px;background-color:#6c7580}.join-component__time-delimiter:before{margin-bottom:3px}.join-component__time-delimiter--blinking:after{-webkit-animation:blinker 2s step-end infinite;animation:blinker 2s step-end infinite;-webkit-animation-delay:1s;animation-delay:1s}.join-component__time-item{position:relative}.join-component__time-item:after{display:block;position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:14px;font-weight:400;line-height:1.86;content:attr(data-time)}@-webkit-keyframes blinker{0%{opacity:0}50%{opacity:1}}@keyframes blinker{0%{opacity:0}50%{opacity:1}}.index-page{padding:100px 0 70px}.index-page p{max-width:500px;margin:15px auto;font-size:14.8px;letter-spacing:.014em;line-height:1.65em}.index-page__join-button{margin:1.5em auto 0;padding:16px 30px;font-size:1.2em;display:block;max-width:140px;text-align:center}.index-page .codex-logo{display:block;margin:0 auto 50px}.thanks-block svg{display:block;max-width:60px;margin:20px auto}@media (max-width:980px){.index-page{padding:50px 0}.index-page p{padding:0 10px}}.join-page{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.join-page__logo{margin:60px auto;display:block}.join-page__logo svg{display:block;margin:0 auto}@media (max-width:980px){.join-page__logo svg{width:150px;height:auto}}@media (max-width:980px){.join-page__logo{margin:50px auto 30px}}.join-page__content{padding:85px 100px;border:1px solid #e7e9f5;border-radius:20px;max-width:650px;margin:0 auto;line-height:1.64em;font-size:15.3px;-webkit-box-sizing:border-box;box-sizing:border-box}@media (max-width:980px){.join-page__content{padding:20px;border:0}}.join-page ul{margin:1.75em 0}.join-page li{margin:.8em 0}.join-page h1{font-size:26px;margin-bottom:1.35em}@media (max-width:980px){.join-page h1{margin-top:0}}.join-page h2{margin:2em 0 .8em;font-size:21px;font-weight:400}@media (max-width:980px){.join-page__form{margin-top:10px}}.join-page__form label{display:block;margin-bottom:.7em}.join-page__form .input{margin-bottom:30px}.join-page__auth{margin:50px 0;color:#838ea1}@media (max-width:980px){.join-page__auth{font-size:14px}}.join-page__auth-vk-button{display:inline-block;vertical-align:middle;margin-right:12px;border:1px solid #bed8f9;border-radius:6px;padding:7px 9px}@media (max-width:980px){.join-page__auth-vk-button{padding:4px 7px;margin-right:7px}}.join-page__auth-vk-button svg{vertical-align:middle;margin-right:.3em;margin-top:-1px}@media (max-width:980px){.join-page__auth-vk-button svg{width:16px;height:16px;vertical-align:text-bottom}}.join-page__auth-vk-button:hover{border-color:#94bdf2}.join-page__auth-show-email{display:inline-block;cursor:pointer;border-bottom:1px dotted #d0d4d8}.join-page__auth-show-email:hover{color:#6c7580}.join-page .button{border-radius:3px}.join-page__user{font-size:1.1em;margin:50px 0 30px}.join-page__user-photo{width:26px;height:26px;border-radius:13px;margin-right:10px;vertical-align:middle}.join-page__user-name{display:inline-block;vertical-align:middle}.join-page__error{margin:15px 0;color:#e04545}.join-page__success{padding:100px 200px;background:#f2f5fb;color:#6f809a;line-height:1.6em;font-size:16px;text-align:center}@media (max-width:980px){.join-page__success{padding:15px;font-size:14px}}.join-page__success--compact{margin-top:2em;padding:30px;font-size:14px}.join-page__success-inner{max-width:550px;margin:0 auto}.task-page{padding-bottom:50px}.task-page__cols{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:650px;margin:50px auto;text-align:center}@media (max-width:980px){.task-page__cols{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.task-page__col{display:block;width:33.3%;text-align:center;font-size:18px}@media (max-width:980px){.task-page__col{width:auto;text-align:left;padding:5px 0}}.task-page__left{padding-right:50px}@media (max-width:980px){.task-page__left{margin-bottom:50px}}.task-page h3{margin-top:0}.task-page img{max-width:100%}.task-page__download{display:block;width:200px;text-align:center;padding:15px 10px;border-radius:50px;background:#1f253c;border:0!important;color:#fff!important;font-size:16px;margin:50px auto 0}.task-page__download svg{width:30px;height:auto;vertical-align:middle;margin-right:.3em}.task-page__disclaimer{color:#6c7580;margin:20px auto;max-width:400px;text-align:center;line-height:1.5em}.additional_tasks{margin:0;padding:0}.additional_tasks li{position:relative;margin:0!important;list-style-type:none;padding:20px 0 20px 30px;border-bottom:1px solid #e4eaf5}.additional_tasks li:before{position:absolute;left:0;top:1.9em;width:10px;height:10px;display:inline-block;border-radius:5px;background:#dfe7f5;margin-right:15px;content:""}.additional_tasks .back:before{background:#6699df}.additional_tasks .front:before{background:#e87474}.additional_tasks .ui:before{background:#9bf1b3}.additional_tasks--legend li{display:inline-block;border-bottom:0;margin-right:50px!important;font-size:14px;font-weight:700}.additional_tasks--legend li:before{top:2em}.articles-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin:-10px}@media (max-width:850px){.articles-grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.articles-grid__item{width:33.33%;padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width:850px){.articles-grid__item{width:auto;display:block}}.feed{max-width:540px;margin:0 auto}.feed-item{font-size:15px;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:break-word;margin-bottom:50px}@media (max-width:980px){.feed-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.feed-item__info{color:#6e7990;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:14px;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.feed-item__time{margin-right:11px}.feed-item__author-photo{display:inline-block;width:17px;height:17px;vertical-align:middle;border-radius:50%;margin:-2px -2px 0 0;border:3px solid #fff;overflow:hidden}.feed-item__author-photo img{width:inherit;height:auto}.feed-item__author-photo:nth-of-type(2){margin-left:-10px}.feed-item__author-photo:nth-of-type(2) img{-webkit-box-shadow:0 0 0 3px #fff;box-shadow:0 0 0 3px #fff}.feed-item__author-name{color:inherit}.feed-item__title{font-size:20px;line-height:1.3em;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans;font-weight:700;text-decoration:none;letter-spacing:-.75px;color:inherit}.feed-item__description{margin-top:7px;font-size:14.4px;letter-spacing:.2px;line-height:1.55em}@media (max-width:980px){.feed-item--with-cover{display:block}}.feed-item--with-cover .feed-item__description{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (max-width:980px){.feed-item--with-cover .feed-item__description{-webkit-line-clamp:7}}.feed-item--with-cover .feed-item__cover{float:right;margin-left:45px}@media (max-width:980px){.feed-item--with-cover .feed-item__cover{margin-left:20px}}.feed-item--with-cover .feed-item__cover img{display:block;border-radius:3px;height:130px;width:130px}@media (max-width:980px){.feed-item--with-cover .feed-item__cover img{height:40px;width:40px}}.feed-item--with-big-cover{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (max-width:980px){.feed-item--with-big-cover .feed-item__title{font-size:23px}}.feed-item--with-big-cover .feed-item__description{-webkit-line-clamp:5}.feed-item--with-big-cover .feed-item__cover{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin:20px 0 0}.feed-item--with-big-cover .feed-item__cover img{width:100%;height:auto}.feed-item--big .feed-item__title{font-size:34px}@media (max-width:980px){.feed-item--big .feed-item__title{font-size:26px}}.feed-item--big .feed-item__description{font-size:17.6px;margin-top:10px}@media (max-width:980px){.feed-item--big .feed-item__description{font-size:15.6px}}@media (max-width:980px){.feed-item--big.feed-item--with-cover .feed-item__title{font-size:23px}}.feed-item--big.feed-item--with-cover .feed-item__cover{margin-left:20px}@media (max-width:980px){.feed-item--big.feed-item--with-cover{display:block}}.feed-item--big.feed-item--with-big-cover{display:-webkit-box;display:-ms-flexbox;display:flex}.feed-item--big.feed-item--with-big-cover .feed-item__cover{margin-left:0}@media (max-width:980px){.feed-item--big.feed-item--with-big-cover .feed-item__title{font-size:26px}}@media (max-width:980px){.contest_alert a{margin:20px 0}}.article__title{max-width:700px;-webkit-transform:translateX(25px);transform:translateX(25px);margin:0 auto;padding:80px 20px 40px;font-weight:800;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.25em;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans;font-size:37px;letter-spacing:-.014em}@media (max-width:980px){.article__title{padding:30px 20px;font-size:26px}}@media (max-width:980px) and (max-width:690px){.article__title{-webkit-transform:none;transform:none}}.article__coauthors-info{color:#6c7580;-ms-flex-item-align:center;align-self:center}@media (max-width:980px){.article__coauthors-info{-ms-flex-preferred-size:50%;flex-basis:50%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-overflow:ellipsis;overflow-x:hidden}}.article__info{max-width:650px;margin:0 auto 40px;display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width:980px){.article__info{padding-left:20px;padding-right:20px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:30px}}.article__author{white-space:nowrap}.article__author:after{content:" ";display:table;clear:both}.article__author-photo{width:50px;height:50px;border:3px solid #fff;border-radius:50%;margin-right:15px;margin-top:-3px;float:left;background-color:#f4f5f9;overflow:hidden;font-size:3em;line-height:1em;letter-spacing:1.9em}@media (max-width:980px){.article__author-photo{width:40px;height:40px;margin-top:0}}.article__author-photo--with-coauthor{margin-right:0;border-left:0}.article__author-photo--coauthor{margin-left:-20px;margin-right:12px}.article__author-name{font-size:15px}@media (max-width:980px){.article__author-name{font-size:13.3px;white-space:nowrap}}.article__date{display:block;color:#6c7580}@media (max-width:980px){.article__date{line-height:1.3em;font-size:11.9px}}.article__read-time{margin:auto 0 auto auto;color:#6c7580}.article__read-time:before{content:"";background-image:url(/public/app/img/components/article/watch.svg);width:19px;height:20px;display:inline-block;margin-right:5px;vertical-align:bottom}@media (max-width:980px){.article__read-time{margin:25px 0 0;-ms-flex-preferred-size:100%;flex-basis:100%}}.article__read-on{margin:auto 0 auto auto;color:#6c7580}@media (max-width:980px){.article__read-on{margin:25px 0 0}}.article__read-on-item{cursor:pointer}.article__read-on-item:first-of-type{margin-left:10px}.article__read-on-item:before{display:inline-block;vertical-align:text-bottom;content:"";width:16px;height:16px;margin-right:9px}.article__read-on-item:hover{color:color(#6c7580 blackness(70%))}.article__read-on-item--english:before{background-image:url(/public/app/img/components/article/flag-english.svg)}.article__read-on-item--russian:before{background-image:url(/public/app/img/components/article/flag-russian.svg);background-size:contain}.article__read-on-item:not(:last-of-type):after{content:"|";margin:0 8px 0 12px}.article .sharing{max-width:650px;margin:40px auto}@media (max-width:980px){.article .sharing{padding-left:20px;padding-right:20px}}@media (max-width:980px) and (max-width:690px){.article .sharing{margin-left:20px;margin-right:20px}}.article-content{font-size:17.4px;line-height:1.62em;word-wrap:break-word;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:rgba(0,0,0,.85882)}.article-content--serif{font-size:19.3px;line-height:1.6em;letter-spacing:.1px;font-family:Georgia}.article-content a{color:inherit;text-decoration:none;border-bottom:1px solid #333}.article-content i{font-family:Georgia;font-style:italic;letter-spacing:.1px;font-size:1.05em}.article-content blockquote,.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6,.article-content ol,.article-content p,.article-content ul{max-width:650px}@media (max-width:980px){.article-content blockquote,.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6,.article-content ol,.article-content p,.article-content ul{padding-left:20px;padding-right:20px}}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{margin:1.6em auto .5em;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans;letter-spacing:-.02em;line-height:1.3em;padding-top:0;padding-bottom:0}.article-content h1+p,.article-content h2+p,.article-content h3+p,.article-content h4+p,.article-content h5+p,.article-content h6+p{margin-top:0}.article-content h2{font-size:1.6em}@media (max-width:980px){.article-content h2{font-size:1.2em}}.article-content h3,.article-content h4,.article-content h5,.article-content h6{margin-top:.8em}.article-content p{margin:1.2em auto}.article-image{max-width:650px;margin:40px auto;text-align:center}@media (max-width:980px){.article-image{padding-left:20px;padding-right:20px;margin:30px auto;padding-left:0;padding-right:0}}.article-image img{vertical-align:bottom;max-width:100%}.article-image--stretched{max-width:none!important;width:100%!important}.article-image--stretched img{width:100%}.article-image--bordered img{border:3px solid #fff;-webkit-box-shadow:0 0 0 2px #e7e9f5;box-shadow:0 0 0 2px #e7e9f5;-webkit-box-sizing:border-box;box-sizing:border-box}.article-image--backgrounded{padding:15px;background:#e7e9f5}.article-image--backgrounded img{max-width:60%;margin:0 auto}.article-image-caption{margin:1em auto;color:#6c7580}.article-code{max-width:650px;margin:40px auto;border:1px solid #e4e4e4;padding:15px 18px;border-radius:5px}@media (max-width:980px){.article-code{padding-left:20px;padding-right:20px}}@media (max-width:980px) and (max-width:690px){.article-code{-webkit-box-sizing:border-box;box-sizing:border-box;margin:30px 20px}}.article-code__content{display:block;white-space:pre;word-wrap:normal;overflow-x:auto;font-family:Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.7em;font-size:13.6px;padding:0!important}@media (max-width:980px){.article-code__content{font-size:10.2px;line-height:1.6em}}.article-quote{margin:40px auto;padding:30px 0;border-top:2px solid #e4e4e4;border-bottom:2px solid #e4e4e4;font-family:Georgia;letter-spacing:.12px;font-style:italic;font-size:20.4px;line-height:1.6em}.article-quote--center{text-align:center}@media (max-width:980px){.article-quote{padding-left:0!important;padding-right:0!important}}@media (max-width:980px) and (max-width:690px){.article-quote{margin:30px 20px;padding-left:20px!important;padding-right:20px!important}}.article-quote p{padding-left:0!important;padding-right:0!important}.article-quote p:first-of-type{margin-top:0}.article-quote p:last-of-type{margin-bottom:0}.embed-link{display:block;max-width:650px;margin:40px auto;padding:25px;border:1px solid #e7e9f5!important;-webkit-box-shadow:0 1px 1px rgba(66,70,84,.03922);box-shadow:0 1px 1px rgba(66,70,84,.03922);border-radius:2px;color:inherit!important;text-decoration:none!important}@media (max-width:980px){.embed-link{-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px;margin:30px auto}}@media (max-width:980px) and (max-width:690px){.embed-link{margin:30px 10px}}.embed-link__image{float:right;max-width:70px;background-position:50%;background-repeat:no-repeat;background-size:contain;margin:0 0 30px 30px;border-radius:3px}@media (max-width:980px){.embed-link__image{margin:0 0 15px 15px}}.embed-link__title{font-size:16px;line-height:1.45em;font-weight:600}@media (max-width:980px){.embed-link__title{font-size:12.2px}}.embed-link__domain{display:inline-block;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant:small-caps;margin-top:20px;border:0!important;color:#6c7580;font-size:.85em}@media (max-width:980px){.embed-link__domain{margin-top:5px;font-size:12px}}.embed-link__description{margin-top:10px;font-size:.9em}@media (max-width:980px){.embed-link__description{margin-top:5px;font-size:12px}}.article-list{margin:1.2em auto}@media (max-width:980px){.article-list{-webkit-box-sizing:border-box;box-sizing:border-box}}@media (max-width:980px) and (max-width:690px){.article-list{margin-left:20px}}.article-list li{margin:.5em 0;padding-left:.5em}.article-delimiter{line-height:1.6em;width:100%;text-align:center}.article-delimiter:before{display:inline-block;content:"***";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}.inline-code{background:rgba(251,241,241,.78);color:#c44545;padding:4px 6px;border-radius:2px;margin:0 2px;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em}.cdx-marker{background:rgba(245,235,111,.29);padding:3px 0}.article-lang__section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (max-width:980px){.article-lang__section label{-ms-flex-preferred-size:100%;flex-basis:100%}}.article-lang__radio{margin:0 5px 0 10px}@media (max-width:980px){.article-lang__radio:first-of-type{margin-left:0}}.article-table{max-width:650px;margin:20px auto;table-layout:fixed;width:100%;border-radius:3px;border-collapse:collapse;border:1px solid #e7e9f5}@media (max-width:980px){.article-table{padding-left:20px;padding-right:20px}}.article-table td{padding:8px 10px;border:1px solid #e7e9f5}.article-embed{max-width:650px;margin:20px auto}@media (max-width:980px){.article-embed{padding-left:20px;padding-right:20px}}.article-embed-caption{text-align:center;margin:1em auto;color:#6c7580}.profile{padding:150px 0 110px;text-align:center}.profile-ava{position:relative;display:inline-block}.profile-ava__settings{position:absolute;bottom:-6px;right:0;background:#fff url(/public/app/img/icon_gear.png) no-repeat 50%;width:29px;height:29px;border-radius:50%;-webkit-transition:-webkit-transform .15s ease;transition:-webkit-transform .15s ease;transition:transform .15s ease;transition:transform .15s ease,-webkit-transform .15s ease;will-change:transform}.profile-ava__settings:hover{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.profile-ava__photo,.profile-settings__ava{display:inline-block;width:100px;height:100px;background:#e9ecf5;border-radius:50%;overflow:hidden;font-size:100px;line-height:1em;letter-spacing:50px;color:#cad2e0;font-weight:700}.profile-ava__photo>img,.profile-settings__ava>img{vertical-align:top;margin:-1px 0 0 -2px;width:103px;height:103px}.profile__name{margin:1.5em 0 .74em;font-size:2.2em;line-height:1.3em}@media (max-width:980px){.profile__name{font-size:1.5em}}.profile__bio{font-size:1.2em;line-height:1.5em}.profile__social{display:inline-block;padding:2px 3px;margin:25px 18px;border-radius:15px;text-decoration:none;font-size:1.5em}.profile__social:not(.github){color:#9c9da2}.profile__social:hover{color:#4c5063}.profile__social.github:not(.profile__social_no_insta){font-size:2.1em;line-height:.5em}.profile__logout{display:inline-block;margin-top:30px;font-size:18px;text-decoration:none!important;color:#b9bfca;border-bottom:1px solid #dce1e8}.profile__logout:hover{color:#8d9aaf;border-bottom-color:#c4ceda}.profile-settings{padding:40px 0}.profile-settings label{display:block;margin-bottom:.7em}.profile-settings__form{margin-left:40px;padding-left:35px;border-left:3px solid #8b9aaf;max-width:280px}.profile-settings__ava,.profile-settings__form input:not(:last-of-type),.profile-settings__form textarea{margin-bottom:20px}.profile_join_requests{color:#9a9a9a;font-style:italic}@media (max-width:980px){.profile{padding:70px 0}.profile-settings .button:not(.button--master){margin-top:-38px}.profile-settings .fl_l{float:none}.profile-settings__form{margin-left:0;padding-left:0;border-left:0}}@media (-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx),(min-resolution:120dpi),print{.profile-ava__settings{background:#fff url(/public/app/img/icon_gear@2x.png) no-repeat 50%;background-size:21px 21px}}.contests-list{position:relative;border-top:1px solid #d2dde5}.contests-list:before{display:block;content:attr(data-heading);position:absolute;left:97px;top:-14px;padding:3px 15px;background:#fff;color:#b0c4d3;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant:small-caps;font-size:18px;letter-spacing:1px}.contests-list .item{padding:50px 0}.contests-list .date{float:left;width:60px;color:#a8adb6;text-align:center}.contests-list time:last-child:before{content:"\2014";display:block;line-height:.8em}.contests-list .icon{width:79px;height:52px;margin:0 30px}.contests-list .icon img{width:100%;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast}.contests-list .title{display:inline-block;margin:0 0 8px;font-size:18px;color:inherit;text-decoration:none;font-weight:700}.contests-list .title:hover{color:#4888dc}.contest{padding:30px 0}.contest .disclaimer{color:#988e8e;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant:small-caps;letter-spacing:1.4px;font-size:14px;margin:40px;text-align:center}.contest .line{position:relative;margin:0 70px;height:1px;background:#ebe8e8}.contest .line:before{content:"";position:absolute;left:50%;top:-19px;width:40px;height:40px;margin-left:-20px;background:#fff url(/public/app/img/contest_icon_goblet.png) no-repeat 50% 50%}.contest img{max-width:100%}.contest .result{padding-top:80px;font-size:1.1em;line-height:1.75em;word-wrap:break-word}.contest .result h2,.contest .result p{margin:25px 70px}.contest .result h2{margin-bottom:2em}.contest .article__title{padding-top:0}.contest_info{width:80%;margin:0 auto 50px;color:#9a9ca0}.contest_info td{width:33%;text-align:center}.contest_info td:nth-of-type(2){width:34%;border-left:1px solid #caced4;border-right:1px solid #caced4}.contest_info time{display:inline-block;text-align:left;vertical-align:middle;margin-left:10px;font-weight:700;line-height:1.1em}.contest .winner{max-width:300px;margin:80px auto;text-align:center}.contest .title{color:#aeb5bb;letter-spacing:1px;font-size:13px}.contest .name{margin:10px 0 7px;color:#495d6f;font-size:18px;font-weight:700}.contest .nick{text-decoration:none}.contest .nick:after,.contest .nick:before{content:"";display:inline-block;margin:0 4px;width:55px;height:26px;background:url(../d5e9a073845777db328f100dae230770.png) no-repeat;vertical-align:top}.contest .nick:after{background-position:-55px 0}.contest .toggler{display:inline-block;margin-top:40px;color:#aeb5bb;text-decoration:none;border-bottom:1px solid #e9ecf1}.contest .toggler i{font-size:12px}@media (max-width:980px){.contests-list .date,.contests-list .icon{float:none}.contests-list .date{width:auto}.contests-list time:last-child:before{display:inline-block;margin:0 5px 0 2px}.contests-list:before{left:50%;width:50px;padding:3px 0;margin-left:-25px;text-align:center}.contests-list .item{padding:25px 0}.contests-list .icon{display:block;margin:15px auto 30px}.contest_info td{display:block;width:auto!important;padding:5px 0;font-size:11px;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant:small-caps}.contest .result h2,.contest .result p{margin:20px 30px}}@media (-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx),(min-resolution:120dpi),print{.contest .line:before{background:#fff url(/public/app/img/contest_icon_goblet@2x.png) no-repeat 50% 50%;background-size:18px auto}.contest .nick:after,.contest .nick:before{background:url(/public/app/img/branches@2x.png) no-repeat;background-size:110px auto}.contest .nick:after{background-position:-55px 0}}.full-width-notifier{text-align:center;padding:20px 0;background-color:#ecf3f9;color:#3f4b63}.no_data{text-align:center;padding:150px 0}.top-menu{width:100%;margin:10px 0;font-size:15px}.top-menu__link{float:right}.top-menu__saved{float:right;color:#ccc}.top-menu__saved_hidden{visibility:hidden}.p_table{width:100%;border-spacing:0;border-collapse:collapse}.p_table td{padding:15px;word-wrap:break-word;max-width:300px}.p_table tr{border-bottom:1px solid #eff1f5}.p_table tr:last-child{border-bottom:none}.p_table__section td{font-size:44px;color:#e4e6eb;padding:40px 0;font-weight:700}.p_table .id{width:20px;color:#ccc;font-size:13px}.p_table .name{color:inherit;font-weight:70


интересно, почему так

neSpecc · 2019-04-18T20:53:34Z

www/public/app/js/modules/reactionsArticles.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const reactions = require('@codexteam/reactions');


класс реакций и надо вынести в отдельный чанк, как сделано с редактором

neSpecc · 2019-04-18T20:54:02Z

www/public/app/js/modules/reactions.js

зачем два одинаковых по смыслу модуля? надо сделать один универсальный

sirpravdi added 3 commits March 3, 2019 23:02

download reactions module

a163695

resolve conflict

474b98d

add reactions module to articles

ed8570d

sirpravdi requested review from gohabereg, khaydarov, neSpecc and talyguryn as code owners March 24, 2019 17:30

PolinaShneider suggested changes Mar 28, 2019

View reviewed changes

sirpravdi added 2 commits April 7, 2019 16:54

insert reactions into articles through moduleDispatcher

c8c24db

move reactions from dep to devDep + fix class name

63eefe3

PolinaShneider suggested changes Apr 8, 2019

View reviewed changes

sirpravdi added 2 commits April 9, 2019 21:48

added ability to set reactions title + some format fixes

13a2f09

resolve conflicts

383deab

PolinaShneider suggested changes Apr 18, 2019

View reviewed changes

sirpravdi added 2 commits April 18, 2019 15:03

fix module name + require reactions right in the module

5f6d3f3

rename class for reactions module

103483c

PolinaShneider approved these changes Apr 18, 2019

View reviewed changes

neSpecc requested changes Apr 18, 2019

View reviewed changes

upload reactions module through yarn

a42aed9

talyguryn requested changes Apr 18, 2019

View reviewed changes

neSpecc requested changes Apr 18, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Articles reactions #539

Articles reactions #539

sirpravdi commented Mar 24, 2019

PolinaShneider Mar 28, 2019

sirpravdi Apr 7, 2019

PolinaShneider Mar 28, 2019

PolinaShneider Mar 28, 2019

PolinaShneider Mar 28, 2019

PolinaShneider left a comment

PolinaShneider Apr 8, 2019

PolinaShneider Apr 8, 2019

PolinaShneider Apr 8, 2019

PolinaShneider Apr 8, 2019

PolinaShneider Apr 18, 2019

PolinaShneider Apr 18, 2019

PolinaShneider left a comment

neSpecc left a comment

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

sirpravdi Apr 19, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

talyguryn Apr 18, 2019

neSpecc Apr 18, 2019

neSpecc Apr 18, 2019


		<script type="text/javascript" src="/public/build/codex.bundle.js"></script>
		<script>

	let parentElement = document.querySelector('.' + settings.parent),
	let parentElement = document.querySelector(settings.parent),

	* @param {String} settings.parent - container's class name for reactions module
	* @param {String} settings.parent - container's selector for reactions module

		@@ -0,0 +1,3 @@
		:root{--text-gray:#6c7580;--text-green:#00b693;--text-pink:#bc1453;--color-link:#2969b9;--color-hover:#2c7fe5;--bg-button:#c5dff5;--bg-button-submut:#4592da;--bg-light:#f4f5f9;--line-light:#e7e9f5;--timing-bounce:cubic-bezier(0.6,-0.28,0.735,0.045);--layout-header-height:50px;--article-max-width:650px;--serif-font:"Lucida Grande","Lucida Sans Unicode","Lucida Sans"}

		@@ -0,0 +1,25 @@
		'use strict';

		const reactions = require('@codexteam/reactions');

Articles reactions #539

Are you sure you want to change the base?

Articles reactions #539

Conversation

sirpravdi commented Mar 24, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PolinaShneider left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PolinaShneider left a comment

Choose a reason for hiding this comment

neSpecc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment