commit 380c3340ae180421800675ca37664e997250a5b9
parent 72852a46d031be4aa02ef5cf3077d0f799e3fbb7
Author: william <jibjab@cock.li>
Date: Mon, 7 Apr 2025 15:33:30 -0400
overhaul, making css simple
Diffstat:
| M | index.html | | | 58 | +++++++++++++++++++++------------------------------------- |
| M | links.html | | | 40 | +++++++++++++++------------------------- |
| A | old.style.css | | | 197 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | style.css | | | 191 | +++++++++++++++++++++---------------------------------------------------------- |
4 files changed, 284 insertions(+), 202 deletions(-)
diff --git a/index.html b/index.html
@@ -6,47 +6,33 @@
<link rel="stylesheet" type='text/css' href="style.css">
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<div class="wrapper">
-<pre class="center">
-<a href="/" class="logo"><img src=pix/sky.jpg></a></pre><nav>
- <p class="menu"></p>
- <div class="menu">
- <a href="index.html">
- <img src=favicon.ico align=left width=30></a>
+ <a href="/" class="logo"><img src=pix/sky.jpg></a></pre>
+ </head>
+
+<a href="index.html"><img src=favicon.ico align=center width=30></a>
<!--<a href="daily.html">Daily</a>-->
- <a href="links.html">Links</a>
+ <a href="links.html">Links</a>
- <p class="menu"></p>
- </nav>
- <h3 class="left">
- <div class="tops">
- </div>
<body>
- <div class="ll">
<p>Welcome traveler! to wrpr.us -- my personal archive of my homelabbing ventures. Here you'll find personal updates, photos and several hosted services. Check out <a href="https://searx.wrpr.us">Searx</a>, chat on <a href="irc.wrpr.us:7000">wrpr irc</a> or explore text on <a href="gopher://wrpr.us">Gopher</a>. Come say hi with your favorite fediverse flavor on <a href="https://social.wrpr.us">Social wrpr (a Snac2 fedi instance)</a> server.
</p></div>
- <div class="tops">
- <h3>Other Links.</h3></div>
- <div class="links">
- ·<a href="https://git.wrpr.us">Git</a>
- ·<a href="gopher://wrpr.us">Gopher</a>
- ·<a href="http://wrpr.us:8000">Gopher Proxy</a>
- ·<a href="http://hli2ank4yulky7k2sk26s3ztah7sv4g5mwl5ujjtb2j54hfr5s5a.b32.i2p/">I2P Eepsite</a>
- ·<a href="http://kuef7ymer3yc6hpyam7m24icmud6cf4qwxob4qvrch7ercalc3gijrad.onion/">Onion</a>
- ·<a href="https://searx.wrpr.us">Searx</a>
- ·<a href="https://social.wrpr.us">Snac</a>
- ·<a href="irc://irc.wrpr.us:7000">wrpr irc</a>
+ <h3>Other Links.</h3></div>
+ <ul>
+ <li><a href="https://git.wrpr.us">Git</a></li>
+ <li><a href="gopher://wrpr.us">Gopher</a></li>
+ <li><a href="http://wrpr.us:8000">Gopher Proxy</a></li>
+ <li><a href="http://hli2ank4yulky7k2sk26s3ztah7sv4g5mwl5ujjtb2j54hfr5s5a.b32.i2p/">I2P Eepsite</a></li>
+ <li><a href="http://kuef7ymer3yc6hpyam7m24icmud6cf4qwxob4qvrch7ercalc3gijrad.onion/">Onion</a></li>
+ <li><a href="https://searx.wrpr.us">Searx</a></li>
+ <li><a href="https://social.wrpr.us">Snac</a></li>
+ <li><a href="irc://irc.wrpr.us:7000">wrpr irc</a></li>
+ </ul>
+
- </div>
- <div class="l3">
- <p>BTC:</p>
- <code><strong>bc1qdvk8nvw95t066cxq73w4ewfp8kahr84u2wgza5</strong></code>
- </div>
- <a href="pix/btc.png">
- <img class="qr" src="pix/btc.png">
- </a>
-
+ <p>BTC:</p>
+ <a href="pix/btc.png"><img class="logo" src="pix/btc.png"></a>
+
+ <p><code>bc1qdvk8nvw95t066cxq73w4ewfp8kahr84u2wgza5</code></p>
<!-- <div class="tops">
<h3>About this Site.</h3>
@@ -60,13 +46,11 @@
</p>
-->
<footer>
- <footer class="left">
<a href="/">
<img src="favicon.ico" width="30"></a>
<a href="https://git.wrpr.us">
<img src="pix/git.png" width="30"></a>
- <div class="ll">
<a href="https://social.wrpr.us/x">Follow me!</a>
<p><i>Site Last Updated: 04/07/25</i></p>
diff --git a/links.html b/links.html
@@ -7,42 +7,32 @@
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
-<div class="wrapper">
-<pre class="center">
<a href="/" class="logo"><img src=pix/rpi.jpg width=359></a></pre><nav>
- <p class="menu"></p>
- <div class="menu">
<a href="index.html">
<img src=favicon.ico align=left width=30></a>
<!--<a href="daily.html">Daily</a>-->
<a href="links.html">[Links]</a>
- <p class="menu"></p>
- </nav>
- <h3 class="left">
- <div class="tops">
<h3>Cool Links</h3>
</div>
<body>
- <h3 class="ll">
<p>My list of cool links!</p>
</div>
- <div class="links">
-·<a href="http://landchad.net">Landchad</a>
-·<a href="http://lukesmith.xyz">lukesmith xyz</a>
-·<a href="http://sdf.org">SDF</a>
-·<a href="http://suckless.org">Suckless</a>
-·<a href="http://www.openbsd.org">OpenBSD</a>
-·<a href="http://www.netbsd.org">NetBSD</a>
-·<a href="http://www.gentoo.org">Gentoo</a>
-·<a href="http://geti2p.net">Get i2p</a>
-·<a href="http://www.torproject.org">Tor Project</a>
-·<a href="http://www.fsf.org">Free Software Foundation</a>
-·<a href="http://stallman.org">RMS</a>
-·<a href="http://www.gnu.org">GNU</a>
-·<a href="http://www.seti.org">SETI</a>
-·<a href="http://www.ergo-log.com">Ergo Log</a>
-·<a href="http://solar.lowtechmagazine.com">Low Tech Magazine</a>
+ <li><a href="http://landchad.net">Landchad</a></li>
+ <li><a href="http://lukesmith.xyz">lukesmith xyz</a></li>
+ <li><a href="http://sdf.org">SDF</a></li>
+ <li><a href="http://suckless.org">Suckless</a></li>
+ <li><a href="http://www.openbsd.org">OpenBSD</a></li>
+ <li><a href="http://www.netbsd.org">NetBSD</a></li>
+ <li><a href="http://www.gentoo.org">Gentoo</a></li>
+ <li><a href="http://geti2p.net">Get i2p</a></li>
+ <li><a href="http://www.torproject.org">Tor Project</a></li>
+ <li><a href="http://www.fsf.org">Free Software Foundation</a></li>
+ <li><a href="http://stallman.org">RMS</a></li>
+ <li><a href="http://www.gnu.org">GNU</a></li>
+ <li><a href="http://www.seti.org">SETI</a></li>
+ <li><a href="http://www.ergo-log.com">Ergo Log</a></li>
+ <li><a href="http://solar.lowtechmagazine.com">Low Tech Magazine</a></li>
diff --git a/old.style.css b/old.style.css
@@ -0,0 +1,197 @@
+:root {
+ --bg:#fff;
+ --head:#000;
+ --hover:#0000ff
+}
+
+html{
+ font-family: monospace;
+ background-color: var(--bg);
+ font-weight: 400;
+ color: var(--head);
+ max-width: 520px ;
+ font-size:16px ;
+ text-align: center ;
+ margin: auto ;
+}
+
+body {
+ background-color: var(--bg);
+ font-family: monospace;
+ margin-bottom: 100px;
+ font-weight: 400;
+/* font-size: 16px;*/
+}
+
+.title {
+ white-space: pre ;
+ margin: auto ;
+ text-align: center ;
+ font-size: 8px;
+ max-width: 520px;
+}
+
+
+footer {
+ text-align: center;
+ color: var(--head) ;
+}
+
+
+a {
+ color: var(--head);
+ text-decoration: underline;
+}
+
+a:hover {
+ color: var(--hover);
+ text-decoration: underline;
+}
+
+
+li {
+ float: left;
+ display: block;
+ color: #000fff;
+ padding: 2px 4px;
+ text-decoration: none;
+}
+
+li a {
+ display: block;
+ color: #c8c8c8;
+ text-align: center;
+ padding: 2px, 4px;
+ text-decoration: none;
+}
+
+li a:hover {
+ background-color: #111;
+ text-decoration: none;
+}
+
+.ll {
+ font-size: 14px ;
+ line-height: 1.3em ;
+ max-width: 422px;
+ margin: 10 ;
+ text-align: left ;
+}
+
+.links {
+ font-size: 14px ;
+ line-height: 1.3em ;
+ max-width: 422px;
+ margin: 10 ;
+ text-align: left ;
+ white-space: pre-line;
+}
+
+
+
+.l2 {
+ font-size: large ;
+ line-height:1.3em ;
+ max-width: 600px ;
+ margin: auto ;
+}
+
+.l3 {
+ font-size: 14px ;
+ line-height: 1.3em ;
+ max-width: 660 ;
+ margin: auto ;
+}
+.left {
+ text-align: left;
+}
+
+.small {
+ font-size: 0.6vw;
+}
+
+.qr {
+ max-width: 100px;
+ padding: 10px;
+ border: medium none;
+ align: center;
+}
+
+
+code {
+ overflow-x:auto;
+ overflow-y:auto;
+ padding:0px;
+ min-width:600;
+ background-color: var(--head); !important;
+ font-size:14px!important;
+ margin-bottom:10px;
+ color: var(--bg);
+ line-height: 1.3em;
+}
+/*code {
+ color: var(--bg);
+}*/
+
+.midcolor {
+ color: var(--head);
+ text-align: center;
+}
+
+
+
+.separator {
+ text-align: center;
+ white-space: nowrap;
+ overflow-x: hidden;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ overflow-x: hidden;
+ border-top: 1px dashed var(--head);
+}
+
+.menu {
+ text-align: right;
+ white-space: nowrap;
+ overflow-x: hidden;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ overflow-x: hidden;
+}
+
+.logo {
+ align: center;
+ max-width: 75%;
+ max-height: 75%;
+ text-decoration: none;
+ border-bottom: unset;
+ background: unset !important;
+}
+
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ max-width: 75%;
+ font-size: 14px;
+ display: block;
+
+}
+
+
+@media only screen and (max-width: 800px) {
+ /*GENERAL ELEMENTS*/
+ /*CLASSES*/
+ .wrapper {
+ width: 100%;
+ /*font-size: 4vw;*/
+ }
+
+ .title {
+ font-size: 0.8vw;
+ }
+ .tops{
+ font-size: 2.5vw;
+ }
+}
diff --git a/style.css b/style.css
@@ -1,42 +1,65 @@
+
+
+/*@media (prefers-color-scheme: dark) {*/
+ :root {
+ color-scheme: light;
+ --bg: #fff;
+ --head: #000;
+ --accent-bg: #f5f7ff;
+ --text: #212121;
+ --text-light: #585858;
+ --accent: #0d47a1;
+ --accent-hover: #1266e2;
+ --accent-text: var(--bg);
+ --code: #d81b60;
+ --preformatted: #444;
+ --marked: #ffdd33;
+ --disabled: #efefef;
+ }
+/*}*/
:root {
+ color-scheme: dark;
+ --bg: #000;
+ --head: #fff;
+ --accent-bg: #2b2b2b;
+ --text: #dcdcdc;
+ --text-light: #ababab;
+ --accent: #ffb300;
+ --accent-hover: #ffe099;
+ --accent-text: var(--bg);
+ --code: #f06292;
+ --preformatted: #ccc;
+ --disabled: #111;
+}
+/*:root {
--bg:#fff;
--head:#000;
--hover:#0000ff
-}
+}*/
-html{
- font-family: monospace;
- background-color: var(--bg);
- font-weight: 400;
- color: var(--head);
- max-width: 520px ;
- font-size:16px ;
- text-align: center ;
- margin: auto ;
-}
-body {
- background-color: var(--bg);
- font-family: monospace;
- margin-bottom: 100px;
- font-weight: 400;
-/* font-size: 16px;*/
+md-block:not([rendered]) {
+ white-space: pre-line;
}
-.title {
- white-space: pre ;
- margin: auto ;
- text-align: center ;
- font-size: 8px;
+body {
max-width: 520px;
+ line-height: 1;
+ padding: 0 1rem;
+ margin: 2rem auto;
+ width: 100%;
+ font-family: monospace;
}
-
-footer {
- text-align: center;
- color: var(--head) ;
-}
-
+.logo {
+ align: left;
+ max-width: 20%;
+ max-height: 20%;
+ text-decoration: none;
+ border-bottom: unset;
+ background: unset !important;
+ font: monospace;
+ }
a {
color: var(--head);
@@ -48,72 +71,6 @@ a:hover {
text-decoration: underline;
}
-
-li {
- float: center;
-}
-
-li a {
- display: block;
- color: #c8c8c8;
- text-align: center;
- padding: 10px, 15px;
- text-decoration: none;
-}
-
-li a:hover {
- background-color: #111;
- text-decoration: none;
-}
-
-.ll {
- font-size: 14px ;
- line-height: 1.3em ;
- max-width: 422px;
- margin: 10 ;
- text-align: left ;
-}
-
-.links {
- font-size: 14px ;
- line-height: 1.3em ;
- max-width: 422px;
- margin: 10 ;
- text-align: left ;
- white-space: pre-line;
-}
-
-
-
-.l2 {
- font-size: large ;
- line-height:1.3em ;
- max-width: 600px ;
- margin: auto ;
-}
-
-.l3 {
- font-size: 14px ;
- line-height: 1.3em ;
- max-width: 660 ;
- margin: auto ;
-}
-.left {
- text-align: left;
-}
-
-.small {
- font-size: 0.6vw;
-}
-
-.qr {
- max-width: 100px;
- padding: 10px;
- border: medium none;
- align: center;
-}
-
-
code {
overflow-x:auto;
overflow-y:auto;
@@ -134,49 +91,3 @@ code {
text-align: center;
}
-
-
-.separator {
- text-align: center;
- white-space: nowrap;
- overflow-x: hidden;
- margin-top: 8px;
- margin-bottom: 8px;
- overflow-x: hidden;
- border-top: 1px dashed var(--head);
-}
-
-.menu {
- text-align: right;
- white-space: nowrap;
- overflow-x: hidden;
- margin-top: 8px;
- margin-bottom: 8px;
- overflow-x: hidden;
-}
-
-.logo {
- align: center;
- max-width: 75%;
- max-height: 75%;
- text-decoration: none;
- border-bottom: unset;
- background: unset !important;
-}
-
-
-@media only screen and (max-width: 800px) {
- /*GENERAL ELEMENTS*/
- /*CLASSES*/
- .wrapper {
- width: 100%;
- /*font-size: 4vw;*/
- }
-
- .title {
- font-size: 0.8vw;
- }
- .tops{
- font-size: 2.5vw;
- }
-}
