adjusted UI more
+ set input and button to be wider + set min height on the main to be longer to look better between views + bumped shortened url down some to fill the gap morepull/17/head
parent
9ca0e9ca48
commit
8430e828e9
|
|
@ -1 +1 @@
|
|||
<h3 style="overflow-wrap: break-word; word-wrap: break-word;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>
|
||||
<h3 style="overflow-wrap: break-word; word-wrap: break-word; line-height: 120px;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<form method="POST" action="/create">
|
||||
<input type="url"
|
||||
name="url"
|
||||
pattern="https?://.+"
|
||||
placeholder="http://www.example.com/"
|
||||
autocomplete="off"
|
||||
required />
|
||||
<button type="submit">Submit</button>
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<input type="url"
|
||||
name="url"
|
||||
pattern="https?://.+"
|
||||
placeholder="http://www.example.com/"
|
||||
autocomplete="off"
|
||||
required />
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -30,16 +30,19 @@
|
|||
padding: 1rem;
|
||||
margin-top: 5rem;
|
||||
text-align: center;
|
||||
min-height: 200px;
|
||||
min-height: 260px;
|
||||
box-shadow: 3px 2px 10px var(--shadow);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
input, button {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
border: 3px solid var(--dark-blue);
|
||||
margin-right: 1rem;
|
||||
outline: none;
|
||||
transition: all .25s ease-in-out;
|
||||
-moz-transition: all .25s ease-in-out;
|
||||
|
|
@ -55,7 +58,7 @@
|
|||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
border: 2px solid var(--darker-blue);
|
||||
background: var(--darker-blue);
|
||||
background: var(--dark-blue);
|
||||
font-weight: bold;
|
||||
transition: background .25s ease-in-out;
|
||||
-moz-transition: background .25s ease-in-out;
|
||||
|
|
@ -63,7 +66,7 @@
|
|||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--dark-blue);
|
||||
background: var(--darker-blue);
|
||||
}
|
||||
|
||||
button:active {
|
||||
|
|
|
|||
Loading…
Reference in New Issue