organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

add abou us page

Browse source
This commit is contained in:
borntojesus 2023-11-28 01:55:12 +02:00
parent 0f57d51b17
commit 937c8a6d79
10 changed files with 441 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/about-us/index.md
View file

@ -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

1
sass/main.scss
View file

@ -31,5 +31,6 @@
@import "./pages/volunteering";
@import "./pages/new-support";
@import "./pages/faq-page";
@import "./pages/about-us";

244
sass/pages/about-us.scss Normal file
View file

@ -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);
}
}

24
sass/variables/color-theme.scss
View file

@ -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);
}

14
sass/variables/fonts.scss
View file

@ -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);
}

BIN
static/images/about-us/wikipedia-banner.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 43 KiB

198
templates/about-us.html
View file

@ -1,67 +1,139 @@
{% extends "base.html" %}
{%- block content %}
<section class="hero-sub">
<div class="container hero-sub__container">
<h1>{{ page.extra.hero_title | safe }}</h1>
<p>{{ page.extra.hero_description_1 | safe }}</p>
<p>{{ page.extra.hero_description_2 | safe }}</p>
</div>
</section>
<section class="section-community">
<div>
<div>
<h2>{{ page.extra.project_info_section_title | safe }}</h2>
<p>{{ page.extra.project_info_section_description | safe }}</p>
</div>
<img src="images/about-us/project-info-main-banner.png">
</div>
<div>
<img src="images/about-us/info-card-banner-1.png">
<div>
<img src="images/about-us/mission-ico.png">
<h3>{{ page.extra.project_info_card_title_1 | safe }}</h3>
<p>{{ page.extra.project_info_card_description_1 | safe }}</p>
</div>
</div>
<div>
<img src="images/about-us/info-card-banner-2.png">
<div>
<img src="images/about-us/vision-ico.png">
<h3>{{ page.extra.project_info_card_title_2 | safe }}</h3>
<p>{{ page.extra.project_info_card_description_2 | safe }}</p>
</div>
</div>
</section>
<section>
<h2>{{ page.extra.history_section_title | safe }}</h2>
<p>{{ page.extra.history_section_20_11 | safe }}</p>
<p>{{ page.extra.history_section_20_15 | safe }}</p>
<p>{{ page.extra.history_section_20_21 | safe }}</p>
<p>{{ page.extra.history_section_20_22 | safe }}</p>
<p>{{ page.extra.history_section_20_23 | safe }}</p>
</section>
<section>
<h2>{{ page.extra.integration_section_title | safe }}</h2>
<img src="images/about-us/open-maps-banner.png">
<img src="images/about-us/wikipedia-banner.png">
</section>
<section>
{{ trans(key='ged-involved-title', lang=lang) }}
<div>
<img src="get-involved/donation-ico.png">
{{ trans(key='donate-title', lang=lang) }}
{{ trans(key='donate-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-code-ico.png">
{{ trans(key='contribute-code-title', lang=lang) }}
{{ trans(key='contribute-code-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-info-ico.png">
{{ trans(key='contribute-location-title', lang=lang) }}
{{ trans(key='contribute-location-description', lang=lang) }}
</div>
</section>
<section class="hero-sub" style="background-image: url({{ page.extra.hero_image | safe }})">
<div class="container hero-sub__container">
<nav class="bred-crum">
<ul class="bred-crum__row">
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
</li>
<li class="bred-crum__item">
<span class="nav-bred">
>
</span>
</li>
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link bred-crum--active"
href="/{{ page.extra.hero_title | lower }}">{{ page.extra.hero_title }}</a>
</li>
</ul>
</nav>
<div class="hero-sub__content">
<h1 class="h1 hero-sub__title">
{{ page.extra.hero_title | safe }}
</h1>
<p class="h2-sub_v2 hero-sub__description">
{{ page.extra.hero_description_1 | safe }}
{{ page.extra.hero_description_2 | safe }}
</p>
</div>
</div>
</section>
<section class="free-open">
<div class="container free-open__container">
<div class="free-open__content">
<h2 class="h6 free-open__title">{{ page.extra.project_info_section_title | safe }}</h2>
<div class="line free-open__line"></div>
<div class="free-open__img-row">
<img class="free-open__img" src="/images/about-us/project-info-main-banner.png" alt="img">
</div>
<p class="p-15 free-open__text">{{ page.extra.project_info_section_description | safe }}</p>
</div>
</div>
</section>
<section class="about-us">
<div class="container about-us__container">
<div class="about-us__item">
<img class="about-us__img" src="/images/about-us/info-card-banner-1.png" alt="img">
<div class="about-us__content">
<div class="about-us__title-row">
<div class="about-us__icon">
{% include 'ui/icons/about/icon01.html' %}
</div>
<h3 class="h5 about-us__title">{{ page.extra.project_info_card_title_1 | safe }}</h3>
</div>
<p class="p-card about-us__text">{{ page.extra.project_info_card_description_1 | safe }}</p>
</div>
</div>
<div class="about-us__item">
<img class="about-us__img" src="/images/about-us/info-card-banner-2.png" alt="img">
<div class="about-us__content">
<div class="about-us__title-row">
<div class="about-us__icon">
{% include 'ui/icons/about/icon02.html' %}
</div>
<h3 class="h5 about-us__title">{{ page.extra.project_info_card_title_2 | safe }}</h3>
</div>
<p class="p-card about-us__text">{{ page.extra.project_info_card_description_2 | safe }}</p>
</div>
</div>
</div>
</section>
<section class="about-history">
<div class="container about-history__container">
<h2 class="h6-bold about-history__title">{{ page.extra.history_section_title | safe }}</h2>
<div class="about-history__row">
<div class="about-history__item">
<div class="about-history__count">
<div class="h6-date about-history__number">2011</div>
<div class="about-history__circle"></div>
</div>
<p class="p-sm about-history__text">{{ page.extra.history_section_20_11 | safe }}</p>
</div>
<div class="about-history__item">
<div class="about-history__count">
<div class="h6-date about-history__number ">2015</div>
<div class="about-history__circle"></div>
</div>
<p class="p-sm about-history__text">{{ page.extra.history_section_20_15 | safe }}</p>
</div>
<div class="about-history__item">
<div class="about-history__count">
<div class="h6-date about-history__number about-history__number--green">2021</div>
<div class="about-history__circle"></div>
</div>
<p class="p-sm about-history__text">{{ page.extra.history_section_20_21 | safe }}</p>
</div>
<div class="about-history__item">
<div class="about-history__count">
<div class="h6-date about-history__number about-history__number--green">2022</div>
<div class="about-history__circle"></div>
</div>
<p class="p-sm about-history__text">{{ page.extra.history_section_20_22 | safe }}</p>
</div>
<div class="about-history__item">
<div class="about-history__count">
<div class="h6-date about-history__number about-history__number--green">2023</div>
<div class="about-history__circle"></div>
</div>
<p class="p-sm about-history__text">{{ page.extra.history_section_20_23 | safe }}</p>
</div>
</div>
</div>
</section>
<section class="about-links">
<div class="container about-links__container">
<h2 class="h6-bold about-links__title">{{ page.extra.integration_section_title | safe }}</h2>
<div class="about-links__buttons">
<a class="about-links__link" href="#" target="_blank">
<img class="about-links__img" src="/images/about-us/open-maps-banner.png" alt="img">
</a>
<a class="about-links__link" href="#" target="_blank">
<img class="about-links__img" src="/images/about-us/wikipedia-banner.png" alt="img">
</a>
</div>
</div>
</section>
{% include 'section/donate.html' %}
{%- endblock content %}

4
templates/community.html
View file

@ -31,8 +31,6 @@
</div>
</div>
</section>
<section class="section-community">
<div class="container section-community__container">
<div class="section-community__item">
@ -151,7 +149,7 @@
<li class="section-social__item">{% include 'ui/icons/social/git.html' %}</li>
</ul>
</section>
<section class="donate">
<section class="donate">
<div class="container donate__container">
<div class="donate__content">
<h2 class="h6 donate__title">

22
templates/ui/icons/about/icon01.html Normal file
View file

@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47" fill="none">
<g clip-path="url(#clip0_723_3459)">
<path d="M33.801 8.09375C31.7978 8.09375 30.168 9.72359 30.168 11.7268C30.168 13.73 31.7978 15.3598 33.801 15.3598C35.8042 15.3598 37.434 13.73 37.434 11.7268C37.434 9.72359 35.8042 8.09375 33.801 8.09375ZM33.801 13.9801C32.5584 13.9801 31.5476 12.9692 31.5476 11.7267C31.5476 10.4842 32.5583 9.47327 33.801 9.47327C35.0435 9.47327 36.0544 10.4841 36.0544 11.7267C36.0544 12.9692 35.0435 13.9801 33.801 13.9801Z" fill="currentColor"/>
<path d="M20.5564 33.1113C18.1474 33.1113 16.1875 35.0713 16.1875 37.4802C16.1875 40.4906 19.91 44.2477 20.0685 44.4062C20.198 44.5357 20.3733 44.6083 20.5563 44.6083C20.7392 44.6083 20.9146 44.5356 21.0441 44.4062C21.2024 44.2479 24.925 40.4906 24.925 37.4802C24.9252 35.0712 22.9653 33.1113 20.5564 33.1113ZM20.5564 42.9126C19.4212 41.6492 17.5672 39.2202 17.5672 37.4801C17.5672 35.8319 18.9081 34.4909 20.5564 34.4909C22.2047 34.4909 23.5455 35.8319 23.5455 37.4801C23.5456 39.2203 21.6914 41.6495 20.5564 42.9126Z" fill="currentColor"/>
<path d="M20.5577 35.4111C19.4167 35.4111 18.4883 36.3395 18.4883 37.4806C18.4883 38.6217 19.4167 39.55 20.5577 39.55C21.6988 39.55 22.6272 38.6217 22.6272 37.4806C22.6272 36.3395 21.6988 35.4111 20.5577 35.4111ZM20.5577 38.1704C20.1773 38.1704 19.8679 37.861 19.8679 37.4806C19.8679 37.1002 20.1773 36.7907 20.5577 36.7907C20.9381 36.7907 21.2476 37.1002 21.2476 37.4806C21.2476 37.861 20.9381 38.1704 20.5577 38.1704Z" fill="currentColor"/>
<path d="M29.646 0.0523291C29.2936 -0.0929845 28.8905 0.0747274 28.7452 0.426858L25.3984 8.53725L13.0926 5.28261V0.69013C13.0926 0.309175 12.7838 0.000280535 12.4027 0.000280535C12.0217 0.000280535 11.7129 0.309175 11.7129 0.69013V5.81383C11.7129 6.12686 11.9237 6.4006 12.2263 6.48064L25.6292 10.0255C25.6881 10.0411 25.7473 10.0485 25.8058 10.0485C26.0794 10.0485 26.3347 9.885 26.4434 9.62173L30.0205 0.953126C30.1658 0.600996 29.9981 0.197643 29.646 0.0523291Z" fill="currentColor"/>
<path d="M8.90007 27.4839L0.866423 25.359C0.498411 25.2616 0.120669 25.4813 0.02309 25.8495C-0.0743059 26.2179 0.145363 26.5953 0.513558 26.6927L8.03379 28.6818V33.5257C8.03379 33.9066 8.34259 34.2155 8.72364 34.2155C9.10468 34.2155 9.41349 33.9066 9.41349 33.5257V28.1507C9.41349 27.8378 9.20272 27.564 8.90007 27.4839Z" fill="currentColor"/>
<path d="M8.72364 0C8.34259 0 8.03379 0.308895 8.03379 0.689849V3.9444L0.866423 2.04871C0.498411 1.95122 0.120669 2.17098 0.02309 2.53918C-0.0743059 2.90756 0.145363 3.28502 0.513558 3.38242L8.54721 5.50723C8.6054 5.52256 8.66461 5.53018 8.72364 5.53018C8.87418 5.53018 9.02253 5.48079 9.14443 5.38698C9.31416 5.25635 9.41349 5.0544 9.41349 4.84033V0.689849C9.41349 0.308895 9.10459 0 8.72364 0Z" fill="currentColor"/>
<path d="M8.72305 36.1465C8.34201 36.1465 8.0332 36.4554 8.0332 36.8363V46.3098C8.0332 46.6908 8.34201 46.9997 8.72305 46.9997C9.1041 46.9997 9.4129 46.6908 9.4129 46.3098V36.8363C9.4129 36.4554 9.10401 36.1465 8.72305 36.1465Z" fill="currentColor"/>
<path d="M8.90007 7.97899L0.866423 5.85418C0.498411 5.75669 0.120669 5.97645 0.02309 6.34464C-0.0743059 6.71293 0.145363 7.09049 0.513558 7.18788L8.03388 9.17702V23.4485L0.866423 21.5528C0.498411 21.4553 0.120669 21.6751 0.02309 22.0433C-0.0743059 22.4117 0.145363 22.7891 0.513558 22.8865L8.54721 25.0113C8.6054 25.0267 8.66461 25.0343 8.72364 25.0343C8.87418 25.0343 9.02253 24.9849 9.14443 24.8911C9.31416 24.7605 9.41349 24.5586 9.41349 24.3444V8.64579C9.41349 8.33286 9.20272 8.05903 8.90007 7.97899Z" fill="currentColor"/>
<path d="M46.5724 6.28605C46.2199 6.14055 45.8168 6.30835 45.6716 6.66058L42.9783 13.1873L40.3271 12.4861C40.359 12.2303 40.3768 11.9768 40.3768 11.7271C40.3768 8.10095 37.4267 5.15089 33.8006 5.15089C33.2431 5.15089 32.7017 5.22121 32.1844 5.35239L33.9997 0.953139C34.1451 0.601008 33.9774 0.197655 33.6253 0.0523415C33.2728 -0.0929721 32.8697 0.074648 32.7245 0.426871L30.3775 6.1143C28.488 7.27102 27.2244 9.35406 27.2244 11.727C27.2244 12.0958 27.2614 12.4726 27.3293 12.8537L12.5785 8.95255C12.3717 8.89793 12.1509 8.94227 11.9813 9.07289C11.8116 9.20352 11.7122 9.40538 11.7122 9.61954V13.1141C10.8452 13.913 10.3008 15.0571 10.3008 16.3262C10.3008 17.5803 10.9469 18.9639 11.7122 20.1629V25.318C11.7122 25.631 11.923 25.9048 12.2257 25.9848L35.9525 32.2605C36.0115 32.276 36.0706 32.2834 36.1291 32.2834C36.4027 32.2834 36.658 32.1199 36.7667 31.8567L42.6073 17.7029C42.6832 17.519 42.676 17.3114 42.5877 17.1333C42.4993 16.9551 42.3383 16.8237 42.1461 16.7729L39.1496 15.9803C39.5106 15.275 39.8172 14.5529 40.0339 13.8357L43.2093 14.6756C43.2682 14.6911 43.3274 14.6985 43.3859 14.6985C43.6595 14.6985 43.9148 14.5351 44.0234 14.2718L46.9471 7.18684C47.0922 6.83471 46.9245 6.43136 46.5724 6.28605ZM33.8006 6.53059C36.666 6.53059 38.9971 8.86176 38.9971 11.7272C38.9971 15.085 35.1784 19.5312 33.8006 21.0262C32.4227 19.5313 28.604 15.085 28.604 11.7272C28.604 8.86185 30.9351 6.53059 33.8006 6.53059ZM11.6805 16.326C11.6805 14.6778 13.0213 13.3368 14.6696 13.3368C16.3179 13.3368 17.6588 14.6778 17.6588 16.326C17.6588 18.0662 15.8047 20.4953 14.6696 21.7585C13.5345 20.4951 11.6805 18.0661 11.6805 16.326ZM41.0313 17.905L35.7218 30.7723L13.0919 24.7869V22.0388C13.6732 22.7393 14.1287 23.1989 14.1819 23.2521C14.3114 23.3816 14.4867 23.4542 14.6697 23.4542C14.8528 23.4542 15.0281 23.3815 15.1575 23.2521C15.316 23.0937 19.0385 19.3365 19.0385 16.3261C19.0385 13.9172 17.0786 11.9572 14.6696 11.9572C14.1134 11.9572 13.5817 12.0628 13.0919 12.2533V10.5153L27.7526 14.3929C29.1955 18.3631 33.1102 22.3136 33.3127 22.5161C33.4421 22.6455 33.6174 22.7181 33.8005 22.7181C33.9835 22.7181 34.1588 22.6454 34.2883 22.5161C34.4417 22.3627 36.7259 20.0575 38.4517 17.2227L41.0313 17.905Z" fill="currentColor"/>
<path d="M46.487 37.4251L38.4794 35.3072C38.1448 35.2188 37.7972 35.3915 37.6653 35.711L33.4 46.0473C33.2547 46.3994 33.4224 46.8028 33.7744 46.9481C33.8606 46.9836 33.9497 47.0004 34.0373 47.0004C34.3083 47.0004 34.5654 46.8397 34.6753 46.5736L38.7103 36.7954L46.1342 38.759C46.5027 38.8568 46.8801 38.6368 46.9776 38.2686C47.0749 37.9001 46.8552 37.5225 46.487 37.4251Z" fill="currentColor"/>
<path d="M46.4856 33.6187L40.6555 32.0767L46.1955 18.6514C46.3408 18.2993 46.1732 17.8959 45.821 17.7506C45.4687 17.6053 45.0655 17.7729 44.9202 18.1251L39.0795 32.2789C39.0036 32.4628 39.0109 32.6703 39.0992 32.8485C39.1876 33.0267 39.3485 33.158 39.5407 33.2089L46.1326 34.9524C46.1917 34.968 46.251 34.9755 46.3095 34.9755C46.6148 34.9755 46.894 34.7711 46.9759 34.4619C47.0734 34.0938 46.8538 33.7163 46.4856 33.6187Z" fill="currentColor"/>
<path d="M35.3318 34.718C35.2434 34.5398 35.0825 34.4084 34.8903 34.3576L12.5792 28.4565C12.3724 28.4018 12.1516 28.4463 11.9819 28.5768C11.8122 28.7074 11.7129 28.9093 11.7129 29.1235V46.3098C11.7129 46.6908 12.0217 46.9997 12.4027 46.9997C12.7838 46.9997 13.0926 46.6908 13.0926 46.3098V30.0193L33.7756 35.4898L29.4193 46.0467C29.274 46.3988 29.4416 46.8021 29.7937 46.9475C29.8799 46.983 29.969 46.9998 30.0566 46.9998C30.3276 46.9998 30.5847 46.839 30.6946 46.5729L35.3516 35.2876C35.4274 35.1038 35.4201 34.8962 35.3318 34.718Z" fill="currentColor"/>
<path d="M14.671 14.2568C13.53 14.2568 12.6016 15.1852 12.6016 16.3263C12.6016 17.4674 13.53 18.3957 14.671 18.3957C15.812 18.3957 16.7405 17.4674 16.7405 16.3263C16.7405 15.1852 15.8121 14.2568 14.671 14.2568ZM14.671 17.0161C14.2906 17.0161 13.9812 16.7067 13.9812 16.3263C13.9812 15.9459 14.2906 15.6364 14.671 15.6364C15.0514 15.6364 15.3609 15.9459 15.3609 16.3263C15.3609 16.7067 15.0514 17.0161 14.671 17.0161Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_723_3459">
<rect width="47" height="47" fill="currentColor"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

10
templates/ui/icons/about/icon02.html Normal file
View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" viewBox="0 0 49 49" fill="none">
<g clip-path="url(#clip0_723_3501)">
<path d="M24.5087 0.00488307C14.7056 0.00345421 5.84581 5.84681 1.98735 14.8586L1.68198 14.9598L1.80037 15.315C-3.27987 27.8448 2.75904 42.1205 15.2888 47.2007C18.2152 48.3873 21.3435 48.9964 24.5014 48.9947C38.0295 48.9967 48.998 38.0316 49 24.5035C49.002 10.9753 38.0369 0.00682225 24.5087 0.00488307ZM43.7222 36.8497L42.4643 35.5927V32.6647C42.4658 32.5384 42.4378 32.4135 42.3827 32.2998L39.1984 25.9401V22.8668C39.1984 22.5939 39.0621 22.3389 38.835 22.1875L36.3855 20.5545C36.1936 20.4263 35.9563 20.3853 35.7323 20.4418L32.7325 21.1913L27.6939 19.0293L27.0007 14.1727L28.9219 12.2523H33.0461L34.4341 14.3385C34.5594 14.5261 34.7569 14.6535 34.9795 14.6904L39.8785 15.5069C40.0098 15.5289 40.1443 15.5182 40.2704 15.4759L44.7824 13.9719C48.5667 21.2341 48.162 29.9687 43.7222 36.8497ZM40.3545 8.05064L39.0269 8.93572L35.3257 8.19516L32.9244 7.39581C32.7774 7.3459 32.6192 7.33957 32.4688 7.37785L29.4331 8.13637L28.1022 7.69301L29.0885 5.72036H31.8499C31.9766 5.72046 32.1015 5.69117 32.2149 5.63463L35.0399 4.22209C36.9855 5.23761 38.7752 6.52685 40.3545 8.05064ZM15.5583 3.46111L17.5179 4.76751C17.6143 4.8316 17.7231 4.87447 17.8372 4.89325L21.7939 5.55298L21.4077 6.70832L19.3461 7.39663C19.1614 7.45807 19.0048 7.5834 18.9043 7.75017L16.5594 11.6579L12.7929 13.918L7.24069 14.7108C6.83826 14.7677 6.53901 15.1119 6.5385 15.5183V17.9678C6.5385 18.1844 6.62464 18.392 6.77774 18.5451L8.1715 19.9388V21.3416L4.77487 19.0766L3.54278 15.3803C5.88694 10.0241 10.1834 5.762 15.5583 3.46111ZM13.2338 30.2316L9.54321 29.4927L8.1715 26.7566V24.8378L11.2138 21.7955L12.3397 24.0483C12.478 24.3251 12.761 24.4999 13.0705 24.4998H18.3238L20.5357 28.1863C20.6833 28.4319 20.9489 28.5822 21.2354 28.5823H23.5053L22.9338 31.4457L19.8425 34.537C19.6891 34.69 19.6028 34.8976 19.6024 35.1142V37.1555L16.6631 39.36C16.4575 39.5142 16.3365 39.7562 16.3365 40.0132V42.9624L15.3207 42.626L13.887 39.04V31.0318C13.8871 30.6437 13.614 30.3092 13.2338 30.2316ZM10.7794 42.7833C3.08095 37.0077 -0.174732 27.0285 2.63647 17.8241L3.31497 19.8588C3.37213 20.031 3.48501 20.1793 3.63586 20.2801L7.70609 22.9933L6.77774 23.9225C6.62464 24.0756 6.5385 24.2832 6.5385 24.4998V26.9493C6.5384 27.0759 6.56769 27.2009 6.62423 27.3142L8.25723 30.5802C8.37031 30.8058 8.58127 30.9664 8.82878 31.0154L12.2581 31.7005V39.1967C12.258 39.3004 12.2777 39.4033 12.316 39.4996L13.949 43.5821C14.0384 43.8051 14.2215 43.9775 14.4495 44.0532L16.899 44.8697C16.9809 44.8975 17.0666 44.9118 17.153 44.9122C17.6039 44.9122 17.9695 44.5466 17.9695 44.0957V40.4215L20.9088 38.2169C21.1144 38.0627 21.2354 37.8207 21.2354 37.5637V35.4523L24.2622 32.4255C24.376 32.3115 24.4536 32.1663 24.4851 32.0083L25.3016 27.9258C25.39 27.4836 25.1032 27.0535 24.6609 26.9651C24.6084 26.9546 24.555 26.9493 24.5014 26.9493H21.6976L19.4857 23.2628C19.3381 23.0171 19.0725 22.8669 18.7859 22.8668H13.5751L12.1723 20.0523C12.0549 19.8174 11.8315 19.6533 11.5722 19.6114C11.313 19.5666 11.0483 19.6521 10.8643 19.84L9.80449 20.8958V19.6008C9.80449 19.3842 9.71835 19.1766 9.56526 19.0235L8.1715 17.6298V16.2262L13.1864 15.5102C13.2941 15.4945 13.3977 15.4576 13.491 15.4016L17.5735 12.9521C17.688 12.8833 17.7839 12.7873 17.8527 12.6728L20.1471 8.84917L22.3099 8.12739C22.5542 8.04727 22.7459 7.8557 22.826 7.61137L23.6425 5.16188C23.7839 4.73372 23.5515 4.27189 23.1234 4.13044C23.0839 4.11737 23.0434 4.10737 23.0023 4.10043L18.2765 3.31251L17.4461 2.75893C22.5842 1.08654 28.1492 1.29352 33.1489 3.34272L31.6572 4.08737H28.5839C28.2729 4.08563 27.9881 4.26077 27.8491 4.53889L26.2161 7.80487C26.0149 8.20843 26.1789 8.69873 26.5825 8.8999C26.6169 8.91705 26.6524 8.93174 26.6888 8.94389L29.1383 9.76038C29.2853 9.81029 29.4435 9.81662 29.5939 9.77835L32.6297 9.01982L34.8538 9.76038C34.8856 9.77182 34.9184 9.78059 34.9518 9.78651L39.0342 10.603C39.2465 10.6463 39.4674 10.6028 39.6474 10.4822L41.5058 9.24273C42.4204 10.2614 43.2423 11.3596 43.9618 12.5242L39.9446 13.8633L35.5952 13.1382L34.1581 10.9827C34.0075 10.7568 33.7544 10.6207 33.4829 10.6193H28.5839C28.3673 10.6193 28.1597 10.7055 28.0066 10.8586L25.5572 13.3081C25.3753 13.4898 25.2897 13.7467 25.3261 14.0013L26.1426 19.7167C26.1837 19.9994 26.3695 20.2399 26.6325 20.3512L32.348 22.8006C32.5117 22.8716 32.6944 22.8862 32.8672 22.8423L35.783 22.1132L37.5654 23.3036V26.1328C37.5639 26.2591 37.5919 26.3841 37.647 26.4977L40.8314 32.8574V35.9307C40.8314 36.1473 40.9175 36.3549 41.0706 36.508L42.7787 38.2169C35.2034 48.3142 20.8767 50.3587 10.7794 42.7833Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_723_3501">
<rect width="49" height="49" fill="currentColor"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB