Skip to content

Commit 7adb725

Browse files
nikolai-shabalinnikolai-shabalin
committed
Временно для удобства переносит код по блокам
1 parent d478080 commit 7adb725

10 files changed

+527
-493
lines changed

‎css/blocks/chapter.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.chapters {
2+
width: 100%;
3+
}
4+
5+
.chapter h2 {
6+
padding: 2rem 1rem;
7+
word-break: break-word;
8+
background-color: #e5e5e5;
9+
}
10+
11+
.chapter h3[id]::before {
12+
display: block;
13+
height: 2rem;
14+
margin-top: -2rem;
15+
visibility: hidden;
16+
content: "";
17+
}
18+
19+
.chapter-part {
20+
display: flex;
21+
flex-direction: column;
22+
23+
border-bottom: 1px solid #e5e5e5;
24+
}
25+
26+
.chapter-part-col {
27+
padding: 2rem 1rem;
28+
}
29+
30+
.chapter-part-col figure {
31+
margin: 0 1rem 0 0;
32+
}
33+
34+
.chapter-part-col p {
35+
max-width: 32rem;
36+
}
37+
38+
.chapter-part-col + .chapter-part-col {
39+
border-top: 1px solid #e5e5e5;
40+
}
41+
42+
.gray-bgcolor {
43+
background-color: #fafafa;
44+
}
45+
46+
@media (min-width: 38em) {
47+
.chapter h2 {
48+
padding: 2rem 2rem 2.5rem;
49+
}
50+
51+
.chapter-part-col {
52+
padding: 2rem;
53+
}
54+
}
55+
56+
@media (min-width: 38em) {
57+
.chapter h2 {
58+
padding: 2rem 2rem 2.5rem;
59+
}
60+
61+
.chapter-part-col {
62+
padding: 2rem;
63+
}
64+
}
65+
66+
@media (min-width: 48em) {
67+
.chapter h2 {
68+
padding: 2rem 3rem 2.5rem;
69+
}
70+
71+
.chapter-part {
72+
flex-direction: row;
73+
}
74+
75+
.chapter-part-col {
76+
width: 50%;
77+
padding: 3rem 1.5rem;
78+
}
79+
80+
.chapter-part-col--full-width {
81+
width: 100%;
82+
}
83+
84+
.chapter-part-col + .chapter-part-col {
85+
border-top: 0;
86+
}
87+
}
88+
89+
@media (min-width: 75em) {
90+
.chapters {
91+
width: calc(100% - 230px);
92+
}
93+
}
94+

‎css/blocks/code.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
code,
2+
pre {
3+
font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
4+
}
5+
6+
code {
7+
padding: 2px 4px;
8+
9+
font-size: 95%;
10+
color: #d44950;
11+
12+
background-color: #f7f7f9;
13+
border-radius: 0.2rem;
14+
}
15+
16+
pre {
17+
display: block;
18+
margin: 0 0 1rem;
19+
20+
line-height: 1.4;
21+
white-space: pre-wrap;
22+
}
23+
24+
pre code {
25+
padding: 0;
26+
27+
color: inherit;
28+
29+
background-color: transparent;
30+
border: 0;
31+
}

