diff --git a/backend/requirements/prod.txt b/backend/requirements/prod.txt index f5b917c1..38a2d0ae 100644 --- a/backend/requirements/prod.txt +++ b/backend/requirements/prod.txt @@ -2,7 +2,7 @@ # Flask Flask==1.0.2 -MarkupSafe==1.0 +MarkupSafe==1.1.1 Werkzeug==0.15.3 Jinja2==2.10.1 itsdangerous==0.24 diff --git a/frontend/client/components/Header/Banner.less b/frontend/client/components/Header/Banner.less new file mode 100644 index 00000000..10745961 --- /dev/null +++ b/frontend/client/components/Header/Banner.less @@ -0,0 +1,99 @@ +.Banner { + padding-left: 10px; + padding-right: 10px; + background-color: #2D2A26; + color: #fff; + overflow-x: hidden; + align-content: center; + justify-content: center; + display: flex; + + @media (max-width: 1000px) { + padding-top: 10px; + padding-bottom: 10px; + flex-direction: column; + } + + &__inner { + display: flex; + padding: .65rem 0; + align-items: center; + justify-content: center; + flex-direction: row; + max-width: 1000px; + align-content: center; + overflow-x: hidden; + margin-bottom: 0.25rem; + + @media (max-width: 1100px) { + max-width: 900px; + margin: 0 auto; + } + + @media (max-width: 1000px) { + max-width: 750px; + text-align: center; + padding: 0px 10px; + } + + @media(max-width: 600px) { + flex-wrap: wrap; + } + } + + &__badge { + padding: 6px 16px; + border-radius: 100px; + font-size: 14px; + line-height: 20px; + background-color: #CF8A00; + font-weight: 700; + text-transform: uppercase; + margin-right: 12px; + margin-top: auto; + margin-bottom: auto; + + @media (max-width: 1000px) { + padding: 6px 16px; + border-radius: 100px; + } + } + + &__link { + color: #fff; + text-decoration: none; + } + + &__body { + display: flex; + align-content: center; + justify-content: center; + padding: 0rem 0.5rem; + max-width: 1000px; + } + + &__body-text { + font-size: 14px; + font-weight: 500; + margin-bottom: 0; + + > * { + margin: 0; + } + + @media (max-width: 800px) { + line-height: 22px; + } + + @media(max-width: 600px) { + font-size: 12px; + line-height: 20px; + margin: 1rem 0; + } + } + + &__body-link { + color: #CF8A00; + text-decoration: none; + } +} diff --git a/frontend/client/components/Header/Banner.tsx b/frontend/client/components/Header/Banner.tsx new file mode 100644 index 00000000..aff37a59 --- /dev/null +++ b/frontend/client/components/Header/Banner.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './Banner.less' + +const Banner = (props: any) => ( +
{props.body}
+