diff --git a/content/about-us/index.md b/content/about-us/index.md index 77b711b3..e2ee6895 100644 --- a/content/about-us/index.md +++ b/content/about-us/index.md @@ -4,8 +4,10 @@ template: about-us.html weight: 10 extra: hero_title: About Us + hero_image: /about-us/about-bg.png hero_description_1: Free and open navigation with privacy hero_description_2: Built by the community + menu_title_pre: Home project_info_section_title: Free and open navigation with privacy, built by the community project_info_section_description: Organic Maps is a community-focused privacy navigation app for travelers, drivers, hikers, and cyclists. It uses the crowd-sourced OpenStreetMap data with contributors from all over the globe. It offers navigation with privacy - no location tracking, no data collection, and no phoning home so users can take control of their data. All Organic Maps features can operate without an active internet connection for offline navigation at urban or distant locations where a cell signal is not available. Organic Maps is an open-source project, and prioritizes community development. project_info_card_title_1: Mission diff --git a/sass/main.scss b/sass/main.scss index 661ddf39..ac236ad1 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -31,5 +31,6 @@ @import "./pages/volunteering"; @import "./pages/new-support"; @import "./pages/faq-page"; +@import "./pages/about-us"; diff --git a/sass/pages/about-us.scss b/sass/pages/about-us.scss new file mode 100644 index 00000000..cf706c6f --- /dev/null +++ b/sass/pages/about-us.scss @@ -0,0 +1,244 @@ +@import "../variables/media"; + +.free-open { + padding: var(--container-mob-section) 0; + + &__container { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 74rem; + align-items: center; + justify-content: space-between; + width: 100%; + position: relative; + @media (max-width: $media-sm) { + grid-template-columns: 1fr; + gap: 20rem; + } + } + + &__img { + width: 100%; + border-radius: 20rem; + position: relative; + z-index: 4; + } + + &__img-row { + position: absolute; + top: 0; + right: 16rem; + width: 50%; + + &:before { + content: ''; + display: block; + width: 100%; + height: 100%; + background-color: var(--cart-bg); + border-radius: 20rem; + position: absolute; + transform: translate(-15rem, 10rem); + z-index: 1; + } + + @media (max-width: $media-sm) { + position: relative; + right: 0; + width: fit-content; + margin: 15rem 0; + &:before { + transform: translate(-10rem, 5rem); + } + } + } + + &__line { + margin: 20rem 0; + max-width: 222rem; + height: 5rem; + @media (max-width: $media-sm) { + display: none; + } + } +} + +.about-us { + &__content { + background-color: var(--cart-bg); + width: fit-content; + border-radius: 10rem; + padding: 30rem 22rem 22rem; + flex-grow: 1; + max-width: 375rem; + margin: -100rem 20rem 0; + @media (max-width: $media-sm) { + margin: -70rem 0rem 0 10rem; + z-index: 4; + } + } + + &__container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20rem; + + @media (max-width: $media-sm) { + grid-template-columns: 1fr; + } + + } + + img { + width: 100%; + } + + &__img { + border-radius: 10rem; + @media (max-width: $media-sm) { + transform: translateX(-5rem); + z-index: 1; + } + } + + &__icon { + + width: 79rem; + height: 79rem; + border-radius: 79rem; + background-color: var(--common-green); + display: flex; + align-items: center; + justify-content: center; + color: var(--common-white); + } + + &__item { + display: flex; + flex-direction: column; + align-items: flex-end; + @media (max-width: $media-sm) { + + } + } + + &__title { + padding-bottom: 10rem; + } + + &__title-row { + + margin: -50rem 0 10rem; + display: flex; + gap: 15rem; + align-items: flex-end; + } +} + +.about-history { + padding-top: var(--container-mob-section); + + &__title { + margin-bottom: 30rem; + } + + &__circle { + width: 18rem; + border-radius: 18rem; + height: 18rem; + margin: 20rem 0 20rem 17rem; + background-color: var(--green-button); + position: relative; + z-index: 5; + @media (max-width: $media-sm) { + margin: 0; + } + } + + &__number--green { + color: var(--green-button); + } + + &__row { + display: grid; + grid-template-columns: repeat(5, 1fr); + justify-content: space-between; + align-items: flex-start; + gap: 33rem; + position: relative; + + &:before { + content: ""; + border-radius: 4rem; + height: 4rem; + background-color: var(--bg-green); + position: absolute; + width: 100%; + z-index: 1; + top: 63rem; + } + + @media (max-width: $media-sm) { + grid-template-columns: 1fr; + &:before { + height: 100%; + width: 4rem; + top: 50%; + transform: translateY(-53%); + left: 7rem; + } + } + } + + &__item { + @media (max-width: $media-sm) { + display: flex; + align-items: flex-start; + gap: 32rem; + } + } + + &__count { + @media (max-width: $media-sm) { + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 10rem; + } + } +} + +.about-links { + margin: var(--container-mob-section) 0; + + &__title { + margin-bottom: 30rem; + } + + &__buttons { + display: flex; + justify-content: space-between; + gap: 40rem; + @media (max-width: $media-sm) { + gap: 10rem; + } + } + + img { + width: 100%; + object-fit: contain; + max-width: 407rem; + } + + &__link { + display: flex; + align-items: center; + flex-grow: 1; + justify-content: center; + padding: 18rem; + box-shadow: var(--common-card-box-shadow); + border-radius: 10rem; + background-color: var(--link-map-section); + } +} + diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss index f6ed9b3e..a1190c8a 100644 --- a/sass/variables/color-theme.scss +++ b/sass/variables/color-theme.scss @@ -1,11 +1,12 @@ // Common COLOR @import "../variables/media"; + :root { --common-black: #000D07; --common-white: #ffffff; --common-green: #006C35; - --common-green-02: #33453D ; + --common-green-02: #33453D; --common-green-primery: #CCE1D7; --common-green-btn: #006031; --common-green-hover: #2b6445; @@ -14,20 +15,23 @@ --common-grey-v3: #64776E; --common-grey-v4: #E5F0EB; --common-grey-v5: #CECECE; + --common-grey-v6: #BBD7A7; --common-green-border: #99C4AF; --common-line-color: #AEC5BA; --common-black-sub: #26312C; --common-green-btn-social: #33895E; - --common-acord-button: #BFDACC; + --common-acord-button: #BFDACC; --common-green-gradient: linear-gradient(90deg, #006C35 0%, rgba(0, 96, 49, 0.00) 100%); + --common-card-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15); } - // Theme COLOR change .light { - --card-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15); + --link-map-section: var(--common-white); + --cart-bg: var(--common-acord-button); + --card-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15); --icon-check-color: var(--common-green-primery); --acordion-green: #F2F8F5; --acordion-green-bg: var(--common-grey-v4);; @@ -46,10 +50,12 @@ } .dark { - --card-box-shadow: none; + --link-map-section: var(--common-grey-v6); + --cart-bg: var(--common-green-02); + --card-box-shadow: none; --icon-check-color: var(--common-green-primery); --acordion-green: var(--common-green-02); - --acordion-green-bg: var( --common-grey-v3); + --acordion-green-bg: var(--common-grey-v3); --body-bg: #2C2C2C; --dots-color: var(--common-grey-v4);; --white-black: var(--common-black); @@ -58,8 +64,8 @@ --bg-green: var(--common-green-02); --wite-green: var(--common-green-02); --footer-bg: var(--common-black); - --green-button: #BBD7A7; - --green-button-transparent: #BBD7A7; + --green-button: var(--common-grey-v6); + --green-button-transparent: var(--common-grey-v6); --icon-border-green: var(--common-white); - --rewi-card-color: var( --common-grey-v3); + --rewi-card-color: var(--common-grey-v3); } \ No newline at end of file diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss index 288f73d5..de99239c 100644 --- a/sass/variables/fonts.scss +++ b/sass/variables/fonts.scss @@ -14,12 +14,14 @@ --h4: 500 18rem/28rem var(--main-font); --h5: 500 20rem/28rem var(--main-font); --h6: 500 30rem/36rem var(--main-font); + --h6-bold: 700 30rem/36rem var(--main-font); + --h6-date: 700 30rem/36rem var(--main-font); --h5-boold: 700 22rem/28rem var(--main-font); --p: 300 18rem/28rem var(--main-font); --p-15: 300 15rem/26rem var(--main-font); --p-md: 400 16rem/28rem var(--main-font); --p-md-bold: 600 16rem/28rem var(--main-font); - --p-sm: 500 14rem/28rem var(--main-font); + --p-sm: 500 14rem/21rem var(--main-font); --p-sub: 300 12rem/15rem var(--main-font); --p-card: 300 17rem/24rem var(--main-font); --nav-link: 500 16rem/28rem var(--main-font); @@ -30,14 +32,14 @@ @media (max-width: $media-md) { :root { - + --h6-date: 700 16rem/22rem var(--main-font); --h1: 300 36rem/normal var(--sub-fonst); --h1-sub: 400 18rem/32rem var(--main-font); --h5-boold: 700 16rem/28rem var(--main-font); --p: 300 18rem/28rem var(--main-font); --p-md: 400 16rem/28rem var(--main-font); --p-sm: 500 14rem/28rem var(--main-font); - --p-sm-light: 300 14rem/28rem var(--main-font); + --p-sm-light: 300 14rem/18rem var(--main-font); --p-sub: 300 12rem/15rem var(--main-font); --nav-link: 500 13rem/24rem var(--main-font); @@ -85,9 +87,15 @@ font: var(--h5); color: var(--black-white); } +.h6-date { + font: var(--h6-date); +} .h6 { font: var(--h6); } +.h6-bold { + font: var(--h6-bold); +} .h5-boold { font: var( --h5-boold); } diff --git a/static/images/about-us/wikipedia-banner.png b/static/images/about-us/wikipedia-banner.png index c81edc68..9be867ae 100644 Binary files a/static/images/about-us/wikipedia-banner.png and b/static/images/about-us/wikipedia-banner.png differ diff --git a/templates/about-us.html b/templates/about-us.html index b48e9b82..f1e5df36 100644 --- a/templates/about-us.html +++ b/templates/about-us.html @@ -1,67 +1,139 @@ {% extends "base.html" %} {%- block content %} -
-
-

