Skip to content

Evgeniybalagurov/#10 #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
evgenybalagurov wants to merge 13 commits into
base: develop
Choose a base branch
from
Open

Evgeniybalagurov/#10 #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7309f31
added layout and text block
evgenybalagurov Jun 16, 2022
e18e43d
added markup style
evgenybalagurov Jun 17, 2022
cc6d2f7
code refactoring
evgenybalagurov Jun 18, 2022
d44d5b8
add hover and click effect on links
evgenybalagurov Jun 18, 2022
857242d
put colors into variables
evgenybalagurov Jun 19, 2022
012ab02
link refactoring
evgenybalagurov Jun 19, 2022
b282833
video refactoring
evgenybalagurov Jun 19, 2022
22fc98c
added video block
evgenybalagurov Jun 19, 2022
7a0c115
perfect pixel
evgenybalagurov Jun 19, 2022
245f88e
add margin text-block__desc
evgenybalagurov Jun 19, 2022
a63a85c
added sans serif to font family
evgenybalagurov Jun 20, 2022
bad0e54
remove .vscode
evgenybalagurov Jun 20, 2022
180ca4f
added .vscode to .gitignore
evgenybalagurov Jun 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@

.vscode
8 changes: 8 additions & 0 deletions blocks/authors/__desc/authors__desc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.authors__desc:first-of-type {
padding-right: 16px;
border-right: 1px solid var(--border-color);
}

.authors__desc:last-of-type {
padding-left: 16px;
}
5 changes: 5 additions & 0 deletions blocks/authors/__list/authors__list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.authors__list {
margin: 23px 0 0;
padding: 0;
list-style: none;
}
3 changes: 3 additions & 0 deletions blocks/authors/__text-block/authors__text-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.authors__text-block {
padding: 0 120px 0 182px;
}
4 changes: 4 additions & 0 deletions blocks/authors/__text/authors__text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.authors__text {
max-width: 420px;
margin: 4px 0 24px 24px;
}
4 changes: 4 additions & 0 deletions blocks/lead/__image/lead__image.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.lead__image {
width: 100%;
display: block;
}
16 changes: 16 additions & 0 deletions blocks/lead/__link/lead__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.lead__link {
margin-top: 16px;
padding: 16px;
width: 240px;
Copy link
Collaborator

@DmitriyMGN DmitriyMGN Jun 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

старайся писать в стилях сначала размеры, потом отступы, далее другие стили относящиеся к этому селектору.
В методолгии стайлкодинга, которую нам давали на первом спринте этот пунктик есть с ранжированием стилей в селекторе, в целом это не влияет никак на функционал, но структурированный код это всегда круто)

height: 56px;
box-sizing: border-box;
border: 1px solid var(--border-color-black);
position: relative;
transition: color .2s ease .1s;
}

.lead__link:before {
top: 14px;
right: 13px;
background-position: 85% 50%;
}
7 changes: 7 additions & 0 deletions blocks/lead/__text-block/lead__text-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.lead__text-block:first-of-type {
padding: 62px 120px;
}

.lead__text-block:last-of-type {
max-width: 720px;
}
6 changes: 6 additions & 0 deletions blocks/lead/lead.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.lead {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 1 / 3;
}
57 changes: 57 additions & 0 deletions blocks/link/link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
.link {
Copy link
Owner

@Pavel-Rogozhkin Pavel-Rogozhkin Jun 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

этот файл у нас много где будет использоваться, правильно же понимаю?
если да, то надо будет после полной сборки протестировать работу всех подобных ссылок.

Copy link
Collaborator Author

@evgenybalagurov evgenybalagurov Jun 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Да, будет использоваться. Ок, протестим

display: block;
font-family: 'Formular', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 22px;
box-sizing: border-box;
text-transform: uppercase;
color: var(--link-color);
text-decoration: none;
}

