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

View File

@ -1,6 +1,6 @@
{ {
"name": "codsworth-namegen", "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", "description": "Choose a fitting name for your Fallout 4 character that Codsworth can pronounce",
"author": "Florine W. Dekker", "author": "Florine W. Dekker",
"browser": "dist/bundle.js", "browser": "dist/bundle.js",

View File

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

View File

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