git.iko.soy/webring
on master help sign in
Added buttons
commit1798fd8e903b95203c2bda451b0fe73d6ca1d871 authorneauoire <aliceffekt@gmail.com> dateTue 9 Mar 2021, 09:31 (6 years ago) parentd943535
2 files changed+9−5
compare with master
unifiedsplit
README.md+2−1 index.html+7−4
README.md+2−1
@@ -33,10 +33,11 @@ To add an extra feed to your entry, add them within your `<li>` tag as follow:
3333 <a href="https://wiki.xxiivv.com">xxiivv</a>
3434 <a href="https://wiki.xxiivv.com/links/tw.txt" class="twtxt">twtxt</a>
3535 <a href="https://wiki.xxiivv.com/links/rss.xml" class="rss">rss</a>
36+ <img src='https://wiki.xxiivv.com/media/services/button.gif'/>
3637</li>
3738```
3839
39−[twtxt](https://twtxt.readthedocs.io/en/stable/) is a decentralized, minimalist microblogging service for hackers. You're welcome to add your twtxt feed alongside your RSS feed. If you're looking a minimal C99 client for twtxt, try [this](https://github.com/neauoire/twtxtc).
40+[twtxt](https://twtxt.readthedocs.io/en/stable/) is a decentralized, minimalist microblogging service for hackers. You're welcome to add your twtxt feed alongside your RSS feed. If you're looking a minimal C99 client for twtxt, try [this](https://github.com/neauoire/twtxtc). The `button.gif` is a 88x31 icon hosted on your server.
4041
4142### Circular Linking
4243
index.html+7−4
@@ -8,11 +8,12 @@
88 <title>Webring</title>
99 </head>
1010 <body id="twtxt">
11− <ol>
11+ <ol id="icons">
1212 <li data-lang="en" id="xxiivv">
1313 <a href="https://wiki.xxiivv.com">xxiivv</a>
1414 <a href="https://wiki.xxiivv.com/links/tw.txt" class="twtxt">twtxt</a>
1515 <a href="https://wiki.xxiivv.com/links/rss.xml" class="rss">rss</a>
16+ <img src='https://wiki.xxiivv.com/media/services/button.gif' />
1617 </li>
1718 <li data-lang="en" id="1">
1819 <a href="http://estevancarlos.com">estevancarlos</a>
@@ -579,7 +580,7 @@
579580 To add yourself to the ring, submit a <a href="https://github.com/XXIIVV/webring#join-the-webring" target="_blank">pull request</a>.<br />
580581 Looking for something specific, use the <a href="https://lieu.cblgh.org" target="_blank">search</a>.<br />
581582 Found a broken link, please <a href="https://github.com/XXIIVV/webring/issues/new" target="_blank">report it</a>.<br /><br />
582− <a href="#twtxt">Show twtxt</a> | <a href="#rss">Show rss</a><span class="hide"> | <a href="#">Hide Feeds</a></span> | <a href="https://lieu.cblgh.org/random" target="_blank">Random</a>
583+ <a href="#icons">Show icons</a> | <a href="#twtxt">Show twtxt</a> | <a href="#rss">Show rss</a><span class="hide"> | <a href="#">Hide Feeds</a></span> | <a href="https://lieu.cblgh.org/random" target="_blank">Random</a>
583584 </p>
584585 <img id="icon" src="icon.black.large.svg" alt="icon"/>
585586 </footer>
@@ -592,9 +593,8 @@ body a:before { content: '{'; }
592593body a:after { content: '}'; }
593594body > ol { margin: 30px; padding: 0px 30px 30px; column-count: 3; display: block; border-bottom: 2px solid var(--color-beta); }
594595body > ol > li { padding-right: 30px; }
595−body > ol > li:target { background: var(--color-beta); }
596+body > ol > li img { display: none; margin:5px; }
596597body > ol > li a.rss, body > ol > li a.twtxt { display: none; }
597−body > ol > li:target a { color: var(--color-alpha); }
598598body > ol > li a:visited:before, body > ol > li a:visited:after { color: var(--color-alpha); }
599599body > footer { margin: 30px; }
600600body > footer > p { max-width: 600px; }
@@ -602,6 +602,9 @@ body > footer > p span.hide { display: none; }
602602body > footer > img { display: inline-block; width: 100px; margin-bottom: -5px; margin-bottom: 30px; }
603603body:target > ol li a.twtxt, html:target li a.rss { background: var(--color-beta); color: var(--color-alpha); display: inline; }
604604body:target > footer > p > span.hide, html:target footer > p > span.hide { display: inline; }
605+body > ol:target > li > img { display:block; }
606+body > ol > li:target a { color: var(--color-alpha); }
607+body > ol > li:target { background: var(--color-beta); }
605608@media screen and (max-width: 800px) { body > ol { column-count: 2; } }
606609@media screen and (max-width: 600px) { body > ol { column-count: 1; } }
607610@media (prefers-color-scheme: dark) {