From 93442d28f59213b0bf49d7585d48d6b28c7102ef Mon Sep 17 00:00:00 2001 From: Maxim Stogniy Date: Mon, 4 May 2020 15:02:47 +1200 Subject: [PATCH] Final styling --- package.json | 7 ++++ src/components/about.pug | 2 +- src/components/contacts.pug | 2 +- src/components/hero.pug | 4 +- src/components/reviews.pug | 2 +- src/components/skills.pug | 2 +- src/components/works.pug | 4 +- src/index.pug | 2 +- src/mixins.pug | 16 ++++++-- src/styles/blocks/custom-btn.pcss | 4 ++ src/styles/blocks/features.pcss | 1 + src/styles/blocks/form.pcss | 4 +- src/styles/blocks/nav.pcss | 10 +++++ src/styles/blocks/paralax.pcss | 6 +-- src/styles/blocks/reviews.pcss | 4 +- src/styles/blocks/slider-btn.pcss | 7 ++++ src/styles/blocks/socials.pcss | 12 ++++++ src/styles/blocks/triangles.pcss | 1 + src/styles/blocks/works-slider.pcss | 60 ++++++++++++----------------- src/styles/blocks/works.pcss | 4 -- src/styles/variables.json | 5 ++- webpack.config.js | 2 +- 22 files changed, 97 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index 10d29fc..fd47903 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,13 @@ }, "keywords": [], "author": "Maxim Stogniy ", + "contributors": [ + { + "name": "Stelios Baglaridis", + "email": "stelios@baglaridis.com", + "url": "https://psd-to.site" + } + ], "license": "ISC", "devDependencies": { "@babel/core": "^7.2.2", diff --git a/src/components/about.pug b/src/components/about.pug index c78a9c5..6bf075d 100644 --- a/src/components/about.pug +++ b/src/components/about.pug @@ -1,4 +1,4 @@ -section.about +section.about(id="about") .container.about__container .about__content .about__user diff --git a/src/components/contacts.pug b/src/components/contacts.pug index b23bea1..d875dca 100644 --- a/src/components/contacts.pug +++ b/src/components/contacts.pug @@ -1,4 +1,4 @@ -section.contacts +section.contacts(id="contacts") .container h2.section__title.contacts__title Связаться со мной .contacts__form diff --git a/src/components/hero.pug b/src/components/hero.pug index 59299f7..0db9e60 100644 --- a/src/components/hero.pug +++ b/src/components/hero.pug @@ -1,4 +1,4 @@ -section.hero.fullscreen-section +section.hero.fullscreen-section(id="hero") .container.hero__container header.header .header__logo @@ -12,4 +12,4 @@ section.hero.fullscreen-section h1.user-info__desc !{desc} .user-info__username #{username} .hero__btns - a(href="#").scroll-down Скролл \ No newline at end of file + a(href="#about").scroll-down Скролл \ No newline at end of file diff --git a/src/components/reviews.pug b/src/components/reviews.pug index f9f830d..5606a3f 100644 --- a/src/components/reviews.pug +++ b/src/components/reviews.pug @@ -1,4 +1,4 @@ -section.reviews +section.reviews(id="reviews") .container .reviews__title h2.section__title.reviews__title-text Что обо мне говорят diff --git a/src/components/skills.pug b/src/components/skills.pug index a1385a1..2841a7d 100644 --- a/src/components/skills.pug +++ b/src/components/skills.pug @@ -1,4 +1,4 @@ -section.skills +section.skills(id="skills") .container.skills__container .skills__image +image('decor/bag.jpg', 'skills__image-pic') diff --git a/src/components/works.pug b/src/components/works.pug index 31f5836..132f779 100644 --- a/src/components/works.pug +++ b/src/components/works.pug @@ -1,4 +1,4 @@ -section.works +section.works(id="works") .container h2.section__title.works__title Мои работы .works__content @@ -9,7 +9,7 @@ section.works ul.works-slider__previews - var previews = [1,2,3,4] each preview in previews - li.works-slider__preview-item + li.works-slider__preview-item(class=preview == 1 ? 'active': '') button(type="button").works-slider__preview-btn +image(`content/works/${preview}.jpg`, 'works-slider__preview-img') .works-slider__buttons.slider-btns diff --git a/src/index.pug b/src/index.pug index b7230de..681d091 100644 --- a/src/index.pug +++ b/src/index.pug @@ -19,7 +19,7 @@ html(lang="en") include ./components/works +triangles('top', 'triangles--bottom') .feedback - +paralax('budda', 'paralax--features') + +paralax('budda') include ./components/reviews include ./components/contacts diff --git a/src/mixins.pug b/src/mixins.pug index 1df0e97..ef5be06 100644 --- a/src/mixins.pug +++ b/src/mixins.pug @@ -10,11 +10,19 @@ mixin image(path, className) mixin menu nav.nav - - var menu = ['Главная', 'Обо мне', 'Навыки', 'Работы', 'Отзывы', 'Связаться']; + - + var menu = [ + ['Главная', 'hero'], + ['Обо мне', 'about'], + ['Навыки', 'skills'], + ['Работы', 'works'], + ['Отзывы', 'reviews'], + ['Связаться', 'contacts'] + ]; ul.nav__list each item in menu li.nav__item - a(href="#").nav__link #{item} + a(href=`#${item[1]}`).nav__link #{item[0]} mixin socials(modifyClass) - var icons = ['inst', 'vk', 'github']; @@ -38,8 +46,8 @@ mixin triangles(direction, className) else polygon(points="0,0 0,100 1000,0") -mixin paralax(image, className) - .paralax(class=className) +mixin paralax(image) + .paralax .paralax__container .paralax__image +image(`bg/${image}.jpg`, 'paralax__image-pic') \ No newline at end of file diff --git a/src/styles/blocks/custom-btn.pcss b/src/styles/blocks/custom-btn.pcss index 4b30cf9..8aaa10e 100644 --- a/src/styles/blocks/custom-btn.pcss +++ b/src/styles/blocks/custom-btn.pcss @@ -6,4 +6,8 @@ font-size: 18px; font-weight: 700; padding: 30px 120px; + + &:hover { + background: linear-gradient(to right, #bb00ff 0%, #5900ff 100%); + } } \ No newline at end of file diff --git a/src/styles/blocks/features.pcss b/src/styles/blocks/features.pcss index 5df1718..3223d73 100644 --- a/src/styles/blocks/features.pcss +++ b/src/styles/blocks/features.pcss @@ -2,4 +2,5 @@ position: relative; padding-top: 150px; background: $white; + padding-bottom: 120px; } \ No newline at end of file diff --git a/src/styles/blocks/form.pcss b/src/styles/blocks/form.pcss index 5cb4bc3..5838c50 100644 --- a/src/styles/blocks/form.pcss +++ b/src/styles/blocks/form.pcss @@ -35,7 +35,7 @@ opacity: .3; font-weight: 600; margin-bottom: 20px; - margin-left: 50px; + margin-left: 45px; } .form__block-wrap { @@ -53,7 +53,7 @@ height: 30px; fill: currentColor; opacity: .3; - margin-right: 20px; + margin-right: 15px; } .form__block-field { diff --git a/src/styles/blocks/nav.pcss b/src/styles/blocks/nav.pcss index b75859f..aac8511 100644 --- a/src/styles/blocks/nav.pcss +++ b/src/styles/blocks/nav.pcss @@ -5,6 +5,16 @@ .nav__item { margin-right: 50px; + &:hover, + &:active { + font-weight: 600; + } + + &:active { + border-bottom: 3px solid $main; + color: $main; + } + &:last-child { margin-right: 0; } diff --git a/src/styles/blocks/paralax.pcss b/src/styles/blocks/paralax.pcss index c342c74..5486bed 100644 --- a/src/styles/blocks/paralax.pcss +++ b/src/styles/blocks/paralax.pcss @@ -4,10 +4,8 @@ left: 50%; transform: translate(-50%, -50%); min-width: 1800px; - - &--features { - top: 48.6% - } + width: 100%; + height: 100%; } .paralax__image-pic { diff --git a/src/styles/blocks/reviews.pcss b/src/styles/blocks/reviews.pcss index fe5bcae..6f44a0a 100644 --- a/src/styles/blocks/reviews.pcss +++ b/src/styles/blocks/reviews.pcss @@ -1,7 +1,7 @@ .reviews { position: relative; - margin-bottom: 145px; - padding-top: 165px; + margin-bottom: 155px; + padding-top: 230px; } .reviews__title { diff --git a/src/styles/blocks/slider-btn.pcss b/src/styles/blocks/slider-btn.pcss index 617eb85..6063cd0 100644 --- a/src/styles/blocks/slider-btn.pcss +++ b/src/styles/blocks/slider-btn.pcss @@ -6,6 +6,13 @@ outline: none; border: none; + &:hover { + background-color: #5500f2; + .slider-btn__icon { + opacity: 1; + } + } + &--prev { .slider-btn__icon { transform: rotate(90deg); diff --git a/src/styles/blocks/socials.pcss b/src/styles/blocks/socials.pcss index 0cac890..57a4d08 100644 --- a/src/styles/blocks/socials.pcss +++ b/src/styles/blocks/socials.pcss @@ -14,6 +14,12 @@ border-radius: 50%; opacity: .3; + &:hover { + .social__icon { + fill: currentColor; + } + } + &:last-child { margin-right: 0; } @@ -28,6 +34,12 @@ .social__item { margin-right: 40px; + &:hover { + .social__icon { + fill: $main; + } + } + &:last-child { margin-right: 0; } diff --git a/src/styles/blocks/triangles.pcss b/src/styles/blocks/triangles.pcss index 1e76657..89ee3b4 100644 --- a/src/styles/blocks/triangles.pcss +++ b/src/styles/blocks/triangles.pcss @@ -6,6 +6,7 @@ &--bottom { margin-top: 0; + margin-bottom: -89px; .triangles__item { height: 90px; diff --git a/src/styles/blocks/works-slider.pcss b/src/styles/blocks/works-slider.pcss index a1684e5..911ead6 100644 --- a/src/styles/blocks/works-slider.pcss +++ b/src/styles/blocks/works-slider.pcss @@ -73,16 +73,38 @@ .works-slider__preview-item { height: 100px; + position: relative; + + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: transparent; + z-index: 5; + } + + &.active { + &:after { + outline: 3px solid #dc9322; + } + } + - &.active, &:hover { - outline: 3px solid #dc9322; + &::after { + outline: 3px solid #dc9322; + background-color: rgba(85, 0, 242, 0.3); + } } } .works-slider__preview-btn { display: block; height: 100%; + width: 100%; outline: none; border: none; padding: 0; @@ -99,40 +121,6 @@ right: 0; } -.works-slider__button { - width: 50px; - height: 50px; - background: #353e4e; - padding: 0; - outline: none; - border: none; - - &:hover { - .works-slider__button-icon { - opacity: 1; - } - } - - &--prev { - .works-slider__button-icon { - transform: rotate(90deg); - } - } - - &--next { - .works-slider__button-icon { - transform: rotate(-90deg); - } - } -} - -.works-slider__button-icon { - width: 10px; - height: 10px; - opacity: .3; - fill: $white; -} - .works-slider__link { font-size: 18px; font-weight: 700; diff --git a/src/styles/blocks/works.pcss b/src/styles/blocks/works.pcss index 4d169e0..5f25dd3 100644 --- a/src/styles/blocks/works.pcss +++ b/src/styles/blocks/works.pcss @@ -1,7 +1,3 @@ -.works { - padding-bottom: 120px; -} - .works__title { margin-bottom: 90px; } \ No newline at end of file diff --git a/src/styles/variables.json b/src/styles/variables.json index 7175220..38bbf7c 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -8,6 +8,7 @@ "main": "#5500f2", "font": "#464d62", "footer": "#252830", - "href": "#4b6f47", - "white": "#fff" + "href": "#586ed3", + "white": "#fff", + "tag": "#859ec2" } diff --git a/webpack.config.js b/webpack.config.js index 86fc67f..fd6b50b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,7 +9,7 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = (env, argv) => { const isProductionBuild = argv.mode === "production"; - const publicPath = '/'; + const publicPath = '/stogniy-ls/'; const pcss = { test: /\.(p|post|)css$/,