From ba482a834fc27b03db49fdc318c7cffc3463b083 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Tue, 9 Nov 2021 09:33:38 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BD=D0=B0=20=D0=B1=D0=BB=D0=BE=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/chapter.css | 85 ++++++ css/blocks/code.css | 28 ++ css/blocks/common.css | 78 ++++++ css/blocks/footer.css | 66 +++++ css/blocks/guide-content.css | 6 + css/blocks/header.css | 39 +++ css/blocks/logo-list.css | 19 ++ css/blocks/prism.css | 51 ++++ css/blocks/sidebar.css | 109 ++++++++ css/style.css | 498 +---------------------------------- 10 files changed, 490 insertions(+), 489 deletions(-) create mode 100644 css/blocks/chapter.css create mode 100644 css/blocks/code.css create mode 100644 css/blocks/common.css create mode 100644 css/blocks/footer.css create mode 100644 css/blocks/guide-content.css create mode 100644 css/blocks/header.css create mode 100644 css/blocks/logo-list.css create mode 100644 css/blocks/prism.css create mode 100644 css/blocks/sidebar.css diff --git a/css/blocks/chapter.css b/css/blocks/chapter.css new file mode 100644 index 0000000..729170b --- /dev/null +++ b/css/blocks/chapter.css @@ -0,0 +1,85 @@ +/* Chapter */ + +.chapters { + width: 100%; +} + +.chapter h2 { + padding: 2rem 1rem; + word-break: break-word; + background-color: #e5e5e5; +} + +.chapter h3[id]::before { + display: block; + height: 2rem; + margin-top: -2rem; + visibility: hidden; + content: ""; +} + +.chapter-part { + display: flex; + flex-direction: column; + border-bottom: 1px solid #e5e5e5; +} + +.chapter-part-col { + padding: 2rem 1rem; +} + +.chapter-part-col figure { + margin: 0 1rem 0 0; +} + +.chapter-part-col p { + max-width: 32rem; +} + +.chapter-part-col + .chapter-part-col { + border-top: 1px solid #e5e5e5; +} + +.gray-bgcolor { + background-color: #fafafa; +} + +@media (min-width: 38em) { + .chapter h2 { + padding: 2rem 2rem 2.5rem; + } + + .chapter-part-col { + padding: 2rem; + } +} + + +@media (min-width: 48em) { + .chapter h2 { + padding: 2rem 3rem 2.5rem; + } + + .chapter-part { + flex-direction: row; + } + + .chapter-part-col { + width: 50%; + padding: 3rem 1.5rem; + } + + .chapter-part-col--full-width { + width: 100%; + } + + .chapter-part-col + .chapter-part-col { + border-top: 0; + } +} + +@media (min-width: 75em) { + .chapters { + width: calc(100% - 230px); + } +} diff --git a/css/blocks/code.css b/css/blocks/code.css new file mode 100644 index 0000000..2ca5c6f --- /dev/null +++ b/css/blocks/code.css @@ -0,0 +1,28 @@ +/* Code */ + +code, +pre { + font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; +} + +code { + padding: 2px 4px; + font-size: 95%; + color: #d44950; + background-color: #f7f7f9; + border-radius: 0.2rem; +} + +pre { + display: block; + margin: 0 0 1rem; + line-height: 1.4; + white-space: pre-wrap; +} + +pre code { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} diff --git a/css/blocks/common.css b/css/blocks/common.css new file mode 100644 index 0000000..9cd9026 --- /dev/null +++ b/css/blocks/common.css @@ -0,0 +1,78 @@ +/* Common */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-size: 16px; + line-height: 1.6; + font-family: "Helvetica", "Arial", sans-serif; + color: #5a5a5a; + background-color: #ffffff; +} + +a:link, +a:visited { + color: #3f3ccb; + text-decoration: none; +} + +a:hover, +a:focus { + color: #302683; + text-decoration: underline; +} + +h1, +h2, +h3 { + margin: 0; + font-weight: normal; + color: #424242; + letter-spacing: -0.025em; +} + +h2, +h3, +h4 { + line-height: 1.2; +} + +h1 { + font-size: 3rem; + line-height: 1.3; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 1.75rem; + scroll-margin-top: 20px; +} + +ul li { + margin-bottom: 0.25rem; +} + +.visually-hidden { + position: absolute; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + border: 0; + clip: rect(0, 0, 0, 0); + clip-path: inset(100%); +} diff --git a/css/blocks/footer.css b/css/blocks/footer.css new file mode 100644 index 0000000..f1b8586 --- /dev/null +++ b/css/blocks/footer.css @@ -0,0 +1,66 @@ +/* Footer */ + +footer { + padding: 2rem; + background-color: #2d2d44; +} + +.contacts { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.logo-full { + display: inline-block; + width: 161px; +} + +.social-icons { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0.5rem 0 1rem 0; +} + +.social-icons, +.github { + font-size: 0; +} + +.icon { + min-width: 2rem; + min-height: 2rem; + background-repeat: no-repeat; + background-position: center; + background-size: calc(100% - 5px); + opacity: 0.5; +} + +.icon:hover { + opacity: 1; +} + +.icon-vk { + background-image: url("https://github.com/img/icon-vkontakte.svg"); +} + +.icon-fb { + background-image: url("https://github.com/img/icon-facebook.svg"); +} + +.icon-tw { + background-image: url("https://github.com/img/icon-twitter.svg"); +} + +.icon-ig { + background-image: url("https://github.com/img/icon-instagram.svg"); +} + +.github-link { + display: inline-block; + width: 91px; + height: 16px; + background-image: url("https://github.com/img/github.svg"); +} diff --git a/css/blocks/guide-content.css b/css/blocks/guide-content.css new file mode 100644 index 0000000..4ea44f0 --- /dev/null +++ b/css/blocks/guide-content.css @@ -0,0 +1,6 @@ +/* Gudie content */ + +.guide-content { + display: flex; + flex-wrap: wrap; +} diff --git a/css/blocks/header.css b/css/blocks/header.css new file mode 100644 index 0000000..b230fcc --- /dev/null +++ b/css/blocks/header.css @@ -0,0 +1,39 @@ +/* Header */ + +header { + padding: 1rem 1rem 6rem; + text-align: center; + background-color: #312785; + background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); + background-size: 82px 47px; +} + +header h1 { + margin: 0 0 0.25rem; + color: #ffffff; +} + +header p { + margin-top: 0; + font-size: 1.1rem; +} + +header a:link, +header a:visited { + color: #ffffff; +} + +.logo { + width: 300px; + height: 300px; +} + +.logo-list-js { + margin: 11px 23px 0; +} + +@media (min-width: 38em) { + header { + padding-bottom: 4rem; + } +} diff --git a/css/blocks/logo-list.css b/css/blocks/logo-list.css new file mode 100644 index 0000000..8f15a37 --- /dev/null +++ b/css/blocks/logo-list.css @@ -0,0 +1,19 @@ +/* Logo list */ + +.logo-list { + margin: 50px auto; +} + +.logo-list ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0; + padding: 0; + list-style: none; +} + +.logo-list li { + margin-right: 10px; + margin-left: 10px; +} diff --git a/css/blocks/prism.css b/css/blocks/prism.css new file mode 100644 index 0000000..471ce47 --- /dev/null +++ b/css/blocks/prism.css @@ -0,0 +1,51 @@ +/* Prism */ + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +pre.language-correct, +pre.language-incorrect { + padding: 5px 10px; +} + +pre.language-correct { + background: #deeede; +} + +pre.language-incorrect { + background: #f4d3d3; +} + +pre.language-correct .token.operator, +pre.language-incorrect .token.operator { + background: none; +} diff --git a/css/blocks/sidebar.css b/css/blocks/sidebar.css new file mode 100644 index 0000000..30d9205 --- /dev/null +++ b/css/blocks/sidebar.css @@ -0,0 +1,109 @@ +/* Sidebar */ + +.sidebar { + display: flex; + flex-direction: column; + width: 100%; +} + +.sidebar a { + display: block; + color: #5a5a5a; +} + +.sidebar a:hover { + color: #3f3ccb; +} + +.sidebar-col { + padding: 2rem 1rem; +} + +.sidebar-col + .sidebar-col { + border-top: 1px solid #e5e5e5; +} + +.sidebar-col > a { + font-size: 1.75rem; + line-height: 1.25; +} + +.sidebar-menu { + padding-left: 1rem; +} + +@media (min-width: 48em) { + .sidebar { + flex-direction: row; + flex-wrap: wrap; + padding: 2rem 0; + } + + .sidebar-col { + width: 50%; + padding: 1rem 3rem; + } + + .sidebar-col + .sidebar-col { + border-top: 0; + } +} + +@media (min-width: 75em) { + .sidebar { + position: sticky; + top: 0; + bottom: 0; + flex-direction: column; + flex-wrap: nowrap; + align-self: flex-start; + width: 230px; + height: 100vh; + padding: 0 1rem; + overflow-y: auto; + line-height: 1.25; + border-right: 1px solid #e5e5e5; + } + + .sidebar-col { + flex-shrink: 0; + width: 100%; + padding: 0; + } + + .sidebar-col-first { + padding-top: 1.75rem; + } + + .sidebar-col-last { + padding-bottom: 1.75rem; + } + + .sidebar-col + .sidebar-col { + margin-top: 1.75em; + } + + .sidebar-col > a { + display: block; + + font-size: 0.8rem; + font-weight: bold; + } + + .sidebar-menu { + padding: 0; + margin: 0.5em 0 0; + list-style: none; + font-size: 0.7rem; + } + + .sidebar-menu li { + margin: 0; + line-height: 1.45; + } + + .sidebar-menu a { + display: block; + padding: 0.25em 0; + } +} diff --git a/css/style.css b/css/style.css index 3bd53e6..fb866f3 100644 --- a/css/style.css +++ b/css/style.css @@ -1,489 +1,9 @@ -/* Common */ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - font-size: 16px; - line-height: 1.6; - font-family: "Helvetica", "Arial", sans-serif; - color: #5a5a5a; - background-color: #ffffff; -} - -a:link, -a:visited { - color: #3f3ccb; - text-decoration: none; -} - -a:hover, -a:focus { - color: #302683; - text-decoration: underline; -} - -h1, -h2, -h3 { - margin: 0; - font-weight: normal; - color: #424242; - letter-spacing: -0.025em; -} - -h2, -h3, -h4 { - line-height: 1.2; -} - -h1 { - font-size: 3rem; - line-height: 1.3; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 1.75rem; - scroll-margin-top: 20px; -} - -ul li { - margin-bottom: 0.25rem; -} - -.visually-hidden { - position: absolute; - - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - border: 0; - clip: rect(0, 0, 0, 0); - clip-path: inset(100%); -} - -/* Code */ - -code, -pre { - font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; -} - -code { - padding: 2px 4px; - font-size: 95%; - color: #d44950; - background-color: #f7f7f9; - border-radius: 0.2rem; -} - -pre { - display: block; - margin: 0 0 1rem; - line-height: 1.4; - white-space: pre-wrap; -} - -pre code { - padding: 0; - color: inherit; - background-color: transparent; - border: 0; -} - -/* Header */ - -header { - padding: 1rem 1rem 6rem; - text-align: center; - background-color: #312785; - background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); - background-size: 82px 47px; -} - -header h1 { - margin: 0 0 0.25rem; - color: #ffffff; -} - -header p { - margin-top: 0; - font-size: 1.1rem; -} - -header a:link, -header a:visited { - color: #ffffff; -} - -.logo { - width: 300px; - height: 300px; -} - -.logo-list-js { - margin: 11px 23px 0; -} - -@media (min-width: 38em) { - header { - padding-bottom: 4rem; - } -} - -/* Logo list */ - -.logo-list { - margin: 50px auto; -} - -.logo-list ul { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: 0; - padding: 0; - list-style: none; -} - -.logo-list li { - margin-right: 10px; - margin-left: 10px; -} - -/* Gudie content */ - -.guide-content { - display: flex; - flex-wrap: wrap; -} - -/* Sidebar */ - -.sidebar { - display: flex; - flex-direction: column; - width: 100%; -} - -.sidebar a { - display: block; - color: #5a5a5a; -} - -.sidebar a:hover { - color: #3f3ccb; -} - -.sidebar-col { - padding: 2rem 1rem; -} - -.sidebar-col + .sidebar-col { - border-top: 1px solid #e5e5e5; -} - -.sidebar-col > a { - font-size: 1.75rem; - line-height: 1.25; -} - -.sidebar-menu { - padding-left: 1rem; -} - -@media (min-width: 48em) { - .sidebar { - flex-direction: row; - flex-wrap: wrap; - padding: 2rem 0; - } - - .sidebar-col { - width: 50%; - padding: 1rem 3rem; - } - - .sidebar-col + .sidebar-col { - border-top: 0; - } -} - -@media (min-width: 75em) { - .sidebar { - position: sticky; - top: 0; - bottom: 0; - flex-direction: column; - flex-wrap: nowrap; - align-self: flex-start; - width: 230px; - height: 100vh; - padding: 0 1rem; - overflow-y: auto; - line-height: 1.25; - border-right: 1px solid #e5e5e5; - } - - .sidebar-col { - flex-shrink: 0; - width: 100%; - padding: 0; - } - - .sidebar-col-first { - padding-top: 1.75rem; - } - - .sidebar-col-last { - padding-bottom: 1.75rem; - } - - .sidebar-col + .sidebar-col { - margin-top: 1.75em; - } - - .sidebar-col > a { - display: block; - - font-size: 0.8rem; - font-weight: bold; - } - - .sidebar-menu { - padding: 0; - margin: 0.5em 0 0; - list-style: none; - font-size: 0.7rem; - } - - .sidebar-menu li { - margin: 0; - line-height: 1.45; - } - - .sidebar-menu a { - display: block; - padding: 0.25em 0; - } -} - -/* Chapter */ - -.chapters { - width: 100%; -} - -.chapter h2 { - padding: 2rem 1rem; - word-break: break-word; - background-color: #e5e5e5; -} - -.chapter h3[id]::before { - display: block; - height: 2rem; - margin-top: -2rem; - visibility: hidden; - content: ""; -} - -.chapter-part { - display: flex; - flex-direction: column; - border-bottom: 1px solid #e5e5e5; -} - -.chapter-part-col { - padding: 2rem 1rem; -} - -.chapter-part-col figure { - margin: 0 1rem 0 0; -} - -.chapter-part-col p { - max-width: 32rem; -} - -.chapter-part-col + .chapter-part-col { - border-top: 1px solid #e5e5e5; -} - -.gray-bgcolor { - background-color: #fafafa; -} - -@media (min-width: 38em) { - .chapter h2 { - padding: 2rem 2rem 2.5rem; - } - - .chapter-part-col { - padding: 2rem; - } -} - - -@media (min-width: 48em) { - .chapter h2 { - padding: 2rem 3rem 2.5rem; - } - - .chapter-part { - flex-direction: row; - } - - .chapter-part-col { - width: 50%; - padding: 3rem 1.5rem; - } - - .chapter-part-col--full-width { - width: 100%; - } - - .chapter-part-col + .chapter-part-col { - border-top: 0; - } -} - -@media (min-width: 75em) { - .chapters { - width: calc(100% - 230px); - } -} - -/* Footer */ - -footer { - padding: 2rem; - background-color: #2d2d44; -} - -.contacts { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.logo-full { - display: inline-block; - width: 161px; -} - -.social-icons { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0.5rem 0 1rem 0; -} - -.social-icons, -.github { - font-size: 0; -} - -.icon { - min-width: 2rem; - min-height: 2rem; - background-repeat: no-repeat; - background-position: center; - background-size: calc(100% - 5px); - opacity: 0.5; -} - -.icon:hover { - opacity: 1; -} - -.icon-vk { - background-image: url("https://github.com/img/icon-vkontakte.svg"); -} - -.icon-fb { - background-image: url("https://github.com/img/icon-facebook.svg"); -} - -.icon-tw { - background-image: url("https://github.com/img/icon-twitter.svg"); -} - -.icon-ig { - background-image: url("https://github.com/img/icon-instagram.svg"); -} - -.github-link { - display: inline-block; - width: 91px; - height: 16px; - background-image: url("https://github.com/img/github.svg"); -} - -/* Prism */ - -/* override default prism theme */ -code[class*="language-"], -pre[class*="language-"] { - white-space: pre-wrap; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: initial; -} - -/* override default prism theme */ -code[class*="language-"], -pre[class*="language-"] { - white-space: pre-wrap; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: initial; -} - -pre.language-correct, -pre.language-incorrect { - padding: 5px 10px; -} - -pre.language-correct { - background: #deeede; -} - -pre.language-incorrect { - background: #f4d3d3; -} - -pre.language-correct .token.operator, -pre.language-incorrect .token.operator { - background: none; -} +@import "https://github.com/blocks/common.css"; +@import "https://github.com/blocks/code.css"; +@import "https://github.com/blocks/header.css"; +@import "https://github.com/blocks/logo-list.css"; +@import "https://github.com/blocks/guide-content.css"; +@import "https://github.com/blocks/sidebar.css"; +@import "https://github.com/blocks/chapter.css"; +@import "https://github.com/blocks/footer.css"; +@import "https://github.com/blocks/prism.css";