‎css/blocks/common.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-size: 16px;
9+
scroll-behavior: smooth;
10+
}
11+
12+
body {
13+
margin: 0;
14+
15+
font: 17px/1.6 "Helvetica", "Arial", sans-serif;
16+
color: #5a5a5a;
17+
18+
background-color: #ffffff;
19+
}
20+
21+
a:link,
22+
a:visited {
23+
color: #3f3ccb;
24+
text-decoration: none;
25+
}
26+
27+
a:hover,
28+
a:focus {
29+
color: #302683;
30+
text-decoration: underline;
31+
}
32+
33+
h1,
34+
h2,
35+
h3 {
36+
margin: 0;
37+
38+
font-weight: normal;
39+
color: #424242;
40+
letter-spacing: -0.025em;
41+
}
42+
43+
h2,
44+
h3,
45+
h4 {
46+
line-height: 1.2;
47+
}
48+
49+
h1 {
50+
font-size: 3rem;
51+
line-height: 1.3;
52+
}
53+
54+
h2 {
55+
font-size: 2.5rem;
56+
}
57+
58+
h3 {
59+
font-size: 1.75rem;
60+
scroll-margin-top: 20px;
61+
}
62+
63+
ul li {
64+
margin-bottom: 0.25rem;
65+
}
66+
67+
.visually-hidden {
68+
position: absolute;
69+
70+
width: 1px;
71+
height: 1px;
72+
margin: -1px;
73+
padding: 0;
74+
overflow: hidden;
75+
76+
border: 0;
77+
78+
clip: rect(0, 0, 0, 0);
79+
clip-path: inset(100%);
80+
}
81+
82+
@media (min-width: 38em) {
83+
html {
84+
font-size: 20px;
85+
}
86+
}
87+
88+
@media (min-width: 38em) {
89+
html {
90+
font-size: 20px;
91+
}
92+
}

‎css/blocks/footer.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
footer {
2+
padding: 2rem;
3+
4+
background-color: #2d2d44;
5+
}
6+
7+
.contacts {
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
}
13+
14+
.logo-full {
15+
display: inline-block;
16+
width: 161px;
17+
}
18+
19+
.social-icons {
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
margin: 0.5rem 0 1rem 0;
24+
}
25+
26+
.social-icons,
27+
.github {
28+
font-size: 0;
29+
}
30+
31+
.icon {
32+
min-width: 2rem;
33+
min-height: 2rem;
34+
35+
background-repeat: no-repeat;
36+
background-position: center;
37+
background-size: calc(100% - 5px);
38+
opacity: 0.5;
39+
}
40+
41+
.icon:hover {
42+
opacity: 1;
43+
}
44+
45+
.icon-vk {
46+
background-image: url("../../img/icon-vkontakte.svg");
47+
}
48+
49+
.icon-fb {
50+
background-image: url("../../img/icon-facebook.svg");
51+
}
52+
53+
.icon-tw {
54+
background-image: url("../../img/icon-twitter.svg");
55+
}
56+
57+
.icon-ig {
58+
background-image: url("../../img/icon-instagram.svg");
59+
}
60+
61+
.github-link {
62+
display: inline-block;
63+
width: 91px;
64+
height: 16px;
65+
66+
background-image: url("../../img/github.svg");
67+
}

‎css/blocks/guide-content.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.guide-content {
2+
display: flex;
3+
flex-wrap: wrap;
4+
}

‎css/blocks/header.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
header {
2+
padding: 1rem 1rem 6rem;
3+
4+
text-align: center;
5+
6+
background-color: #312785;
7+
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);
8+
background-size: 82px 47px;
9+
}
10+
11+
header h1 {
12+
margin: 0 0 0.25rem;
13+
14+
color: #ffffff;
15+
}
16+
17+
header p {
18+
margin-top: 0;
19+
20+
font-size: 1.1rem;
21+
}
22+
23+
header a:link,
24+
header a:visited {
25+
color: #ffffff;
26+
}
27+
28+
.logo {
29+
width: 300px;
30+
height: 300px;
31+
}
32+
33+
@media (min-width: 38em) {
34+
header {
35+
padding-bottom: 4rem;
36+
}
37+
}
38+
39+
@media (min-width: 38em) {
40+
header {
41+
padding-bottom: 4rem;
42+
}
43+
}
44+

‎css/blocks/logo-list.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.logo-list {
2+
max-width: 550px;
3+
margin: 50px auto;
4+
}
5+
6+
.logo-list ul {
7+
display: flex;
8+
flex-wrap: wrap;
9+
justify-content: space-around;
10+
margin: 0;
11+
padding: 0;
12+
13+
list-style: none;
14+
}
15+
16+
.logo-list li {
17+
margin-right: 10px;
18+
margin-left: 10px;
19+
}

0 commit comments

Comments
 (0)