Added boilerplate for tor-buttons.

This commit is contained in:
BurnyLlama 2021-07-26 23:01:45 +02:00
parent fc6964cdb1
commit 81b3161c9e
3 changed files with 40 additions and 12 deletions

View File

@ -38,7 +38,7 @@
</div>
<a name="services"></a>
<h1>services</h1>
<h1 class="centered">services</h1>
<div class="services-list">
<div class="service">
<h2>Gitea</h2>
@ -46,7 +46,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>
<a href="https://git.qwik.space">get codin'</a>
<div class="buttons">
<a href="https://git.qwik.space">get codin'</a>
<a href="LINK HERE LMAO" class="onion">tor</a>
</div>
</div>
<div class="service">
@ -100,7 +103,7 @@
</div>
<a name="contact"></a>
<h1>contact</h1>
<h1 class="centered">contact</h1>
<div class="contact-box">
<p>
If you have any questions, feedback, ideas, or anything else, feel free to contact us.
@ -133,7 +136,7 @@
</div>
<a name="resources"></a>
<h1>resources</h1>
<h1 class="centered">resources</h1>
<img src="./resources/design-res-promo.svg" alt="A promotional image of qwik's graphical material." class="image">
<p>
We provide qwik's resources <a href="./graphical-profile.html">here</a>.

View File

@ -13,6 +13,11 @@ header {
header > h1 {
font-size: 4rem;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
}
header > i {

View File

@ -135,10 +135,14 @@ h1, h2 {
color: var(--primary);
font-size: 2.5rem;
text-align: center;
width: 100%;
margin-top: 1rem;
width: min(27.200ch, 100%);
padding: 0 5%;
margin: 2rem 0 1rem 0;
}
h1.centered, h2 {
text-align: center;
}
h2 {
@ -200,7 +204,15 @@ ul {
text-align: left;
}
.service > a {
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: auto;
}
.buttons > a {
color: var(--primary);
background-color: transparent;
@ -208,24 +220,32 @@ ul {
border-radius: 999rem;
/* box-shadow: 0 -5rem 20rem transparent; */
margin-top: auto;
margin-bottom: .5rem;
margin: .5rem;
padding: .5rem 1.5rem;
display: block;
font-size: 1rem;
font-size: .85rem;
text-decoration: none transparent;
text-align: center;
transition: color .3s, background-color .3s, box-shadow .3s;
}
.service > a:hover, .service > a:focus {
.buttons > a:hover, .buttons > a:focus {
color: var(--surface);
background-color: var(--primary);
/* box-shadow: 0 .25rem 2rem var(--primary); */
}
.buttons > a.onion {
color: var(--purple);
border-color: var(--purple);
}
.buttons > a.onion:hover, .buttons > a.onion:focus {
color: var(--text);
background-color: var(--purple);
}