Updated UI + Added Privacy Policy

index.html

@@ -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>
+        
+        <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>
 
-            <div class="service">
+        <a name="contact"></a>
-                <h2>Owncast</h2>
+        <h1>contact</h1>
+        <div class="contact-box">
             <p>
-                    We host an Owncast instance that we might some day actually use to stream on.
+                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>
-                <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.">
 
-                <p class="contact-type">mail</p>
+                    <div class="contact-options">
-                <p>burnyllama [@] protonmail [.] com</p>
+                        <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>
-                <img src="./resources/Picasso Llama.png" alt="furo's profile picture.">
                     
-
+                    <div class="contact-options">
-                <p class="contact-type">mail</p>
+                        <p class="contact-type">XMPP</p>
-                <p>1qazxcde3 [@] posteo [.] net</p>
+                        <p>furo@chat.qwik.space</p>
-
+                    </div>
-                <p class="contact-type">matrix</p>
+                </div>
-                <p>@desu_desu:matrix.org</p>
             </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>

privacy.html

@@ -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>

styles/colors.css

@@ -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);
+}

styles/fonts.css

@@ -2,3 +2,33 @@
     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');
+}

styles/main.css

@@ -1,36 +1,36 @@
-@import url('./fonts.css');
+@import url(./colors.css);
-@import url('./scaling.css');
+@import url(./fonts.css);
-
+@import url(./scaling.css);
-:root {
-    --text: #f2f2ff;
-    --surface: #181833;
-    --primary: #3ddf89;
-    --accent: #4cdcdf;
-    --accent2: #4c9cef;
-}
 
 * {
-    margin: 0;
     padding: 0;
+    margin: 0;
     box-sizing: border-box;
     
-    color: var(--text);
     font-family: 'Manrope XLight';
-    font-weight: unset;
+    font-size: .85rem;
-}
+    font-weight: normal;
+    line-height: 1.5;
     
-html {
-    width: 100%;
     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%;
+    flex-wrap: wrap;
-    margin-top: 5vh;
+    
+    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);
     
-    transition: color .3s, border .3s;
+    padding: .3rem 2rem;
+    margin: 1rem 2rem;
+
+    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;
+    grid-area: name;
-    margin-bottom: 15vh;
+
+    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 {
+h2 {
-    font-size: 1.025rem;
+    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 {
+.service {
-    margin: 1rem 2rem;
+    width: min(30ch, 80%);
-    padding: 1rem 2rem;
+    display: flex;
-    width: 30ch;
+    flex-direction: column;
 
-    border: .1rem solid var(--accent);
+    margin: 2rem;
-    border-radius: .5rem;
+    padding: 1rem 1.5rem;
     
-    display: grid;
+    background-color: var(--grey3);
-    grid-template-rows: auto 1fr auto;
+    border-radius: 1rem;
+    box-shadow: 0 1rem 2rem var(--grey1);
 }
 
-.service > h2, .maintainer > h2 {
+.service > h2 {
-    color: var(--accent);
     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;
+    border-radius: 999rem;
-
+    box-shadow: 0 -5rem 20rem transparent;
-    font-size: 1.25rem;
-    text-align: center;
-    text-decoration: none;
     
+    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 {
+.maintainer > h2 {
-    margin: 1rem 0 2rem 0;
+    margin-bottom: 1rem;
-    width: 70%;
-    border-radius: 100%;
 }
 
-.maintainer > .contact-type {
+.contact-options {
+    display: grid;
+    grid-template-columns: auto auto;
+}
+
+.contact-type {
     color: var(--accent);
-    font-size: 1.25rem;
+    margin-right: 1rem;
-    margin-top: 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;
+    font-size: .85rem;
-    display: flex;
-    align-self: center;
-    align-items: center;
-    margin-bottom: 2rem;
 }
 
 .heart {
-    margin-top: -.5rem;
     color: var(--accent2);
-    font-size: 2rem;
+    font-size: 1.15rem;
-}
-
-footer > p {
-    font-size: .75rem;
 }

styles/privacy.css

@@ -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;
+}