commit b4cd3d91e1c7530bda0cd961edd91f1997b67400
parent 430635cec5facbe40db9d6b69774c3165d68af76
Author: parazyd <parazyd@dyne.org>
Date: Tue, 9 Feb 2021 11:32:34 +0100
Template CSS tweaks.
Diffstat:
| M | templates/index.html | | | 111 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------ |
1 file changed, 78 insertions(+), 33 deletions(-)
diff --git a/templates/index.html b/templates/index.html
@@ -2,47 +2,92 @@
<html lang="en">
<head>
<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width; initial-scale=1">
<title>blck</title>
<style>
+ *, :after, :before { box-sizing: border-box; }
body {
- background: #f4f5e7;
- color: #222;
- font-family: sans-serif;
- padding: 5%;
- }
-
- .container { font-size: 300%; }
- .inputbox , .button { font-size: 70%; }
- .textbox { height: 360px; width: 580px ; }
- a, a:visited, a:active { color: #179c3f; text-decoration: none; }
- a:hover { text-decoration: underline; }
-
- footer {
- clear: both;
- color: #999;
- font-size: 40%;
- padding: 1em;
- text-align: right;
- position: absolute;
- bottom: 0;
- right: 0;
+ background-attachment: fixed fixed;
+ background-color: #f7f7f7;
+ background-position: 85% 100% top left;
+ background-repeat: no-repeat, repeat;
+ color: #333;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ height: 100%;
+ line-height: 20px;
+ margin: 0;
+ padding-top: 20px;
+ padding-bottom: 40px;
+ }
+ .container {
+ margin: 0 auto;
+ max-width: 700px;
+ }
+ p { margin: 0 0 10px; }
+ a {
+ color: #0078b4;
+ text-decoration: none;
+ transition: color .25s
+ }
+ a:active, a:focus, a:hover { color: #005580; }
+ a:focus { outline: thin dotted #333 }
+ .jumbotron {
+ margin: 60px 0;
+ text-align: center;
+ transition: width .5s, height .5s, margin .5s, padding .5s
+ }
+ .jumbotron h1 {
+ color: inherit;
+ font-family: inherit;
+ font-size: 72px;
+ font-weight: 700;
+ line-height: 1;
+ margin: 10px 0;
+ cursor: default;
+ }
+ .jumbotron .lead {
+ font-size: 21px;
+ font-weight: 200;
+ line-height: 30px;
+ margin-bottom: 20px;
+ transition: font-size .5s
+ }
+ .jumbotron .btn {
+ background: rgba(202, 230, 190, .75);
+ border: 1px solid #b7d1a0;
+ border-radius: 4px;
+ color: #468847;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 24px;
+ padding: 28px 48px;
+ text-shadow: 0 1px rgba(255, 255, 255, .5);
+ transition: background-color .25s, width .5s, height .5s;
+ }
+ .jumbotron .btn:active, .jumbotron .btn:focus, .jumbotron .btn:hover {
+ background-color: #bce4aa;
+ text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
- <h1>blck</h1>
- <p>Upload an ephemeral file</p>
- <div class="form">
- <form method="post" action="{{ r }}" enctype="multipart/form-data">
- <input type="file" name="c">
- <input type="submit" class="button" value="Upload">
- </form>
+ <div class="jumbotron">
+ <h1>blck</h1>
+ <p class="lead">Upload an ephemeral file</p>
+ <div class="form">
+ <form method="post" action="{{ r }}" enctype="multipart/form-data">
+ <input type="file" id="upload-input" name="c" class="btn" ="Select file">
+ <input type="submit" value="Submit">
+ </form>
+ </div>
+ <hr>
+ <footer>
+ with ❤️ from <a href="https://twitter.com/parazyd">parazyd</a> |
+ <a href="https://github.com/parazyd/blck">source</a>
+ </footer>
+ <div>
</div>
- <footer>
- with ❤️ from <a href="https://twitter.com/parazyd">parazyd</a> |
- <a href="https://github.com/parazyd/blck">source</a>
- </footer>
- <div>
</body>
</html>
