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> </div>
<a name="services"></a> <a name="services"></a>
<h1>services</h1> <h1 class="centered">services</h1>
<div class="services-list"> <div class="services-list">
<div class="service"> <div class="service">
<h2>Gitea</h2> <h2>Gitea</h2>
@ -46,7 +46,10 @@
Gitea is an alternative to Github, Gitlab, etc. 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). We host our own instance, but feel free to use it as well (if you're brave enough).
</p> </p>
<div class="buttons">
<a href="https://git.qwik.space">get codin'</a> <a href="https://git.qwik.space">get codin'</a>
<a href="LINK HERE LMAO" class="onion">tor</a>
</div>
</div> </div>
<div class="service"> <div class="service">
@ -100,7 +103,7 @@
</div> </div>
<a name="contact"></a> <a name="contact"></a>
<h1>contact</h1> <h1 class="centered">contact</h1>
<div class="contact-box"> <div class="contact-box">
<p> <p>
If you have any questions, feedback, ideas, or anything else, feel free to contact us. If you have any questions, feedback, ideas, or anything else, feel free to contact us.
@ -133,7 +136,7 @@
</div> </div>
<a name="resources"></a> <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"> <img src="./resources/design-res-promo.svg" alt="A promotional image of qwik's graphical material." class="image">
<p> <p>
We provide qwik's resources <a href="./graphical-profile.html">here</a>. We provide qwik's resources <a href="./graphical-profile.html">here</a>.

View File

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

View File

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