implement logo #1 draft

This commit is contained in:
CodeSteak 2020-02-01 14:23:13 +01:00
parent d134f90159
commit 088d3ec5f1
4 changed files with 242 additions and 1 deletions

View File

@ -836,6 +836,12 @@ input[type="number"]:focus {
margin: 0px;
}
.logo {
object-fit: fill;
height: var(--u3);
display: block;
}
/***
THE UGLY

View File

@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
width="14.463889mm"
height="5.2916756mm"
viewBox="0 0 14.463889 5.2916755"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="ecom-logo-base.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="31.678384"
inkscape:cx="24.068525"
inkscape:cy="8.4614457"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="3440"
inkscape:window-height="1355"
inkscape:window-x="0"
inkscape:window-y="54"
inkscape:window-maximized="1"
inkscape:snap-bbox="true"
inkscape:bbox-nodes="true">
<inkscape:grid
type="xygrid"
id="grid815"
units="pt"
spacingx="0.35277778"
spacingy="0.35277778"
originx="0.88194436"
originy="-291.21803" />
</sodipodi:namedview>
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.88194447,-0.49023478)">
<path
style="fill:none;stroke:#ecf0f1;stroke-width:0.35277778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -0.70555558,0.66662381 V 5.6055127 H 2.8222222 V 0.66662381 Z"
id="path903"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;stroke:#ecf0f1;stroke-width:0.35277778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 2.8222222,5.6055127 10.5833338,8.4e-6 V 0.66663218 L 2.8222222,0.66662381 V 5.6055127"
id="path905"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<g
id="g833"
style="fill:#ecf0f1;fill-opacity:1">
<g
aria-label="ECOM"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ecf0f1;fill-opacity:1;stroke:none;stroke-width:0.26458332"
id="text825"
transform="translate(0.2343717,-0.30493011)">
<path
d="M 1.8646561,1.7822372 H -0.23437172 V 5.2048873 H 1.8646561 V 4.6220984 H 0.57560602 V 3.747915 H 1.6275894 V 3.1799428 H 0.57560602 V 2.3600872 H 1.780695 Z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path835"
inkscape:connector-curvature="0" />
<path
d="m 4.8491561,1.6143393 c -0.889,0 -1.55575,0.6420556 -1.55575,1.7878778 0,1.1705167 0.6272389,1.8026945 1.5656278,1.8026945 0.4741333,0 0.84455,-0.2123722 1.0717389,-0.4395611 L 5.5702339,4.3010949 c -0.2024944,0.1531056 -0.40005,0.2765778 -0.6716889,0.2765778 -0.4543778,0 -0.75565,-0.3506611 -0.75565,-1.1754556 0,-0.8396111 0.3062111,-1.1902722 0.7457722,-1.1902722 0.2321278,0 0.4247445,0.0889 0.6173612,0.2370666 L 5.8912617,1.9896949 C 5.6048061,1.7476893 5.2936561,1.6143393 4.8491561,1.6143393 Z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path837"
inkscape:connector-curvature="0" />
<path
d="m 7.2915617,1.6143393 c -0.9630834,0 -1.5409334,0.6766278 -1.5409334,1.7928167 0,1.1408834 0.57785,1.7977556 1.5409334,1.7977556 0.9680222,0 1.5458722,-0.6766278 1.5458722,-1.7977556 0,-1.1408834 -0.57785,-1.7928167 -1.5458722,-1.7928167 z m 0,0.5926667 c 0.4593166,0 0.6963833,0.3358444 0.6963833,1.20015 0,0.8692445 -0.2321278,1.2050889 -0.6963833,1.2050889 -0.4445,0 -0.6914445,-0.3358444 -0.6914445,-1.2050889 0,-0.8643056 0.2370667,-1.20015 0.6914445,-1.20015 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path839"
inkscape:connector-curvature="0" />
<path
d="M 12.250806,1.7900226 H 11.223517 L 10.744445,4.1113004 10.2308,1.7900226 H 9.2084505 L 8.9516283,5.2126727 h 0.7902222 l 0.059267,-1.3285612 c 0.01976,-0.4790722 0.01976,-0.9038166 -0.01482,-1.4075833 l 0.5630345,2.3756056 h 0.765527 l 0.528462,-2.3756056 c -0.02469,0.4247444 -0.01482,0.9186333 0.0099,1.3977056 l 0.05927,1.3384389 h 0.795161 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path841"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -0,0 +1,121 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
width="14.463889mm"
height="5.2916756mm"
viewBox="0 0 14.463889 5.2916755"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="ecom-logo.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="31.678384"
inkscape:cx="26.672825"
inkscape:cy="10.008242"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="3440"
inkscape:window-height="1355"
inkscape:window-x="0"
inkscape:window-y="54"
inkscape:window-maximized="1"
inkscape:snap-bbox="true"
inkscape:bbox-nodes="true">
<inkscape:grid
type="xygrid"
id="grid815"
units="pt"
spacingx="0.35277778"
spacingy="0.35277778"
originx="0.88194436"
originy="-291.21803" />
</sodipodi:namedview>
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.88194447,-0.49023478)">
<rect
style="fill:#1abc9c;fill-opacity:1;stroke:none;stroke-width:0.35277778;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect821"
width="14.816667"
height="5.6444445"
x="-1.0583334"
y="0.31382737" />
<path
style="fill:none;stroke:#ecf0f1;stroke-width:0.35277778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -0.70555558,0.66662381 V 5.6055127 H 2.8222222 V 0.66662381 Z"
id="path903"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;stroke:#ecf0f1;stroke-width:0.35277778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 2.8222222,5.6055127 10.5833338,8.4e-6 V 0.66663218 L 2.8222222,0.66662381 V 5.6055127"
id="path905"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<g
id="g833"
style="fill:#ecf0f1;fill-opacity:1">
<g
aria-label="ECOM"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ecf0f1;fill-opacity:1;stroke:none;stroke-width:0.26458332"
id="text825"
transform="translate(0.2343717,-0.30493011)">
<path
d="M 1.8646561,1.7822372 H -0.23437172 V 5.2048873 H 1.8646561 V 4.6220984 H 0.57560602 V 3.747915 H 1.6275894 V 3.1799428 H 0.57560602 V 2.3600872 H 1.780695 Z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path835"
inkscape:connector-curvature="0" />
<path
d="m 4.8491561,1.6143393 c -0.889,0 -1.55575,0.6420556 -1.55575,1.7878778 0,1.1705167 0.6272389,1.8026945 1.5656278,1.8026945 0.4741333,0 0.84455,-0.2123722 1.0717389,-0.4395611 L 5.5702339,4.3010949 c -0.2024944,0.1531056 -0.40005,0.2765778 -0.6716889,0.2765778 -0.4543778,0 -0.75565,-0.3506611 -0.75565,-1.1754556 0,-0.8396111 0.3062111,-1.1902722 0.7457722,-1.1902722 0.2321278,0 0.4247445,0.0889 0.6173612,0.2370666 L 5.8912617,1.9896949 C 5.6048061,1.7476893 5.2936561,1.6143393 4.8491561,1.6143393 Z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path837"
inkscape:connector-curvature="0" />
<path
d="m 7.2915617,1.6143393 c -0.9630834,0 -1.5409334,0.6766278 -1.5409334,1.7928167 0,1.1408834 0.57785,1.7977556 1.5409334,1.7977556 0.9680222,0 1.5458722,-0.6766278 1.5458722,-1.7977556 0,-1.1408834 -0.57785,-1.7928167 -1.5458722,-1.7928167 z m 0,0.5926667 c 0.4593166,0 0.6963833,0.3358444 0.6963833,1.20015 0,0.8692445 -0.2321278,1.2050889 -0.6963833,1.2050889 -0.4445,0 -0.6914445,-0.3358444 -0.6914445,-1.2050889 0,-0.8643056 0.2370667,-1.20015 0.6914445,-1.20015 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path839"
inkscape:connector-curvature="0" />
<path
d="M 12.250806,1.7900226 H 11.223517 L 10.744445,4.1113004 10.2308,1.7900226 H 9.2084505 L 8.9516283,5.2126727 h 0.7902222 l 0.059267,-1.3285612 c 0.01976,-0.4790722 0.01976,-0.9038166 -0.01482,-1.4075833 l 0.5630345,2.3756056 h 0.765527 l 0.528462,-2.3756056 c -0.02469,0.4247444 -0.01482,0.9186333 0.0099,1.3977056 l 0.05927,1.3384389 h 0.795161 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93888903px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ecf0f1;fill-opacity:1;stroke-width:0.26458332"
id="path841"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -7,7 +7,7 @@
<body>
<nav class='hero header' th:fragment="header">
<div class='content-width bar-flex'>
<a class="button" href="/">Project eCommerce</a>
<a class="button no-padding" href="/"><img class="logo" th:src="@{/img/ecom-logo-base.svg}"></a>
<form class='spacer input-icon secondary' th:action="@{/shop/search}" method="GET">
<input type="text" placeholder="Nach Produkten suchen..."/>
<button>Finden</button>