tools
/
codsworth-namegen
1
1
Fork 0
Code Issues 2 Pull Requests Releases Activity

Use cards to lay out the columns

This commit is contained in:
Florine W. Dekker 2022-12-14 22:57:44 +01:00
parent 312dbb9141
commit f878af430d
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
3 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

16
src/main/css/main.css
View File

@ -1,15 +1,7 @@
#grid-container {
align-items: start;
}
textarea.name-area {
height: 15em;
}
@media (min-width: 992px) {
.spacer {
visibility: hidden;
}
}
@media (max-width: 992px) {
.spacer {
display: none;
}
}

34
src/main/index.html
View File

@ -44,28 +44,32 @@
</hgroup>
</header>
<div class="grid">
<div>
<h2>Similar names</h2>
<div id="grid-container" class="grid">
<article>
<header>
<h2>Similar names</h2>
</header>
<label for="similar-input">Your name</label>
<input id="similar-input" type="text" autofocus />
<button id="generate-similar" type="button">Generate similar names</button>
<label for="similar-names">Similar names are...</label>
<textarea id="similar-names" class="name-area" readonly></textarea>
</div>
<div>
<h2>Random names</h2>
<!-- Spacer to put textareas at same height -->
<label for="spacer-input" class="spacer">Spacer</label>
<input id="spacer-input" class="spacer" type="text" />
<footer>
<label for="similar-names">Similar names are...</label>
<textarea id="similar-names" class="name-area" readonly></textarea>
</footer>
</article>
<article>
<header>
<h2>Random names</h2>
</header>
<button id="generate-random" type="button">Generate random name</button>
<label for="random-names">Your random name is...</label>
<textarea id="random-names" class="name-area" readonly></textarea>
</div>
<footer>
<label for="random-names">Your random name is...</label>
<textarea id="random-names" class="name-area" readonly></textarea>
</footer>
</article>
</div>
</section>
<footer id="footer"></footer>