Update logo and homepage, thanks to the contribution by Nicolas Arduin.

This commit is contained in:
Lucas Verney 2019-04-28 17:33:16 +02:00
parent 2e4e2c50e8
commit 9a5d408c83
12 changed files with 425 additions and 25 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 728 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 KiB

112
homepage/img/logo.svg Normal file
View File

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg8"
version="1.1"
viewBox="0 0 50.799999 50.800002"
height="192"
width="192"
sodipodi:docname="logo.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
inkscape:export-xdpi="24"
inkscape:export-ydpi="24">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1596"
inkscape:window-height="861"
id="namedview903"
showgrid="false"
inkscape:zoom="3.1377863"
inkscape:cx="45.830896"
inkscape:cy="89.993967"
inkscape:window-x="0"
inkscape:window-y="37"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-246.19998)"
id="layer1">
<path
inkscape:connector-curvature="0"
id="path4286"
d="m 17.909141,272.53907 h 25.062562 v 25.06256 H 17.909141 Z"
style="fill:none;stroke-width:1.04427338" />
<g
style="fill:none;fill-rule:evenodd"
transform="matrix(0.34312119,0,0,0.34312119,0.43793324,247.83884)"
id="g248">
<path
style="fill:#ccd6e5"
inkscape:connector-curvature="0"
d="M 22.000398,99 C 32.493679,99 41,107.28264 41,117.5 41,127.71813 32.493679,136 22.000398,136 11.507118,136 3,127.71813 3,117.5 3,107.28264 11.507118,99 22.000398,99"
id="path230" />
<path
style="stroke:#2e4369;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="M 22.000398,99 C 32.493679,99 41,107.28264 41,117.5 41,127.71813 32.493679,136 22.000398,136 11.507118,136 3,127.71813 3,117.5 3,107.28264 11.507118,99 22.000398,99 Z"
id="path232" />
<path
style="fill:#ccd6e5"
inkscape:connector-curvature="0"
d="m 96,99 c 10.49306,0 19,8.28264 19,18.5 0,10.21813 -8.50694,18.5 -19,18.5 C 85.506143,136 77,127.71813 77,117.5 77,107.28264 85.506143,99 96,99"
id="path234" />
<path
style="stroke:#2e4369;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="m 96,99 c 10.49306,0 19,8.28264 19,18.5 0,10.21813 -8.50694,18.5 -19,18.5 C 85.506143,136 77,127.71813 77,117.5 77,107.28264 85.506143,99 96,99 Z M 55.699657,117 33.171804,72 Z M 22,117 H 59.237005 C 59.237005,117 61.843759,97.50021 84,87.000262 66.312481,82.125708 30.750856,85.875184 22,117 Z"
id="path236" />
<path
style="stroke:#2e4369;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="m 96,116.97242 c -2.747392,0.27493 -5.281985,-1.53152 -5.981184,-4.25905 C 88.931259,108.82322 79.687405,69.55749 78.418209,65.112826 77.149772,60.667385 76.424734,54 67,54 M 26,71.5 h 19"
id="path238" />
<path
style="fill:#ffcc66"
inkscape:connector-curvature="0"
d="m 84.033333,58 20.129997,-8.043636 c 2.73562,0.614825 5.53223,0.922629 8.33667,0.916363 16.87588,0 30.5,-10.894545 30.5,-24.436363 C 143,12.894546 129.37588,2 112.5,2 95.623333,2 82,12.894546 82,26.436364 c 0,6.821818 3.558333,13.032727 9.250885,17.512727 z"
id="path240" />
<path
style="stroke:#2e4369;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="m 84.033333,58 20.129997,-8.043636 c 2.73562,0.614825 5.53223,0.922629 8.33667,0.916363 16.87588,0 30.5,-10.894545 30.5,-24.436363 C 143,12.894546 129.37588,2 112.5,2 95.623333,2 82,12.894546 82,26.436364 c 0,6.821818 3.558333,13.032727 9.250885,17.512727 z"
id="path242" />
<path
style="stroke:#2e4369;stroke-width:3;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="M 112.5,30 V 10"
id="path244" />
<path
style="fill:#2e4369"
inkscape:connector-curvature="0"
d="M 112.50038,35 C 113.88169,35 115,36.118902 115,37.5 115,38.880335 113.88169,40 112.50038,40 111.11907,40 110,38.880335 110,37.5 c 0,-1.381098 1.11907,-2.5 2.50038,-2.5 z"
id="path246" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

12
homepage/img/open.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="67px" height="54px">
<g fill="none" fill-rule="evenodd" stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1 13.744v39.22h64.66v-39.22z"/>
<path d="M40.22 24.344l7.42 8.48-7.42 8.48M27.5 24.344l-7.42 8.48 7.42 8.48"/>
<g transform="translate(1 1.024)">
<path fill="#FC6" d="M0 0h64.66v12.72H0z"/>
<circle cx="6.36" cy="6.36" r="1.06"/>
<circle cx="13.78" cy="6.36" r="1.06"/>
<circle cx="21.2" cy="6.36" r="1.06"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 564 B

