Prevent columns from interleaving

Fixes #2.
This commit is contained in:
Florine W. Dekker 2021-04-29 13:26:50 +02:00
parent 85f07a83d5
commit 62a2bb042e
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
3 changed files with 18 additions and 18 deletions

View File

@ -1,6 +1,6 @@
{
"name": "codsworth-namegen",
"version": "1.1.5",
"version": "1.1.6",
"description": "Choose a fitting name for your Fallout 4 character that Codsworth can pronounce",
"author": "Felix W. Dekker",
"browser": "dist/bundle.js",

View File

@ -1,3 +1,15 @@
textarea.nameArea {
height: 10em;
}
@media (min-width: 600px) {
.spacer {
visibility: hidden;
}
}
@media (max-width: 600px) {
.spacer {
display: none;
}
}

View File

@ -33,36 +33,24 @@
<div id="contents">
<div id="header"></div>
<!-- Generators -->
<section class="container">
<!-- Headers -->
<div class="row">
<div class="column">
<h2>Similar names</h2>
</div>
<div class="column">
<h2>Random names</h2>
</div>
</div>
<!-- Inputs -->
<div class="row">
<div class="column">
<label for="similarInput">Your name</label>
<input id="similarInput" type="text" autofocus />
</div>
<div class="column"></div>
</div>
<!-- Outputs -->
<div class="row">
<div class="column">
<button id="generateSimilar" type="button">Generate similar names</button>
<label for="similarNames">Similar names are...</label>
<textarea id="similarNames" class="nameArea" readonly></textarea>
</div>
<div class="column">
<h2>Random names</h2>
<!-- Spacer to put textareas at same height -->
<label for="spacerInput" class="spacer">Spacer</label>
<input id="spacerInput" class="spacer" type="text" />
<button id="generateRandom" type="button">Generate random name</button>
<label for="randomNames">Your name is...</label>