{{ page.extra.hero_title | safe }}

-

{{ page.extra.hero_description_1 | safe }}

-

{{ page.extra.hero_description_2 | safe }}

-
-
-
-
-
-

{{ page.extra.project_info_section_title | safe }}

-

{{ page.extra.project_info_section_description | safe }}

-
- -
-
- -
- -

{{ page.extra.project_info_card_title_1 | safe }}

-

{{ page.extra.project_info_card_description_1 | safe }}

-
-
-
- -
- -

{{ page.extra.project_info_card_title_2 | safe }}

-

{{ page.extra.project_info_card_description_2 | safe }}

-
-
-
-
-

{{ page.extra.history_section_title | safe }}

-

{{ page.extra.history_section_20_11 | safe }}

-

{{ page.extra.history_section_20_15 | safe }}

-

{{ page.extra.history_section_20_21 | safe }}

-

{{ page.extra.history_section_20_22 | safe }}

-

{{ page.extra.history_section_20_23 | safe }}

-
-
-

{{ page.extra.integration_section_title | safe }}

- - -
-
- {{ trans(key='ged-involved-title', lang=lang) }} -
- - {{ trans(key='donate-title', lang=lang) }} - {{ trans(key='donate-description', lang=lang) }} -
-
- - {{ trans(key='contribute-code-title', lang=lang) }} - {{ trans(key='contribute-code-description', lang=lang) }} -
-
- - {{ trans(key='contribute-location-title', lang=lang) }} - {{ trans(key='contribute-location-description', lang=lang) }} -
-
+ +
+
+ +
+