15
homepage/img/openData.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46px" height="62px">
<g fill="none" fill-rule="evenodd">
<g stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1 1v60h44V17L29 1z"/>
<path d="M29 1v16h16"/>
</g>
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M39 53H7"/>
<path fill="#FC6" d="M17 53h8V25h-8v14z"/>
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 53h8V25h-8v14z"/>
<path fill="#FC6" d="M25 53h8V33h-8z"/>
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M25 53h8V33h-8z"/>
<path fill="#FC6" d="M9 53h8V39H9z"/>
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 53h8V39H9z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 865 B

7
homepage/img/privacy.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="51px" height="62px">
<g fill="none" fill-rule="evenodd">
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M49.0403 11l-24-10-24 10s-2.1 36 24 50c26.1-14 24-50 24-50z"/>
<path fill="#FC6" d="M36.1644 28.4487c0 6.144-4.98 11.125-11.124 11.125s-11.125-4.981-11.125-11.125 4.981-11.124 11.125-11.124 11.124 4.98 11.124 11.124"/>
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M23.0418 32.4463l7.995-7.995M23.0418 32.4463l-3.997-3.998"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 594 B

7
homepage/img/signal.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="55px">
<g fill="none" fill-rule="evenodd">
<path fill="#FC6" d="M2.93298182 54l19.13999998-7.6119761c2.6015637.5823829 5.2600727.8725231 7.9270182.867267 16.0459636 0 29-10.3115418 29-23.1281711C59 11.3115417 46.0459636 1 30 1 13.9529818 1 1 11.3115417 1 24.1271198c0 6.4566714 3.38298182 12.3351647 8.79596364 16.5758375L2.93298182 54z"/>
<path stroke="#2E4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.93298182 54l19.13999998-7.6119761c2.6015637.5823829 5.2600727.8725231 7.9270182.867267 16.0459636 0 29-10.3115418 29-23.1281711C59 11.3115417 46.0459636 1 30 1 13.9529818 1 1 11.3115417 1 24.1271198c0 6.4566714 3.38298182 12.3351647 8.79596364 16.5758375L2.93298182 54zM30.5 29V10"/>
<path fill="#2E4369" d="M30.5 34c.8281453 0 1.5.672 1.5 1.5003243C32 36.3286486 31.3281453 37 30.5 37s-1.5-.6713514-1.5-1.4996757S29.6718547 34 30.5 34z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 962 B

218
homepage/index.html Normal file
View File

@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cygnal - Track and share issues in realtime on bike lanes!</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name=description content="Track and share issues in realtime on bike lanes!">
<meta name=twitter:card content=summary>
<meta name=twitter:creator content=@PhyksIsHere>
<meta property=og:type content=website>
<meta property=og:title content="Cygnal">
<meta property=og:description content="Track and share issues in realtime on bike lanes!">
<meta property=og:url content=".">
<meta property=og:image content="./images/icons/ogIcon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="228x228" href="./img/coast-228x228.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="shortcut icon" href="./images/icons/favicon.ico">
<style type="text/css">
body {
font-family: Roboto;
}
header, main, footer {
margin: auto;
}
#logoTitle {
width: 100%;
max-width: 400px;
margin: auto;
display: flex;
align-items: flex-end;
}
#logoTitle img {
width: 140px;
height: 140px;
}
#logoTitle h1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 20px;
width: 200px;
color: #2E4369;
font-size: 60px;
font-weight: 300;
line-height: 60px;
}
#logo {
width: 140px;
height: auto;
}
h2 {
color: #999999;
font-size: 32px;
font-weight: bold;
line-height: 38px;
text-align: center;
}
#features {
display: flex;
justify-content: center;
align-items: center;
}
.feature {
width: 300px;
}
#features .feature:first-child {
margin-bottom: 50px;
}
.feature h3, .feature p {
margin: 0;
}
.left-feature {
text-align: right;
margin-right: 50px;
}
.right-feature {
text-align: left;
margin-left: 50px;
}
.feature h3 {
color: #2E4369;
font-size: 20px;
font-weight: bold;
line-height: 26px;
}
.feature p {
color: #7E7E7E;
font-size: 16px;
line-height: 21px;
}
main .button {
height: 50px;
width: 220px;
border-radius: 10px;
background-color: #FFCC66;
border: none;
font-size: 24px;
font-weight: 300;
line-height: 50px;
cursor: pointer;
margin: auto;
text-align: center;
}
main .button a {
color: #2E4369;
text-decoration: none;
}
footer ul {
margin-top: 50px;
list-style-type: none;
text-align: center;
padding: 0;
}
footer ul li {
display: inline-block;
margin-left: 1em;
margin-right: 1em;
}
footer ul li a {
color: #9B9B9B;
font-size: 12px;
line-height: 16px;
}
@media screen and (max-width: 1024px) {
#features {
flex-direction: column;
}
.left-feature, .right-feature {
text-align: center;
margin-bottom: 50px;
margin-left: 0;
margin-right: 0;
}
}
</style>
</head>
<body>
<header>
<div id="logoTitle">
<img id="logo" src="img/logo.svg" alt="Logo"/>
<h1>Cygnal app</h1>
</div>
<h2>Get realtime infos on your bike route.</h2>
</header>
<main>
<div id="features">
<div class="left-feature">
<div class="feature">
<img src="img/signal.svg" alt="Report"/>
<h3>Track and share issues</h3>
<p>Report on realtime issues on bike routes: road works, obstacles, accidents, etc.</p>
</div>
<div class="feature">
<img src="img/openData.svg" alt="OpenData"/>
<h3>Based on available OpenData</h3>
<p>Always up to date to inform you about road works ahead while you bike!</p>
</div>
</div>
<div class="feature">
<img src="img/iPhone/@1-black.png" alt="Screenshot"/>
</div>
<div class="right-feature">
<div class="feature">
<img src="img/open.svg" alt="Open-source"/>
<h3>Free and open-source</h3>
<p>From one fellow cyclist to another!</p>
</div>
<div class="feature">
<img src="img/privacy.svg" alt="Privacy"/>
<h3>Respecting your privacy</h3>
<p>Handles your geolocation with care, keeping it as much as possible within your device.</p>
</div>
</div>
</div>
<p class="button">
<a href="https://app.cygnal.eu/">Go to app</a>
</p>
</main>
<footer>
<nav>
<ul>
<li><a href="mailto:phyks+cygnal@phyks.me">contact</a></li>
<li><a href="https://framagit.org/phyks/cygnal">source</a></li>
</ul>
</nav>
</footer>
</body>
</html>

