Use cards to lay out the columns
This commit is contained in:
parent
312dbb9141
commit
f878af430d
|
@ -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",
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue