Fixed CSS for onion links.

This commit is contained in:
BurnyLlama 2022-08-13 23:58:55 +02:00
parent b936007242
commit b71df99264
2 changed files with 60 additions and 22 deletions

View File

@ -115,7 +115,13 @@ body {
margin-bottom: auto;
}
.card > a {
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.buttons > a {
color: var(--primary);
background-color: transparent;
@ -123,7 +129,7 @@ body {
border-radius: .5rem;
/* box-shadow: 0 -5rem 20rem transparent; */
margin: 1rem 0 .5rem 0;
margin: 1rem .5rem .5rem .5rem;
padding: .5rem 1.5rem;
display: block;
@ -134,13 +140,27 @@ body {
transition: color .3s, background-color .3s, box-shadow .3s;
}
.card > a:hover,
.card > a:focus {
.buttons > a:hover,
.buttons > a:focus {
color: var(--surface);
background-color: var(--primary);
/* box-shadow: 0 .25rem 2rem var(--primary); */
}
.buttons > a.tor {
color: var(--purple);
border-color: var(--purple);
padding: .5rem 1rem;
}
.buttons > a.tor:hover,
.buttons > a.tor:focus {
color: var(--surface);
background-color: var(--purple);
/* box-shadow: 0 .25rem 2rem var(--primary); */
}
.text-box {
margin: 1rem;
}

View File

@ -32,8 +32,10 @@
<p>
Nitter is a Twitter frontend. Use it to browse Twitter without getting tracked.
</p>
<div class="buttons">
<a href="https://nitter.qwik.space">BROWSE</a>
<a href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">Tor</a>
<a class="tor" href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">TOR</a>
</div>
</div>
<div class="card">
@ -41,8 +43,10 @@
<p>
Bibliogram is an Instagram frontend. Use it to browse Instagram without getting tracked.
</p>
<div class="buttons">
<a href="https://bibliogram.qwik.space">BROWSE</a>
<a href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">Tor</a>
<a class="tor" href="http://qwikxx2erhx6qrymued6ox2qkf2yeogjwypqvzoif4fqkljixasr6oid.onion">TOR</a>
</div>
</div>
<div class="card">
@ -50,8 +54,10 @@
<p>
Libreddit is a Reddit frontend. Use it to browse Reddit without getting tracked.
</p>
<div class="buttons">
<a href="https://libreddit.qwik.space">BROWSE</a>
<a href="http://qwikxx4xqvhdyyazkrw7pwdpdppfnmn7j2n6cvq5zecm4atbppaslzad.onion">Tor</a>
<a class="tor" href="http://qwikxx4xqvhdyyazkrw7pwdpdppfnmn7j2n6cvq5zecm4atbppaslzad.onion">TOR</a>
</div>
</div>
<div class="card">
@ -59,8 +65,10 @@
<p>
Invidious is a YouTube frontend. Use it to browse YouTube without getting tracked.
</p>
<div class="buttons">
<a href="https://invidious.qwik.space">WATCH</a>
<a href="http://qwikxxt6jvggxzxe2v2fuzro5j7ibgphxmblmri6wkj5vpicdbo2kwad.onion">TOR</a>
<a class="tor" href="http://qwikxxt6jvggxzxe2v2fuzro5j7ibgphxmblmri6wkj5vpicdbo2kwad.onion">TOR</a>
</div>
</div>
</div>
@ -72,8 +80,8 @@
SERVICES
</h1>
<p>
These services requires an account, which you can create <a href="https://qam.qwik.space">here</a>
[<a href="http://qwikooa6o5xx4xit4c7vubkqqaq4jj43z3zco6c3gfk6m7f43jxpleid.onion">Tor</a>].
These services requires an account, which you can create at <a href="https://qam.qwik.space">qam.qwik.space</a>
(<a class="tor" href="http://qwikooa6o5xx4xit4c7vubkqqaq4jj43z3zco6c3gfk6m7f43jxpleid.onion">Tor</a>).
</p>
<div class="card">
<h2>Gitea</h2>
@ -81,8 +89,10 @@
Gitea is an alternative to Github, Gitlab, etc.
We host our own instance, but feel free to use it as well (if you're brave enough).
</p>
<div class="buttons">
<a href="https://git.qwik.space">CODE</a>
<a href="http://qwikoob2jgyfaqsgenwvma4h3z44gei7a6ou7zcwd4c2mhuerakrywqd.onion">TOR</a>
<a class="tor" href="http://qwikoob2jgyfaqsgenwvma4h3z44gei7a6ou7zcwd4c2mhuerakrywqd.onion">TOR</a>
</div>
</div>
<div class="card">
@ -90,8 +100,10 @@
<p>
XMPP is an instant messaging protocol. You can find more info in the article below.
</p>
<div class="buttons">
<a href="/articles/xmpp/intro">READ MORE</a>
</div>
</div>
<div class="card">
<h2>Zulip</h2>
@ -99,25 +111,31 @@
Zulip is a chat service. The UI <i>somewhat</i> resembles Discord.
It is quite advanced/bloated and we might switch it out for something else.
</p>
<div class="buttons">
<a href="https://chat.qwik.space">CHAT</a>
</div>
</div>
<div class="card">
<h2>Hedgedoc</h2>
<p>
Hedgedoc is an online markdown editor featuring real-time collaboration.
</p>
<div class="buttons">
<a href="https://docs.qwik.space">WRITE</a>
</div>
</div>
<div class="card">
<h2>CryptPad</h2>
<p>
We run an instance of CryptPad. As of now, accounts are supplied as per request. See contact options below.
</p>
<div class="buttons">
<a href="https://pad.qwik.space">WRITE</a>
</div>
</div>
</div>
<div class="separator"></div>
@ -143,7 +161,7 @@
<p>burnyllama [at] protonmail [dot] com</p>
</div>
<p style=" margin: .5rem .2rem 0 .2rem;">You can read about news for qwik.space, rants, and other stuffs over at my <a style="font-size: inherit;" href="https://blog.qwik.space">blog</a> [<a href="http://qwikoov6bmdskhp5o32d2ju6nntwhpdhcrjnllajdryq5gvxfamgffqd.onion">Tor</a>].</p>
<p style=" margin: .5rem .2rem 0 .2rem;">You can read about news for qwik.space, rants, and other stuffs over at my <a style="font-size: inherit;" href="https://blog.qwik.space">blog</a> [<a class="tor" href="http://qwikoov6bmdskhp5o32d2ju6nntwhpdhcrjnllajdryq5gvxfamgffqd.onion">Tor</a>].</p>
</div>
<div class="card maintainer">
<h2>furo</h2>
@ -183,7 +201,7 @@
If you want to contribute, feel free to <a href="#contact">contact us</a>.
</p>
<p class="footer-header"><a href="http://qwikxxeiw4kgmml6vjw2bsxtviuwjce735dunai2djhu6q7qbacq73id.onion">Visit us on TOR</a></p>
<p class="footer-header"><a class="tor" href="http://qwikxxeiw4kgmml6vjw2bsxtviuwjce735dunai2djhu6q7qbacq73id.onion">Visit us on TOR!</a></p>
</div>
</body>
</html>