qwik/qwik-site
qwik/qwik-site
2
1
Fork 1
Code Issues Pull Requests Releases Activity

New design for main page...

Browse Source
This commit is contained in:
BurnyLlama 2022-05-01 18:47:13 +02:00
parent b8c925766b
commit 854f4315a7
3 changed files with 236 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
assets/css/landing.css
View File

@ -1,203 +1,205 @@
body { body {
width: min(90vw, 80ch); width: min(95vw, 52rem);
} }
h2 { header > img {
font-size: 1.25rem; height: 15vh;
margin: .5rem auto;
box-shadow: none;
} }
header > h1,
header > p {
margin-top: 0;
font-family: 'Manrope XLight';
color: var(--text);
}
header > h1 > span {
font: inherit;
}
nav { nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
padding: .5rem 3rem 1rem 3rem; padding: .5rem;
width: 100%;
} }
nav > a { nav > a {
color: var(--text); color: var(--text);
border-bottom: .1rem solid var(--text); border-bottom: .05rem solid var(--text);
padding: .3rem 1rem;
margin: 1rem 2rem;
font-size: .85rem; padding: .3rem 1rem;
margin: .5rem;
font-size: .65rem;
text-decoration: none; text-decoration: none;
transition: color .3s, border-bottom .3s; transition: color .3s, border-bottom .3s, padding .3s;
} }
nav > a:hover { nav > a:hover {
color: var(--primary); color: var(--primary);
border-bottom: .1rem solid var(--primary); border-bottom: .05rem solid var(--primary);
} }
.box {
.presentation {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 3rem;
margin: 1rem auto;
width: min(65ch, 90%);
background-color: var(--grey3); background-color: var(--grey3);
border-radius: .5rem; border-radius: 1rem;
box-shadow: 0 1rem 2rem var(--grey1); box-shadow: 0 .75rem 1.5rem -0.5rem var(--grey1);
}
.presentation > img { font-size: .75rem;
grid-area: logo; padding: 1rem .5rem 1.5rem .5rem;
width: min(20ch, 35vmin); margin: 2rem auto;
width: min(48rem, 90%);
margin: 1rem 0;
box-shadow: none;
}
.presentation > header {
font-size: 2rem;
margin-bottom: 1rem;
}
.qwik-explained {
width: min(45ch, 80%);
}
.services-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.service { .box > *:first-child {
width: min(35ch, 80%); margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem auto;
padding: 1rem 1.5rem;
background-color: var(--grey3);
border-radius: .5rem;
box-shadow: 0 1rem 2rem var(--grey1);
} }
.service > h2 { .box > *:last-child {
margin-bottom: 0;
}
.box > h1 {
text-align: center; text-align: center;
margin: 0; width: 100%;
font-size: 1.25rem;
font-family: 'Manrope Medium', sans-serif;
} }
.service > p { .box > p,
margin: 1rem auto; .box > p > a {
width: 100%;
font-size: .75rem;
text-align: center;
} }
.buttons { .box > p {
margin-left: 1rem;
margin-right: 1rem;
}
.card {
background-color: var(--grey4);
border-radius: 1rem;
box-shadow: 0 .5rem 1rem var(--grey2);
margin: 1rem;
padding: 1rem 1rem 1.25rem 1rem;
display: flex; display: flex;
flex-wrap: wrap; flex-flow: column;
justify-content: center; align-items: center;
margin-top: auto; font-size: .75rem;
width: min(40ch, 90%);
} }
.buttons > a { .card > *:first-child {
margin-top: 0;
}
.card > *:last-child {
margin-bottom: 0;
}
.card > h2 {
font-size: 1rem;
font-family: 'Manrope Light';
}
.card > p {
font-size: .75rem;
margin-bottom: auto;
}
.card > a {
color: var(--primary); color: var(--primary);
background-color: transparent; background-color: transparent;
border: .1rem solid var(--primary); border: .1rem solid var(--primary);
border-radius: .5rem; border-radius: .5rem;
/* box-shadow: 0 -5rem 20rem transparent; */ /* box-shadow: 0 -5rem 20rem transparent; */
margin: .5rem; margin: 1rem 0 .5rem 0;
padding: .5rem 1.5rem; padding: .5rem 1.5rem;
display: block; display: block;
font-size: .75rem; font-size: .65rem;
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;
} }
.buttons > a:hover, .buttons > a:focus { .card > a:hover,
.card > 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 { .text-box {
color: var(--purple); margin: 1rem;
border-color: var(--purple);
} }
.buttons > a.onion:hover, .buttons > a.onion:focus { .text-box > * {
color: var(--text); font-size: .75rem;
background-color: var(--purple);
} }
.separator {
height: .1rem;
.maintainer-list { margin: 1rem auto;
display: flex; width: min(35%, 15ch);
flex-wrap: wrap; background-color: var(--primary);
justify-content: center;
} }
.maintainer { .maintainer {
display: flex; width: min(max-content, 90%);
flex-direction: column;
align-items: center;
padding: 1rem 2rem;
margin: 1rem auto;
background-color: var(--grey3);
border-radius: .5rem;
box-shadow: 0 1rem 2rem var(--grey1);
}
.maintainer > h2 {
margin: 0;
} }
.contact-options { .contact-options {
display: grid; display: grid;
grid-template-columns: auto auto; width: 100%;
} grid-template-columns: max-content auto;
align-self: flex-start;
.contact-type {
font-size: .85rem;
color: var(--accent);
margin-right: 1rem;
} }
.contact-options > p { .contact-options > p {
padding: .5rem 0; font-size: .75rem;
margin: .25rem;
} }
.contact-options > p.contact-type {
font-size: .75rem;
color: var(--accent);
}
footer { footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
margin: 15vh 0; margin: 15vh auto;
padding: 1rem auto; padding: 1rem auto;
width: 100%; width: min(85vw, 48rem);
border-top: .1rem solid var(--accent); border-top: .1rem solid var(--accent);
} }
footer > p, footer > p > a { footer > p,
footer > p > a {
font-size: .65rem; font-size: .65rem;
width: max-content;
} }
.love { .love {
@ -209,3 +211,9 @@ footer > p, footer > p > a {
color: var(--accent2); color: var(--accent2);
font-size: 1.15rem; font-size: 1.15rem;
} }
.footer-header {
margin-top: 1.5rem;
font-size: .7rem;
color: var(--accent);
}

32
assets/css/theme.css
View File

@ -10,7 +10,7 @@
font-size: .85rem; font-size: .85rem;
line-height: 1.5; line-height: 1.5;
color: var(--text); color: inherit;
} }
html { html {
@ -23,6 +23,7 @@ html {
body { body {
margin: 5vh 0 10vh 0; margin: 5vh 0 10vh 0;
width: min(90vw, 75ch); width: min(90vw, 75ch);
color: var(--text);
} }
header { header {
@ -31,7 +32,12 @@ header {
text-align: center; text-align: center;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--accent); color: var(--accent);
font-weight: normal; font-weight: normal;
@ -72,7 +78,8 @@ a {
color: var(--accent2); color: var(--accent2);
} }
b, strong { b,
strong {
font-family: 'Manrope SemiBold', sans-serif; font-family: 'Manrope SemiBold', sans-serif;
font-weight: bold; font-weight: bold;
} }
@ -91,11 +98,15 @@ blockquote {
box-shadow: 0 1rem 2rem var(--grey1); box-shadow: 0 1rem 2rem var(--grey1);
} }
ul, ol { ul,
ol {
margin: 1rem 0 1rem 2rem; margin: 1rem 0 1rem 2rem;
} }
ul ul, ul ol, ol ol, ol ul { ul ul,
ul ol,
ol ol,
ol ul {
margin: .25rem 0 .25rem 1rem; margin: .25rem 0 .25rem 1rem;
} }
@ -128,7 +139,8 @@ th {
font-family: 'Manrope SemiBold'; font-family: 'Manrope SemiBold';
} }
th, td { th,
td {
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
@ -163,10 +175,4 @@ img {
margin: 1rem 5%; margin: 1rem 5%;
border-radius: .5rem; border-radius: .5rem;
box-shadow: 0 1rem 2rem var(--grey1); box-shadow: 0 1rem 2rem var(--grey1);
} }
img.logo {
margin: 1rem auto;
width: 30%;
box-shadow: none;
}

237
content/pages/index.njk
View File

@ -6,7 +6,7 @@
<title>qwik</title> <title>qwik</title>
</head> </head>
<body> <body>
<div style="background-color: var(--blue); padding: 1rem 2rem;"> {# <div style="background-color: var(--blue); padding: 1rem 2rem;">
<h1 style="margin-top: 0; color: var(--surface)"> <h1 style="margin-top: 0; color: var(--surface)">
About the war in Ukraine... About the war in Ukraine...
</h1> </h1>
@ -25,191 +25,146 @@
<br><br> <br><br>
-- Team qwik <span style="font-size: 1.5rem; color: inherit; left: -.25rem; top: .1rem; position: relative;">&nbsp; &lt;3 &nbsp;</span> -- Team qwik <span style="font-size: 1.5rem; color: inherit; left: -.25rem; top: .1rem; position: relative;">&nbsp; &lt;3 &nbsp;</span>
</p> </p>
</div> </div> #}
<div style="background-color: var(--red); padding: 1rem 2rem; margin: 1rem 0;">
<h1 style="margin-top: 0; color: var(--surface)">
Important notice!
</h1>
<p style="color: var(--surface)">
We are currently migrating our server infrastructure. Our services will continue to stay up during the migration but
<b style="color: inherit;">after the migration we cannot guarantee data integrity</b>!
<br><br>
The reasons are that we are going to embrace virtualisation more in hopes that it makes maintence less of a pain.
We are also going to implement an LDAP (Lightweight Directory Access Protocol) solution so that signing in to services will be nice and seamless.
<br><br>
We are really sorry for the inconvenience, but we hope to make the future more convenient.
<br><br>
<b style="color: inherit;">WE RECOMMEND BACKING UP ALL YOUR (IMPORTANT) DATA NOW!</b>
<br><br>
-- Team qwik <span style="font-size: 1.5rem; color: inherit; left: -.25rem; top: .1rem; position: relative;">&nbsp; &lt;3 &nbsp;</span>
</p>
</div>
<nav>
<a href="#services">services</a>
<a href="#contact">contact</a>
<a href="#resources">resources</a>
</nav>
<div class="presentation"> <header>
<img class="logo" src="/assets/images/logo.svg" alt="qwik logo"> <img class="logo" src="/assets/images/logo.svg" alt="qwik logo">
<header>qwik</header> <h1>
<p class="qwik-explained centered"> Welcome to <span style="color: var(--primary)">qwik</span><span style="color: var(--accent)">.</span><span style="color: var(--primary)">space</span>!
Welcome here! 😊 </h1>
</p> <p>
<p class="qwik-explained"> "A small little corner of the internet..."
We are tech enthusiasts (did I spell that right?) and we like cyber security and privacy.
That's why we have this site with a collection of tools/services mostly for our use, but
you are welcome to use them as well! (In that case, consider reading our <a href="/articles/privacy_policy">privacy policy</a>.)
</p>
<p class="qwik-explained centered">
Please enjoy your stay. :)
</p> </p>
<nav>
<a href="#toolbox">TOOLBOX</a>
<a href="#services">SERVICES</a>
<a href="#contact">CONTACT</a>
</nav>
</header>
<a name="toolbox"></a>
<div class="box">
<h1>TOOLBOX</h1>
<div class="card">
<h2>Nitter</h2>
<p>
Nitter is a Twitter frontend. Use it to browse Twitter without getting tracked.
</p>
<a href="https://nitter.qwik.space">BROWSE</a>
</div>
<div class="card">
<h2>Bibliogram</h2>
<p>
Bibliogram is an Instagram frontend. Use it to browse Instagram without getting tracked.
</p>
<a href="https://bibliogram.qwik.space">BROWSE</a>
</div>
<div class="card">
<h2>Libreddit</h2>
<p>
Libreddit is a Reddit frontend. Use it to browse Reddit without getting tracked.
</p>
<a href="https://libreddit.qwik.space">BROWSE</a>
</div>
</div> </div>
<div class="separator"></div>
<a name="services"></a> <a name="services"></a>
<h1 class="centered">services</h1> <div class="box">
<div class="services-list"> <h1>SERVICES</h1>
<div class="service"> <p>
These services requires an account, which you can create <a href="https://qam.qwik.space">here</a>.
</p>
<div class="card">
<h2>Gitea</h2> <h2>Gitea</h2>
<p> <p>
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">CODE</a>
<a href="https://git.qwik.space">get codin'</a>
<a href="http://qwikxlvkfhrba7jkzpl6lm762ynfyj2t5rd7cn7rlnwo2f4haq7gqzqd.onion" class="onion">tor</a>
</div>
</div> </div>
<div class="service"> <div class="card">
<h2>Nitter</h2>
<p>
Nitter is a Twitter frontend. Use it to browse Twitter without getting tracked.
</p>
<div class="buttons">
<a href="https://nitter.qwik.space">get nittin'</a>
<a href="http://qwikx34cqqidlplcfmloipe7pwsahxosjuihd2gxv2qergvukme2hpyd.onion" class="onion">tor</a>
</div>
</div>
<div class="service">
<h2>Bibliogram</h2>
<p>
Bibliogram is an Instagram frontend. Use it to browse Instagram without getting tracked.
</p>
<div class="buttons">
<a href="https://bibliogram.qwik.space">get browsin'</a>
<a href="http://qwikx5lfylromcbzwxfpgtmc6gp442ugrt4gsjkr32xmbkhummeot4qd.onion" class="onion">tor</a>
</div>
</div>
<div class="service">
<h2>Libreddit</h2>
<p>
Libreddit is a Reddit frontend. Use it to browse Reddit without getting tracked.
</p>
<div class="buttons">
<a href="https://libreddit.qwik.space">get redditin'</a>
<a href="http://qwikxix4bek6ivtz3ypjal4ospmj3ylmjxcgkswqcoczc47xxfjn2pid.onion" class="onion">tor</a>
</div>
</div>
<div class="service">
<h2>Searchy</h2>
<p>
Searchy was developed by BurnyLlama. It is a customizable frontend for different search engines.
</p>
<div class="buttons">
<a href="https://searchy.qwik.space">get confusin'</a>
<a href="http://qwikxcgxkv4uszuq56zf77vcaft7drrbsvuy33ewwrsijsml6qcyxnqd.onion" class="onion">tor</a>
</div>
</div>
<div class="service">
<h2>Searx</h2>
<p>
Searx is a tool that aggragates search results from a lot of search engines.
</p>
<div class="buttons">
<a href="https://searx.qwik.space">get searchin'</a>
<a href="http://qwikxj4m5q357kmrawkoplnt74eotqkurzjk4znhq2sffafjuptybmyd.onion" class="onion">tor</a>
</div>
</div>
<div class="service">
<h2>XMPP</h2> <h2>XMPP</h2>
<p> <p>
XMPP is an instant messaging protocol. You can find more info in the article below. XMPP is an instant messaging protocol. You can find more info in the article below.
</p> </p>
<div class="buttons"> <a href="/articles/xmpp/intro">READ MORE</a>
<a href="/articles/xmpp/intro">get chattin'</a>
<a href="http://qwikxi43yi7we5wq3gewkbzdxif7aogulmtdv3icep6ks6ghlrh7vpyd.onion/articles/xmpp/intro" class="onion">tor</a>
</div>
</div> </div>
<div class="service"> <div class="card">
<h2>Hedgedoc</h2> <h2>Hedgedoc</h2>
<p> <p>
Hedgedoc is an online markdown editor featuring real-time collaboration. Hedgedoc is an online markdown editor featuring real-time collaboration.
</p> </p>
<div class="buttons"> <a href="https://docs.qwik.space">WRITE</a>
<a href="https://docs.qwik.space">get writin'</a>
<a href="http://qwikxlobjyrg2vixrprthsldqjf72k2bihqk2ivd4pieboudrcfjyuyd.onion" class="onion">tor</a>
</div>
</div> </div>
</div> </div>
<div class="separator"></div>
<a name="contact"></a> <a name="contact"></a>
<h1 class="centered">contact</h1> <div class="box">
<div class="contact-box"> <h1>CONTACT</h1>
<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.
You can contact BurnyLlama about most things, but if what you have to say is about XMPP, then
please contact furo. :)
</p> </p>
<div class="card maintainer">
<div class="maintainer-list">
<div class="maintainer">
<h2>BurnyLlama</h2> <h2>BurnyLlama</h2>
<div class="contact-options"> <div class="contact-options">
<p class="contact-type">XMPP</p> <p class="contact-type">XMPP</p>
<p>burnyllama@qwik.space</p> <p>burnyllama@qwik.space</p>
<p class="contact-type">matrix</p> <p class="contact-type">Matrix</p>
<p>@burnyllama:matrix.org</p> <p>@burnyllama:matrix.org</p>
</div>
</div>
<div class="maintainer"> <p class="contact-type">Email</p>
<h2>furo</h2> <p>burnyllama [at] protonmail [dot] com</p>
<div class="contact-options">
<p class="contact-type">XMPP</p>
<p>furo@qwik.space</p>
</div> </div>
</div> </div>
</div>
<div class="contact-box">
<div class="maintainer-list">
</div> </div>
</div> </div>
<a name="resources"></a>
<h1 class="centered">resources</h1>
<img src="/assets/images/design-res-promo.svg" alt="A promotional image of qwik's graphical material." class="image">
<p>
We provide qwik's resources <a href="/articles/graphical-profile/intro">here</a>.
Right now qwik is in early stages of its development, as such many changes may happen.
We will try our best to keep them up to date and current tho.
</p>
<footer> <footer>
<p class="love">made with <span class="heart">&nbsp; &lt;3 &nbsp;</span> by team qwik</p> <p class="love">
Made with <span class="heart">&nbsp; &lt;3 &nbsp;</span> by team qwik!
</p>
<p style="color: var(--accent); margin-top: 2rem;">attributions &amp; credits</p> <p class="footer-header">
<p>the font used on this page is <a href="https://manropefont.com/">Manrope</a>.</p> Attributions &amp; Credits
<p>qwik's <a href="/assets/images/logo.svg">logo</a> was made by BurnyLlama and is available under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a></p> </p>
<p style="color: var(--accent); margin-top: 2rem;">Visit us on Tor!</p> <p>
<p><a href="http://qwikxi43yi7we5wq3gewkbzdxif7aogulmtdv3icep6ks6ghlrh7vpyd.onion">qwikxi43yi7we5wq3gewkbzdxif7aogulmtdv3icep6ks6ghlrh7vpyd.onion</a> The font used on this page is <a href="https://manropefont.com/">Manrope</a>.
</p>
<p>
The <a href="/assets/images/logo.svg">logo</a> is made by BurnyLlama and is available under the <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> license.
</p>
<p class="footer-header">
Policies
</p>
<p>
Feel free to read our <a href="/articles/privacy_policy">Privacy Policy</a> or <a href="/articles/terms_of_service">Terms of Service</a>.
</p>
<p class="footer-header">Resources</p>
<p>
We provide qwik's resources <a href="/articles/graphical-profile/intro">here</a>. (This includes logo, colours, fonts, etc.)
</p>
<p class="footer-header">
Visit us on TOR
</p>
<p>Coming soon...</p>
</footer> </footer>
</body> </body>
</html> </html>