wberube
/
echoip
mirror of https://github.com/mpolden/echoip
1
0
Fork 0
Code Issues Releases Wiki Activity

fixed issues with gutter and spilling over layout

This commit is contained in:
Thatcher Peskens 2020-12-07 00:29:17 +01:00
parent 37c1cdf33e
commit 313481d2a5
2 changed files with 173 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
html/index.html
View File

@ -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>

16
html/styles.html
View File

@ -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;