.link:before {
content: '';
display: block;
width: 25px;
height: 25px;
position: absolute;
top: 3px;
right: 0;
background: transparent var(--link-image) no-repeat center;
}

.link:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: var(--hover-bg-color);
transition: width .4s ease;
z-index: -1;
}

.link:hover {
color: var(--text-color-hover);
}

.link:hover:before {
background: var(--link-image-hover);
transition: background .2s ease .2s;
}

.link:hover:after {
width: 100%;
}

.link:active {
border-color: var(--active-bg-color);
}

.link:active:after {
transform: scale(1.1);
}
9 changes: 8 additions & 1 deletion blocks/page/page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,20 @@
min-width: 320px;
margin: 0 auto;
--text-color: #242424;
--text-color-hover: #fff;
--link-color: #242424;
--main-bg-color: #e5e5e5;
--hover-bg-color: #242424;
--active-bg-color: #242424;
--border-color: #242424;
--slide-bg-color: #fff;
--preview-bg-color: #B7C09D;
--video-control-bg-color: #ECEBE8;
--border-color: #242424;
--border-color-black: #000;
--btn-image: url(../../../images/arrow.svg);
--btn-image-hover: url(../../../images/arrow-white.svg);
--link-image: url(../../../images/arrow.svg);
--link-image-hover: url(../../../images/arrow-white.svg);
background-color: var(--main-bg-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Expand Down
8 changes: 8 additions & 0 deletions blocks/preview/__container/preview__container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.preview__container {
min-height: 300px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--preview-bg-color);
}
5 changes: 5 additions & 0 deletions blocks/preview/__items/preview__items.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.preview__items {
margin: 0;
padding: 0;
list-style: none;
}
3 changes: 3 additions & 0 deletions blocks/preview/__link/_rotate/preview__link_rotate_arrow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.preview__link_rotate_arrow:before {
transform: rotate(90deg);
}
12 changes: 12 additions & 0 deletions blocks/preview/__link/preview__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.preview__link {
padding: 17px;
border-top: 1px solid var(--border-color);
position: relative;
z-index: 1;
}

.preview__link:before {
top: 16px;
right: 16px;
transform: rotate(-45deg);
}
3 changes: 3 additions & 0 deletions blocks/preview/__title/preview__title.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.preview__title {
padding: 24px;
}
4 changes: 4 additions & 0 deletions blocks/preview/preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.preview {
max-width: 240px;
margin-top: 80px;
}
18 changes: 18 additions & 0 deletions blocks/projects/__link/projects__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.projects__link {
width: 120px;
height: 32px;
margin: 32px 0 0 30px;
padding: 3px 0 0 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
grid-column: 1 / 3;
Copy link
Collaborator

@DmitriyMGN DmitriyMGN Jun 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

стоит display: flex, а далее по коду grid-column: 1 / 3, не лишнее свойство?

position: relative;
transition: color .2s ease .1s;
}

