Ind.ie is now Small Technology Foundation.
Commit de3f5fb6 authored by Aral Balkan's avatar Aral Balkan

Tweak look of the form to improve legibility and hierarchy

parent 906e67b7
......@@ -11,15 +11,15 @@
<h1>Hypha Spike: DAT 1</h1>
<form id='passphraseForm'>
<fieldset>
<div>
<label for='domain'>Domain</label>
<input type='text' id='domain' value='ar.al' readonly>
</fieldset>
<fieldset>
</div>
<div>
<label>Passphrase:</label>
<input type='text' id='passphrase' readonly>
<button id='change' type='submit'>Change</button>
</fieldset>
</div>
</form>
<!-- Courtesy: http://tobiasahlin.com/spinkit/ -->
......@@ -32,17 +32,31 @@
</div>
<form id='outputForm'>
<label for='publicSigningKey'>Public signing key:</label>
<input type='text' id='publicSigningKey'>
<fieldset>
<legend>Public details</legend>
<div>
<label for='publicSigningKey'>Your hyphalink:</label>
<input type='text' id='publicSigningKey'>
</div>
</fieldset>
<label for='privateSigningKey'>Private signing key:</label>
<textarea id='privateSigningKey'></textarea>
<fieldset>
<legend>Internal details</legend>
<div>
<label for='privateSigningKey'>Private signing key:</label>
<textarea id='privateSigningKey'></textarea>
</div>
<label for='publicEncryptionKey'>Public encryption key:</label>
<input type='text' id='publicEncryptionKey'>
<div>
<label for='publicEncryptionKey'>Public encryption key:</label>
<input type='text' id='publicEncryptionKey'>
</div>
<label for='privateEncryptionKey'>Private encryption key:</label>
<input type='text' id='privateEncryptionKey'>
<div>
<label for='privateEncryptionKey'>Private encryption key:</label>
<input type='text' id='privateEncryptionKey'>
</div>
</fieldset>
</form>
<footer>
......
......@@ -2,6 +2,12 @@
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-family: sans-serif;
}
......@@ -19,6 +25,20 @@ form {
}
fieldset {
border: 0;
}
legend {
font-size: 1.25em;
font-weight: 600;
margin-bottom: 1em;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid black;
width: 100%;
}
form div {
display: grid;
grid-template-columns: 200px 1fr 100px;
border: 0;
......@@ -28,7 +48,8 @@ fieldset {
input, textarea {
font-size: 1em;
border: 1px solid black;
border: 0;
background-color: #e9ece5 !important;
padding: 0.5em;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment