From c202885684263f8c29d29b77fe46e9d255e8f19c Mon Sep 17 00:00:00 2001 From: m5r Date: Fri, 19 Jul 2024 01:46:18 +0200 Subject: [PATCH] valid, more proper markup --- http/static/index.html | 167 ++++++++++++++++++++--------------------- http/static/styles.css | 151 ++++++++++++++++++++++--------------- 2 files changed, 172 insertions(+), 146 deletions(-) diff --git a/http/static/index.html b/http/static/index.html index d8af752..2c77258 100644 --- a/http/static/index.html +++ b/http/static/index.html @@ -1,89 +1,88 @@ + + + + local-ip.sh + + + + + + + + + + + + + + + + + + - - - - local-ip.sh - - - - - - - - - - - - - - - - - - - - -
- 
-  _                 _       _            _
- | |               | |     (_)          | |
- | | ___   ___ __ _| |      _ _ __   ___| |__
- | |/ _ \ / __/ _` | |_____| | '_ \ / __| '_ \
- | | (_) | (_| (_| | |_____| | |_) |\__ \ | | |
- |_|\___/ \___\__,_|_|     |_| .__(_)___/_| |_|
-                             | |
-                             |_|
-
-
-
-
-
What is local-ip.sh?
-
-
local-ip.sh is a magic domain name that provides wildcard DNS for any IP address. It is heavily - inspired by local-ip.co, sslip.io, and xip.io.
-
Quick example, say your LAN IP address is 192.168.1.10. Using - local-ip.sh,

- 
       192.168.1.10.local-ip.sh resolves to 192.168.1.10
-     dots.192.168.1.10.local-ip.sh resolves to 192.168.1.10
-   dashes.192-168-1-10.local-ip.sh resolves to 192.168.1.10
-
-
...and so on. You can use these domains to access virtual hosts on your development web server - from devices on your local network. No configuration required!
-
The best part is, you can serve your content over HTTPS with our TLS certificate for - *.local-ip.sh:Be aware that wildcard certificates are not recursive, meaning they don't match - "sub-subdomains".
In our case, this certificate will only match subdomains of + +
+

local-ip.sh

+ 
+    _                 _       _            _
+    | |               | |     (_)          | |
+    | | ___   ___ __ _| |      _ _ __   ___| |__
+    | |/ _ \ / __/ _` | |_____| | '_ \ / __| '_ \
+    | | (_) | (_| (_| | |_____| | |_) |\__ \ | | |
+    |_|\___/ \___\__,_|_|     |_| .__(_)___/_| |_|
+                                | |
+                                |_|
+
+
+
+
+

What is local-ip.sh?

+

+ local-ip.sh is a magic domain name that provides wildcard DNS for any IP address. It is heavily inspired by + local-ip.co, sslip.io, and xip.io. +

+

Quick example, say your LAN IP address is 192.168.1.10. Using local-ip.sh,

+ +

+ ...and so on. You can use these domains to access virtual hosts on your development web server + from devices on your local network. No configuration required! +

+

The best part is, you can serve your content over HTTPS with our TLS certificate for *.local-ip.sh:

+ +

+ Be aware that wildcard certificates are not recursive, meaning they don't match + "sub-subdomains".
In our case, this certificate will only match subdomains of local-ip.sh such as 192-168-1-10.local-ip.sh where dashes separate - the numbers that make up the IP address.

-
-
-
-
How does it work?
-
-
- local-ip.sh runs publicly a custom DNS server. + the numbers that make up the IP address. +

+
+
+

How does it work?

+

+ local-ip.sh runs publicly a custom DNS server. When your computer looks up a local-ip.sh domain, the local-ip.sh DNS server resolves to the IP address it extracts from the domain. -

-
- The TLS certificate is obtained from Let's Encrypt and renewed up to a month before it expires. -
-
-
-
- - - - - - \ No newline at end of file +

+

The TLS certificate is obtained from Let's Encrypt and renewed up to a month before it expires.

+ + + + + + + diff --git a/http/static/styles.css b/http/static/styles.css index 23e1261..b40400c 100644 --- a/http/static/styles.css +++ b/http/static/styles.css @@ -1,107 +1,134 @@ html { - background: #111; + background: #111; } body { - color: #728ea7; - display: flex; - flex-direction: column; - margin-inline: auto; - padding-left: 1.5em; - padding-right: 1.5em; - width: min(100%, 41.5rem); - margin-top: 50px; - margin-bottom: 50px; + color: #728ea7; + display: flex; + flex-direction: column; + margin-inline: auto; + padding-left: 1.5em; + padding-right: 1.5em; + width: min(100%, 41.5rem); + margin-top: 50px; + margin-bottom: 50px; - font-family: ui-monospace, monospace; - font-size: 18px; - font-weight: bold; + font-family: ui-monospace, monospace; + font-size: 18px; + font-weight: bold; - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } header { - color: #7aa6da; - display: flex; + color: #7aa6da; + display: flex; +} + +h3 { + margin: 0; + font-weight: bold; } header > pre { - margin: 1rem auto; + margin: 1rem auto; } main a { - color: #728ea7; + color: #728ea7; } main a:hover { - background: #7aa6da; - color: #111; - text-decoration: none; + background: #7aa6da; + color: #111; + text-decoration: none; } -section:nth-child(n + 2) { - margin-top: 3rem; +article:nth-child(n + 2) { + margin-top: 3rem; } -section > main { - display: flex; - flex-direction: column; - justify-content: space-between; - row-gap: 2rem; +article > main { + display: flex; + flex-direction: column; + justify-content: space-between; + row-gap: 2rem; } code { - padding: 0.2em 0.4em; - margin: 0; - font-size: 85%; - background-color: rgba(27, 31, 35, 0.95); - border-radius: 3px; - white-space: nowrap; + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + background-color: rgba(27, 31, 35, 0.95); + border-radius: 3px; + white-space: nowrap; } header span.dim { - color: #728ea7; + color: #728ea7; } -section strong { - color: #7aa6da; +article h3, +article strong { + color: #7aa6da; +} + +aside { + display: flex; + flex-direction: column; +} + +aside > p { + margin: 0 5ch 0 auto; } footer { - margin: 5rem auto 0; - color: #556a7d; + margin: 5rem auto 0; + color: #556a7d; } footer a { - color: inherit; + color: inherit; } footer a:hover { - color: #728ea7; + color: #728ea7; } -div.cursor { - display: inline-block; - background: #111; - margin-left: 1px; - margin-right: -1px; - animation: blink 2s linear 0s infinite; +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.cursor { + display: inline-block; + background: #111; + margin-left: 1px; + margin-right: -1px; + animation: blink 2s linear 0s infinite; } @keyframes blink { - 0% { - background: #7aa6da; - } - 47% { - background: #728ea7; - } - 50% { - background: #111; - } - 97% { - background: #111; - } - 100% { - background: #728ea7; - } + 0% { + background: #7aa6da; + } + 47% { + background: #728ea7; + } + 50% { + background: #111; + } + 97% { + background: #111; + } + 100% { + background: #728ea7; + } }