.projects__link:before {
transform: rotate(180deg);

}
4 changes: 4 additions & 0 deletions blocks/projects/projects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.projects {
display: grid;
grid-template: 94px auto auto / repeat(2, 1fr);
Copy link
Owner

@Pavel-Rogozhkin Pavel-Rogozhkin Jun 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

огонь!))

}
2 changes: 1 addition & 1 deletion blocks/text-block/__caption/text-block__caption.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.text-block__caption {
margin: 0;
font-family: 'Neue Machina';
font-family: 'Neue Machina', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px;
Expand Down
3 changes: 3 additions & 0 deletions blocks/text-block/__desc-items/text-block__desc-items.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.text-block__desc-items {
display: flex;
}
4 changes: 4 additions & 0 deletions blocks/text-block/__desc/_font-size/_s/text-block__desc_font-size_s.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.text-block__desc_font-size_s {
font-size: 16px;
line-height: 1.37;
}
3 changes: 3 additions & 0 deletions blocks/text-block/__desc/_margin-left/text-block__desc_margin-left.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.text-block__desc_margin-left {
margin-left: 5px;
}
3 changes: 3 additions & 0 deletions blocks/text-block/__desc/_margin_size/_l/text-block__desc_margin_size_l.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.text-block__desc_margin_size_l {
margin: 48px 0 68px;
}
3 changes: 3 additions & 0 deletions blocks/text-block/__desc/_margin_size/_s/text-block__desc_margin_size_s.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.text-block__desc_margin_size_s {
margin-top: 7px;
}
11 changes: 11 additions & 0 deletions blocks/text-block/__desc/text-block__desc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.text-block__desc {
margin: 0;
max-width: 590px;
font-family: 'Neue Machina', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 1.14;
letter-spacing: -0.01em;
color: var(--text-color);
}
8 changes: 8 additions & 0 deletions blocks/text-block/__link/text-block__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.text-block__link {
font-family: 'Formular', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 1.37;
color: var(--text-color);
}
4 changes: 4 additions & 0 deletions blocks/text-block/__subtitle/_placed/text-block__subtitle_placed_lead.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.text-block__subtitle_placed_lead {
margin: 37px 0 212px 61px;
max-width: 400px;
}
10 changes: 10 additions & 0 deletions blocks/text-block/__subtitle/text-block__subtitle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.text-block__subtitle {
margin: 0;
font-family: 'Neue Machina', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-color);
}
3 changes: 3 additions & 0 deletions blocks/text-block/__text/_placed/text-block__text_placed_authors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.text-block__text_placed_authors {
margin: 3px 0 25px 27px;
}
9 changes: 9 additions & 0 deletions blocks/text-block/__text/_placed/text-block__text_placed_brief.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.text-block__text_placed_brief {
max-width: 602px;
margin-bottom: 16px;
text-indent: 59px;
}

.text-block__text_placed_brief:first-of-type {
text-indent: 0;
}
3 changes: 1 addition & 2 deletions blocks/text-block/__text/text-block__text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.text-block__text {
margin: 0;
font-family: 'Formular';
font-family: 'Formular', sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.01em;
font-feature-settings: 'ss01' on;
color: var(--text-color);

}
9 changes: 9 additions & 0 deletions blocks/text-block/__title-item/text-block__title-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.text-block__title-item {
margin: 0;
font-family: 'Formular', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 1.37;
color: var(--text-color);
}
4 changes: 4 additions & 0 deletions blocks/text-block/__title/_font-size/_l/text-block__title_font-size_l.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.text-block__title_font-size_l {
font-size: 72px;
line-height: .97;
}
4 changes: 4 additions & 0 deletions blocks/text-block/__title/_font-size/_s/text-block__title_font-size_s.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.text-block__title_font-size_s {
font-size: 20px;
line-height: 1.2;
}
3 changes: 1 addition & 2 deletions blocks/text-block/__title/text-block__title.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
.text-block__title {
margin: 0;
font-family: 'Neue Machina';
font-family: 'Neue Machina', sans-serif;
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--text-color);
flex-grow: 1;
Copy link
Owner

@Pavel-Rogozhkin Pavel-Rogozhkin Jun 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ненужное свойство было до тебя добавлено?

Copy link
Collaborator Author

@evgenybalagurov evgenybalagurov Jun 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Да, оно не требуется

}
1 change: 1 addition & 0 deletions blocks/text-block/_placed/text-block_placed_slider-title.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.text-block_placed_slider-title {
max-width: 718px;
flex-direction: row;
Copy link
Collaborator

@DmitriyMGN DmitriyMGN Jun 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Переопределяешь свойство? Если нет, то значение row по умолчанию и тут не требуется

justify-content: space-between;
}
5 changes: 5 additions & 0 deletions blocks/video/__content/video__content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.video__content {
width: 100%;
max-width: 691px;
min-height: 389px;
}
Loading