commit 920495fbc663264df7788a9c4b2f49fb1abf7f18
parent 264b05fe1b9b628f45678faa81ed114ab69a0b8c
Author: Katja (ctucx) <git@ctu.cx>
Date: Fri, 24 Jan 2025 14:00:26 +0100
parent 264b05fe1b9b628f45678faa81ed114ab69a0b8c
Author: Katja (ctucx) <git@ctu.cx>
Date: Fri, 24 Jan 2025 14:00:26 +0100
assets: vectorize logo, change color to green, remove unnecessary assets
12 files changed, 33 insertions(+), 61 deletions(-)
diff --git a/src/searchView.js b/src/searchView.js @@ -62,10 +62,7 @@ const iconFor = id => { const searchTemplate = (journeysHistory) => html` <div class="searchView"> - <div class="title center"> - <div class="icon-logo"></div> - <h1>TrainSearch</h1> - </div> + <h1 class="title center">TrainSearch</h1> <form class="column" onsubmit="return false;"> <div class="row nowrap"> <label for="from">${t('from')}:</label> @@ -128,10 +125,7 @@ const searchTemplate = (journeysHistory) => html` <div class="filler"></div> <div class="button icon-settings" title="${t('settings')}" @click=${showSettings}></div> - <div class="button go" tabindex="0" id="go" @click=${search}> - ${t('search')} - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z"/></svg> - </div> + <div class="button go" tabindex="0" id="go" @click=${search}>${t('search')}</div> </div> ${journeysHistory.length ? html`
diff --git a/static/favicon-512x512.png b/static/favicon-512x512.png Binary files differ.
diff --git a/static/favicon-64x64.png b/static/favicon-64x64.png Binary files differ.
diff --git a/static/favicon.svg b/static/favicon.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><rect rx="4" height="28" width="28" fill="green"/><path d="M14 5.5c-4 0-8 .5-8 4V19c0 1.93 1.57 3.5 3.5 3.5L8 24v.5h2.23l2-2H16l2 2h2V24l-1.5-1.5c1.93 0 3.5-1.57 3.5-3.5V9.5c0-3.5-3.58-4-8-4m-4.5 15c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m3.5-7H8v-4h5zm2 0v-4h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg>
diff --git a/static/img/apple-touch-icon.png b/static/img/apple-touch-icon.png Binary files differ.
diff --git a/static/img/favicon-16x16.png b/static/img/favicon-16x16.png Binary files differ.
diff --git a/static/img/favicon-32x32.png b/static/img/favicon-32x32.png Binary files differ.
diff --git a/static/img/favicon-512x512.png b/static/img/favicon-512x512.png Binary files differ.
diff --git a/static/img/favicon-64x64.png b/static/img/favicon-64x64.png Binary files differ.
diff --git a/static/index.html b/static/index.html @@ -8,9 +8,9 @@ <meta name="theme-color" content="#ffffff"> <meta name="description" content="Plan your public transport journeys"> - <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png"> + <link rel="icon" href="/favicon.svg"> <link rel="manifest" href="/manifest.json"> - <link rel="stylesheet" type="text/css" href="style.css"> + <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="modulepreload" href="index.js"> <link rel="manifest" href="manifest.json"> @@ -36,28 +36,17 @@ body { margin: auto; } -#logo { - background-color: #7171e5; - border-radius: 15%; +svg { width: 50vmin; height: 50vmin; } - -#logo>svg { - width: 75%; - height: 75%; - margin: 12.5%; - fill: white; -} </style> </head> <body> <div id="content" class="column"></div> <div id="overlay"> <noscript>JavaScript is required to use TrainSearch</noscript> - <div id="logo"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg> - </div> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><rect rx="4" height="28" width="28" fill="green"/><path d="M14 5.5c-4 0-8 .5-8 4V19c0 1.93 1.57 3.5 3.5 3.5L8 24v.5h2.23l2-2H16l2 2h2V24l-1.5-1.5c1.93 0 3.5-1.57 3.5-3.5V9.5c0-3.5-3.58-4-8-4m-4.5 15c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m3.5-7H8v-4h5zm2 0v-4h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg> </div> <script type="module" src="index.js"></script> </body>
diff --git a/static/manifest.json b/static/manifest.json @@ -4,14 +4,9 @@ "start_url": ".", "icons": [ { - "src": "/favicon-64x64.png", - "sizes": "64x64", - "type": "image/png" - }, - { - "src": "/favicon-512x512.png", - "sizes": "512x512", - "type": "image/png" + "src": "/favicon.svg", + "type": "image/svg+xml", + "sizes": "any" } ], "theme_color": "#ffffff",
diff --git a/static/style.css b/static/style.css @@ -82,7 +82,7 @@ header { flex-direction: row; justify-content: center; color: white; - background-color: #222; + background-color: #33691E; border-bottom: 1px solid rgba(255, 255, 255, .3); h3 { @@ -232,28 +232,23 @@ header { background-color: #222; flex-grow: 1; - .title { - .icon-logo { - background-color: #7171e5; - border-radius: 15%; - width: 50px; - height: 50px; - margin: 0; - padding: 5px 5px 2px 6px; - } + .title::before { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><rect rx="4" height="28" width="28" fill="green"/><path d="M14 5.5c-4 0-8 .5-8 4V19c0 1.93 1.57 3.5 3.5 3.5L8 24v.5h2.23l2-2H16l2 2h2V24l-1.5-1.5c1.93 0 3.5-1.57 3.5-3.5V9.5c0-3.5-3.58-4-8-4m-4.5 15c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m3.5-7H8v-4h5zm2 0v-4h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg>'); + width: 50px; + height: 50px; + margin: -0.7em .3em -0.5em -0.3em; + } - h1 { - color: white; - font-weight: normal; - margin-left: .5em; - margin: .7em .3em .5em .3em; - } + .title { + color: white; + font-weight: normal; + margin: .7em .3em .5em .3em; + } - h1:hover { - -webkit-text-fill-color: transparent; - -webkit-background-clip: text !important; - background: linear-gradient(90deg, #b4dcff 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, #b4dcff 80%, #b4dcff 100%); - } + .title:hover { + -webkit-text-fill-color: transparent; + -webkit-background-clip: text !important; + background: linear-gradient(90deg, #b4dcff 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, #b4dcff 80%, #b4dcff 100%); } form { @@ -296,11 +291,13 @@ header { align-items: center; font-size: 20px; padding: 8px; - - svg { - margin-left: 5px; - fill: #5050ff; - } + } + + .button.go::after { + width: 24px; + height: 24px; + margin-left: 5px; + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M12 2 4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" fill="green"/></svg>'); } } @@ -833,10 +830,6 @@ button.color:hover, .button.color:hover { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><circle cx="12" cy="4" r="2"/><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95m-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1a5 5 0 1 0 5.9 5.9z"/></svg>'); } -.icon-logo { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4M7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17m3.5-7H6V6h5zm2 0V6h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg>') -} - .icon-table { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M3 9h14V7H3zm0 4h14v-2H3zm0 4h14v-2H3zm16 0h2v-2h-2zm0-10v2h2V7zm0 6h2v-2h-2z" fill="white" /></svg>'); }