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> <head>
<meta charset="utf-8"> <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> <title>Jq Play Offline</title>
<script> <script>
if('serviceWorker' in navigator) { if('serviceWorker' in navigator) {
@ -109,7 +113,10 @@
<body> <body>
<div id="top"> <div id="top">
<h1>Jq Play Offline</h1> <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>
<div id="content"> <div id="content">
<div id="query"> <div id="query">

View File

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