<code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)
-
- edit_on_github: عدِّل فى جيتهاب
- error: خطأ
- close: إغلاق
-
- hide_forever: إخفاء إلى الأبد
- hidden_forever: هذه المعلومه لن تظهر بعد الآن.
-
-
- subscribe:
- title: تابع تحديثات javascript.info
- text: 'نحن لا نرسل إعلانات ولكن مواضيع متعلقة بالسلسلة فقط. أنت تختار ماتريد إرساله لك:'
- agreement: 'By signing up to newsletters you agree to the terms of usage.'
- agreement: 'بالمشاركة فى نشرة الأخبار فأنت توافق على شروط الإستخدام.'
- button: شارك
- button_unsubscribe: إلغاء المشاركة من كل الأخبار
- common_updates: التحديثات العامة
- common_updates_text: new courses, master classes, article and screencast releases
- common_updates_text: كورسات جديدة أو ماستر أو مقال جديد
- your_email: your@email.here
- newsletters: 'نشرة أخبار,نشرات أخبار,نشرات أخبار'
- no_selected: لا شئ تم تحديده
-
- form:
- value_must_not_be_empty: لا يمكن أن تكون القيمه فارغه.
- value_is_too_long: القيمة طويلة جدًا.
- value_is_too_short: القيمة قصيرة جدًا.
- invalid_email: بريد غير صالح.
- invalid_value: قيمة غير صالحة.
- invalid_autocomplete: من فضلك اختر من القائمة
- invalid_date: 'تاريخ غير صالح, الشكل: dd.mm.yyyyy.'
- invalid_range: هذا التاريخ ليس صالحًا هنا.
- save: حفظ
- upload_file: رفع ملف
- cancel: إلغاء
- server_error: خطأ فى الطلب، كود الرد
diff --git a/locales/id.yml b/locales/id.yml
deleted file mode 100644
index ac29f40..0000000
--- a/locales/id.yml
+++ /dev/null
@@ -1,97 +0,0 @@
-site:
- privacy_policy: kebijakan privasi
- terms: ketentuan penggunaan
- banner_bottom: Tingkatkan keterampilan Anda dengan mengunjungi kursus video tentang JavaScript dan Framework terkait.
- action_required: Diperlukan tindakan
- gdpr_dialog:
- title: Situs web ini menggunakan cookie
- text: Kami menggunakan teknologi browser seperti cookie dan penyimpanan lokal untuk menyimpan preferensi Anda. Anda harus menerima Kebijakan Privasi dan Ketentuan Penggunaan kami agar kami dapat melakukannya.
- accept: Terima
- cancel: Batal
-
- toolbar:
- lang_switcher:
- cta_text: >
- Kami ingin membuat proyek open source ini tersedia untuk orang-orang di seluruh dunia.
-Bantu untuk menerjemahkan konten tutorial ini ke bahasa Anda!
- footer_text: berapa banyak konten yang diterjemahkan ke bahasa yang sesuai - old_version: Versi lama diterbitkan, perlu dukungan. - logo: - normal: - svg: sitetoolbar__logo_en.svg - width: 200 # 171 - normal-white: - svg: sitetoolbar__logo_en-white.svg - small: - svg: sitetoolbar__logo_small_en.svg - width: 70 - small-white: - svg: sitetoolbar__logo_small_en-white.svg - sections: - buy_ebook_extra: 'Beli' - buy_ebook: 'EPUB/PDF' - search_placeholder: 'Cari pada Javascript.info' - search_button: 'Cari' - - public_profile: Profil publik - account: Akun - notifications: Notifikasi - admin: Admin - logout: Logout - - sorry_old_browser: Maaf, Internet Explorer tidak didukung, harap gunakan browser yang lebih baru. - contact_us: hubungi kami - about_the_project: terkait proyek - ilya_kantor: Ilya Kantor - comments: komentar - loading: Memuat... - search: Cari - share: Bagikan - read_before_commenting: baca ini sebelum berkomentar… - last_updated_at: "Terakhir diperbarui pada #{date}" - meta: - description: 'Tutorial JavaScript Modern: penjelasan sederhana, namun terperinci dengan contoh dan soal, termasuk: closure, document dan events, pemrograman OOP dan banyak lagi.' - - tablet-menu: - choose_section: Pilih bagian - search_placeholder: Cari di tutorial - search_button: Cari - - comment: - help: - - Jika Anda memiliki saran apa yang harus ditingkatkan - silakan kunjungi kirimkan Github issue atau pull request sebagai gantinya berkomentar. - - Jika Anda tidak dapat memahami sesuatu dalam artikel – harap jelaskan. - - Untuk menyisipkan beberapa kata kode, gunakan tag<code>, untuk beberapa baris – bungkus dengan tag <pre>, untuk lebih dari 10 baris – gunakan sandbox (plnkr, jsbin, < a href='http://codepen.io'>codepen…)
-
- edit_on_github: Sunting di GitHub
- error: eror
- close: tutup
-
- hide_forever: sembunyikan secara permanen
- hidden_forever: Informasi ini tidak akan muncul lagi.
-
- subscribe:
- title: Perhatikan update pada javascript.info
- text: 'Kami tidak mengirim iklan, hanya hal-hal yang relevan. Anda memilih apa yang akan diterima:'
- agreement: 'Dengan mendaftar ke buletin, Anda menyetujui persyaratan penggunaan.'
- button: Berlangganan
- button_unsubscribe: Berhenti berlangganan dari semua
- common_updates: Pembaruan umum
- common_updates_text: kursus baru, kelas master, artikel, dan rilis screencast
- your_email: your@email.here
- newsletters: 'buletin, buletin, buletin'
- no_selected: Tidak ada yang dipilih
-
- form:
- value_must_not_be_empty: Nilai wajib diisi.
- value_is_too_long: Nilai terlalu panjang.
- value_is_too_short: Nilai terlalu pendek.
- invalid_email: Email tidak valid.
- invalid_value: Nilai tidak valid.
- invalid_autocomplete: Silakan, pilih dari daftar
- invalid_date: 'Tanggal tidak valid, format: dd.mm.yyyy.'
- invalid_range: Tanggal ini tidak valid di sini.
- save: Simpan
- upload_file: Upload file
- cancel: Batal
- server_error: Kesalahan permintaan, kode status
diff --git a/locales/ja.yml b/locales/ja.yml
deleted file mode 100755
index ca2ef32..0000000
--- a/locales/ja.yml
+++ /dev/null
@@ -1,73 +0,0 @@
-site:
- privacy_policy: プライバシーポリシー
-
- gdpr_dialog:
- title: このウェブサイトはクッキーを使用します
- text: 私たちはあなたの選択を保存するために、クッキーやローカルストレージなどのブラウザ技術を使用しています。プライバシーポリシー と 利用規約 に同意する必要があります。
- accept: 受け入れる
- cancel: キャンセル
-
- toolbar:
- lang_switcher:
- cta_text: 私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
- footer_text: 対応する言語に翻訳されているコンテンツの量
- old_version: 古いバージョンが公開されており、バックポートが必要です。
- logo:
- normal:
- svg: sitetoolbar__logo_en.svg
- width: 200 # 171
- normal-white:
- svg: sitetoolbar__logo_en-white.svg
- small:
- svg: sitetoolbar__logo_small_en.svg
- width: 70
- small-white:
- svg: sitetoolbar__logo_small_en-white.svg
- sections:
- - slug: ''
- url: '/'
- title: 'チュートリアル'
- - slug: 'courses'
- title: 'コース'
- buy_ebook_extra: '購入する'
- buy_ebook: 'EPUB/PDF'
- search_placeholder: 'チュートリアル内を検索'
- search_button: '検索'
-
- public_profile: Public profile
- account: Account
- notifications: Notifications
- admin: Admin
- logout: Logout
-
- sorry_old_browser: すみません、IE<10 はサポートしていないため新しいブラウザを使用してください。
- contact_us: コンタクトをとる
- about_the_project: プロジェクトについて
- ilya_kantor: Ilya Kantor
- comments: コメント
- loading: ロード中...
- search: 検索
- share: シェア
- read_before_commenting: コメントをする前にこれを読んでください…
-
- meta:
- description: '現代の JavaScript チュートリアル: クロージャ、ドキュメント、イベント、オブジェクト指向プログラミングなどを含む、サンプルとタスクを使ったシンプルで詳細な説明です。'
-
- tablet-menu:
- choose_section: セクションを選択
- search_placeholder: チュートリアル内を検索
- search_button: 検索
-
- comment:
- help:
- - 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
- - 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
- - あなたが記事の中で理解できないことがあれば、詳しく説明してください。
-
- edit_on_github: GitHubで編集
- error: エラー
- close: 閉じる
-
- hide_forever: 永久に隠す
- hidden_forever: この情報はこれ以上表示されることはありません。
-
diff --git a/locales/ko.yml b/locales/ko.yml
deleted file mode 100644
index e3a9b4b..0000000
--- a/locales/ko.yml
+++ /dev/null
@@ -1,73 +0,0 @@
-site:
- privacy_policy: 개인정보 취급방침
-
- gdpr_dialog:
- title: 본 사이트는 쿠키를 사용합니다.
- text: 본 사이트는 쿠키, 로컬 스토리지 등의 기술을 사용해 사용자 정보를 수집합니다. 사이트를 이용하려면 개인정보 취급방침과 회원이용 약관에 동의해야 합니다.
- accept: 동의
- cancel: 거부
-
- toolbar:
- lang_switcher:
- cta_text: 본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
- footer_text: 얼마나 많은 콘텐츠가 해당 언어로 번역되었는지
- old_version: 튜토리얼 구 버전은 이미 배포되었습니다. 개정이 진행 중입니다.
- logo:
- normal:
- svg: sitetoolbar__logo_en.svg
- width: 200 # 171
- normal-white:
- svg: sitetoolbar__logo_en-white.svg
- small:
- svg: sitetoolbar__logo_small_en.svg
- width: 70
- small-white:
- svg: sitetoolbar__logo_small_en-white.svg
- sections:
- - slug: ''
- url: '/'
- title: '튜토리얼'
- - slug: '코스'
- title: '코스'
- buy_ebook_extra: '구매'
- buy_ebook: 'EPUB/PDF'
- search_placeholder: 'javascript.info에서 검색하기'
- search_button: '검색'
-
- public_profile: 공개 프로필
- account: 계정
- notifications: 알림
- admin: 관리자
- logout: 로그아웃
-
- sorry_old_browser: IE10 미만의 브라우저는 지원하지 않습니다. 최신 버전 브라우저를 사용해주세요.
- contact_us: 연락처
- about_the_project: 프로젝트 설명
- ilya_kantor: Ilya Kantor
- comments: 댓글
- loading: 로딩중...
- search: 검색
- share: 공유
- read_before_commenting: 댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
-
- meta:
- description: '모던 자바스크립트 튜토리얼은 클로저, 문서 객체 모델, 이벤트, 객체 지향 프로그래밍 등의 다양한 주제에 대한 설명과 예시, 과제를 담고 있습니다.'
-
- tablet-menu:
- choose_section: 섹션 선택
- search_placeholder: 튜토리얼 내에서 검색
- search_button: 검색
-
- comment:
- help:
- - 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 할 것이 있다면 댓글 대신 이슈를 만들어주세요.
- - 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
- - 댓글에 한 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.
-
- edit_on_github: GitHub에서 수정하기
- error: 에러
- close: 종료
-
- hide_forever: 영구적으로 숨기기
- hidden_forever: 이제 이 정보는 더 이상 나타나지 않습니다.
-
diff --git a/locales/ru.yml b/locales/ru.yml
deleted file mode 100755
index e9d499a..0000000
--- a/locales/ru.yml
+++ /dev/null
@@ -1,75 +0,0 @@
-site:
- privacy_policy: Privacy policy
-
- toolbar:
- lang_switcher:
- cta_text: Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на свой язык
- footer_text: количество контента, переведенное на соотвествующий язык
- old_version: Опубликована полная, но предыдущая версия учебника.
- logo:
- normal:
- svg: sitetoolbar__logo_ru.svg
- width: 171
- normal-white:
- svg: sitetoolbar__logo_ru-white.svg
- small:
- svg: sitetoolbar__logo_small_ru.svg
- width: 80
- small-white:
- svg: sitetoolbar__logo_small_ru-white.svg
- sections:
- - slug: 'tutorial'
- url: '/'
- title: 'Учебник'
- - slug: 'courses'
- title: 'Курсы'
- - url: 'https://javascript.ru/forum/'
- title: 'Форум'
- - url: 'https://es5.javascript.ru'
- title: 'ES5'
- - slug: 'quiz'
- title: 'Тесты знаний'
- - slug: 'jobs'
- title: 'Стажировки'
- buy_ebook_extra: 'Купить'
- buy_ebook: 'EPUB/PDF'
- search_placeholder: 'Искать на Javascript.ru'
- search_button: 'Найти'
-
- public_profile: Публичный профиль
- account: Аккаунт
- notifications: Уведомления
- admin: Админ
- logout: Выйти
-
- sorry_old_browser: Извините, IE<10 не поддерживается, пожалуйста используйте более новый браузер.
- contact_us: связаться с нами
- about_the_project: о проекте
- ilya_kantor: Илья Кантор
- comments: Комментарии
- loading: Загружается...
- search: Искать
- share: Поделиться
- read_before_commenting: перед тем как писать…
-
- tablet-menu:
- choose_section: Выберите раздел
- search_placeholder: Поиск в учебнике
- search_button: Поиск
-
- comment:
- help:
- - Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
- - Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
- - Если что-то непонятно в статье — пишите, что именно и с какого места.
-
- meta:
- description: 'Современный учебник JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.'
-
- edit_on_github: Редактировать на GitHub
- error: ошибка
- close: закрыть
-
- hide_forever: не показывать
- hidden_forever: Эта информация больше не будет выводиться.
-
diff --git a/locales/tr.yml b/locales/tr.yml
deleted file mode 100644
index 3176cb9..0000000
--- a/locales/tr.yml
+++ /dev/null
@@ -1,70 +0,0 @@
-site:
- privacy_policy: Gizlilik Politikası
- terms: kullanım şartları
-
- gdpr_dialog:
- title: Bu websitesi çerez kullanmaktadır.
- text: Çerez, yerel depolama ile sizin tercihlerinizi saklamaktayız. Bunları yapabilmemiz için Gizlilik Politikasını ve kullanım şartlarını onaylamalısınız.
- accept: Kabul et
- cancel: İptal
-
- toolbar:
- lang_switcher:
- cta_text: >
- Bu açık-kaynaklı projenin tüm dünyada kullanılabilir olmasını istiyoruz.
-Kendi dilinizde çeviriye yardım edebilirsiniz!
- footer_text: İçeriğin yüzde kaçı çevirildi. - old_version: Eski versiyon yayınlandı, eskisine taşıma yapılması lazım. - logo: - normal: - svg: sitetoolbar__logo_en.svg - width: 200 # 171 - normal-white: - svg: sitetoolbar__logo_en-white.svg - small: - svg: sitetoolbar__logo_small_en.svg - width: 70 - small-white: - svg: sitetoolbar__logo_small_en-white.svg - sections: - buy_ebook_extra: 'Satın al' - buy_ebook: 'EPUB/PDF' - search_placeholder: "Javascript.info\'da ara" - search_button: 'Ara' - - public_profile: Genel Profil - account: Hesap - notifications: Bildirimler - admin: Yönetici - logout: Çıkış - - sorry_old_browser: Üzgünüz, IE<10 desteklenmemektedi lütfen daha yeni bir tarayıcı kullanın. - contact_us: iletişime geçin - about_the_project: proje hakkında - ilya_kantor: Ilya Kantor - comments: Yorumlar - loading: Yükleniyor... - search: Ara - share: Paylaş - read_before_commenting: yorum yapmadan önce lütfen okuyun... - last_updated_at: "Son güncelleme #{date}" - meta: - description: 'Modern JavaScript Eğitimi: basit, fakat detaylı açıklamalar ve görevler ile anlatılmıştır. Closures, document, events ve nesne yönelimli programlama üzerine bölümleri bulunmaktadır' - - tablet-menu: - choose_section: Bölüm seçiniz - search_placeholder: Eğitimde ara - search_button: Ara - - comment: - help: - - Eğer geliştirme ile alakalı bir öneriniz var ise yorum yerine github konusu gönderiniz. - - Eğer makalede bir yeri anlamadıysanız lütfen belirtiniz. - - Koda birkaç satır eklemek için<code> kullanınız, birkaç satır eklemek için ise <pre> kullanın. Eğer 10 satırdan fazla kod ekleyecekseniz plnkr kullanabilirsiniz)
-
- edit_on_github: Github'da düzenle
- error: hata
- close: kapat
-
- hide_forever: kalıcı olarak gizle
- hidden_forever: Bu bilgi artık görünmeyecektir.
diff --git a/locales/zh.yml b/locales/zh.yml
deleted file mode 100644
index 5daa8bf..0000000
--- a/locales/zh.yml
+++ /dev/null
@@ -1,73 +0,0 @@
-site:
- privacy_policy: 隐私政策
-
- gdpr_dialog:
- title: 本网站使用 cookie
- text: 我们使用 cookie 和本地存储等浏览器技术来存储你的偏好设置。你需要接受我们的 隐私政策 和本网站的 其他条款。
- accept: 接受
- cancel: 取消
-
- toolbar:
- lang_switcher:
- cta_text: 我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 翻译为你所掌握的语言 对应的版本。
- footer_text: 多少比重的内容已经被翻译成了相应的语言。
- old_version: 旧版本已发布，需要向后移植。
- logo:
- normal:
- svg: sitetoolbar__logo_en.svg
- width: 200 # 171
- normal-white:
- svg: sitetoolbar__logo_en-white.svg
- small:
- svg: sitetoolbar__logo_small_en.svg
- width: 70
- small-white:
- svg: sitetoolbar__logo_small_en-white.svg
- sections:
- - slug: ''
- url: '/'
- title: '教程'
- - slug: '课程'
- title: '课程'
- buy_ebook_extra: '购买'
- buy_ebook: 'EPUB/PDF'
- search_placeholder: '在 Javascript.info 网站中搜索'
- search_button: '搜索'
-
- public_profile: 公开资料
- account: 账号
- notifications: 通知
- admin: 管理员
- logout: 登出
-
- sorry_old_browser: 很抱歉，我们不支持 IE<10 等浏览器，请使用一个更新版本的浏览器。
- contact_us: 联系我们
- about_the_project: 关于本项目
- ilya_kantor: Ilya Kantor
- comments: 评论
- loading: 加载中...
- search: 搜索
- share: 分享
- read_before_commenting: 在评论之前先阅读本内容…
-
- meta:
- description: '现代 JavaScript 教程：有关示例和任务的简单但详细的解释包括：闭包、文档和事件，以及面向对象编程等。'
-
- tablet-menu:
- choose_section: 选择章节
- search_placeholder: 在教程中搜索
- search_button: 搜索
-
- comment:
- help:
- - 欢迎你在文章下添加补充内容、提出你的问题或回答提出的问题。
- - 使用 <code> 标签插入几行代码，对于多行代码 — 可以使用 <pre>，对于超过十行的代码 — 建议使用沙箱（plnkr、JSBin 和 codepen 等）。
- - 如果你无法理解文章中的内容 — 请详细说明。
-
- edit_on_github: 在 GitHub 上编辑
- error: 错误
- close: 关闭
-
- hide_forever: 永久隐藏
- hidden_forever: 此信息将不再显示。
-
diff --git a/modules/config/index.js b/modules/config/index.js
index 50feaaf..0c324f4 100755
--- a/modules/config/index.js
+++ b/modules/config/index.js
@@ -39,7 +39,7 @@ let config = module.exports = {
adminKey: secret.adminKey,
certDir: path.join(secret.dir, 'cert'),
-
+
lang: lang,
plnkrAuthId: secret.plnkrAuthId,
@@ -58,7 +58,7 @@ let config = module.exports = {
// public files, served by nginx
publicRoot: path.join(process.cwd(), 'public', lang),
// private files, for expiring links, not directly accessible
- tutorialRoot: env.TUTORIAL_ROOT || path.join(process.cwd(), 'repo', `${env.TUTORIAL_LANG || lang}.javascript.info`),
+ tutorialRoot: env.TUTORIAL_ROOT || path.join(process.cwd(), 'repo', `${env.TUTORIAL_LANG || lang}.mysql`),
tmpRoot: path.join(process.cwd(), 'tmp', lang),
// js/css build versions
cacheRoot: path.join(process.cwd(), 'cache', lang),
diff --git a/modules/frontpage/templates/blocks/_frontpage-content/index.pug b/modules/frontpage/templates/blocks/_frontpage-content/index.pug
index a7c43ea..c140c91 100755
--- a/modules/frontpage/templates/blocks/_frontpage-content/index.pug
+++ b/modules/frontpage/templates/blocks/_frontpage-content/index.pug
@@ -19,29 +19,10 @@ mixin frontpage-content(data)
+b.frontpage-content
+e.container
- - let folder = tutorialTree.bySlug('js')
+ - let folder = tutorialTree.bySlug('performance')
+e.inner
+e.part= t('tutorial.part', {num: 1})
+e.title= folder.title
- +e.description!= topArticlesRendered.js.content
+ +e.description!= topArticlesRendered.performance.content
+b.list
+partList(folder.children)
-
- +e.container
- - let folder = tutorialTree.bySlug('ui')
- +e.inner
- +e.part= t('tutorial.part', {num: 2})
- +e.title= folder.title
- +e.description!= topArticlesRendered.ui.content
- +b.list
- +partList(folder.children)
-
-
- +e.container
- +e.inner
- +e.part= t('tutorial.part', {num: 3})
- +e.title= t('tutorial.part3.title')
- +e.description!= t('tutorial.part3.content')
- +b.list
- +partList(tutorialTree.roots.slice(2))
-
diff --git a/modules/styles/blocks/00-variables/icons.styl b/modules/styles/blocks/00-variables/icons.styl
old mode 100755
new mode 100644
index 436faf6..846702a
--- a/modules/styles/blocks/00-variables/icons.styl
+++ b/modules/styles/blocks/00-variables/icons.styl
@@ -417,4 +417,12 @@ $font-buy-ebook
$font-qr-code
@extend $font-icon
- content '\E865'
\ No newline at end of file
+ content '\E865'
+
+$font-down-dir
+ @extend $font-icon
+ content '\E808'
+
+$font-up-dir
+ @extend $font-icon
+ content '\E83C'
\ No newline at end of file
diff --git a/modules/styles/blocks/00-variables/theme-variables.styl b/modules/styles/blocks/00-variables/theme-variables.styl
new file mode 100755
index 0000000..acbe98f
--- /dev/null
+++ b/modules/styles/blocks/00-variables/theme-variables.styl
@@ -0,0 +1,214 @@
+:root {
+ --white: #fff
+
+ --grey-120: #313130
+ --grey-46: #716f6e
+ --grey-30: #908e8d
+ --grey-16: #c6c4c2
+ --grey-10: #f7f4f3
+ --grey-11: #e9e6e4
+ --grey-13: #d9d6d5
+
+ --redBrand-46: #c4433a
+ --redBrand-30: #df6c5d
+ --redBrand-12: #fcd5ce
+
+ --blueAction-30: #748dcd
+ --blueAction-46: #436ebd
+
+ --green-46: #407b5a
+ --green-30: #4f9e72
+ --green-16: #91c2a3
+ --green-12: #cde3d5
+ --green-10: #f0f7f2
+
+ --orange-30: #df6e41
+
+ --red-10: #feeeed
+ --red-12: #fad5d2
+ --red-30: #dc6968
+ --red-46: #c73943
+
+ --yellow-46: #a15d00
+ --yellow-30: #d07a00
+ --yellow-10: #fff4e4
+ --yellow-11: #fee3d4
+
+ --blue-46: #0d75a1
+ --blue-30: #4b94be
+ --blue-12: #d0e0ed
+ --blue-10: #ecf2f8
+
+ --foregroundInverted: var(--grey-10)
+ --foregroundDefault: var(--grey-120)
+ --foregroundAlt: var(--grey-46)
+ --foregroundSubtle: var(--grey-30)
+ --foregroundAccent: var(--redBrand-46)
+ --foregroundAccentHover: var(--redBrand-30)
+ --foregroundAction: var(--blueAction-46)
+ --foregroundConstructive: var(--green-46)
+ --foregroundConstructiveAlt: var(--green-30)
+ --foregroundCallout: var(--orange-30)
+ --foregroundCalloutAlt: var(--yellow-30)
+ --foregroundInformation: var(--blue-30)
+ --foregroundPrimaryCTA: var(--white)
+
+ // borders
+ --borderPrimary: var(--grey-11)
+ --borderSecondary: var(--grey-10)
+ --borderAlt: var(--yellow-10)
+ --borderConstructive: var(--green-10)
+ --borderAccent: var(--redBrand-12)
+ --borderAccentHover: var(--redBrand-30)
+ --borderAction: var(--blueAction-30)
+ --borderImportant: var(--grey-10)
+
+ // backgrounds
+ --backgroundBase: var(--white)
+ --backgroundAlt: var(--grey-10)
+ --backgroundAltHover: var(--grey-11)
+ --backgroundInverted: var(--grey-120)
+ --backgroundElevated1: var(--white)
+ --backgroundElevated2: var(--white)
+
+ --backgroundConstructive: var(--green-46)
+ --backgroundConstructiveAlt: var(--green-30)
+
+ --backgroundCalloutAlt: var(--yellow-10)
+
+ --backgroundTextWarningBanner: var(--backgroundCalloutAlt)
+
+ --backgroundTextHighlight: var(--yellow-11)
+
+ --backgroundProgressBar: var(--grey-13);
+ --backgroundProgressBarValue: var(--green-16);
+
+ --foregroundSidebarLink: var(--foregroundDefault)
+ --lessonsListBorder: var(--borderSecondary)
+ --iframeBg: var(--white)
+
+ --backgroundPrismLineHighlight: #f5e7c6
+ --prismBlockBg: var(--grey-10)
+ --prismLineNumbersBg: #e7e5e3
+ --prismColor: var(--foregroundDefault)
+
+ --prismTokenComment: #708090
+ --prismTokenConstant: var(--foregroundDefault)
+ --prismTokenPunctuation: #708090
+ --prismTokenSymbols: #905
+ --prismTokenSymbolsAlt: #690
+ --prismTokenOperator: #a67f59
+ --prismTokenAtRule: #07a
+ --prismTokenKeywordControl: #07a
+ --prismTokenFunctionAndClassname: #DD4A68
+ --prismTokenError: #DD4A68
+ --prismTokenRegex: #e90
+ --prismTokenClassname: #DD4A68
+ --prismTokenVariable: #e90
+ --prismTokenKeyword: #07a
+ --prismTokenImportant: #e90
+ --prismTokenTagPunctuation: #999
+ --prismTokenCdata: #708090
+ --prismTokenAttrvalue: #07a
+
+ --gradientFadeOutLight: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,1) 80%)
+ --gradientFadeOutDark: linear-gradient(to bottom, rgba(35,37,41,0) 0, rgba(35,37,41,1) 80%)
+ --gradientFadeOut: var(--gradientFadeOutLight)
+}
+
+html[data-theme="dark"] {
+ --grey-120: #e2e3e7
+ --grey-66: #c4c7cf
+ --grey-46: #868d9a
+ --grey-30: #696e79
+ --grey-16: #41454c
+ --grey-13: #35383f
+ --grey-11: #292c31
+ --grey-10: #232529
+
+ --redBrand-46: #e3796a
+ --redBrand-30: #d2483e
+ --redBrand-12: #602620
+
+ --blueAction-46: #84a0ef
+ --blueAction-30: #427ae7
+
+ --green-46: #5fa67d
+ --green-30: #448460
+ --green-16: #315841
+ --green-12: #253e2f
+ --green-10: #1f3428
+
+ --orange-30: #ba5d38
+
+ --yellow-46: #cf9a69
+ --yellow-30: #b2722a
+ --yellow-10: #38230b
+ --yellow-11: #462b0d
+
+ --blue-46: #78aacd
+ --blue-30: #2a88b7
+ --blue-12: #193c50
+ --blue-10: #162936
+
+
+ --red-10: #441b1b
+ --red-12: #632425
+ --red-30: #d55759
+ --red-46: #e88b88
+
+
+// Semantics
+
+ // backgrounds
+ --backgroundBase: var(--grey-10)
+ --backgroundAlt: var(--grey-11)
+ --backgroundAltHover: var(--grey-13)
+ --backgroundElevated1: var(--grey-13)
+ --backgroundElevated2: var(--grey-16)
+
+ --foregroundInverted: var(--grey-120)
+ --foregroundAccent: var(--redBrand-46)
+ --foregroundAccentHover: var(--redBrand-30)
+ --foregroundSidebarLink: var(--foregroundDefault)
+ --foregroundPrimaryCTA: var(--grey-10)
+ --lessonsListBorder: var(--borderPrimary)
+
+ // borders
+ --borderImportant: var(--grey-13)
+ --borderPrimary: var(--grey-13)
+ --borderAccent: var(--redBrand-12)
+
+ --backgroundProgressBar: var(--grey-13)
+ --backgroundProgressBarValue: var(--grey-30)
+ --iframeBg: var(--grey-66)
+ --backgroundPrismLineHighlight: #44475A
+ --prismBlockBg: #282a36
+ --prismLineNumbersBg: var(--prismBlockBg)
+ --prismColor: #F8F8F2
+
+ --backgroundCalloutAlt: #462900
+
+ --backgroundTextHighlight: var(--backgroundAlt)
+
+ --prismTokenComment: #6272a4
+ --prismTokenConstant: #9876aa
+ --prismTokenPunctuation: #F8F8F2
+ --prismTokenSymbols: #BD93F9
+ --prismTokenSymbolsAlt: #F1FA8C
+ --prismTokenOperator: #FF79C6
+ --prismTokenAtRule: #ce9178
+ --prismTokenKeywordControl: #c586c0
+ --prismTokenFunctionAndClassname: #8BE9FD
+ --prismTokenRegex: #d16969
+ --prismTokenClassname: #8BE9FD
+ --prismTokenVariable: #9cdcfe
+ --prismTokenKeyword: #FF79C6
+ --prismTokenImportant: #FF79C6
+ --prismTokenInterpolation: #F8F8F2
+ --prismTokenTagPunctuation: #808080
+ --prismTokenCdata: #808080
+ --prismTokenAttrvalue: #ce9178
+
+ --gradientFadeOut: var(--gradientFadeOutDark)
+}
\ No newline at end of file
diff --git a/modules/styles/blocks/00-variables/variables.styl b/modules/styles/blocks/00-variables/variables.styl
index c02eac5..daaa96c 100755
--- a/modules/styles/blocks/00-variables/variables.styl
+++ b/modules/styles/blocks/00-variables/variables.styl
@@ -1,3 +1,52 @@
+@import "./theme-variables";
+
+:root {
+ --color_red: #b80000;
+ --color_green: #469269;
+ --color_black: #000;
+ --color_orange: #f8ab47;
+ --color_orange_light: #fdc073;
+ --color-red-accent: #d44242;
+
+ --link_color: #0059b2;
+ --light_link_color: #3b86c4;
+ --alternate_link_color: #2974bb;
+ --link_color_new: #3a8aed;
+ --link_hover_color: #ba1000;
+ --link_visited_color: #551a8b;
+ --navigation_link_color: #696664;
+
+ --color-grey-25: #3b3b3b;
+ --color-grey-60: #919191;
+ --color-grey-80: #c6c6c6;
+ --color-grey-90: #e2e2e2;
+
+ --text_yellow: #fffed7;
+ --text_grey_dark: #373636;
+ --text_courses_dark: #404040;
+
+ --color: #333;
+ --code_color: #333;
+ --gray_color: #666;
+ --light_gray_color: #999;
+ --ultralight_gray_color: #e1e1e1;
+ --separator_color: #dfdfd0;
+ --secondary_color: #b20600;
+ --hover_color_correction: 25%;
+
+ --background: #fff;
+ --background_light: #eee;
+ --background_blocks: #f5f2f0;
+ --background_yellow_light: #f6f4eb;
+ --background_yellow_dark: #ede9d8;
+
+ --errorColor: #cc5b4d;
+}
+
+html[data-theme="dark"] img {
+ filter: brightness(0.8) contrast(1.2);
+}
+
@import 'nib/border'
@import 'nib/clearfix'
@import 'nib/color-image'
@@ -17,6 +66,7 @@ color_green = #469269
color_black = #000
color_orange = #F8AB47
color_orange_light = #FDC073
+color-red-accent = #D44242
link_color = #0059B2
light_link_color = #3B86C4
@@ -26,6 +76,11 @@ link_hover_color = #BA1000
link_visited_color = #551A8B
navigation_link_color = #696664
+color-grey-25 = #3b3b3b
+color-grey-60 = #919191
+color-grey-80 = #c6c6c6
+color-grey-90 = #e2e2e2
+
text_yellow = #FFFED7
text_grey_dark = #373636
text_courses_dark = #404040
@@ -45,16 +100,33 @@ background_blocks = #F5F2F0
background_yellow_light = #F6F4EB
background_yellow_dark = #EDE9D8
+$errorColor = #CC5B4D
+
size = 14px
lineheight = 20px
// System variables
// Typefaces
-font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
-secondary_font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
-fixed_width_font = 'Consolas', 'Lucida Console', 'Menlo', 'Monaco', monospace
-font_en = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
+if env=='ebook'
+ if lang=='ko'
+ font = 'Nanum Gothic'
+ secondary_font = 'Nanum Gothic'
+ fixed_width_font = 'Nanum Gothic Coding'
+ else
+ font = sans-serif
+ secondary_font = sans-serif
+ fixed_width_font = 'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', monospace
+
+else
+ if lang=='ja'
+ font = BlinkMacSystemFont, -apple-system, "Hiragino Kaku Gothic ProN","メイリオ", sans-serif
+ secondary_font = BlinkMacSystemFont, -apple-system, "Hiragino Kaku Gothic ProN","メイリオ", sans-serif
+ else
+ font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
+ secondary_font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
+
+ fixed_width_font = 'Consolas', 'Lucida Console', 'Menlo', 'Monaco', monospace
// Font sizes
font_size_xs = 12px
@@ -128,6 +200,7 @@ media_step_2 = 1170px
media_step_3 = 1220px
largescreen = 1420px
+tablet_large = '(max-width: 1024px)'
tablet_medium = '(max-width: 890px)'
tablet = '(max-width: 840px)'
phone = '(max-width: 568px)'
@@ -141,7 +214,7 @@ sitetoolbar_secondary_bg = #F5F2F0
sitetoolbar_secondary_link = #498CBE
$yellow-border
- border-radius 10px
- border 3px solid #F2E7B3
+ border-radius 10px
+ border 3px solid #F2E7B3
@require "../mixins/*"
diff --git a/modules/styles/blocks/05-flex-column/flex-column.styl b/modules/styles/blocks/05-flex-column/flex-column.styl
new file mode 100755
index 0000000..6b62ae6
--- /dev/null
+++ b/modules/styles/blocks/05-flex-column/flex-column.styl
@@ -0,0 +1,20 @@
+.flex-column
+ display flex
+ flex-direction column
+/*
+ &_width-limit-wide
+ max-width 940px
+ margin 0 auto
+
+ &_course-detail
+ position relative
+ max-width 940px
+ margin 0 auto
+ box-sizing border-box
+ padding-top 24px
+ padding-right 323px
+
+ @media screen and (max-width 767px)
+ padding-right 0
+ padding-top 0
+*/
\ No newline at end of file
diff --git a/modules/styles/blocks/06-formatted/index.styl b/modules/styles/blocks/06-formatted/index.styl
new file mode 100755
index 0000000..e9ad331
--- /dev/null
+++ b/modules/styles/blocks/06-formatted/index.styl
@@ -0,0 +1,144 @@
+.formatted
+ color var(--foregroundDefault)
+
+ ul,
+ ol
+ padding-left 21px
+ margin 22px 0 // уравниваем с абзацными отступами
+
+ > li
+ margin: .3em 0
+
+ + p
+ margin-top 12px
+
+ // для вложенных списоков в статьях
+ ul ul, ul ol, ol ul, ol ol
+ margin-top 0
+ margin-bottom 0
+
+ ul > li::before
+ content "●"
+ float left // not position: absolute because the latter doesn't show in iBooks (epub)
+ margin-left -20px
+ color var(--foregroundDefault)
+ font-size 8px
+
+ code
+ /* disabled the line below for code in colored lines to show up correctly */
+ /* did it break something? fix it there! */
+ /* color code_color */
+ font-family fixed_width_font
+ padding 2px 4px
+ background var(--prismBlockBg)
+ border-radius 2px
+ color var(--foregroundAlt)
+
+ @media all and (max-width: 740px)
+ padding 1px 4px
+
+ /* for regexps */
+ code.pattern
+ border-bottom 1px solid var(--borderAccent)
+
+ code.subject
+ border-bottom 1px solid var(--borderAction)
+
+ code.match
+ border-bottom 1px solid var(--borderConstructive)
+
+ span.shortcut
+ white-space nowrap
+
+ span.shortcut code
+ border 1px solid var(--borderPrimary)
+ padding 0 1px
+ display inline-block
+ margin 1px 0
+
+ h1
+ margin-bottom .5em
+ /* FIXME пока некрасиво с этим: page-break-before: always; */
+
+ h2
+ margin 24px 0 12px
+ font-size 24px
+ line-height 32px
+ font-family font
+ position relative
+
+ h3,
+ h4
+ margin 30px 0 22px
+
+ h3
+ font-size 128%
+ line-height 120%
+
+ h4
+ font-size 114%
+ line-height 125%
+
+ // h5 actually appears only in ebook
+ h5
+ font-size 110%
+ line-height 125%
+
+ // исключения, полные отступы смотрятся неряшливо
+ h2 + h3,
+ h3 + h4
+ margin-top -8px
+
+ p
+ margin 0 0 12px
+
+ + ol
+ margin-top 0
+
+ + ul
+ margin-top 0
+
+ table
+ width 100%
+ border-collapse collapse
+ font-size 13px
+ margin 30px 0
+
+ & tbody
+ border 0
+
+ & tr
+ border-bottom 1px solid var(--borderPrimary)
+
+ & th
+ text-align left
+
+ & th,
+ & td,
+ & caption
+ padding 2px 1em 2px 5px
+
+ & tr:nth-child(even)
+ background var(--backgroundAlt)
+
+ & code
+ font-weight inherit
+
+ & tr:first-child th
+ border-bottom 3px solid var(--borderPrimary)
+ vertical-align bottom
+
+ & caption
+ text-align left
+
+ @media (min-width: largescreen)
+ font-size: 15px;
+
+ dl
+ margin 1em 0
+
+ dt
+ font-weight 700
+
+ dd
+ margin 8px 0 22px 0px
diff --git a/modules/styles/blocks/main/main.styl b/modules/styles/blocks/main/main.styl
index b306d69..06c5388 100755
--- a/modules/styles/blocks/main/main.styl
+++ b/modules/styles/blocks/main/main.styl
@@ -1,350 +1,304 @@
// we use placeholder selector to make it easier to rename the block
// we can't extend selectors with &, so we don't use them for extends
$main-loud
- font-size 15px
- font-weight 700
- line-height 21px
- margin 1em 0
+ font-size font_size_m
+ font-weight 700
+ line-height line_height_l
+ margin 1em 0
.main
- margin auto
- padding 0 0 35px
+ margin auto
+ padding 0 0 35px
+
+ &_width-limit
+ max-width max_width
+
+ &_width-limit-wide
+ max-width max_width_wide
+
+ &_width-limit-wider
+ max-width max_width_extra_wide
+
+ &_align-left
+ margin auto 0
- &_width-limit
- max-width max_width
+ &.main_width-limit-list
+ max-width 960px
- &_width-limit-wide
- max-width max_width_wide
+ &_no-padding
+ padding-bottom 0
+
+ &_white-page
+ margin-top 56px
+ padding 0 56px 53px
+ box-sizing border-box
+ background var(--backgroundBases)
+
+ &_frontpage
+ & .comments
+ padding 0 16px
+ max-width calc(984px + 16 * 20)
+
+ & .article-tablet-foot
+ padding 0 16px
+
+ &::before,
+ &__header::before
+ content ""
+ display table // убираем margin collapse
+
+ &__header .breadcrumbs
+ margin 0 0 12px 0
+ padding 0
+
+ &__header
+ margin 40px 0 16px 0
+
+ &__header_center
+ border 0
+
+ &__header_center &__header-title,
+ &__header_center-desktop &__header-title,
+ &__header_center .breadcrumbs
+ text-align center
+
+ & &__header-title
+ font 700 32px/40px secondary_font
+ margin 0 auto 12px auto
+ padding 0
+
+ & &__header-title:not(::first-line)
+ color var(--foregroundConstructive)
+
+ & &__header-title:only-child
+ padding-bottom 5px
+
+ &__username
+ font-style inherit
+ font-weight inherit
+ color secondary_color
+
+ &__header-nav
+ float right
+
+ &__lesson-nav
+ display table
+ float right
+
+ &__lesson-nav-prev,
+ &__lesson-nav-next
+ display table-cell
+
+ &__lesson-nav-prev
+ padding-right 15px
+ border-right 2px solid var(--borderAlt)
+
+ &__lesson-nav-next
+ padding-left 15px
+
+ &__lesson-nav-prev:last-child
+ border none
+ padding-right 0
+
+ &__lesson-nav kbd
+ font-size 11px
+ color var(--foregroundAlt)
+ font inherit
+
+ &__lesson-nav-arr
+ position relative
+ top -.1em
+
+ &__lesson-nav-link
+ color var(--foregroundAlt)
+ text-decoration underline
+
+ h2,
+ h3,
+ h4
+ position relative
+
+ h1 code,
+ h1 a,
+ h2 code,
+ h2 a,
+ h3 code,
+ h3 a,
+ h4 code,
+ h4 a
+ font inherit
+ color inherit
+ text-decoration none
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5
+ page-break-after avoid
+
+ h1 + p,
+ h2 + p,
+ h3 + p,
+ h4 + p,
+ h5 + p
+ page-break-before avoid
+
+ & h2 &__anchor,
+ & h3 &__anchor,
+ & h4 &__anchor,
+ & h2 &__anchor:before,
+ & h3 &__anchor:before,
+ & h4 &__anchor:before
+ transition unqufote('color') animation_duration
+
+ & h2 &__anchor:hover,
+ & h3 &__anchor:hover,
+ & h4 &__anchor:hover,
+ & h2 &__anchor:hover:before,
+ & h3 &__anchor:hover:before,
+ & h4 &__anchor:hover:before
+ color hoverize(color)
+
+ // .format_error - old code support?
+ .format_error
+ color var(--foregroundAccent)
+
+ div.format_error
+ border 1px solid var(--foregroundAccent)
+ padding 5px
+
+
+ .admin_link
+ float right
+ color var(--foregroundAlt)
+
+ &__anchor
+ var(--foregroundDefault)
+ outline 0
+
+ &__anchor::before
+ @extend $font-link
+ position absolute
+ right 100%
+ width 30px
+ text-align left
+ outline 0
+ color var(--foregroundDefault)
+ font-size 90%
+ line-height inherit
+ font-weight 400
+ opacity 0
+ transition opacity animation_duration
+
+ &__anchor:hover::before
+ opacity 1
+
+ &__anchor_noicon::before
+ display none
+ /*
+ figure
+ margin 30px 0
+ padding 30px
+ border 3px solid #F5F2F0
+ border-radius 6px
+ */
+ &__loud
+ @extend $main-loud
+
+ &__strong
+ @extend $main-loud
+ font-style italic
+ color var(--foregroundAccent)
+
+ &__footer
+ @extend $clearfix
+ background var(--backgroundAlt)
+ margin 30px 0 27px
+ padding 16px 40px 9px
+
+ .rating
+ margin-right 22px
+
+ .social
+ float right
+
+ &__footer-date,
+ &__footer-author,
+ &__footer-author a
+ color var(--foregroundAlt)
+ font 13px 'Open Sans', Helvetica, Arial, sans-serif
+
+ &__footer-date
+ margin-right 15px
+
+ &__footer-author
+ margin-right 10px
+
+ &__footer-star
+ position absolute
+ font-size 18px
+ color var(--foregroundSubtle)
+ margin 0 10px
+
+ &__footer-star::before
+ @extend $font-star
+ display inline-block
+ vertical-align middle
+ min-width 17px
+ min-height 19px
+
+ .clearfix
+ @extend $clearfix
+
+ [with-zone]::after
+ @extend $font-info-blank
+ font-size 18px
+ font-weight 400
+ color var(--foregroundSubtle)
+ margin-left 8px
+
+ @media tablet
+ padding 0 0 35px
+ &_white-page
+ margin-top 0
+ padding 0 16px 24px
+ max-width 100%
- &::before,
- &__header::before
- content ""
- display table // убираем margin collapse
+ &__header_center-desktop &__header-title
+ text-align left
- &__header .breadcrumbs
- margin 0 0 12px 0
- padding 0
+ @media phone
+ &
+ padding-bottom 0
&__header
- margin 40px 0 16px 0
-
- &__header_center
- border 0
-
- &__header_center &__header-title,
- &__header_center .breadcrumbs
- text-align center
-
- & &__header-title
- font 700 32px/40px secondary_font
- margin 0 auto 12px auto
- padding 0
-
- @media screen and (max-width 1180px)
- max-width 430px
-
- & &__header-title:not(::first-line)
- color green
-
- & &__header-title:only-child
- padding-bottom 5px
-
- &__username
- font-style inherit
- font-weight inherit
- color secondary_color
-
- &__header-nav
- float right
-
- &__lesson-nav
- display table
- float right
-
- &__lesson-nav-prev,
- &__lesson-nav-next
- display table-cell
-
- &__lesson-nav-prev
- padding-right 15px
- border-right 2px solid #f5f2f0
-
- &__lesson-nav-next
- if isRTL
- padding-right 15px
- else
- padding-left 15px
-
- &__lesson-nav-prev:last-child
- border none
- padding-right 0
-
- &__lesson-nav kbd
- font-size 11px
- color light_gray_color
- font: inherit
-
- &__lesson-nav-arr
- position relative
- top -.1em
-
- &__lesson-nav-link
- color #656565
- text-decoration underline
-
- ul,
- ol
- if isRTL
- padding-right 21px
-
- else
- padding-left 21px
- margin 22px 0 // уравниваем с абзацными отступами
-
- > li
- margin: .3em 0
-
- // для вложенных списоков в статьях
- ul ul, ul ol, ol ul, ol ol
- margin-top 0
- margin-bottom 0
-
- ul > li::before
- content "●"
- if isRTL
- float right
- margin-right -20px
- else
- float left // not position: absolute because the latter doesn't show in iBooks (epub)
- margin-left -20px
- color #000
- font-size 8px
-
- // TODO: h1 вне блока .main__header ??! Проверить, встречается ли
- h1
- margin-bottom .5em
- /* FIXME пока некрасиво с этим: page-break-before: always; */
-
- h2
- margin 24px 0 12px
- font-size 24px
- line-height 32px
- font-family font
- position relative
-
- h3,
- h4
- margin 30px 0 22px
-
- h3
- font-size 128%
- line-height 120%
-
- h4
- font-size 114%
- line-height 125%
-
- // h5 actually appears only in ebook
- h5
- font-size 110%
- line-height 125%
-
- // исключения, полные отступы смотрятся неряшливо
- h2 + h3,
- h3 + h4
- margin-top -8px
-
- h2,
- h3,
- h4
- position relative
-
- h2 &__anchor,
- h3 &__anchor,
- h4 &__anchor
- transition unquote('color') animation_duration
-
- h2 &__anchor:hover,
- h3 &__anchor:hover,
- h4 &__anchor:hover
- color hoverize(color)
-
- h1 code,
- h1 a,
- h2 code,
- h2 a,
- h3 code,
- h3 a,
- h4 code,
- h4 a
- font inherit
- color inherit
- text-decoration none
-
- h1,
- h2,
- h3,
- h4,
- h5
- page-break-after avoid
-
- h1 + p,
- h2 + p,
- h3 + p,
- h4 + p,
- h5 + p
- page-break-before avoid
-
- // .format_error - old code support?
- .format_error
- color red
-
- div.format_error
- border 1px solid red
- padding 5px
-
- .admin_link
- float right
- color gray
-
- &__anchor
- outline 0
-
- &__anchor::before
- @extend $font-link
- position absolute
- right 100%
- width 30px
- text-align left
- outline 0
- color #D8D8D8
- font-size 90%
- line-height inherit
- font-weight 400
- opacity 0
- transition opacity animation_duration
-
- &__anchor:hover::before
- opacity 1
-
- &__anchor_noicon::before
- display none
-
- code
- /* disabled the line below for code in colored lines to show up correctly */
- /* did it break something? fix it there! */
- /* color code_color */
- font-family fixed_width_font
- padding 2px 4px
- background #f5f2f0
- border-radius 2px
-
- /* for regexps */
- code.pattern
- border-bottom 1px solid red
-
- code.subject
- border-bottom 1px solid blue
-
- code.match
- border-bottom 1px solid green
-
- span.shortcut
- white-space nowrap
-
- span.shortcut code
- border 1px solid rgb(51,51,51)
- padding 0 1px
- display inline-block
- margin 1px 0
-
- p
- margin 0 0 12px
-
- // Is it really used?
- dl
- margin 1em 0
-
- dt
- font-weight 700
-
- dd
- margin 8px 0 22px 0px
- /*
- figure
- margin 30px 0
- padding 30px
- border 3px solid #F5F2F0
- border-radius 6px
- */
- &__loud
- @extend $main-loud
-
- &__strong
- @extend $main-loud
- font-style italic
- color #8C0000
-
- &__footer
- @extend $clearfix
- background #F5F5F2
- margin 30px 0 27px
- padding 16px 40px 9px
-
- .rating
- margin-right 22px
-
- .social
- float right
-
- &__footer-date,
- &__footer-author,
- &__footer-author a
- color #444
- font 13px Arial, Helvetica, sans-serif
-
- &__footer-date
- margin-right 15px
-
- &__footer-author
- margin-right 10px
-
- &__footer-star
- position absolute
- font-size 18px
- color #BBB
- margin 0 10px
-
- &__footer-star::before
- @extend $font-star
- display inline-block
- vertical-align middle
- min-width 17px
- min-height 19px
-
- .clearfix
- @extend $clearfix
-
- @media tablet
- padding 0 0 35px
-
- @media phone
-
- &
- padding-bottom 0
-
- & &__header-title
- font-size 34px
-
- @media (min-width: media_step_1)
- line-height 19px
+ &_jobs
+ margin-top 24px
+
+ &__header-title
+ font-size 34px
+
+ &__header_jobs &__header-title
+ font-size 24px
+ line-height 32px
+ color text_courses_dark
+
+ &_padding-bottom
+ padding-bottom 35px
+
+ @media (min-width: media_step_1)
+ line-height line_height_s
- @media (min-width: media_step_2)
- line-height 20px
+ @media (min-width: media_step_2)
+ line-height line_height_s
+ font-size font_size_m
- @media (min-width: media_step_3)
- line-height line_height_m
+ @media (min-width: media_step_3)
+ line-height line_height_l
+ font-size font_size_m
- @media (min-width: largescreen)
- font-size 16px
+ @media (min-width: largescreen)
+ font-size font_size_m
+ line-height line_height_l
diff --git a/modules/styles/blocks/page/page.styl b/modules/styles/blocks/page/page.styl
index 112c193..eac00eb 100755
--- a/modules/styles/blocks/page/page.styl
+++ b/modules/styles/blocks/page/page.styl
@@ -1,300 +1,345 @@
.page
- position: relative
- z-index: 0
- padding 0
+ position: relative
+ z-index: 0
+ padding 0
+
+ iframe
+ background var(--iframeBg)
+
+ #disqus_thread iframe
+ background transparent
+
+ &-popup
+ display flex
+ align-items center
+ justify-content center
+ min-height 100vh
+
+ &_sidebar_on
+ padding-left sidebar_width
+
+ &__sidebar
+ position fixed
+ top 0
+ bottom 0
+ left 0
+ transform translateX(-100%)
+
+ // используется при переключении видимости панели навигации
+ &_inner_padding &__inner
+ margin 0
+ padding 0 120px
+
+ &__inner
+ padding 0 16px
+
+ // анимация включается после аналаза localStorage.noSidebar
+ // и установке изначальных отступов, чтобы они не анимировались при этом
+ &_sidebar-animation-on
+ transition padding animation_duration
- .sidebar__toggle
- if isRTL
- left auto
- right 100%
- &_sidebar_on
- if isRTL
- padding-right sidebar_width
- else
- padding-left sidebar_width
-
- &__sidebar
- position fixed
- top 0
- bottom 0
- if isRTL
- right 0
- transform translateX(100%)
- else
- left 0
- transform translateX(-100%)
-
- // используется при переключении видимости панели навигации
- &__inner
- margin 0
- padding 0 120px
-
- // анимация включается после аналаза localStorage.noSidebar
- // и установке изначальных отступов, чтобы они не анимировались при этом
- &_sidebar-animation-on
- transition padding animation_duration
-
- &_sidebar-animation-on &__inner
- transition margin-top animation_duration
-
- &_sidebar-animation-on &__sidebar
- transition transform animation_duration
-
- // для отображения/скрытия сайдбара переключаем класс .page_sidebar_on у блока .page
- &_sidebar_on &__sidebar
- transform translateX(0)
-
- &_frontpage
- .main__header
- margin 20px 0 -30px 0
+ &_sidebar-animation-on &__inner
+ transition margin-top animation_duration
+
+ &_sidebar-animation-on &__sidebar
+ transition transform animation_duration
+
+ // для отображения/скрытия сайдбара переключаем класс .page_sidebar_on у блока .page
+ &_sidebar_on &__sidebar
+ transform translateX(0)
- &__nav
- position fixed
- top 50%
- width 81px
- height 90px
- margin-top -45px
- outline 0
+ &_profile
+ // always show sidebar in profile
+ padding-left sidebar_width
- & &__nav
- color #7d7d7d;
+ & ^[0]__inner
+ padding 0 40px
- &__nav:hover
- text-decoration none
+ &_profile-empty
+ padding-left 0
- &__nav_prev
- if isRTL
- right 0
- else
- left 0
- transition transform animation_duration, top animation_duration
+ &__nav
+ position fixed
+ top 50%
+ width 81px
+ height 90px
+ margin-top -45px
+ outline 0
- &__nav-text
- font-size 13px
- position absolute
- top 50%
- margin-top -33px
- box-sizing border-box
- width 100%
- text-align center
- white-space nowrap
+ & &__nav
+ color #7d7d7d;
- &__nav-text-shortcut
- color #c1c1c0
- visibility hidden
+ &__nav:hover
+ text-decoration none
- &__nav-text-arr
- position relative
- top -1px // мелочь, но смотрится аккуратнее
+ &__nav_prev
+ left 0
+ transition transform animation_duration, top animation_duration
- &__nav:hover &__nav-text-shortcut
- visibility visible
+ &__nav-text
+ font-size 13px
+ position absolute
+ top 50%
+ margin-top -33px
+ box-sizing border-box
+ width 100%
+ text-align center
+ white-space nowrap
- &__nav-text::before
- display block
- margin-bottom 5px
- font-size 36px
- min-height 68px
- line-height 64px
- color #7e7e7e
+ &__nav-text-shortcut
+ color #c1c1c0
+ visibility hidden
- &__nav:hover &__nav-text::before
- background rgba(216, 216, 216, .3)
+ &__nav-text-arr
+ position relative
+ top -1px // мелочь, но смотрится аккуратнее
- &__nav_prev &__nav-text::before
- if isRTL
- @extend $font-angle-right
- else
- @extend $font-angle-left
+ &__nav:hover &__nav-text-shortcut
+ visibility visible
- &__nav-text-alternate
- display none
+ &__nav-text::before
+ display block
+ margin-bottom 5px
+ font-size 36px
+ min-height 68px
+ line-height 64px
+ color var(--foregroundAlt)
- &_sidebar_on &__nav_prev
- if isRTL
- transform translateX(- sidebar_width)
- else
- transform translateX(sidebar_width)
+ &__nav:hover &__nav-text::before
+ background var(--backgroundAlt)
- &__nav_next
- left 0
- transition top animation_duration
+ &__nav_prev &__nav-text::before
+ @extend $font-chevron-left
+
+ &__nav-text-alternate
+ display none
+
+ &_sidebar_on &__nav_prev
+ transform translateX(sidebar_width)
- &__nav_next &__nav-text::before
- if isRTL
- @extend $font-angle-left
- else
- @extend $font-angle-right
+ &__nav_next
+ right 0
+ transition top animation_duration
+ &__nav_next &__nav-text::before
+ @extend $font-chevron-right
- &_ebook
- .page__inner
- padding 0
+ &__whitelist
+ background #fff
+ box-shadow 0 4px 34px rgba(0, 0, 0, 0.1)
+ padding 40px 48px
- .code-example
+ &_ebook
- .line-numbers-rows
- display none
+ color black
+ font-family -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
- pre.line-numbers
- if isRTL
- padding-right 10px
- else
- padding-left 10px
+ &_epub .main
+ font-size 12px
+ line-height 16px
- // ebook reader has smaller page width,
- // so I make sure the code fits it
- pre[class*="language-"], code[class*="language-"]
- font 10px/12px fixed_width_font !important
+ &_pdf .main
+ font-size 18px
+ line-height 24px
- .toolbar
- display none
+ &_epub .page__inner
+ padding 0
- .page-break
- page-break-after always
+ &_pdf .page__inner
+ padding 0 40px
+ .codebox
+ overflow -webkit-paged-x
- &_contains_header &__inner
+ .code-example
+
+ .line-numbers-rows
+ display none
+
+ pre.line-numbers
padding 0
- &_contains_header .main_width-limit
- max-width initial
-
+ &_epub .code-example
+ // ebook reader has smaller page width,
+ // so I make sure the code fits it
+ pre[class*="language-"],
+ pre[class*="language-"] > code
+ font 10px/14px fixed_width_font !important
+
+ &_pdf .code-example
+ pre[class*="language-"], code[class*="language-"]
+ font 14px/20px fixed_width_font !important
- // chrome/wk pdf
- @media print
-
- &_ebook
- .code-example
-
- pre[class*="language-"], code[class*="language-"]
- font 12px/14px fixed_width_font !important
-
-
- @media tablet
- &,
- &_sidebar_on
- padding 0
-
- & &__sidebar,
- & &__inner::after
- display none
-
- &__inner
- padding 0 10px
-
- & &__tutorial-map
- left 20px
- right 20px
-
- &__nav-wrap
- position relative
- display block
- white-space nowrap
- margin 20px 0
+ .toolbar
+ display none
- &__nav-wrap:after
- position absolute
- left 50%
- top 0
- width 3px
- height 100%
- background #F5F2F0
- content: ''
+ .page-break
+ page-break-after always
- &__nav
- position relative
- top 0 // not necessary but more neat style
- display inline-block
- box-sizing border-box
- width 50%
- height auto
- padding 17px 0
- margin-top auto
- border 3px solid #F5F2F0
- text-align center
- white-space normal
- &__nav-wrap:active:after
- background #7e7e7e
+ &_contains_header &__inner
+ padding 0
+
+ &_contains_header .main_width-limit
+ max-width initial
+
+
+ @media tablet
+ &,
+ &_sidebar_on
+ padding 0
+
+ & &__sidebar,
+ & &__inner::after
+ display none
+
+ &_sidebar_visible_mobile&__sidebar
+ display block
+
+ & &__sidebar.sidebar_profile
+ display block
+ position relative
+ top auto
+ left auto
+ bottom auto
+ transform none
+ width 100%
+
+ &_profile
+ display flex
+ flex-wrap wrap
+
+ &_profile &__inner
+ padding 0 10px
+ order 2
+ width 100%
+
+ &_profile &__sidebar
+ order 1
+
+ &_inner_padding &__inner, &__inner
+ padding 0 10px
+
+ &_wide-padding
+ & ^[0]__inner
+ padding 0 16px
+
+ & &__tutorial-map
+ left 20px
+ right 20px
+
+ &__nav-wrap
+ position relative
+ display block
+ white-space nowrap
+ margin 20px 0
+
+ &__nav-wrap:after
+ position absolute
+ left 50%
+ top 0
+ width 3px
+ height 100%
+ background var(--borderPrimary)
+ content: ''
+
+ &__nav
+ position relative
+ top 0 // not necessary but more neat style
+ display inline-block
+ box-sizing border-box
+ width 50%
+ height auto
+ padding 17px 0
+ margin-top auto
+ border 3px solid var(--borderPrimary)
+ text-align center
+ white-space normal
+
+ &__nav-wrap:active:after
+ background var(--borderSecondary)
+
+ &__nav:active
+ border-color: var(--borderSecondary)
+
+ &__nav_prev
+ padding-left 30px
- &__nav:active
- border-color: #7e7e7e
+ border-right-width 0
+ border-radius: 6px 0 0 6px
- &__nav_prev
- if isRTL
- padding-right 30px
- else
- padding-left 30px
+ &__nav_next
+ padding-right 30px
- border-right-width 0
- border-radius: 6px 0 0 6px
+ border-left-width 0
+ border-radius: 0 6px 6px 0
- &__nav_next
- padding-right 30px
+ &__nav_next:only-child
+ display block
+ margin 0 0 0 auto
- border-left-width 0
- border-radius: 0 6px 6px 0
+ & &__nav
+ transform none
+ &__nav-text
+ top 0
+ bottom 0
+ left 0
+ margin 0
+ width 30px
+ white-space nowrap
+ text-align center
+
+ &__nav_prev &__nav-text
+ left 0
+ right auto
+
+ &__nav_next &__nav-text
+ right 0
+ left auto
+
+ // скрытый элемент для выравнивания иконок < | >
+ &__nav-text::after
+ display inline-block
+ height 100%
+ vertical-align middle
+ content: ''
- &__nav_next:only-child
- display block
- margin 0 0 0 auto
+ &__nav-text::before
+ display inline-block
+ margin-bottom 0
+ min-height 0
+ width 30px
+ line-height 1
+ vertical-align middle
- & &__nav
- transform none
+ &__nav:hover &__nav-text::before
+ background none
- &__nav-text
- top 0
- bottom 0
- left 0
- margin 0
- width 30px
- white-space nowrap
- text-align center
+ &__nav-text-shortcut
+ display none
+
+ &__nav-text-alternate
+ display block
+ color var(--foregroundDefault)
- &__nav_prev &__nav-text
- left 0
- right auto
+ white-space nowrap
- &__nav_next &__nav-text
- right 0
- left auto
+ &_tablet-no-padding &__inner
+ padding 0
- // скрытый элемент для выравнивания иконок < | >
- &__nav-text::after
- display inline-block
- height 100%
- vertical-align middle
- content: ''
+ &__whitelist
+ box-shadow none
+ padding 0
- &__nav-text::before
- display inline-block
- margin-bottom 0
- min-height 0
- width 30px
- line-height 1
- vertical-align middle
+ @media (max-width: 480px)
- &__nav:hover &__nav-text::before
- background none
-
- &__nav-text-shortcut
- display none
-
- &__nav-text-alternate
- display block
- color #333
-
- white-space nowrap
-
-
-
-
- @media (max-width: 480px)
+ &__nav-text-alternate
+ font-size 12px
- &__nav-text-alternate
- font-size 12px
+ overflow hidden
+ text-overflow ellipsis
- overflow hidden
- text-overflow ellipsis
+// calible fix for system color scheme
+.calibre-viewer-paginated
+ background #fff !important
\ No newline at end of file
diff --git a/modules/styles/blocks/prism/01-prism.styl b/modules/styles/blocks/prism/01-prism.styl
index 8d452ba..5eaf452 100755
--- a/modules/styles/blocks/prism/01-prism.styl
+++ b/modules/styles/blocks/prism/01-prism.styl
@@ -3,10 +3,10 @@
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
-
-code[class*="language-"],
-pre[class*="language-"]
- color black
+pre[class*="language-"],
+pre[class*="language-"] > code,
+ color #d4d4d4
+ // text-shadow 0 1px white
font-family fixed_width_font
direction ltr
text-align left
@@ -14,7 +14,7 @@ pre[class*="language-"]
word-spacing normal
tab-size 4
hyphens none
- position relative
+ // position relative
/*
In epub all code selected? because Calibre applies this style wrong?
@@ -30,76 +30,157 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection
*/
@media print
- code[class*="language-"],
- pre[class*="language-"]
+ pre[class*="language-"],
+ pre[class*="language-"] > code
text-shadow: none
/* Code blocks */
pre[class*="language-"]
- padding 1em
+ padding 0
margin 1.5em 0
overflow auto
-
-pre[class*="language-"]
- background: background_blocks
+ background var(--prismBlockBg)
/* Inline code */
-:not(pre) > code[class*="language-"]
+code[class*="language-"]
padding .1em
border-radius .3em
+ color var(--prismColor)
+ background var(--prismBlockBg)
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata
- color slategray
-
-.token.punctuation
- color light_gray_color
+/*********************************************************
+* Tokens
+*/
+.namespace
+ opacity .7
-.token.punctuation,
-.token.function,
.token.comment,
-.token.string,
-.token.operator,
-.token.number
- if isRTL
- background inherit
+.token.prolog
+ color var(--prismTokenComment)
-.namespace
- opacity .7
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation
+ color var(--prismTokenPunctuation)
.token.property,
.token.tag,
.token.boolean,
-.token.number
- color #905
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit
+ color var(--prismTokenSymbols)
.token.selector,
.token.attr-name,
-.token.string
- color #690
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted
+ color var(--prismTokenSymbolsAlt)
.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string
- color #a67f59
- /* background: hsla(0,0%,100%,.5); */
-
-.token.atrule,
-.token.attr-value,
+.token.entity
+ color var(--prismTokenOperator)
+
+.token.atrule
+ color var(--prismTokenAtRule)
+
+.token.atrule .token.url .token.function
+ color #dcdcaa // --prismTokenFunction
+
+.token.atrule .token.url .token.punctuation
+ color #d4d4d4 // --prismTokenUrlPunctuation
+
+.token.atrule .token.rule,
+.token.keyword.module,
+.token.keyword.control-flow
+ color var(--prismTokenKeywordControl)
+
+.token.function,
+.token.function .token.maybe-class-name
+ color var(--prismTokenFunctionAndClassname)
+
+.token.regex
+ color var(--prismTokenRegex)
+
+.token.class-name,
+.token.maybe-class-name
+ color var(--prismTokenClassname)
+
+.token.property,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name,
+.token.attr-name,
+.token.parameter,
+.token.console,
+.token.interpolation,
+.token.atrule .token.url,
+.token.doctype .token.name
+ color var(--prismTokenInterpolation) // --prismTokenLightBlueGroup
+
+.token.constant
+ color var(--prismTokenConstant)
+
+.token.variable
+ color var(--prismTokenVariable)
+
+.token.entity
+.token.boolean,
+.token.punctuation.interpolation-punctuation,
+.token.operator.arrow,
+.token.doctype .token.doctype-tag
+ color var(--prismTokenInterpolation) // --prismTokenBlueGroup
+
+.token.error
+ color var(--prismTokenError)
+
.token.keyword
- color #07a
+ color var(--prismTokenKeyword)
+.token.important,
+.token.punctuation.interpolation-punctuation
+ color var(--prismTokenImportant)
-.token.regex,
-.token.important
- color #e90
+.token.selector,
+.token.escape
+ color #d7ba7d // --prismTokenEscapeAndSelector
+
+.token.tag .token.punctuation,
+ color var(--prismTokenTagPunctuation)
+
+.token.cdata
+ color var(--prismTokenCdata)
+
+.token.attr-value,
+.token.attr-value .token.punctuation
+ color var(--prismTokenAttrvalue)
-.token.important
+.token.attr-value .token.punctuation.attr-equals
+ color #d4d4d4 // --prismTokenAttvalueEquals
+
+.token.namespace
+ color #4ec9b0 // --prismTokenNamespace
+
+.token.important,
+.token.bold
font-weight bold
+.token.italic
+ font-style italic
+
.token.entity
cursor help
+
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"]
+ position relative
+ z-index 1
+
+.line-highlight.line-highlight
+ background var(--backgroundPrismLineHighlight)
+ z-index 0
\ No newline at end of file
diff --git a/modules/styles/blocks/prism/02-prism-line-highlight.styl b/modules/styles/blocks/prism/02-prism-line-highlight.styl
old mode 100644
new mode 100755
index 7364475..6ac175d
--- a/modules/styles/blocks/prism/02-prism-line-highlight.styl
+++ b/modules/styles/blocks/prism/02-prism-line-highlight.styl
@@ -7,7 +7,7 @@
line-height inherit
white-space pre
font-style normal
- background #F5E7C6 !important
+ background var(--backgroundPrismLineHighlight) !important
.block-highlight
font-family fixed_width_font
@@ -19,7 +19,12 @@
line-height inherit
white-space pre
- background #F5E7C6
+ background var(--backgroundPrismLineHighlight)
font-style normal
+// no need for padding out line numbers for epub (no line numbers)
+.page_ebook
+ .block-highlight_inline
+ padding-left 10px
+
diff --git a/modules/styles/blocks/prism/03-prism-line-numbers.styl b/modules/styles/blocks/prism/03-prism-line-numbers.styl
old mode 100644
new mode 100755
index d036c48..d965d87
--- a/modules/styles/blocks/prism/03-prism-line-numbers.styl
+++ b/modules/styles/blocks/prism/03-prism-line-numbers.styl
@@ -1,20 +1,14 @@
pre.line-numbers
- position relative
- if isRTL
- padding-right 3.8em
- else
- padding-left 3.8em
counter-reset linenumber
+ display flex
+ flex-direction row
.line-numbers .line-numbers-rows
- position absolute
pointer-events none
- top 0
font-size 100%
- left -3.8em
width 3em /* works for line-numbers below 1000 lines */
letter-spacing -1px
- border-right 1px solid light_gray_color
+ border-right 1px solid var(--borderPrimary) // light_gray_color
user-select none
.line-numbers-rows > span
@@ -24,7 +18,7 @@ pre.line-numbers
.line-numbers-rows > span:before
content counter(linenumber)
- color light_gray_color
+ color var(--foregroundAlt) // light_gray_color
display block
padding-right 0.8em
text-align right
diff --git a/modules/styles/blocks/prism/04-my-prism.styl b/modules/styles/blocks/prism/04-my-prism.styl
old mode 100644
new mode 100755
index 1b9be30..07f7456
--- a/modules/styles/blocks/prism/04-my-prism.styl
+++ b/modules/styles/blocks/prism/04-my-prism.styl
@@ -1,32 +1,31 @@
pre[class*="language-"],
code[class*="language-"]
- font 14px/17px fixed_width_font
+ font 15px/20px fixed_width_font
z-index 0
text-shadow none
margin 0
+ @media (min-width: largescreen)
+ font 16px/22px fixed_width_font
+
+ code.token
+ background inherit
+ padding 0
+
+
pre[class*="language-"]
- position relative
> code.language-markup
color inherit
- position relative
> code[class*="language-"]
background none
- padding 0
-
-pre.line-numbers
- padding-left 3.5em
+ padding 1em 1em 1em 0.5em
+ flex-grow 1
-// span with line numbers is moved from to the outer ,
-// because we need to handle many ... inside single
-// (this we need for highlighting *!*...* /!* inline
.line-numbers .line-numbers-rows
- left 0
- top 0
- padding 1em 0
+ padding 1em 0 .8em
border 0
- background #e7e5e3
+ background var(--prismLineNumbersBg)
width auto
.line-numbers .line-numbers-rows:after
@@ -39,7 +38,7 @@ pre.line-numbers
.line-numbers-rows > span:before,
.line-numbers .line-numbers-rows:after
padding 0 .7em 0 .8em
- background #e7e5e3 // #146 https://github.com/iliakan/javascript-nodejs/issues/146#issuecomment-72321753
+ // background var(--backgroundAlt) // was s#e7e5e3 // #146 https://github.com/iliakan/javascript-nodejs/issues/146#issuecomment-72321753
text-shadow none
/* not sure if larger code is better
@@ -48,4 +47,4 @@ pre.line-numbers
code[class*="language-"]
font-size font_size_m
line-height 19px
-*/
\ No newline at end of file
+*/
diff --git a/package.json b/package.json
index 9f63840..bcee95e 100755
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
"optimize-css-assets-webpack-plugin": "^4.0.3",
"path-to-regexp": "*",
"postcss-loader": "^3",
- "prismjs": "^1",
+ "prismjs": "^1.29.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-runtime": "^2.0.4",