+ {{ page.extra.hero_title | safe }} +

+

+ {{ page.extra.hero_description_1 | safe }} + {{ page.extra.hero_description_2 | safe }} +

+ +
+
+
+ +
+
+
+

{{ page.extra.project_info_section_title | safe }}

+
+
+ img +
+

{{ page.extra.project_info_section_description | safe }}

+
+ +
+
+ +
+
+
+ img +
+
+
+ {% include 'ui/icons/about/icon01.html' %} +
+

{{ page.extra.project_info_card_title_1 | safe }}

+
+

{{ page.extra.project_info_card_description_1 | safe }}

+
+
+
+ img +
+ +
+
+ {% include 'ui/icons/about/icon02.html' %} +
+

{{ page.extra.project_info_card_title_2 | safe }}

+
+ +

{{ page.extra.project_info_card_description_2 | safe }}

+
+
+
+
+ +
+
+

{{ page.extra.history_section_title | safe }}

+
+
+
+
2011
+
+
+

{{ page.extra.history_section_20_11 | safe }}

+
+
+
+
2015
+
+
+

{{ page.extra.history_section_20_15 | safe }}

+
+
+
+
2021
+
+
+

{{ page.extra.history_section_20_21 | safe }}

+
+
+
+
2022
+
+
+

{{ page.extra.history_section_20_22 | safe }}

+
+
+
+
2023
+
+
+

{{ page.extra.history_section_20_23 | safe }}

+
+
+
+
+ +
+
+

{{ page.extra.integration_section_title | safe }}

+
+ + img + + + img + +
+
+ +
+ {% include 'section/donate.html' %} {%- endblock content %} \ No newline at end of file diff --git a/templates/community.html b/templates/community.html index f241c7c9..59dd313d 100644 --- a/templates/community.html +++ b/templates/community.html @@ -31,8 +31,6 @@ - -
@@ -151,7 +149,7 @@
  • {% include 'ui/icons/social/git.html' %}
    • -