View File

@ -12,8 +12,8 @@
viewBox="0 0 50.799999 50.800002" viewBox="0 0 50.799999 50.800002"
height="192" height="192"
width="192" width="192"
sodipodi:docname="icon.svg" sodipodi:docname="logo.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06" inkscape:version="0.92.4 5da689c313, 2019-01-14"
inkscape:export-xdpi="24" inkscape:export-xdpi="24"
inkscape:export-ydpi="24"> inkscape:export-ydpi="24">
<sodipodi:namedview <sodipodi:namedview
@ -25,8 +25,8 @@
guidetolerance="10" guidetolerance="10"
inkscape:pageopacity="0" inkscape:pageopacity="0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:window-width="1916" inkscape:window-width="1596"
inkscape:window-height="1041" inkscape:window-height="861"
id="namedview903" id="namedview903"
showgrid="false" showgrid="false"
inkscape:zoom="3.1377863" inkscape:zoom="3.1377863"
@ -35,7 +35,7 @@
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="37" inkscape:window-y="37"
inkscape:window-maximized="0" inkscape:window-maximized="0"
inkscape:current-layer="g4296" /> inkscape:current-layer="layer1" />
<defs <defs
id="defs2" /> id="defs2" />
<metadata <metadata
@ -53,31 +53,60 @@
<g <g
transform="translate(0,-246.19998)" transform="translate(0,-246.19998)"
id="layer1"> id="layer1">
<path
inkscape:connector-curvature="0"
id="path4286"
d="m 17.909141,272.53907 h 25.062562 v 25.06256 H 17.909141 Z"
style="fill:none;stroke-width:1.04427338" />
<g <g
transform="matrix(1.0442734,0,0,1.0442734,17.909141,272.53907)" style="fill:none;fill-rule:evenodd"
id="g4296"> transform="matrix(0.34312119,0,0,0.34312119,0.43793324,247.83884)"
id="g248">
<path <path
style="fill:none" style="fill:#ccd6e5"
d="M 0,0 H 24 V 24 H 0 Z" inkscape:connector-curvature="0"
id="path4286" d="M 22.000398,99 C 32.493679,99 41,107.28264 41,117.5 41,127.71813 32.493679,136 22.000398,136 11.507118,136 3,127.71813 3,117.5 3,107.28264 11.507118,99 22.000398,99"
inkscape:connector-curvature="0" /> id="path230" />
<path <path
d="M 7.8634714,21 H 29.863471 l -11,-19 z M 19.863471,18 h -2 v -2 h 2 z m 0,-4 h -2 v -4 h 2 z" style="stroke:#2e4369;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
id="path4288" inkscape:connector-curvature="0"
style="fill:#231f20;fill-opacity:1" d="M 22.000398,99 C 32.493679,99 41,107.28264 41,117.5 41,127.71813 32.493679,136 22.000398,136 11.507118,136 3,127.71813 3,117.5 3,107.28264 11.507118,99 22.000398,99 Z"
inkscape:connector-curvature="0" /> id="path232" />
</g>
<g
transform="matrix(0.60218115,0,0,0.60218115,2.6432865,249.18067)"
id="g1611">
<path <path
style="fill:none" style="fill:#ccd6e5"
d="M 0,0 48,0 48,48 0,48 Z" inkscape:connector-curvature="0"
id="path1597" /> d="m 96,99 c 10.49306,0 19,8.28264 19,18.5 0,10.21813 -8.50694,18.5 -19,18.5 C 85.506143,136 77,127.71813 77,117.5 77,107.28264 85.506143,99 96,99"
id="path234" />
<path <path
style="fill:#231f20;fill-opacity:1" style="stroke:#2e4369;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
d="m 32,9.6 c 1.98,0 3.6,-1.61 3.6,-3.6 0,-1.99 -1.62,-3.6 -3.6,-3.6 -1.99,0 -3.6,1.61 -3.6,3.6 0,1.99 1.61,3.6 3.6,3.6 z M 38,24 c -5.52,0 -10,4.48 -10,10 0,5.52 4.48,10 10,10 5.52,0 10,-4.48 10,-10 0,-5.52 -4.48,-10 -10,-10 z m 0,17 c -3.87,0 -7,-3.13 -7,-7 0,-3.87 3.13,-7 7,-7 3.87,0 7,3.13 7,7 0,3.87 -3.13,7 -7,7 z m -8.4,-21 8.4,0 0,-3.6 -6.4,0 -3.87,-6.53 C 27.14,8.87 26.05,8.2 24.8,8.2 c -0.94,0 -1.79,0.38 -2.4,1 L 15,16.59 c -0.62,0.62 -1,1.47 -1,2.41 0,1.26 0.67,2.32 1.7,2.94 l 6.7,4.06 0,10 3.6,0 0,-12.96 -4.5,-3.34 4.64,-4.66 z M 10,24 C 4.48,24 0,28.48 0,34 0,39.52 4.48,44 10,44 15.52,44 20,39.52 20,34 20,28.48 15.52,24 10,24 Z m 0,17 c -3.87,0 -7,-3.13 -7,-7 0,-3.87 3.13,-7 7,-7 3.87,0 7,3.13 7,7 0,3.87 -3.13,7 -7,7 z" inkscape:connector-curvature="0"
id="path1599" /> d="m 96,99 c 10.49306,0 19,8.28264 19,18.5 0,10.21813 -8.50694,18.5 -19,18.5 C 85.506143,136 77,127.71813 77,117.5 77,107.28264 85.506143,99 96,99 Z M 55.699657,117 33.171804,72 Z M 22,117 H 59.237005 C 59.237005,117 61.843759,97.50021 84,87.000262 66.312481,82.125708 30.750856,85.875184 22,117 Z"
id="path236" />
<path
style="stroke:#2e4369;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="m 96,116.97242 c -2.747392,0.27493 -5.281985,-1.53152 -5.981184,-4.25905 C 88.931259,108.82322 79.687405,69.55749 78.418209,65.112826 77.149772,60.667385 76.424734,54 67,54 M 26,71.5 h 19"
id="path238" />
<path
style="fill:#ffcc66"
inkscape:connector-curvature="0"
d="m 84.033333,58 20.129997,-8.043636 c 2.73562,0.614825 5.53223,0.922629 8.33667,0.916363 16.87588,0 30.5,-10.894545 30.5,-24.436363 C 143,12.894546 129.37588,2 112.5,2 95.623333,2 82,12.894546 82,26.436364 c 0,6.821818 3.558333,13.032727 9.250885,17.512727 z"
id="path240" />
<path
style="stroke:#2e4369;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="m 84.033333,58 20.129997,-8.043636 c 2.73562,0.614825 5.53223,0.922629 8.33667,0.916363 16.87588,0 30.5,-10.894545 30.5,-24.436363 C 143,12.894546 129.37588,2 112.5,2 95.623333,2 82,12.894546 82,26.436364 c 0,6.821818 3.558333,13.032727 9.250885,17.512727 z"
id="path242" />
<path
style="stroke:#2e4369;stroke-width:3;stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
d="M 112.5,30 V 10"
id="path244" />
<path
style="fill:#2e4369"
inkscape:connector-curvature="0"
d="M 112.50038,35 C 113.88169,35 115,36.118902 115,37.5 115,38.880335 113.88169,40 112.50038,40 111.11907,40 110,38.880335 110,37.5 c 0,-1.381098 1.11907,-2.5 2.50038,-2.5 z"
id="path246" />
</g> </g>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB