feature: add meta description and a favicon

This commit is contained in:
Jiehong Ma 2023-07-16 14:30:46 +02:00
parent 8f53d26219
commit c587c17b70
3 changed files with 19 additions and 12 deletions

BIN
public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 B

View File

@ -3,6 +3,10 @@
<head>
<meta charset="utf-8">
<meta name="description" content="Jq Play Offline is a web assembly
version of jqplay, allowing you to run the full featured
jq in your browser, without sending anything to any backend.">
<link rel="icon" type="image/png" href="favicon.png">
<title>Jq Play Offline</title>
<script>
if('serviceWorker' in navigator) {
@ -109,7 +113,10 @@
<body>
<div id="top">
<h1>Jq Play Offline</h1>
<a href="https://stedolan.github.io/jq/manual/v1.6/">1.6 - Web Assembly Version</a>
<div id="links">
<a href="https://gitlab.com/jiehong/jq_offline" target="_blank">Code</a>
<a href="https://stedolan.github.io/jq/manual/v1.6/" target="_blank">Manual</a>
</div>
</div>
<div id="content">
<div id="query">

View File

@ -23,11 +23,12 @@ h1 {
flex-flow: column;
}
#top a {
#links a {
font-size: .8em;
margin-inline-end: 1em;
}
#top a:visited {
#links a:visited {
color: #bfbdb6;
}
@ -41,7 +42,6 @@ h1 {
grid-template-rows: 1fr 1fr auto;
padding: 1em;
height: 90vh;
}
@media only screen and (min-width: 1000px) {
@ -55,13 +55,14 @@ h1 {
"query query query query"
"input input output output";
grid-template-rows: auto 1fr;
height: calc(100dvh - 6em);
}
#top {
flex-flow: row;
}
#top a {
#links {
position: absolute;
right: 2em;
}
@ -109,7 +110,7 @@ textarea {
background: #e8e8e8;
border: none;
border-radius: .3em;
padding-left: .5em;
padding-inline-start: .5em;
}
#options {
@ -120,14 +121,13 @@ textarea {
font-weight: bold;
margin: 0;
padding: 0;
padding-left: .5em;
padding-inline-start: .5em;
flex-direction: column;
}
#options li {
margin-top: auto;
margin-bottom: auto;
margin-left: 1em;
margin-block: auto;
margin-inline-start: 1em;
font-size: .7em;
font-weight: normal;
}
@ -135,7 +135,7 @@ textarea {
input[type=checkbox] {
transform: scale(2.5);
height: 2.5em;
margin-right: 1em;
margin-inline-end: 1em;
}
@media only screen and (min-width: 1000px) {
@ -143,7 +143,7 @@ input[type=checkbox] {
input[type=checkbox] {
transform: scale(1.3);
height: 1em;
margin-right: .1em;
margin-inline-end: .1em;
}
#options {