From db6895106536d4985fa47e7e27c868dc41588c24 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad <91639107+GoodDayForSurf@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:46:20 +0400 Subject: [PATCH] Redesign header, footer, favicon (#196) * redesign +header logo +footer logo +favicon --- .../icons/icon-logo/icon-logo.component.css | 23 +++++++++ .../icons/icon-logo/icon-logo.component.html | 42 +++++++++++++--- .../icons/icon-logo/icon-logo.component.ts | 3 +- src/app/index/index.component.css | 18 ++++++- .../app-layout/app-layout.component.css | 10 ---- .../app-layout/app-layout.component.html | 2 +- src/app/layouts/footer/footer.component.css | 48 +++++++++++++------ src/app/layouts/footer/footer.component.html | 32 +++++-------- src/app/layouts/header/header.component.css | 15 +----- src/app/layouts/header/header.component.html | 9 +--- src/assets/favicon.svg | 1 + src/index.html | 24 +++++++++- src/styles.css | 17 +++---- 13 files changed, 157 insertions(+), 87 deletions(-) create mode 100644 src/app/icons/icon-logo/icon-logo.component.css create mode 100644 src/assets/favicon.svg diff --git a/src/app/icons/icon-logo/icon-logo.component.css b/src/app/icons/icon-logo/icon-logo.component.css new file mode 100644 index 00000000..47b75ac3 --- /dev/null +++ b/src/app/icons/icon-logo/icon-logo.component.css @@ -0,0 +1,23 @@ +:host { + height: min-content; + display: flex; + gap: 12px; + align-items: center; +} + +:host.blue-colored svg path#top-square { + fill: rgb(33, 144, 247); +} + +:host.blue-colored svg path#bottom-square { + fill: #667788; +} + +:host.blue-colored svg path#first-letter, +:host.blue-colored svg path#second-letter { + fill: white; +} + +:host.white-colored svg#devextreme-logo path { + fill: white; +} diff --git a/src/app/icons/icon-logo/icon-logo.component.html b/src/app/icons/icon-logo/icon-logo.component.html index 77da8895..1ecba7ec 100644 --- a/src/app/icons/icon-logo/icon-logo.component.html +++ b/src/app/icons/icon-logo/icon-logo.component.html @@ -1,7 +1,37 @@ - - - + + + + + + + + + + + + + + diff --git a/src/app/icons/icon-logo/icon-logo.component.ts b/src/app/icons/icon-logo/icon-logo.component.ts index 3a9a57c0..9cc1ce31 100644 --- a/src/app/icons/icon-logo/icon-logo.component.ts +++ b/src/app/icons/icon-logo/icon-logo.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-icon-logo', - templateUrl: './icon-logo.component.html' + templateUrl: './icon-logo.component.html', + styleUrls: ['./icon-logo.component.css'] }) export class IconLogoComponent { } diff --git a/src/app/index/index.component.css b/src/app/index/index.component.css index 452bc97e..cdb2e0c5 100644 --- a/src/app/index/index.component.css +++ b/src/app/index/index.component.css @@ -4,9 +4,25 @@ justify-content: center; } +@media only screen and (max-width: 700px) { + .blocks { + flex-direction: column; + } + + .blocks .block { + width: 100%; + flex: 1; + } +} + +@media only screen and (min-width: 700px) { + .blocks .block { + width: 320px; + } +} + .blocks .block { align-items: center; - width: 320px; display: flex; flex-direction: column; padding: 32px 0; diff --git a/src/app/layouts/app-layout/app-layout.component.css b/src/app/layouts/app-layout/app-layout.component.css index b2d3dc18..423bb93c 100644 --- a/src/app/layouts/app-layout/app-layout.component.css +++ b/src/app/layouts/app-layout/app-layout.component.css @@ -51,13 +51,3 @@ line-height: 125%; max-width: 780px; } - -:host ::ng-deep .footer { - /* display: none; */ -} - -@media only screen and (max-width: 768px) { - main { - border: orange 1px solid; - } -} diff --git a/src/app/layouts/app-layout/app-layout.component.html b/src/app/layouts/app-layout/app-layout.component.html index 2d394e14..41d58152 100644 --- a/src/app/layouts/app-layout/app-layout.component.html +++ b/src/app/layouts/app-layout/app-layout.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/app/layouts/footer/footer.component.css b/src/app/layouts/footer/footer.component.css index 107575b4..61833afa 100644 --- a/src/app/layouts/footer/footer.component.css +++ b/src/app/layouts/footer/footer.component.css @@ -18,10 +18,6 @@ /* z-index: 3; */ } -:host ::ng-deep .footer svg path { - fill: white; -} - .footer.content-width { padding-top: 0; padding-bottom: 0; @@ -38,13 +34,18 @@ gap: 40px; } -.footer-logo { - display: flex; - gap: 12px; +.footer-text { + margin: 0 0 16px 0; + font-size: 12px; + line-height: 14px; } -.footer-text { - margin: 0; +.footer-text a { + color: white; +} + +.footer-text a:hover { + opacity: .8; } .footer-links { @@ -85,24 +86,43 @@ opacity: 0.6; } -@media only screen and (max-width: 768px) { +@media only screen and (max-width: 1400px) { .footer { + padding: 32px 0; height: auto; - border: solid 1px yellow; + font-size: 12px; } - .footer-container, .footer-about { + + .footer-about { flex-direction: column; - gap: 12px; + align-items: center; } + + .footer-container { + flex-direction: column; + } + .footer-about { + flex-direction: column; align-items: center; } - .footer-text, .footer-links { + + .footer-text, .footer-links { text-align: center; } + + .footer-text { + margin-bottom: 16px; + } + + .footer-socials { + justify-content: center; + } + .footer-socials-title { display: none; } + .footer-socials-links { justify-content: center; } diff --git a/src/app/layouts/footer/footer.component.html b/src/app/layouts/footer/footer.component.html index 2ebf2062..30ad7bd9 100644 --- a/src/app/layouts/footer/footer.component.html +++ b/src/app/layouts/footer/footer.component.html @@ -2,32 +2,24 @@

Copyright © 2011-2023 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners.

-
- Your Privacy - Legal Statements - Licensing -
+

+ Use of this site constitutes acceptance of the Developer Express Inc Website Terms of Use, Privacy Policy (Updated). +
+ Use of DevExtreme UI components/libraries constitutes acceptance of the Developer Express Inc End User License Agreement. +

+

+ FAQs: Licensing + | DevExpress Support Services + | Supported Versions & Requirements + | Maintenance Releases +

diff --git a/src/app/layouts/header/header.component.css b/src/app/layouts/header/header.component.css index ca39c8fe..c134e533 100644 --- a/src/app/layouts/header/header.component.css +++ b/src/app/layouts/header/header.component.css @@ -27,22 +27,9 @@ cursor: pointer; } -.logo .header-logo-js, -.logo .header-logo-devextreme { - height: 40px; -} -.logo .header-logo-js { - margin-top: -1px; - margin-right: 6px; -} - -:host ::ng-deep .logo .header-logo-devextreme svg path { - fill: #596C7D; -} - .product-name { font-size: 24px; - line-height: 22px; + line-height: 28px; font-weight: 700; font-stretch: 75%; font-family: 'Open Sans',sans-serif; diff --git a/src/app/layouts/header/header.component.html b/src/app/layouts/header/header.component.html index 798364e8..160be860 100644 --- a/src/app/layouts/header/header.component.html +++ b/src/app/layouts/header/header.component.html @@ -1,12 +1,7 @@