Frontend: Move more images to SVG

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-21 22:53:56 +00:00
parent 35e7a43237
commit a3251a9061
14 changed files with 51 additions and 52 deletions

View File

@ -101,10 +101,21 @@
</div>
<div id="footer">
<picture>
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">
<img id="nre_logo" src="./images/nre/nre-powered_200w.webp" alt="Powered by National Rail Enquiries">
<picture id="nre_logo">
<source srcset="./images/nre/nre-powered_400w.jxl" type="image/jxl">
<source srcset="./images/nre/nre-powered_400w.webp" type="image/webp">
<img src="./images/nre/nre-powered_400w.png" alt="Powered by National Rail Enquiries">
</picture>
<a href="/">
<picture id="owlboard_logo">
<source srcset="./images/logo/mono-logo.svg" type="image/svg+xml">
<img src="./images/logo/mono-logo-33.png" alt="OwlBoard Logo">
</picture>
<picture id="home_icon">
<source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
<img src="./images/nav/home_icon-40.png" type="image/png" alt="Home">
</picture>
</a>
</div>
</div>
</body>

View File

@ -1,48 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1081"
xml:space="preserve"
width="880"
height="880"
viewBox="0 0 880 880"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
id="metadata1087"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs1085"><rect
x="425.4978"
y="106.37445"
width="394.47192"
height="272.58453"
id="rect947" /></defs><g
id="g1089"
transform="matrix(1.3333333,0,0,-1.3333333,0,880)"><g
id="g1337"
style="fill:#00b7b7;fill-opacity:1"><path
id="path1191"
style="fill:#00b7b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 112.253,369.323 c 12.988,-10.101 30.989,0.076 39.875,15.722 9.969,-34.512 37.501,-53.367 57.648,-37.596 -6.503,-20.085 -34.373,-34.554 -61.522,13.215 -15.947,-14.598 -28.559,-14.416 -36.001,8.659 m 14.302,-81.369 c 15.405,-6.791 28.15,7.974 30.66,25.885 21.351,-31.973 53.097,-43.81 65.802,-22.905 1.237,-21.743 -18.954,-43.315 -60.644,-2.464 -9.305,-18.663 -20.837,-21.694 -35.818,-0.516 m 33.549,175.931 24.381,-9.342 24.382,9.342 -24.382,-24.381 z m -14.899,47.955 c 1.574,0 3.075,-0.31 4.448,-0.869 -1.973,-1.1 -3.309,-3.206 -3.309,-5.626 0,-3.554 2.883,-6.436 6.437,-6.436 1.608,0 3.079,0.59 4.208,1.566 0.005,-0.143 0.008,-0.284 0.008,-0.428 0,-6.512 -5.28,-11.791 -11.792,-11.791 -6.512,0 -11.791,5.279 -11.791,11.791 0,6.513 5.279,11.793 11.791,11.793 m 77.642,0 c 1.573,0 3.075,-0.31 4.447,-0.869 -1.973,-1.1 -3.308,-3.206 -3.308,-5.626 0,-3.554 2.882,-6.436 6.437,-6.436 1.608,0 3.079,0.59 4.207,1.566 0.006,-0.143 0.009,-0.284 0.009,-0.428 0,-6.512 -5.28,-11.791 -11.792,-11.791 -6.513,0 -11.792,5.279 -11.792,11.791 0,6.513 5.279,11.793 11.792,11.793 m 0,8.887 c 11.421,0 20.677,-9.259 20.677,-20.68 0,-11.42 -9.256,-20.677 -20.677,-20.677 -11.42,0 -20.678,9.257 -20.678,20.677 0,11.421 9.258,20.68 20.678,20.68 m -77.642,0 c 11.42,0 20.679,-9.259 20.679,-20.68 0,-11.42 -9.259,-20.677 -20.679,-20.677 -11.42,0 -20.678,9.257 -20.678,20.677 0,11.421 9.258,20.68 20.678,20.68 M 367.82,249.402 c -5.257,-16.303 -14.169,-16.431 -25.436,-6.118 -19.182,-33.751 -38.872,-23.527 -43.468,-9.336 14.236,-11.143 33.688,2.178 40.73,26.562 6.28,-11.055 18.998,-18.245 28.174,-11.108 m -7.657,101.75 c -5.26,-16.304 -14.169,-16.433 -25.436,-6.118 -19.182,-33.751 -38.873,-23.529 -43.469,-9.338 14.236,-11.142 33.688,2.179 40.731,26.564 6.279,-11.055 18.997,-18.247 28.174,-11.108 m 3.828,-50.877 c -5.259,-16.302 -14.168,-16.429 -25.435,-6.117 -19.182,-33.752 -38.873,-23.528 -43.469,-9.338 14.236,-11.14 33.687,2.181 40.731,26.564 6.279,-11.055 18.996,-18.243 28.173,-11.109 m -184.999,-126.56 8.456,14.687 -2.481,14.064 c 8.24,-6.441 16.897,-12.257 25.895,-17.419 l -13.787,-20.682 c -5.163,5.163 -11.523,8.215 -18.083,9.35 m 214.435,47.276 -16.013,24.214 v 93.753 c 0,40.019 -32.441,72.459 -72.458,72.459 -37.742,0 -68.739,-28.855 -72.144,-65.707 -0.563,6.626 -0.974,13.336 -1.228,20.135 0,36.412 26.858,66.546 61.843,71.684 15.118,42.436 3.44,91.058 -31.815,121.878 -0.332,0.288 -0.668,0.569 -1.002,0.854 -14.934,-8.987 -28.921,-18.756 -41.766,-29.467 14.159,17.506 30.102,32.253 47.212,45.198 -47.368,32.008 -116.692,32.008 -164.058,0 17.11,-12.946 33.054,-27.694 47.212,-45.201 -11.522,9.609 -23.965,18.462 -37.188,26.67 -40.329,-37.119 -47.937,-98.2 -17.545,-144.158 4.83,-7.304 7.155,-15.981 6.624,-24.722 -3.808,-62.683 19.436,-123.991 63.84,-168.396 3.505,-3.505 7.116,-6.877 10.824,-10.115 l -15.66,-23.489 c -18.988,18.987 -54.154,9.494 -56.053,-19.369 4.94,7.294 12.965,10.334 21.93,10.306 4.624,3.683 10.595,5.668 18.277,5.498 -14.197,-2.669 -23.71,-11.684 -25.256,-26.007 9.826,11.065 21.246,13.643 34.785,11.262 -7.045,-4.94 -12.081,-12.841 -12.767,-23.274 4.941,7.293 12.965,10.335 21.932,10.303 1.457,1.162 3.047,2.155 4.783,2.963 0.557,-0.597 1.095,-1.202 1.614,-1.819 -7.504,-4.493 -12.316,-11.823 -13.378,-21.652 5.924,6.673 12.428,10.259 19.627,11.533 1.471,-3.662 2.152,-7.45 1.823,-11.24 4.057,2.964 6.698,7.077 8.006,11.651 2.475,-0.187 5.026,-0.574 7.654,-1.132 12.8,-8.149 22.377,-20.41 21.31,-32.736 11.849,8.659 11.621,27.116 1.367,38.28 l 8.659,15.04 -2.26,12.808 c 15.693,-7.825 32.28,-13.746 49.402,-17.626 -7.313,17.831 -12.59,36.793 -15.633,56.995 19.737,-52.989 51.201,-99.462 92.224,-140.627 3.548,-6.147 10.784,-9.143 17.64,-7.305 6.856,1.837 11.623,8.048 11.623,15.147 v 65.793 c 33.793,-9.913 62.771,-33.463 79.074,-66.13 l 119.851,29.509 c -14.567,69.186 -99.576,110.135 -175.589,96.362 z" /></g><text
xml:space="preserve"
transform="matrix(0.75000002,0,0,-0.75000002,-16.621008,676.62103)"
id="text945"
style="font-size:106.667px;line-height:0.8;white-space:pre;shape-inside:url(#rect947);display:inline;fill:#00b7b7;fill-opacity:1"><tspan
x="425.49805"
y="179.42858"
id="tspan1391"><tspan
style="font-weight:600;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Semi-Bold'"
id="tspan1389">OWL
</tspan></tspan><tspan
x="425.49805"
y="269.65554"
id="tspan1397"><tspan
style="font-weight:600;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Semi-Bold'"
id="tspan1393"> </tspan><tspan
style="font-size:96px;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic'"
id="tspan1395">BOARD</tspan></tspan></text></g></svg>

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 667.26 706.8" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><g transform="matrix(1.3333 0 0 -1.3333 -101.19 800)"><g fill="#fff"><path d="m112.25 369.32c12.988-10.101 30.989 0.076 39.875 15.722 9.969-34.512 37.501-53.367 57.648-37.596-6.503-20.085-34.373-34.554-61.522 13.215-15.947-14.598-28.559-14.416-36.001 8.659m14.302-81.369c15.405-6.791 28.15 7.974 30.66 25.885 21.351-31.973 53.097-43.81 65.802-22.905 1.237-21.743-18.954-43.315-60.644-2.464-9.305-18.663-20.837-21.694-35.818-0.516m33.549 175.93 24.381-9.342 24.382 9.342-24.382-24.381zm-14.899 47.955c1.574 0 3.075-0.31 4.448-0.869-1.973-1.1-3.309-3.206-3.309-5.626 0-3.554 2.883-6.436 6.437-6.436 1.608 0 3.079 0.59 4.208 1.566 5e-3 -0.143 8e-3 -0.284 8e-3 -0.428 0-6.512-5.28-11.791-11.792-11.791s-11.791 5.279-11.791 11.791c0 6.513 5.279 11.793 11.791 11.793m77.642 0c1.573 0 3.075-0.31 4.447-0.869-1.973-1.1-3.308-3.206-3.308-5.626 0-3.554 2.882-6.436 6.437-6.436 1.608 0 3.079 0.59 4.207 1.566 6e-3 -0.143 9e-3 -0.284 9e-3 -0.428 0-6.512-5.28-11.791-11.792-11.791-6.513 0-11.792 5.279-11.792 11.791 0 6.513 5.279 11.793 11.792 11.793m0 8.887c11.421 0 20.677-9.259 20.677-20.68 0-11.42-9.256-20.677-20.677-20.677-11.42 0-20.678 9.257-20.678 20.677 0 11.421 9.258 20.68 20.678 20.68m-77.642 0c11.42 0 20.679-9.259 20.679-20.68 0-11.42-9.259-20.677-20.679-20.677s-20.678 9.257-20.678 20.677c0 11.421 9.258 20.68 20.678 20.68m222.62-271.32c-5.257-16.303-14.169-16.431-25.436-6.118-19.182-33.751-38.872-23.527-43.468-9.336 14.236-11.143 33.688 2.178 40.73 26.562 6.28-11.055 18.998-18.245 28.174-11.108m-7.657 101.75c-5.26-16.304-14.169-16.433-25.436-6.118-19.182-33.751-38.873-23.529-43.469-9.338 14.236-11.142 33.688 2.179 40.731 26.564 6.279-11.055 18.997-18.247 28.174-11.108m3.828-50.877c-5.259-16.302-14.168-16.429-25.435-6.117-19.182-33.752-38.873-23.528-43.469-9.338 14.236-11.14 33.687 2.181 40.731 26.564 6.279-11.055 18.996-18.243 28.173-11.109m-185-126.56 8.456 14.687-2.481 14.064c8.24-6.441 16.897-12.257 25.895-17.419l-13.787-20.682c-5.163 5.163-11.523 8.215-18.083 9.35m214.44 47.276-16.013 24.214v93.753c0 40.019-32.441 72.459-72.458 72.459-37.742 0-68.739-28.855-72.144-65.707-0.563 6.626-0.974 13.336-1.228 20.135 0 36.412 26.858 66.546 61.843 71.684 15.118 42.436 3.44 91.058-31.815 121.88-0.332 0.288-0.668 0.569-1.002 0.854-14.934-8.987-28.921-18.756-41.766-29.467 14.159 17.506 30.102 32.253 47.212 45.198-47.368 32.008-116.69 32.008-164.06 0 17.11-12.946 33.054-27.694 47.212-45.201-11.522 9.609-23.965 18.462-37.188 26.67-40.329-37.119-47.937-98.2-17.545-144.16 4.83-7.304 7.155-15.981 6.624-24.722-3.808-62.683 19.436-123.99 63.84-168.4 3.505-3.505 7.116-6.877 10.824-10.115l-15.66-23.489c-18.988 18.987-54.154 9.494-56.053-19.369 4.94 7.294 12.965 10.334 21.93 10.306 4.624 3.683 10.595 5.668 18.277 5.498-14.197-2.669-23.71-11.684-25.256-26.007 9.826 11.065 21.246 13.643 34.785 11.262-7.045-4.94-12.081-12.841-12.767-23.274 4.941 7.293 12.965 10.335 21.932 10.303 1.457 1.162 3.047 2.155 4.783 2.963 0.557-0.597 1.095-1.202 1.614-1.819-7.504-4.493-12.316-11.823-13.378-21.652 5.924 6.673 12.428 10.259 19.627 11.533 1.471-3.662 2.152-7.45 1.823-11.24 4.057 2.964 6.698 7.077 8.006 11.651 2.475-0.187 5.026-0.574 7.654-1.132 12.8-8.149 22.377-20.41 21.31-32.736 11.849 8.659 11.621 27.116 1.367 38.28l8.659 15.04-2.26 12.808c15.693-7.825 32.28-13.746 49.402-17.626-7.313 17.831-12.59 36.793-15.633 56.995 19.737-52.989 51.201-99.462 92.224-140.63 3.548-6.147 10.784-9.143 17.64-7.305 6.856 1.837 11.623 8.048 11.623 15.147v65.793c33.793-9.913 62.771-33.463 79.074-66.13l119.85 29.509c-14.567 69.186-99.576 110.14-175.59 96.362z" fill="#fff" fill-rule="evenodd"/></g></g></svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 859 B

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 97.74 85.154" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<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(-51.081 -910.49)">
<path d="m100.72 910.49-24.82 23.287-24.82 23.285 16.678 0.084v38.498h23.467v-32.783h17.453v32.783h23.467v-38.174l16.676 0.084-48.1-47.064z" color="#000000" color-rendering="auto" fill="#fff" fill-rule="evenodd" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 836 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

View File

@ -200,13 +200,32 @@ caption{
left: 0;
width: 100%;
height: 40px;
background-color: var(--overlay-color);
background-image: linear-gradient(to left, var(--accent-color), azure 190px);
}
#footer img {
height: 35px;
}
#nre_logo {
position: absolute;
left: 3px;
top: 1px;
}
#owlboard_logo {
position: absolute;
right: 40px;
top: 3px;
}
#home_icon {
position: absolute;
width: 10px;
right: 30px;
top: 2px;
}
/* Animations */
@keyframes pulse-change {
50% {