Джедай вёрстки #7. Часть 5: Решаем проблемы с Mmenu. Продолжаем верстать

Джедай вёрстки #7. Часть 5.

Всем привет, друзья! Это пятый урок из серии по адаптивной HTML вёрстке макета на реальном примере "Джедай вёрстки #7". В данном уроке мы решим некоторые проблемы Mmenu из прошлого выпуска и продолжим вёрстку шапки сайта.

Референсы, используемые изображения, плагины, результат вёрстки, исходники XD/PSD и другие материалы проекта на странице: Референсы.

Дополнительные ссылки урока:

Гист кнопки: Button Sass Styles (Universal Starter).

Универсальный Sass код кнопки на каждый день:

.button
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 15px 45px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 2px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	&::after
		transition: background-color .2s ease
		position: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32