qwik/qwik-website
Archived
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated UI + Added Privacy Policy

Browse Source
This commit is contained in:
BurnyLlama 2021-07-25 21:37:10 +02:00
parent dd50d22b4e
commit abd4356f9e
8 changed files with 491 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
index.html
View File

@ -21,11 +21,21 @@
<div class="grid-container">
<nav>
<a href="#services">services</a>
<a href="#maintainers">maintainers</a>
<a href="#contact">contact</a>
<a href="#contribute">contribute</a>
</nav>
<img class="logo" src="./resources/logo.svg" alt="qwik logo">
<header>qwik</header>
<div class="presentation">
<img class="logo" src="./resources/logo.svg" alt="qwik logo">
<header>qwik</header>
<p class="qwik-explained">
Welcome here! 😊 <br><br>
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 please read our <a href="./privacy.html">privacy policy</a>.) <br><br>
Please enjoy your stay. :)
</p>
</div>
<a name="services"></a>
<h1>services</h1>
@ -55,6 +65,15 @@
<a href="https://bibligram.qwik.space">get browsin'</a>
</div>
<div class="service">
<h2>Libreddit</h2>
<p>
Libreddit is a Reddit frontend. Use it to browse Reddit without getting tracked.
</p>
<a href="https://bibligram.qwik.space">get browsin'</a>
</div>
<div class="service">
<h2>Searchy</h2>
<p>
@ -70,48 +89,38 @@
</p>
<a href="https://searx.qwik.space">get browsin'</a>
</div>
<div class="service">
<h2>Owncast</h2>
<p>
We host an Owncast instance that we might some day actually use to stream on.
</p>
<a href="https://stream.qwik.space">get visitin'</a>
</div>
<div class="service">
<h2>Owncloud</h2>
<p>
We host an Owncloud instance for internal use. Please contact us if you would like an account.
</p>
<a href="https://cloud.qwik.space">get visitin'</a>
</div>
</div>
<a name="maintainers"></a>
<h1>maintainers</h1>
<div class="maintainer-list">
<div class="maintainer">
<h2>BurnyLlama</h2>
<img src="./resources/Llama_min.png" alt="BurnyLlama's profile picture.">
<a name="contact"></a>
<h1>contact</h1>
<div class="contact-box">
<p>
If you have any questions, feedback, ideas, or anything else, feel free to contact us. <br>
You can contact BurnyLlama about most things, but if what you have to say is about XMPP, then
please contact furo. :)
</p>
<p class="contact-type">mail</p>
<p>burnyllama [@] protonmail [.] com</p>
<div class="maintainer-list">
<div class="maintainer">
<h2>BurnyLlama</h2>
<p class="contact-type">matrix</p>
<p>@burnyllama:matrix.org</p>
</div>
<div class="maintainer">
<h2>furo</h2>
<img src="./resources/Picasso Llama.png" alt="furo's profile picture.">
<p class="contact-type">mail</p>
<p>1qazxcde3 [@] posteo [.] net</p>
<p class="contact-type">matrix</p>
<p>@desu_desu:matrix.org</p>
<div class="contact-options">
<p class="contact-type">XMPP</p>
<p>burnyllama@chat.qwik.space</p>
<p class="contact-type">matrix</p>
<p>@burnyllama:matrix.org</p>
</div>
</div>
<div class="maintainer">
<h2>furo</h2>
<div class="contact-options">
<p class="contact-type">XMPP</p>
<p>furo@chat.qwik.space</p>
</div>
</div>
</div>
</div>
@ -124,7 +133,7 @@
<footer>
<p class="love">made with <span class="heart">&nbsp; &lt;3 &nbsp;</span> by team qwik</p>
<p style="color: var(--accent)">attributions & credits</p>
<p style="color: var(--accent); margin-top: 2rem;">attributions &amp; credits</p>
<p>the font used on this page is <a href="https://manropefont.com/">Manrope</a>.</p>
<p>qwik's <a href="./resources/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>
</footer>

