diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 9e591451..eb53611d 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -4,7 +4,7 @@ env:
ZOLA_VERSION: 0.17.2
on:
- workflow_dispatch: # keep manual Github Action trigger in case of any issues with CF pages
+ workflow_dispatch: # keep manual Github Action trigger in case of any issues with CF section
# push:
jobs:
@@ -26,7 +26,7 @@ jobs:
./zola build
- name: Publish to Cloudflare Pages
- uses: cloudflare/pages-action@v1
+ uses: cloudflare/section-action@v1
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
diff --git a/content/_index.md b/content/_index.md
index 8a7cd40b..7e41d372 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,6 +1,7 @@
---
-title: "Organic Maps: Offline Hike, Bike, Trails and Navigation"
-description: Fast detailed offline maps for travelers, tourists, drivers, hikers and cyclists created by MapsWithMe (Maps.Me) app founders.
+title: "Navigate with Privacy. Drive, Hike, Bike Offline"
+description: 'The ultimate companion app for travelers,
+built by the community.'
template: home.html
sort_by: weight
extra:
diff --git a/sass/common/header.scss b/sass/common/header.scss
new file mode 100644
index 00000000..dc29c5d0
--- /dev/null
+++ b/sass/common/header.scss
@@ -0,0 +1,41 @@
+.header {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ padding: 14rem 0;
+ z-index: 100;
+ &__container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ &__link a{
+ text-decoration: none;
+ font: var(--nav-link);
+ color: var(--common-white);
+ cursor: pointer;
+ padding: 8rem 16rem;
+ }
+
+ &__logo {
+ color: var(--common-white);
+ }
+ &__row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ &--green {
+ background-color: var(--common-green-primery);
+ .header {
+ &__logo {
+ color: var(--common-green);
+ }
+ &__link a{
+ color: var(--common-black);
+ }
+ }
+ }
+}
+
diff --git a/sass/component/buttons.scss b/sass/component/buttons.scss
new file mode 100644
index 00000000..cb9297e3
--- /dev/null
+++ b/sass/component/buttons.scss
@@ -0,0 +1,21 @@
+.button {
+ width: fit-content;
+ padding: 12rem 16rem;
+ min-width: 133rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ font: var( --nav-link);
+ color: var(--common-white);
+ text-decoration: none;
+ border-radius: var(--border-r-8);
+ transition: background-color var(--transition);
+ &:hover {
+ transition: background-color var(--transition);
+ background-color: var(--common-green-hover);
+ }
+ &--main {
+ background-color: var(--common-green);
+ }
+}
\ No newline at end of file
diff --git a/sass/component/hero.scss b/sass/component/hero.scss
new file mode 100644
index 00000000..3fac5261
--- /dev/null
+++ b/sass/component/hero.scss
@@ -0,0 +1,31 @@
+.hero {
+ background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat fixed;
+ min-height: 100vh;
+ padding: 80rem 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ &__container {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ position: relative;
+ }
+ &__content {
+ max-width: 494rem;
+ }
+ &__title {
+ margin-bottom: var(--mb-16);
+ }
+ &__description {
+ margin-bottom: var(--mb-40);
+ }
+ &__image {
+ position: absolute;
+ top: 50%;
+ right: -20rem;
+ transform: translateY(-50%);
+ }
+}
\ No newline at end of file
diff --git a/sass/global/index.scss b/sass/global/index.scss
index 25d9dae1..647396ef 100644
--- a/sass/global/index.scss
+++ b/sass/global/index.scss
@@ -4,6 +4,12 @@ html {
body {
font: var(--p);
- color: var(--common-black);
+ color: var(--black-white);
background-color: var(--white-black);
+}
+
+.container {
+ width: 100%;
+ margin: 0 auto;
+ max-width: var(--container);
}
\ No newline at end of file
diff --git a/sass/global/reset.scss b/sass/global/reset.scss
index 0b809bfd..86b0ff9a 100644
--- a/sass/global/reset.scss
+++ b/sass/global/reset.scss
@@ -3,7 +3,9 @@
margin: 0;
box-sizing: border-box;
}
-
+.wrapper {
+ overflow: hidden;
+}
button {
outline: none;
border: none;
diff --git a/sass/main.scss b/sass/main.scss
index dde0e0fa..ef592c7f 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,13 +1,19 @@
/// Variables ///
@import "./variables/color-theme";
@import "./variables/fonts";
+@import "./variables/spasing";
/// Global Style ///
@import "./global/reset";
@import "./global";
+// Common Style
+@import "./common/header";
+
// Component Style
+@import "./component/buttons";
@import "./component/switch-theme";
+@import "./component/hero";
// Pages Style
diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss
index bb556d48..4f051977 100644
--- a/sass/variables/color-theme.scss
+++ b/sass/variables/color-theme.scss
@@ -2,7 +2,9 @@
:root {
--common-black: #000D07;
--common-white: #ffffff;
- --common-green: #33895E;
+ --common-green: #006C35;
+ --common-green-primery: #CCE1D7;
+ --common-green-hover: #2b6445;
}
// Theme COLOR change
diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss
index 85ea2387..db9ebfe0 100644
--- a/sass/variables/fonts.scss
+++ b/sass/variables/fonts.scss
@@ -5,13 +5,24 @@
--sub-fonst: 'Lato', sans-serif;
--h1: 300 48rem/60rem var(--sub-fonst);
+ --h1-sub: 400 24rem/32rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
+ --nav-link: 500 16rem/28rem var(--main-font);
}
.h1{
font: var(--h1);
+ color: var(--common-white);
+}
+.h1-sub {
+ font: var(--h1-sub);
+ color: var(--common-white);
}
.p{
font: var(--h1);
}
+.nav-link{
+ font: var(--nav-link);
+}
+
diff --git a/sass/variables/spasing.scss b/sass/variables/spasing.scss
new file mode 100644
index 00000000..1333db93
--- /dev/null
+++ b/sass/variables/spasing.scss
@@ -0,0 +1,10 @@
+:root {
+ --container: 1100rem;
+
+ --mb-16: 16rem;
+ --mb-40: 40rem;
+
+ --border-r-8: 8rem;
+
+ --transition: 0.5s;
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 11f88942..b6cdf3ee 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -60,7 +60,7 @@
{{ resource.title }}
{%- if lang == config.default_language %}
- {% include 'language_redirect.html' %}
+ {% include 'components/language_redirect.html' %}
{% endif -%}
@@ -69,23 +69,26 @@
-
+
+
-
- {% block content %}{% endblock %}
-
+
+ {% block content %}{% endblock %}
+
-
+
+
-{% include 'shortcodes/switch-theme.html' %}
+ {% include 'shortcodes/switch-theme.html' %}
+ {% include 'shortcodes/header-switch.html' %}
diff --git a/templates/common/header.html b/templates/common/header.html
index ffb568b5..e59370ab 100644
--- a/templates/common/header.html
+++ b/templates/common/header.html
@@ -2,9 +2,9 @@
{% if lang != config.default_language %}
{% set langPathPrefix = '/' ~ lang %}
{% endif %}
-