diff --git a/index.html b/index.html index fa7d8c4..4122fe3 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,21 @@
- -
qwik
+ +
+ +
qwik
+

+ Welcome here! 😊

+ 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 privacy policy.)

+ Please enjoy your stay. :) +

+

services

@@ -55,6 +65,15 @@ get browsin'
+
+

Libreddit

+

+ Libreddit is a Reddit frontend. Use it to browse Reddit without getting tracked. +

+ get browsin' +
+ +

Searchy

@@ -70,48 +89,38 @@

get browsin'
- -
-

Owncast

-

- We host an Owncast instance that we might some day actually use to stream on. -

- get visitin' -
- -
-

Owncloud

-

- We host an Owncloud instance for internal use. Please contact us if you would like an account. -

- get visitin' -
- -

maintainers

-
-
-

BurnyLlama

- BurnyLlama's profile picture. + +

contact

+
+

+ 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. :) +

-

mail

-

burnyllama [@] protonmail [.] com

+
+
+

BurnyLlama

-

matrix

-

@burnyllama:matrix.org

-
- -
-

furo

- furo's profile picture. - - -

mail

-

1qazxcde3 [@] posteo [.] net

- -

matrix

-

@desu_desu:matrix.org

+
+

XMPP

+

burnyllama@chat.qwik.space

+ +

matrix

+

@burnyllama:matrix.org

+
+
+ +
+

furo

+ +
+

XMPP

+

furo@chat.qwik.space

+
+
@@ -124,7 +133,7 @@

made with   <3   by team qwik

-

attributions & credits

+

attributions & credits

the font used on this page is Manrope.

qwik's logo was made by BurnyLlama and is available under CC BY 4.0

diff --git a/privacy.html b/privacy.html new file mode 100644 index 0000000..8bcb432 --- /dev/null +++ b/privacy.html @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + qwik's privacy policy + + +
+
Privacy Policy
+ Last updated 25th July 2021 + +

Introduction

+

+ We want to keep this short but informative, but a tl;dr:
+ We do not want to collect data, and all data collected should be logical. + (i.e. emails for a gitea account or so).

+ We will change this Privacy Policy from time to time to reflect the current situation. Please keep an eye out. +

+ + + +

Some extra words

+

+ 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.

+ We will list some exceptions further down and the Policy. +

+ + + +

Data collection

+

IP Addresses and User Agents

+

+ 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 log your User Agent.

+ We do use a reverse proxy but it does not keep any logs. +

+ +

Cookies

+

+ Our main page (qwik.space) does not have any cookies. :) +

+ +

Data retention

+

+ The modsecurity log is kept until we clear it from time to time. +

+ + + +

Data sharing

+

+ We do not share any data with third parties unless we have to by law or state otherwise. +

+ + + +

Exceptions

+

+ Here are some services that make exceptions to the above statements: +

+

XMPP

+

+ 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 strongly + advise using encryption. +

+ +

Gitea

+

+ 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.

+ 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.

+ Gitea also uses some cookies, but this is for your comfort. For example keeping you signed in and remembering + your settings or what not. +

+ +

Nitter, Bibliogram, Libreddit, Searx

+

+ These services all use cookies to remember your settings. +

+ + + +

Recommendations

+

+ The internet is not a good place when it comes to privacy. If you want to limit + the risks of something or someone invading your privacy onlinne, we reccomend: +

    +
  • Use tor (properly)
  • +
  • Use throwaway emails when signing up for stuff
  • +
  • Use fake names or aliases to protect your name
  • +
  • (Generally) don't give out personal information online...
  • +
+

+
+ + \ No newline at end of file diff --git a/resources/Llama_min.png b/resources/Llama_min.png deleted file mode 100644 index b572918..0000000 Binary files a/resources/Llama_min.png and /dev/null differ diff --git a/resources/Picasso Llama.png b/resources/Picasso Llama.png deleted file mode 100644 index a42ace4..0000000 Binary files a/resources/Picasso Llama.png and /dev/null differ diff --git a/styles/colors.css b/styles/colors.css new file mode 100644 index 0000000..2c6ef03 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/styles/fonts.css b/styles/fonts.css index 0e90184..7db224c 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -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'); } \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 9b20bc3..d7b82e6 100644 --- a/styles/main.css +++ b/styles/main.css @@ -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; } \ No newline at end of file diff --git a/styles/privacy.css b/styles/privacy.css new file mode 100644 index 0000000..d56c243 --- /dev/null +++ b/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; +} \ No newline at end of file