switch spectre by pico.css

This commit is contained in:
Sergio Álvarez 2021-09-15 17:26:10 +02:00
parent 8bc6f0a70c
commit 0a44536179
2 changed files with 46 additions and 25 deletions

27
app/public/css/custom.css Normal file
View File

@ -0,0 +1,27 @@
:root {
--form-element-spacing-vertical: .15rem;
--form-element-spacing-horizontal: 1rem;
--border-radius: .10rem;
--line-height: 1.3;
}
footer {
text-align: right;
}
textarea {
height: 80vh;
font-family: monospace;
}
header button {
margin-top: var(--spacing);
}
header a {
display: block;
margin-top: var(--spacing);
margin-bottom: var(--spacing);
text-align: center;
}

View File

@ -23,7 +23,7 @@ $buttons = [
$str = $result = $_GET['str'] ?? ''; $str = $result = $_GET['str'] ?? '';
$action = $_GET['action'] ?? ''; $action = $_GET['action'] ?? '';
$help = 'https://www.php.net/manual/en/index.php'; $help = 'https://www.php.net/manual/';
if ($action == 'reset') { if ($action == 'reset') {
http_response_code(302); http_response_code(302);
@ -116,44 +116,38 @@ if ($action == 'reset') {
</script> </script>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="Encode and Decode strings from/to URL, Base64, HTML entities, UU, Qprint, hash, hex and more." /> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Encode/Decode everything</title> <title>Decode/Encode everything</title>
<meta name="description" content="Encode/Decode everything, base64, url, html, charset">
<meta name="author" content="Sergio Álvarez <correo@sergio.am>"> <meta name="author" content="Sergio Álvarez <correo@sergio.am>">
<meta name="description" content="Encode and Decode strings from/to URL, Base64, HTML entities, UU, Qprint, hash, hex and more." />
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon.io/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon.io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.io/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon.io/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon.io/favicon-16x16.png">
<link rel="manifest" href="/img/favicon.io/site.webmanifest"> <link rel="manifest" href="/img/favicon.io/site.webmanifest">
<!-- <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css"> --> <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css@0.5.8/dist/spectre.min.css"> <link rel="stylesheet" href="/css/custom.css">
<style type="text/css">
html, body { height: 100%; }
body { margin: 0; }
textarea.form-input { width: 100%; height: 80vh; font-family: monospace; }
.container { padding-top: .4rem; padding-bottom: .4rem; }
</style>
</head> </head>
<body class="bg-gray"> <body class="container-fluid">
<form method="get"> <form method="get">
<div class="container"> <header class="grid">
<?php foreach ($buttons as $act => $label) { ?> <?php foreach ($buttons as $act => $label) { ?>
<button type="submit" name="action" value="<?=$act?>" class="btn<?=($action == $act? ' btn-primary': '')?>"><?=$label?></button> <button type="submit" name="action" value="<?=$act?>" class="<?=($action == $act? ' contrast': '')?>"><?=$label?></button>
<?php } ?> <?php } ?>
<a href="/" class="btn btn-link btn-error">Reset</button> <a href="/">Reset</a>
<a href="<?=$help?>" class="btn btn-link">Help</a> <a href="<?=$help?>">Help</a>
</div> </header>
<div class="container"> <main class="grid">
<textarea name="str" class="form-input" placeholder="Paste a string here"><?=htmlentities($result, ENT_QUOTES | ENT_HTML5 | ENT_IGNORE)?></textarea> <textarea name="str" class="form-input" placeholder="Paste a string here"><?=htmlentities($result, ENT_QUOTES | ENT_HTML5 | ENT_IGNORE)?></textarea>
</div> </main>
</form>
<div class="container text-right"> <footer class="grid">
<small>Contact me via <a href="mailto:correo@sergio.am">email</a> or <a href="https://twitter.com/xergio">twitter</a>. Made with pure <a href="https://php.net/">PHP</a> and <a href="https://picturepan2.github.io/spectre/">Spectre</a>. <a href="https://sergio.am/code/dencode.xrg.es">Code</a>.</small> <small>Contact me via <a href="mailto:correo@sergio.am">email</a> or <a href="https://twitter.com/xergio">twitter</a>. Made with pure <a href="https://php.net/">PHP</a> and <a href="https://picocss.com/"><strong>Pico</strong>.css</a>. <a href="https://sergio.am/code/dencode.xrg.es">Code</a>.</small>
</div> </footer>
</form>
</body> </body>
</html> </html>