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

View File

@ -32,22 +32,29 @@
<div class="content">
<div class="pure-g gutters center">
<div class="pure-u-1 pure-u-md-2-3">
<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.
</p>
<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.
</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 align-right">
<div class="leafcloud-logo">
{{ template "leafcloud-logo.svg" "." }}
<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 />
<a href="https://www.leaf.cloud?utm_source=ifconfig"
>Leafcloud The Truly Sustainable Cloud</a
>
</p>
</div>
<p>
This site is graciously hosted by<br />
<a href="https://www.leaf.cloud?utm_source=ifconfig"
>Leafcloud The Truly Sustainable Cloud</a
>
</p>
</div>
</div>
@ -176,142 +183,153 @@
</div>
<!-- COLUMN 2 -->
<div class="pure-u-1 pure-u-md-1-2">
<h2>How do I get this programmatically?</h2>
<p>
With the widget below you can build your query, and see what the
result will look like.
</p>
<div class="pure-form">
<!-- COMMAND WIDGET -->
<div class="buttons">
<button
name="ip"
class="button widget-select"
onclick="changeInput(this.name)"
>
ip
</button>
<button
name="country"
class="button widget-select"
onclick="changeInput(this.name)"
>
country
</button>
<button
name="country-iso"
class="button widget-select"
onclick="changeInput(this.name)"
>
country-iso
</button>
<button
name="city"
class="button widget-select"
onclick="changeInput(this.name)"
>
city
</button>
<button
name="asn"
class="button widget-select"
onclick="changeInput(this.name)"
>
ASN
</button>
<button
name="json"
class="button widget-select"
onclick="changeInput(this.name)"
>
JSON
</button>
<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
result will look like.
</p>
<div class="pure-form">
<!-- COMMAND WIDGET -->
<div class="buttons">
<button
name="ip"
class="button widget-select"
onclick="changeInput(this.name)"
>
ip
</button>
<button
name="country"
class="button widget-select"
onclick="changeInput(this.name)"
>
country
</button>
<button
name="country-iso"
class="button widget-select"
onclick="changeInput(this.name)"
>
country-iso
</button>
<button
name="city"
class="button widget-select"
onclick="changeInput(this.name)"
>
city
</button>
<button
name="asn"
class="button widget-select"
onclick="changeInput(this.name)"
>
ASN
</button>
<button
name="json"
class="button widget-select"
onclick="changeInput(this.name)"
>
JSON
</button>
</div>
<div class="widgetbox input">
<code id="command"></code>
</div>
<div id="output" class="widgetbox output"></div>
<table class="input-table">
<tr>
<td colspan="3">You can open this page for another IP</td>
</tr>
<tr>
<td>
<input
id="ipCheckBox"
type="checkbox"
class="toggle"
onchange="enableIP(this)"
/>
</td>
<td>Check Another IP</td>
<td>
<input
id="ipInput"
class="narrow-input"
type="text"
placeholder="1.1.1.1"
onkeyup="updateIP(this)"
/>
</td>
<td>
<button onclick="navigate()">open</button>
</td>
</tr>
<tr>
<td colspan="3">
And you can check if a port on your IP is open
</td>
</tr>
<tr>
<td>
<input
id="portCheckBox"
type="checkbox"
class="toggle"
onchange="enablePort(this)"
/>
</td>
<td>Check For Port</td>
<td>
<input
id="portInput"
type="text"
class="narrow-input"
placeholder="8080"
/>
</td>
<td><button onclick="getQuery()">go</button></td>
</tr>
</table>
</div>
<div class="widgetbox input">
<code id="command"></code>
<!-- FAQ -->
<div class="FAQ">
<h2>FAQ</h2>
<h3>How do I force IPv4 or IPv6 lookup?</h3>
<p>
As of 2018-07-25 it's no longer possible to force protocol using
the
<i>v4</i> and <i>v6</i> subdomains. IPv4 or IPv6 still can be
forced by passing the appropiate flag to your client, e.g
<code>curl -4</code> or <code>curl -6</code>.
</p>
<h3>Can I force getting JSON?</h3>
<p>
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.
</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.
</p>
<h3>Can I run my own service?</h3>
<p>
Yes, the source code and documentation is available on
<a href="https://github.com/mpolden/echoip">GitHub</a>.
</p>
</div>
<div id="output" class="widgetbox output"></div>
<table class="input-table">
<tr>
<td colspan="3">You can open this page for another IP</td>
</tr>
<tr>
<td>
<input
id="ipCheckBox"
type="checkbox"
class="toggle"
onchange="enableIP(this)"
/>
</td>
<td>Check Another IP</td>
<td>
<input
id="ipInput"
type="text"
placeholder="1.1.1.1"
onkeyup="updateIP(this)"
/>
</td>
<td>
<button onclick="navigate()">open</button>
</td>
</tr>
<tr>
<td colspan="3">
And you can check if a port on your IP is open
</td>
</tr>
<tr>
<td>
<input
id="portCheckBox"
type="checkbox"
class="toggle"
onchange="enablePort(this)"
/>
</td>
<td>Check For Port</td>
<td><input id="portInput" type="text" placeholder="8080" /></td>
<td><button onclick="getQuery()">go</button></td>
</tr>
</table>
</div>
<!-- FAQ -->
<div class="FAQ">
<h2>FAQ</h2>
<h3>How do I force IPv4 or IPv6 lookup?</h3>
<p>
As of 2018-07-25 it's no longer possible to force protocol using
the
<i>v4</i> and <i>v6</i> subdomains. IPv4 or IPv6 still can be
forced by passing the appropiate flag to your client, e.g
<code>curl -4</code> or <code>curl -6</code>.
</p>
<h3>Can I force getting JSON?</h3>
<p>
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.
</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.
</p>
<h3>Can I run my own service?</h3>
<p>
Yes, the source code and documentation is available on
<a href="https://github.com/mpolden/echoip">GitHub</a>.
</p>
</div>
</div>
</div>

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;