116
privacy.html Normal file
View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#3ddf89">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#181833">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#3ddf89">
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<link rel="stylesheet" type="text/css" href="./styles/privacy.css">
<title>qwik's privacy policy</title>
</head>
<body>
<div class="container">
<header>Privacy Policy</header>
<i style="color: var(--primary); text-align: center; display: block;">Last updated 25th July 2021</i>
<h1>Introduction</h1>
<p>
We want to keep this short but informative, but a <i>tl;dr</i>: <br>
We do not want to collect data, and all data collected <i>should be logical.</i>
(i.e. emails for a <a href="https://git.qwik.space">gitea</a> account or so). <br><br>
We will change this Privacy Policy from time to time to reflect the current situation. Please keep an eye out.
</p>
<h1>Some extra words</h1>
<p>
This notice is very general and there might be exceptions for each individual service we offer.
Consider reading about the services before you use them, but they are all doing their best to
be privacy friendly. <br><br>
We will list some exceptions further down and the Policy.
</p>
<h1>Data collection</h1>
<h2>IP Addresses and User Agents</h2>
<p>
We do not keep nginx access logs - so we can't see who has connected. However, our main server uses
modsecurity to protect against different types of attacks. If one of your requests is flagged as an
attack, modsecurity will write to an audit log. This will <b>log your User Agent</b>. <br><br>
We do use a reverse proxy but it does not keep any logs.
</p>
<h2>Cookies</h2>
<p>
Our main page (<a href="https://qwik.space">qwik.space</a>) does not have any cookies. :)
</p>
<h1>Data retention</h1>
<p>
The modsecurity log is kept until we clear it from time to time.
</p>
<h1>Data sharing</h1>
<p>
We do not share any data with third parties unless we have to by law or state otherwise.
</p>
<h1>Exceptions</h1>
<p>
Here are some services that make exceptions to the above statements:
</p>
<h2>XMPP</h2>
<p>
Our XMPP server caches messages and uploads for up to seven days. If your client uses
encryption (such as OMEMO) the cached messages and uploads will be encrypted. We <b>strongly</b>
advise using encryption.
</p>
<h2>Gitea</h2>
<p>
Gitea will collect your email upon registration. (Sadly we don't know any way to disable this.) However,
the email isn't used for anything so it can be whatever. We would maybe even advise you to use a temporary
or throwaway email. <br><br>
Gitea will require a username on signup, which you might consider personal. We would advise
you to not use your real name and instead use an alias. <br><br>
Gitea also uses some cookies, but this is for your comfort. For example keeping you signed in and remembering
your settings or what not.
</p>
<h2>Nitter, Bibliogram, Libreddit, Searx</h2>
<p>
These services all use cookies to remember your settings.
</p>
<h1>Recommendations</h1>
<p>
The internet <b>is not a good place</b> when it comes to privacy. If you want to limit
the risks of <i>something or someone</i> invading your privacy onlinne, we reccomend:
<ul>
<li>Use tor (properly)</li>
<li>Use throwaway emails when signing up for stuff</li>
<li>Use fake names or aliases to protect your name</li>
<li>(Generally) don't give out personal information online...</li>
</ul>
</p>
</div>
</body>
</html>

BIN
resources/Llama_min.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 252 KiB

BIN
resources/Picasso Llama.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 135 KiB

109
styles/colors.css Normal file
View File

@ -0,0 +1,109 @@
:root {
/* COLORS */
--red: #EF5255;
--red1: #BF3638;
--red2: #D5484A;
--red3: #EF5255;
--red4: #FA7A7C;
--red5: #FA999A;
--orange: #EB801B;
--orange1: #AF6118;
--orange2: #DA7516;
--orange3: #EB801B;
--orange4: #F99434;
--orange5: #F9AE67;
--yellow: #F4C025;
--yellow1: #BD920F;
--yellow2: #DFAC11;
--yellow3: #F4C025;
--yellow4: #FFD147;
--yellow5: #FFE38F;
--pear: #AED651;
--pear1: #7D9A37;
--pear2: #96BB3E;
--pear3: #AED651;
--pear4: #C2E571;
--pear5: #DBF1A7;
--green: #72D661;
--green1: #53A545;
--green2: #61C350;
--green3: #72D661;
--green4: #93E684;
--green5: #BCF0B2;
--sea: #3DDF89;
--sea1: #2AA764;
--sea2: #2ACB75;
--sea3: #3DDF89;
--sea4: #5DEEA1;
--sea5: #A9F4CC;
--cyan: #4CDCDF;
--cyan1: #2CA3A5;
--cyan2: #2DCACD;
--cyan3: #4CDCDF;
--cyan4: #6BE8EB;
--cyan5: #B7EFF0;
--blue: #4C9CEF;
--blue1: #1C67B5;
--blue2: #2A83DF;
--blue3: #4C9CEF;
--blue4: #74B6FB;
--blue5: #A3CEFA;
--indigo: #4C6DEF;
--indigo1: #2143CA;
--indigo2: #3457E5;
--indigo3: #4C6DEF;
--indigo4: #748FFB;
--indigo5: #B1C0FC;
--purple: #967CF4;
--purple1: #613FD9;
--purple2: #7C5DE9;
--purple3: #967CF4;
--purple4: #BCAAFD;
--purple5: #CFC2FE;
--magenta: #E175DB;
--magenta1: #B63AB0;
--magenta2: #D152CB;
--magenta3: #E175DB;
--magenta4: #EC9AEF;
--magenta5: #EFB1F1;
--pink: #EE588F;
--pink1: #D0356D;
--pink2: #E2407C;
--pink3: #EE588F;
--pink4: #FA80AC;
--pink5: #FBA7C6;
--grey1: #00001F;
--grey2: #10102F;
--grey3: #20203F;
--grey4: #30304F;
--grey5: #40405F;
--grey6: #50506F;
--grey7: #60607F;
--grey8: #70708F;
--grey9: #80809F;
--grey10: #9090AF;
--grey11: #A0A0BF;
--grey12: #B0B0CF;
--grey13: #C0C0DF;
--grey14: #D0D0EF;
--grey15: #E0E0FF;
/* ALIASES */
--primary: var(--sea);
--accent: var(--cyan);
--accent2: var(--blue);
--surface: var(--grey2);
--text: var(--grey15);
}

30
styles/fonts.css
View File

@ -1,4 +1,34 @@
@font-face {
font-family: 'Manrope XLight';
src: url('../resources/Manrope/Manrope-ExtraLight.ttf');
}
@font-face {
font-family: 'Manrope Light';
src: url('../resources/Manrope/Manrope-Light.ttf');
}
@font-face {
font-family: 'Manrope Regular';
src: url('../resources/Manrope/Manrope-Regular.ttf');
}
@font-face {
font-family: 'Manrope Medium';
src: url('../resources/Manrope/Manrope-Medium.ttf');
}
@font-face {
font-family: 'Manrope SemiBold';
src: url('../resources/Manrope/Manrope-SemiBold.ttf');
}
@font-face {
font-family: 'Manrope Bold';
src: url('../resources/Manrope/Manrope-Bold.ttf');
}
@font-face {
font-family: 'Manrope XBold';
src: url('../resources/Manrope/Manrope-ExtraBold.ttf');
}

251
styles/main.css
View File

@ -1,36 +1,36 @@
@import url('./fonts.css');
@import url('./scaling.css');
:root {
--text: #f2f2ff;
--surface: #181833;
--primary: #3ddf89;
--accent: #4cdcdf;
--accent2: #4c9cef;
}
@import url(./colors.css);
@import url(./fonts.css);
@import url(./scaling.css);
* {
margin: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
color: var(--text);
font-family: 'Manrope XLight';
font-weight: unset;
}
html {
width: 100%;
font-size: .85rem;
font-weight: normal;
line-height: 1.5;
scroll-behavior: smooth;
}
body, html {
width: 100%;
color: var(--text);
background-color: var(--surface);
}
body {
background-color: var(--surface);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: 'pad1 content pad2';
width: 100%;
}
.grid-container {
@ -40,28 +40,31 @@ body {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 15vh;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 5vh;
flex-wrap: wrap;
padding: .5rem 3rem 1rem 3rem;
margin-top: 3rem;
}
nav > a {
text-decoration: none;
font-size: 1.2rem;
margin: 1rem 2rem;
padding: .3rem 1rem;
color: var(--text);
border-bottom: .1rem solid var(--text);
padding: .3rem 2rem;
margin: 1rem 2rem;
transition: color .3s, border .3s;
font-size: 1.25rem;
text-decoration: none;
transition: color .3s, border-bottom .3s;
}
nav > a:hover {
@ -69,122 +72,192 @@ nav > a:hover {
border-bottom: .1rem solid var(--primary);
}
.logo {
width: 20vmax;
margin-top: 15vh;
.presentation {
display: grid;
grid-template-areas: 'logo name'
'logo desc';
grid-template-columns: auto auto;
grid-template-rows: auto auto;
place-items: center start;
padding: 2rem 3rem;
margin: 3rem 0;
max-width: 100%;
background-color: var(--grey3);
border-radius: 1rem;
box-shadow: 0 1rem 2rem var(--grey1);
}
img {
grid-area: logo;
width: min(20ch, 35vmin);
margin-right: 1rem;
}
header {
font-size: 6rem;
margin-bottom: 15vh;
grid-area: name;
color: var(--primary);
font-size: 2rem;
margin-left: 1rem;
margin-bottom: 1rem;
}
.qwik-explained {
grid-area: desc;
width: min(40ch, 45vmin);
margin-left: 1rem;
}
h1 {
margin: 10rem 0 2rem 0;
font-size: 2.5rem;
color: var(--primary);
font-size: 2rem;
margin-top: 3rem;
}
p {
font-size: 1.025rem;
h2 {
color: var(--accent);
font-size: 1.15rem;
}
a {
color: var(--accent2);
}
.services-list, .maintainer-list {
b {
font-family: 'Manrope Medium';
}
.services-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.service, .maintainer {
margin: 1rem 2rem;
padding: 1rem 2rem;
width: 30ch;
.service {
width: min(30ch, 80%);
display: flex;
flex-direction: column;
border: .1rem solid var(--accent);
border-radius: .5rem;
display: grid;
grid-template-rows: auto 1fr auto;
margin: 2rem;
padding: 1rem 1.5rem;
background-color: var(--grey3);
border-radius: 1rem;
box-shadow: 0 1rem 2rem var(--grey1);
}
.service > h2, .maintainer > h2 {
color: var(--accent);
.service > h2 {
text-align: center;
font-size: 1.75rem;
margin-bottom: .5rem;
}
.service > p {
margin: 1rem 0;
}
.service > a {
color: var(--primary);
background-color: transparent;
border: .1rem solid var(--primary);
border-radius: 50rem;
font-size: 1.25rem;
text-align: center;
text-decoration: none;
border-radius: 999rem;
box-shadow: 0 -5rem 20rem transparent;
margin-top: auto;
margin-bottom: .5rem;
padding: .5rem;
width: 100%;
display: block;
margin-top: 2rem;
padding: .5rem 1rem;
transition: color .3s, background-color .3s;
font-size: 1rem;
text-decoration: none transparent;
text-align: center;
transition: color .3s, background-color .3s, box-shadow .3s;
}
.service > a:hover {
.service > a:hover, .service > a:focus {
color: var(--surface);
background-color: var(--primary);
box-shadow: 0 .25rem 2rem var(--primary);
}
.maintainer-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.maintainer {
width: 45ch;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 2rem;
margin: 2rem 3rem;
background-color: var(--grey3);
border-radius: 1rem;
box-shadow: 0 1rem 2rem var(--grey1);
}
.maintainer > img {
margin: 1rem 0 2rem 0;
width: 70%;
border-radius: 100%;
.maintainer > h2 {
margin-bottom: 1rem;
}
.maintainer > .contact-type {
.contact-options {
display: grid;
grid-template-columns: auto auto;
}
.contact-type {
color: var(--accent);
font-size: 1.25rem;
margin-top: 1rem;
margin-right: 1rem;
}
.contact-options > p {
padding: .5rem 0;
}
footer {
margin-top: 10rem;
padding-top: 2.5rem;
border-top: .1rem solid var(--accent);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 15vh 0;
padding: 1rem 5rem;
border-top: .1rem solid var(--accent);
}
footer > p, footer > p > a {
font-size: .65rem;
}
.love {
font-size: 1.25rem;
display: flex;
align-self: center;
align-items: center;
margin-bottom: 2rem;
font-size: .85rem;
}
.heart {
margin-top: -.5rem;
color: var(--accent2);
font-size: 2rem;
}
footer > p {
font-size: .75rem;
font-size: 1.15rem;
}

23
styles/privacy.css Normal file
View File

@ -0,0 +1,23 @@
body {
display: flex;
}
header {
margin: 0;
font-size: 3rem;
text-align: center;
}
.container {
width: min(65ch, 90%);
margin: 0 auto;
padding-bottom: 15vh;
}
h2 {
margin-top: 1.5rem;
}
ul {
margin: .5rem 2rem;
}