@ogonzal87 Thank you for review, and for detailed explanation in video. Appreciate it!

Here're next changes:

• replaced CSS leafs with SVG and added simple animation on hover
  https://www.loom.com/share/70a6b15c9aed4e4ab38d2a2202bafd10
• moved all design tokens to separate file src/styles/tokens.scss
• updated background hexagon style to fit spec

But I want to discuss point about "match the styles to the specs". I'm not sure what exactly did you mean by that, and I just want to explain something.

On design specs we have absolute CSS styles for position and size, but its horrible idea to use it on real project. The Best Practice for development is to have reusable, relative and flexible styles.

#demo-button {
	width: 115px;
	height: 87px;
	top: 37px;
	left: 543px;
	background-color: green;
}
#subscribe-button {
	width: 90px;
	height: 55px;
	top: 1079px;
	left: 1265px;
	background-color: darkgreen;
}

.button {
	min-width: 90px;
	min-height: 55px;
	padding: 1em;
	background-color: green;
}
.button-dark {
	background-color: darkgreen;
}

Because of that I disagree with copy/pasting styles from spec, and instead of that I'm writing CSS that should look "as much as possible" the same as spec.

Later, when we start working on other pages and responsive, we'll have benefits like style reusability and stretching sizes.

Hey @alexandrtovmach ! Thank you sooo much!!

Totally agree. Not everything can be up to Spec. I made some comments on the new PR.

Let me know if you have any questions.

@ogonzal87 Thank you and sorry for long response. I'll take a look in a few days

/gcbrun

/gcbrun

@ogonzal87 @bnb Could you review it?

@nodejs/website-redesign

/gcbrun

Holidays end's up, and we need to unfreeze development process, please review this PR and let's go with the next steps. This PR is contains structural changes, that's going to be basis for the whole website, and I'm waiting for merge before implement other pages.

/gcbrun

@alexandrtovmach do you want to join our hackathon this week — see #417

/gcbrun

@alexandrtovmach I tried to spotlight in today's biweekly meeting the critical compositor optimizations, and I personally expressed we want to at least try to separate out this and other critical contributions and land them even if in separate PRs.

I'd like to collaborate with you on that, more likely also other separate PR work we come to moving forward.

Let's get into this in this week's hackathon… Sounds good?

I've tried to slice parts of logic to separate PR, but it's too complicated, because everything in this PR connected:

• filestructure
• scss

We should merge this PR as it is or I'll close it
@nodejs/website-redesign please review and leave your opinion/vote (👍 merge / 👎 close). If we decide to merge it, I'll resolve conflicts and then I need a few approvals, if not I don't want to spend much time for nothing again =(

Quick explanation why I think it should be landed:

Filestructure changes:

Current root-level file structure with global CSS file is totally not okay, and it should be replaced with domain structure:

./Button
--/index.jsx
--/button.css
--/helpers/
----/iconsHandler.js

Other thing is for templates approach, which is Best Practice for Gatsby, and it's not used in right way in current staging.

SCSS

We definitely should use some preprocessor to handle modular styles. In my PR I propose to use CSS modules, which works well with TS. Current staging structure "few global CSS files for everything" it's awful anti pattern that should be fixed as soon as possible.

We're not going to merge it, so it should be closed in favor to smaller PRs based on this