mirror of https://github.com/mpolden/echoip
fixed issues with gutter and spilling over layout
This commit is contained in:
parent
37c1cdf33e
commit
313481d2a5
|
@ -32,15 +32,21 @@
|
|||
<div class="content">
|
||||
<div class="pure-g gutters center">
|
||||
<div class="pure-u-1 pure-u-md-2-3">
|
||||
<div class="l-box">
|
||||
<h1>{{ .Host }} — What is my IP address?</h1>
|
||||
<p><code class="ip">{{ .IP }}</code></p>
|
||||
<p>
|
||||
The best tool to find your own IP address, and information about it.
|
||||
The best tool to find your own IP address, and information about
|
||||
it.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3 align-right">
|
||||
<div class="l-box">
|
||||
<div class="leafcloud-logo">
|
||||
<a href="https://www.leaf.cloud?utm_source=ifconfig">
|
||||
{{ template "leafcloud-logo.svg" "." }}
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
This site is graciously hosted by<br />
|
||||
|
@ -50,6 +56,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g gutters center">
|
||||
<!-- COLUMN 1 -->
|
||||
|
@ -176,6 +183,7 @@
|
|||
</div>
|
||||
<!-- COLUMN 2 -->
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<div class="l-box">
|
||||
<h2>How do I get this programmatically?</h2>
|
||||
<p>
|
||||
With the widget below you can build your query, and see what the
|
||||
|
@ -249,6 +257,7 @@
|
|||
<td>
|
||||
<input
|
||||
id="ipInput"
|
||||
class="narrow-input"
|
||||
type="text"
|
||||
placeholder="1.1.1.1"
|
||||
onkeyup="updateIP(this)"
|
||||
|
@ -273,7 +282,14 @@
|
|||
/>
|
||||
</td>
|
||||
<td>Check For Port</td>
|
||||
<td><input id="portInput" type="text" placeholder="8080" /></td>
|
||||
<td>
|
||||
<input
|
||||
id="portInput"
|
||||
type="text"
|
||||
class="narrow-input"
|
||||
placeholder="8080"
|
||||
/>
|
||||
</td>
|
||||
<td><button onclick="getQuery()">go</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
@ -292,19 +308,20 @@
|
|||
</p>
|
||||
<h3>Can I force getting JSON?</h3>
|
||||
<p>
|
||||
Setting the <code>Accept: application/json</code> header works as
|
||||
expected.
|
||||
Setting the <code>Accept: application/json</code> header works
|
||||
as expected.
|
||||
</p>
|
||||
|
||||
<h3>Is automated use of this service permitted?</h3>
|
||||
<p>
|
||||
Yes, as long as the rate limit is respected. The rate limit is in
|
||||
place to ensure a fair service for all.
|
||||
Yes, as long as the rate limit is respected. The rate limit is
|
||||
in place to ensure a fair service for all.
|
||||
</p>
|
||||
<p>
|
||||
<em>Please limit automated requests to 1 request per minute</em>.
|
||||
No guarantee is made for requests that exceed this limit. They may
|
||||
be rate-limited, with a 429 status code, or dropped entirely.
|
||||
<em>Please limit automated requests to 1 request per minute</em
|
||||
>. No guarantee is made for requests that exceed this limit.
|
||||
They may be rate-limited, with a 429 status code, or dropped
|
||||
entirely.
|
||||
</p>
|
||||
|
||||
<h3>Can I run my own service?</h3>
|
||||
|
@ -316,5 +333,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
margin-right: auto;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
max-width: 1280px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
@ -66,6 +66,7 @@
|
|||
border: 1px solid grey;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
margin-top: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.widgetbox.input :first-child::before {
|
||||
|
@ -79,19 +80,18 @@
|
|||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
/* Add a gutter to Pure's Columns */
|
||||
.pure-g.gutters {
|
||||
margin: 0 -1em;
|
||||
}
|
||||
.pure-g.gutters > [class*="pure-u"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0em 1em;
|
||||
.l-box {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.narrow-input {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
/* TOGGLE */ /* https://codepen.io/avstorm/pen/jOEpBLW */
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
|
|
Loading…
Reference in New Issue