dark mode setup
add button
This commit is contained in:
borntojesus
parent
e84b0e187a
commit
fa4a2fd083
24 changed files with 227 additions and 585 deletions
|
|
@ -1,7 +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.
|
||||
page_template: index.html
|
||||
template: home.html
|
||||
sort_by: weight
|
||||
extra:
|
||||
menu_title: Home
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
.download-button {
|
||||
width: 133px;
|
||||
max-width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
background: #006C35;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.freedom__section .container {
|
||||
background: var(--colors-brand-green-primary-1, #E5F0EB);
|
||||
margin-bottom: 5px;
|
||||
border-radius: 24px;
|
||||
padding: 30px 40px;
|
||||
|
||||
.freedom__section {
|
||||
&__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
color: #006031;
|
||||
background: url('/images/arrow-link.svg') no-repeat right center;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
$headerAndLogoHeight: 65px;
|
||||
$headerPadding: 10px;
|
||||
$logoColor: green;
|
||||
$baseFontSize: 400;
|
||||
$baseBgColor: black;
|
||||
|
||||
@media print {
|
||||
.no-print,
|
||||
.no-print * {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin MenuItemsTextStyling {
|
||||
color: green;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
// All menu texts should be in one line.
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin MenuItemInvertedButton {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.lang-menu {
|
||||
display: none;
|
||||
// It's a list, so remove list padding (where bullets are usually drawn).
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&-item {
|
||||
margin-left: 1em;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
@include MenuItemsTextStyling;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
input.lang-menu-trigger {
|
||||
// Hide input checkbox, label is used for touch events instead.
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
|
||||
// Show menu on checkbox click.
|
||||
&:checked ~ .lang-menu {
|
||||
// Turn flexbox ul again into a block and reset it's properties.
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.lang-menu-item {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ label {
|
||||
@include MenuItemInvertedButton;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu button
|
||||
label[for="lang-menu-trigger"] {
|
||||
@include MenuItemsTextStyling;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.open__map {
|
||||
background-image: url('/images/open-map/open-map-bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 65%;
|
||||
min-height: 820px;
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 54px;
|
||||
|
||||
&__info {
|
||||
text-align: center;
|
||||
font-family: Lato;
|
||||
|
||||
&__title {
|
||||
font-family: Lato;
|
||||
font-size: 48px;
|
||||
line-height: 60px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
&__description {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.sections .container {
|
||||
background: var(--colors-brand-green-primary-1, #E5F0EB);
|
||||
padding: 60px 40px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.container--main {
|
||||
border-bottom-left-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
}
|
||||
.shadow {
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 5px;
|
||||
border-top-left-radius: 24px;
|
||||
border-top-right-radius: 24px;
|
||||
}
|
||||
|
||||
.sections {
|
||||
&__separate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 120px;
|
||||
gap: 40px;
|
||||
&__info {
|
||||
font-family: Lato;
|
||||
&__title {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
&__description {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
&__link {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
color: #006031;
|
||||
background: url('/images/arrow-link.svg') no-repeat right center;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.top-menu__item,
|
||||
.top-menu__item_active {
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu__donate a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.github svg {
|
||||
fill: black;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
overflow: visible !important;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
&__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
&__cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 68px;
|
||||
}
|
||||
&__item {
|
||||
padding: 8px 16px;
|
||||
a {color: white}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
.hero {
|
||||
background-image: url('/images/hero/hero-bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
min-height: 820px;
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 100px;
|
||||
}
|
||||
&__about-us-title {
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
color:white;
|
||||
font-weight: 300;
|
||||
}
|
||||
&__about-us-description {
|
||||
font-family: Inter, sans-serif;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 24px;
|
||||
color: white
|
||||
}
|
||||
&__image {
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
23
sass/component/switch-theme.scss
Normal file
23
sass/component/switch-theme.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.switch-theme {
|
||||
background-color: var(--common-black);
|
||||
width: 70rem;
|
||||
height: 30rem;
|
||||
padding: 3rem;
|
||||
border-radius: 70rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.is-active{
|
||||
.switch-theme__toggle {
|
||||
right: 42rem;
|
||||
}
|
||||
}
|
||||
&__toggle {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
right: 3rem;
|
||||
width: 23rem;
|
||||
height: 23rem;
|
||||
border-radius: 50rem;
|
||||
background-color: var(--common-green);
|
||||
}
|
||||
}
|
||||
9
sass/global/index.scss
Normal file
9
sass/global/index.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
html {
|
||||
font-size: 1px;
|
||||
}
|
||||
|
||||
body {
|
||||
font: var(--p);
|
||||
color: var(--common-black);
|
||||
background-color: var(--white-black);
|
||||
}
|
||||
10
sass/global/reset.scss
Normal file
10
sass/global/reset.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
246
sass/main.scss
246
sass/main.scss
|
|
@ -1,243 +1,15 @@
|
|||
@import "./language_selector";
|
||||
@import "./top-menu";
|
||||
@import "./download-button";
|
||||
@import "./block/hero";
|
||||
@import "./open-map";
|
||||
@import "./site-sections";
|
||||
@import "./freedom-section";
|
||||
/// Variables ///
|
||||
@import "./variables/color-theme";
|
||||
@import "./variables/fonts";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family:
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"segoe ui",
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
"apple color emoji",
|
||||
"segoe ui emoji",
|
||||
"segoe ui symbol",
|
||||
sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
/// Global Style ///
|
||||
@import "./global/reset";
|
||||
@import "./global";
|
||||
|
||||
code,
|
||||
a {
|
||||
// Prevents horizontal scrolling in Safari on narrow screen for long links and code lines.
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
// Component Style
|
||||
@import "./component/switch-theme";
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
// Pages Style
|
||||
|
||||
main {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
img[alt="logo"] {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1081px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.badge {
|
||||
img {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.donate_buttons {
|
||||
form,
|
||||
input {
|
||||
display: inline;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
input[type="image"] {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
padding: 2px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#screenshots img {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
margin: 7px;
|
||||
background: gray;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #eaecef;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
#badges {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#badges a {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.news_content_image {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #555;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-color: #333 #000;
|
||||
}
|
||||
}
|
||||
|
||||
.installPWAButton {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#bottom-menu {
|
||||
margin-bottom: 1em;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menuitem_selected {
|
||||
text-decoration: none;
|
||||
border: red 2px solid;
|
||||
border-radius: 1rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#crypto-table + table {
|
||||
font-size: smaller;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.news_date {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
background-color: gray;
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
line-height: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.news_content_image {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.news_image {
|
||||
max-height: 520px;
|
||||
max-width: 300px;
|
||||
margin-left: 0.5rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.news_image_landscape {
|
||||
max-height: 520px;
|
||||
max-width: 500px;
|
||||
margin-left: 0.5rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.news_content {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.back_to_news {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
19
sass/variables/color-theme.scss
Normal file
19
sass/variables/color-theme.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// Common COLOR
|
||||
:root {
|
||||
--common-black: #000D07;
|
||||
--common-white: #ffffff;
|
||||
--common-green: #33895E;
|
||||
}
|
||||
|
||||
// Theme COLOR change
|
||||
.light {
|
||||
--white-black: var(--common-white);
|
||||
--black-white: var(--common-black);
|
||||
--green-theme: #006031;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--white-black: var(--common-black);
|
||||
--black-white: var(--common-white);
|
||||
--green-theme: var(--common-green);
|
||||
}
|
||||
17
sass/variables/fonts.scss
Normal file
17
sass/variables/fonts.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
//font-family: 'Inter', sans-serif;
|
||||
//font-family: 'Lato', sans-serif;
|
||||
:root {
|
||||
--main-font: 'Inter', sans-serif;
|
||||
--sub-fonst: 'Lato', sans-serif;
|
||||
|
||||
--h1: 300 48rem/60rem var(--sub-fonst);
|
||||
--p: 300 18rem/28rem var(--main-font);
|
||||
}
|
||||
|
||||
.h1{
|
||||
font: var(--h1);
|
||||
}
|
||||
.p{
|
||||
font: var(--h1);
|
||||
}
|
||||
|
||||
|
|
@ -62,25 +62,31 @@
|
|||
{%- if lang == config.default_language %}
|
||||
{% include 'language_redirect.html' %}
|
||||
{% endif -%}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Lato:wght@300&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
{% include 'top_menu.html' %}
|
||||
<body class="light">
|
||||
<header class="header">
|
||||
{% include 'common/header.html' %}
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main class="main">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
{% include 'bottom_menu.html' %}
|
||||
<footer class="footer">
|
||||
{% include 'common/footer.html' %}
|
||||
<p>
|
||||
<span>© 2023 <a href="mailto:legal@organicmaps.app">Organic Maps OÜ</a>, reg. code 16225385</span>
|
||||
<span>Harju maakond, Tallinn, Kesklinna linnaosa, Rävala pst 8-810, 10143, Estonia</span>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
{% include 'shortcodes/switch-theme.html' %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,4 +20,8 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
<a href="mailto:hello@organicmaps.app">{{ trans(key='contact', lang=lang) }}</a>
|
||||
<button></button>
|
||||
<div class="switch-theme">
|
||||
<div class="switch-theme__toggle"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -2,12 +2,9 @@
|
|||
{% if lang != config.default_language %}
|
||||
{% set langPathPrefix = '/' ~ lang %}
|
||||
{% endif %}
|
||||
<nav class="top-menu" id="menu" role="navigation">
|
||||
<div class="container">
|
||||
<div class="top-menu__wrapper">
|
||||
<a href="{{ langPathPrefix | safe }}/"><span>{% include 'ui/logo.html' %}</span></a>
|
||||
<span class="top-menu__cta">
|
||||
<span class="top-menu__links">
|
||||
<nav class="container header__container" id="menu" role="navigation">
|
||||
<a class="logo" href="{{ langPathPrefix | safe }}/">{% include 'ui/logo.html' %}</a>
|
||||
<nav class="header__nav">
|
||||
{% for page in [
|
||||
get_section(path="news/_index.md"),
|
||||
get_page(path="donate/index.md"),
|
||||
|
|
@ -21,21 +18,11 @@
|
|||
{% set page = get_page(path=translated.path) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<span class="top-menu__{{ page.path | split(pat="/") | reverse | nth(n=1) }} top-menu__item{% if page.path != resource.path %}">
|
||||
<span class="header__{{ page.path | split(pat="/") | reverse | nth(n=1) }} header__item{% if page.path != resource.path %}">
|
||||
<a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% else %}_active">{% endif %}
|
||||
{{ page.extra.menu_title }}
|
||||
{%- if page.path != resource.path %}</a>{% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
<span class="top-menu__item">
|
||||
<a href="https://github.com/organicmaps/organicmaps" target="_blank" class="top-menu__github">
|
||||
GitHub
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
{% include 'ui/download-button.html' %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</nav>
|
||||
14
templates/components/hero.html
Normal file
14
templates/components/hero.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero__about-us">
|
||||
<div class="hero__about-us-title">
|
||||
{{ resource.title }}
|
||||
</div>
|
||||
<div class="hero__about-us-description">
|
||||
{{ resource.description }}
|
||||
</div>
|
||||
{% include 'ui/download-button.html' %}
|
||||
</div>
|
||||
<img class="hero__image" src="/images/hero/hero-image.png" alt="hero image">
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
|
||||
<div class="open__map">
|
||||
<div class="container">
|
||||
<div class="open__map__info">
|
||||
<img class="open__map__info__logo" src="/images/open-map/open-map-logo.png">
|
||||
<div class="open__map__info__title">
|
||||
Organic
|
||||
</div>
|
||||
<div class="open__map__info__description">
|
||||
Community + Open Maps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="open__map">
|
||||
<div class="container">
|
||||
<div class="open__map__info">
|
||||
<img class="open__map__info__logo" src="/images/open-map/open-map-logo.png">
|
||||
<div class="open__map__info__title">
|
||||
Organic
|
||||
</div>
|
||||
<div class="open__map__info__description">
|
||||
Community + Open Maps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<div class="hero">
|
||||
<div class="container">
|
||||
<div class="hero__wrapper">
|
||||
<div class="hero__about-us">
|
||||
<div class="hero__about-us-title">
|
||||
{{ resource.title }}
|
||||
</div>
|
||||
<div class="hero__about-us-description">
|
||||
{{ resource.description }}
|
||||
</div>
|
||||
{% include 'ui/download-button.html' %}
|
||||
</div>
|
||||
<img class="hero__image" src="/images/hero/hero-image.png" alt="hero image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
17
templates/home.html
Normal file
17
templates/home.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% include 'components/hero.html' %}
|
||||
|
||||
{% include 'components/open_map.html' %}
|
||||
|
||||
{% include 'site_sections.html' %}
|
||||
|
||||
{% include 'freedom_section.html' %}
|
||||
|
||||
{{ resource.content | safe }}
|
||||
|
||||
{% include 'google_native_app_prompt.html' %}
|
||||
|
||||
{% endblock content %}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1>{{ resource.title }}</h1>
|
||||
|
||||
{{ resource.content | safe }}
|
||||
|
||||
{% include 'google_native_app_prompt.html' %}
|
||||
|
||||
{% endblock content %}
|
||||
|
|
@ -2,9 +2,10 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
{% include 'hero.html' %}
|
||||
{% include 'components/hero.html' %}
|
||||
|
||||
{% include 'open_map.html' %}
|
||||
|
||||
{% include 'components/open_map.html' %}
|
||||
|
||||
{% include 'site_sections.html' %}
|
||||
|
||||
|
|
|
|||
69
templates/shortcodes/switch-theme.html
Normal file
69
templates/shortcodes/switch-theme.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<script>
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const switchTheme = document.querySelector('.switch-theme');
|
||||
let activeCheck = localStorage.getItem('switchTheme') === 'true';
|
||||
const bodyThemeClass = document.querySelector('.light')
|
||||
|
||||
let firstCheck = localStorage.getItem('switchTheme') ? localStorage.getItem('switchTheme') : 'first';
|
||||
|
||||
|
||||
if (firstCheck == 'first') {
|
||||
console.log("test")
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
switchTheme.classList.add('is-active');
|
||||
switchThemeToggle(true)
|
||||
} else {
|
||||
switchTheme.classList.remove('is-active');
|
||||
switchThemeToggle(false)
|
||||
}
|
||||
} else {
|
||||
if (activeCheck) {
|
||||
switchTheme.classList.add('is-active');
|
||||
switchThemeToggle(true)
|
||||
} else {
|
||||
switchTheme.classList.remove('is-active');
|
||||
switchThemeToggle(false)
|
||||
}
|
||||
}
|
||||
|
||||
switchTheme.addEventListener('click', () => changeToggle(true));
|
||||
|
||||
function switchThemeToggle(arg){
|
||||
if(arg) {
|
||||
bodyThemeClass.classList.remove('light')
|
||||
bodyThemeClass.classList.add('dark')
|
||||
} else {
|
||||
bodyThemeClass.classList.add('light')
|
||||
bodyThemeClass.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark';
|
||||
} else {
|
||||
return 'light';
|
||||
}
|
||||
|
||||
function changeToggle(arr) {
|
||||
console.log(activeCheck);
|
||||
|
||||
if (activeCheck) {
|
||||
switchTheme.classList.remove('is-active');
|
||||
switchThemeToggle(false)
|
||||
if (arr) {
|
||||
localStorage.setItem('switchTheme', 'false');
|
||||
activeCheck = false;
|
||||
}
|
||||
} else {
|
||||
switchTheme.classList.add('is-active');
|
||||
switchThemeToggle(true)
|
||||
if (arr) {
|
||||
localStorage.setItem('switchTheme', 'true');
|
||||
activeCheck = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue