diff --git a/src/v2/img/sprites/svg/common/logo-full-green.svg b/src/v2/img/sprites/svg/common/logo-full-green.svg
new file mode 100644
index 00000000..390c0eb7
--- /dev/null
+++ b/src/v2/img/sprites/svg/common/logo-full-green.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/v2/scss/layouts/_base.scss b/src/v2/scss/layouts/_base.scss
index 7d34e3a1..ad095a50 100644
--- a/src/v2/scss/layouts/_base.scss
+++ b/src/v2/scss/layouts/_base.scss
@@ -1,5 +1,6 @@
-$footer-mobile-height: 168px;
-$footer-height: 88px;
+$footer-mobile-height: 208px;
+$footer-tablet-height: 96px;
+$footer-height: 288px;
@mixin append-hr-to-container() {
.container::after {
@@ -18,6 +19,9 @@ html {
body {
margin-bottom: $footer-mobile-height;
+ @include media-breakpoint-up(md) {
+ margin-bottom: $footer-tablet-height;
+ }
@include media-breakpoint-up(lg) {
margin-bottom: $footer-height;
}
@@ -26,60 +30,140 @@ body {
// Footer styles
.footer {
overflow: hidden;
- display: block;
width: 100%;
position: absolute;
bottom: 0;
height: $footer-mobile-height;
- font-size: $font-size-sm;
- text-align: center;
+ font-size: $font-size-base;
+ color: $gray-dark;
+ border-top: $border-width solid $border-color;
+ padding-top: spacer("10x");
+ @include media-breakpoint-up(md) {
+ height: $footer-tablet-height;
+ padding-top: spacer("4x");
+ }
@include media-breakpoint-up(lg) {
+ padding-top: spacer("10x");
height: $footer-height;
}
- > .container {
- &::before {
+ .footer__link {
+ color: $gray-dark;
+
+ &:hover {
+ color: $gray-darker;
+ }
+ }
+}
+
+.ui.list.footer__list {
+ margin: 0 0 spacer("8x") spacer("10x");
+ width: 100%;
+ flex-direction: row;
+ display: none;
+ @include media-breakpoint-up(lg) {
+ display: flex;
+ }
+ @include media-breakpoint-up(xl) {
+ margin: 0 0 spacer("8x") 80px;
+ }
+
+ .list.ui {
+ margin: 0;
+ }
+
+ > .list__item {
+ margin: 0 auto;
+ }
+
+ .footer__link, .footer__title {
+ padding: 0 spacer("4x") spacer("2x") 0;
+ display: inline-block;
+ }
+}
+
+.footer__title {
+ font-size: $font-size-lg;
+ color: $black;
+ &:hover {
+ color: $black;
+ }
+}
+
+.footer__social-media-icons {
+ margin: 0;
+
+ .list__item {
+ margin: 0 spacer("1x") 0 0;
+ display: inline-block;
+
+ &:last-child {
+ margin: 0;
+ }
+
+ &:before {
content: "";
- width: 100%;
- display: block; //for old browsers
- border-top: $border-width solid $border-color;
- margin-bottom: spacer("8x");
}
}
.sprite-img {
- fill: $gray-light;
+ fill: darken($gray-light, 10%);
transition: $transition-base;
width: 1.75em;
height: 1.75em;
}
+
+ &:last-child {
+ margin-right: 0;
+ }
}
-.footer__social-media-icons {
- margin: spacer("2x");
+.footer__logo._full-logo {
+ width: 160px;
+ height: 88px;
+}
+
+.footer__logo._short-logo {
+ width: 92px;
+ height: 32px;
+}
+
+.footer__contacts {
+ text-align: center;
+ background-color: $white;
+ padding: 0;
+ @include media-breakpoint-up(md) {
+ text-align: left;
+ }
@include media-breakpoint-up(lg) {
- display: inline-block;
- margin: 0;
+ padding: spacer("3x") 0;
+ background-color: $dark-bg;
}
- a {
- margin: spacer("1x");
+
+ .footer__wrapper {
+ align-items: center;
+ }
+
+ .footer__copyright, .footer__link {
+ padding: 0 0 spacer("3x") 0;
+ display: block;
@include media-breakpoint-up(md) {
- margin: 0 0 0 spacer("1x");
+ padding: 0 spacer("3x") 0 0;
+ display: inline-block;
}
}
-}
-.footer__link {
- margin: spacer("2x");
- display: block;
- @include media-breakpoint-up(lg) {
- margin: 0 spacer("3x") 0 0;
- display: inline-block;
+ .footer__link {
+ color: $link-color;
+ @include media-breakpoint-up(lg) {
+ color: $gray-dark;
+ }
}
}
.content-block {
margin-bottom: spacer("8x");
+
.figure {
margin-bottom: spacer("6x");
}
diff --git a/src/v2/scss/sprites/_common.scss b/src/v2/scss/sprites/_common.scss
index 2e71470f..6578af75 100644
--- a/src/v2/scss/sprites/_common.scss
+++ b/src/v2/scss/sprites/_common.scss
@@ -43,6 +43,11 @@
height: 24px;
}
+.sprite-img._logo-full-green {
+ width: 164px;
+ height: 88px;
+}
+
.sprite-img._telegram {
width: 24px;
height: 24px;
diff --git a/templates/v2/layouts/inner.jinja2 b/templates/v2/layouts/inner.jinja2
index 9b528b16..7bf7cbb2 100644
--- a/templates/v2/layouts/inner.jinja2
+++ b/templates/v2/layouts/inner.jinja2
@@ -52,27 +52,84 @@
{% block content %}place page content here{% endblock content %}
{% block footer -%}
-