Implemented landing page...
BIN
assets/Manrope/Manrope-Bold.ttf
Normal file
BIN
assets/Manrope/Manrope-ExtraBold.ttf
Normal file
BIN
assets/Manrope/Manrope-ExtraLight.ttf
Normal file
BIN
assets/Manrope/Manrope-Light.ttf
Normal file
BIN
assets/Manrope/Manrope-Medium.ttf
Normal file
BIN
assets/Manrope/Manrope-Regular.ttf
Normal file
BIN
assets/Manrope/Manrope-SemiBold.ttf
Normal file
34
assets/css/fonts.css
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope XLight';
|
||||||
|
src: url('/assets/Manrope/Manrope-ExtraLight.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope Light';
|
||||||
|
src: url('/assets/Manrope/Manrope-Light.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope Regular';
|
||||||
|
src: url('/assets/Manrope/Manrope-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope Medium';
|
||||||
|
src: url('/assets/Manrope/Manrope-Medium.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope SemiBold';
|
||||||
|
src: url('/assets/Manrope/Manrope-SemiBold.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope Bold';
|
||||||
|
src: url('/assets/Manrope/Manrope-Bold.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope XBold';
|
||||||
|
src: url('/assets/Manrope/Manrope-ExtraBold.ttf');
|
||||||
|
}
|
212
assets/css/landing.css
Normal file
|
@ -0,0 +1,212 @@
|
||||||
|
body {
|
||||||
|
width: min(95vw, 80ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
padding: .5rem 3rem 1rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > a {
|
||||||
|
color: var(--text);
|
||||||
|
border-bottom: .1rem solid var(--text);
|
||||||
|
|
||||||
|
padding: .3rem 1rem;
|
||||||
|
margin: 1rem 2rem;
|
||||||
|
|
||||||
|
font-size: .85rem;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
transition: color .3s, border-bottom .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > a:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
border-bottom: .1rem solid var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.presentation {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 2rem 3rem;
|
||||||
|
margin: 1rem auto;
|
||||||
|
width: min(65ch, 90%);
|
||||||
|
|
||||||
|
background-color: var(--grey3);
|
||||||
|
border-radius: .5rem;
|
||||||
|
box-shadow: 0 1rem 2rem var(--grey1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.presentation > img {
|
||||||
|
grid-area: logo;
|
||||||
|
width: min(20ch, 35vmin);
|
||||||
|
|
||||||
|
margin-right: 1rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presentation > header {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qwik-explained {
|
||||||
|
width: min(45ch, 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.services-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service {
|
||||||
|
width: min(35ch, 80%);
|
||||||
|
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 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service > p {
|
||||||
|
margin: 1rem auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons > a {
|
||||||
|
color: var(--primary);
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
border: .1rem solid var(--primary);
|
||||||
|
border-radius: .5rem;
|
||||||
|
/* box-shadow: 0 -5rem 20rem transparent; */
|
||||||
|
|
||||||
|
margin: .5rem;
|
||||||
|
padding: .5rem 1.5rem;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
font-size: .75rem;
|
||||||
|
text-decoration: none transparent;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
transition: color .3s, background-color .3s, box-shadow .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons > a:hover, .buttons > a:focus {
|
||||||
|
color: var(--surface);
|
||||||
|
background-color: 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.maintainer-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maintainer {
|
||||||
|
display: flex;
|
||||||
|
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 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-type {
|
||||||
|
font-size: .85rem;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-options > p {
|
||||||
|
padding: .5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin: 15vh 0;
|
||||||
|
padding: 1rem auto;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
border-top: .1rem solid var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer > p, footer > p > a {
|
||||||
|
font-size: .65rem;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love {
|
||||||
|
font-size: .85rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
color: var(--accent2);
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
|
@ -6,7 +6,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
font-family: 'sans-serif';
|
font-family: 'Manrope Regular', sans-serif;
|
||||||
font-size: .85rem;
|
font-size: .85rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
||||||
|
@ -72,6 +72,10 @@ a {
|
||||||
color: var(--accent2);
|
color: var(--accent2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
|
@ -143,7 +147,7 @@ code * {
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin: 1rem 0;
|
margin: 1rem 5%;
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
box-shadow: 0 1rem 2rem var(--grey1);
|
box-shadow: 0 1rem 2rem var(--grey1);
|
||||||
}
|
}
|
BIN
assets/favicons/android-chrome-192x192.png
Normal file
After Width: | Height: | Size: 7.9 KiB |
BIN
assets/favicons/android-chrome-512x512.png
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
assets/favicons/apple-touch-icon.png
Normal file
After Width: | Height: | Size: 7.1 KiB |
9
assets/favicons/browserconfig.xml
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<square150x150logo src="/favicons/mstile-150x150.png"/>
|
||||||
|
<TileColor>#181833</TileColor>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
BIN
assets/favicons/favicon-16x16.png
Normal file
After Width: | Height: | Size: 647 B |
BIN
assets/favicons/favicon-32x32.png
Normal file
After Width: | Height: | Size: 1014 B |
BIN
assets/favicons/favicon.ico
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
assets/favicons/mstile-144x144.png
Normal file
After Width: | Height: | Size: 7.5 KiB |
BIN
assets/favicons/mstile-150x150.png
Normal file
After Width: | Height: | Size: 7.4 KiB |
BIN
assets/favicons/mstile-310x150.png
Normal file
After Width: | Height: | Size: 8.0 KiB |
BIN
assets/favicons/mstile-310x310.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
assets/favicons/mstile-70x70.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
53
assets/favicons/safari-pinned-tab.svg
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M3278 6996 c-1 -2 -42 -6 -89 -10 -47 -4 -95 -8 -105 -10 -10 -2 -46
|
||||||
|
-7 -79 -11 -59 -7 -79 -10 -125 -20 -36 -8 -71 -14 -105 -20 -118 -21 -472
|
||||||
|
-130 -592 -182 -21 -9 -40 -17 -43 -18 -38 -11 -295 -140 -390 -195 -819 -477
|
||||||
|
-1418 -1269 -1643 -2175 -78 -311 -102 -518 -102 -865 1 -210 6 -309 23 -423
|
||||||
|
l7 -46 101 67 c56 37 144 89 196 116 l94 50 0 215 c-1 220 7 342 29 482 3 24
|
||||||
|
8 55 10 69 27 175 98 428 180 635 42 107 176 372 236 466 199 313 430 572 705
|
||||||
|
791 203 162 450 310 694 416 104 45 324 123 389 137 9 2 32 9 51 14 45 14 260
|
||||||
|
58 325 66 28 4 61 9 75 11 158 25 583 24 765 -1 308 -42 546 -106 818 -221
|
||||||
|
125 -53 283 -132 359 -180 21 -13 42 -24 48 -24 5 0 10 -4 10 -10 0 -5 5 -10
|
||||||
|
11 -10 16 0 186 -120 304 -214 105 -84 329 -303 406 -395 24 -29 49 -58 54
|
||||||
|
-65 56 -61 224 -309 289 -426 157 -281 281 -617 337 -915 7 -38 14 -72 14 -75
|
||||||
|
1 -6 14 -90 21 -140 24 -177 25 -582 1 -750 -2 -14 -7 -50 -11 -80 -27 -209
|
||||||
|
-114 -522 -203 -735 -349 -829 -1034 -1463 -1883 -1741 -47 -15 -89 -29 -95
|
||||||
|
-30 -5 -1 -64 -16 -130 -32 -105 -26 -227 -50 -345 -67 -100 -14 -226 -20
|
||||||
|
-421 -19 l-215 1 -47 -91 c-25 -50 -78 -138 -116 -196 l-70 -105 42 -7 c235
|
||||||
|
-37 693 -31 960 12 40 6 81 13 92 15 62 10 106 19 160 32 33 8 68 17 78 19 10
|
||||||
|
2 27 6 37 9 10 3 27 7 37 9 44 9 258 82 368 126 744 296 1368 844 1759 1544
|
||||||
|
221 395 375 867 421 1291 4 33 9 71 11 85 9 47 11 525 3 605 -15 165 -21 220
|
||||||
|
-24 225 -2 3 -6 30 -10 60 -7 55 -58 298 -75 355 -116 393 -242 672 -445 990
|
||||||
|
-36 57 -201 284 -214 295 -3 3 -38 43 -78 90 -64 76 -273 287 -363 365 -314
|
||||||
|
275 -768 532 -1175 666 -166 55 -419 117 -545 134 -19 3 -46 7 -60 10 -13 2
|
||||||
|
-52 7 -86 11 -33 3 -74 8 -90 10 -33 5 -540 14 -546 10z"/>
|
||||||
|
<path d="M3305 5622 c-143 -16 -262 -38 -350 -63 -38 -12 -90 -26 -115 -34
|
||||||
|
-72 -20 -176 -64 -302 -127 -517 -258 -912 -731 -1077 -1288 -32 -106 -56
|
||||||
|
-213 -66 -295 -4 -27 -10 -75 -14 -105 -4 -30 -7 -102 -6 -159 l0 -104 30 -3
|
||||||
|
c17 -1 65 -5 108 -8 92 -7 227 -29 312 -52 33 -9 65 -17 70 -18 146 -36 387
|
||||||
|
-141 541 -237 268 -167 526 -424 692 -690 138 -223 246 -508 287 -759 4 -25 9
|
||||||
|
-52 10 -60 4 -20 17 -155 20 -200 1 -19 3 -39 4 -44 1 -8 235 -2 291 8 14 3
|
||||||
|
45 7 70 10 428 55 870 277 1189 595 349 349 559 780 618 1271 10 80 10 416 0
|
||||||
|
485 -4 28 -10 70 -13 95 -11 85 -74 316 -113 415 -60 154 -137 305 -214 419
|
||||||
|
-213 317 -494 565 -825 730 -311 154 -612 225 -957 223 -88 -1 -173 -3 -190
|
||||||
|
-5z"/>
|
||||||
|
<path d="M1268 2635 c-2 -2 -34 -5 -73 -9 -38 -3 -82 -8 -97 -11 -16 -3 -38
|
||||||
|
-7 -51 -9 -30 -5 -107 -26 -132 -36 -11 -4 -42 -16 -70 -25 -79 -27 -231 -111
|
||||||
|
-309 -169 -269 -203 -440 -473 -512 -806 -13 -63 -18 -127 -18 -245 0 -149 3
|
||||||
|
-191 18 -255 3 -14 8 -36 10 -50 16 -87 86 -269 132 -342 13 -20 24 -40 24
|
||||||
|
-43 0 -19 144 -198 212 -262 110 -106 238 -195 363 -252 64 -30 238 -87 290
|
||||||
|
-95 22 -4 58 -10 80 -14 79 -14 346 -6 434 12 465 96 845 429 992 868 114 339
|
||||||
|
90 696 -67 1011 -66 132 -137 230 -249 342 -220 221 -492 351 -795 380 -68 7
|
||||||
|
-179 12 -182 10z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 3.3 KiB |
19
assets/favicons/site.webmanifest
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"short_name": "",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/favicons/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/favicons/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "#3ddf89",
|
||||||
|
"background_color": "#3ddf89",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
72
assets/images/logo.svg
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
|
||||||
|
id="svg8"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 140.65278 140.65404"
|
||||||
|
height="531.60577"
|
||||||
|
width="531.60107"
|
||||||
|
sodipodi:docname="Qwik Logo.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
inkscape:snap-bbox-midpoints="true"
|
||||||
|
inkscape:snap-bbox-edge-midpoints="true"
|
||||||
|
inkscape:bbox-paths="true"
|
||||||
|
inkscape:bbox-nodes="true"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
units="px"
|
||||||
|
inkscape:showpageshadow="false"
|
||||||
|
borderlayer="true"
|
||||||
|
showborder="true"
|
||||||
|
inkscape:pagecheckerboard="true"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:cy="-188.57143"
|
||||||
|
inkscape:cx="-628.57143"
|
||||||
|
inkscape:zoom="0.175"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
borderopacity="1"
|
||||||
|
bordercolor="#4efd4e"
|
||||||
|
pagecolor="#333333"
|
||||||
|
id="base" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
transform="translate(-244.86383,-26.638861)">
|
||||||
|
<path
|
||||||
|
id="path64228"
|
||||||
|
style="font-variation-settings:'wght' 800;fill:#3ddf89;fill-opacity:1;stroke:none;stroke-width:6.35;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stop-color:#000000"
|
||||||
|
d="m 313.58974,54.185499 a 42.810379,42.810379 0 0 0 -28.6706,12.50931 42.810379,42.810379 0 0 0 -12.5088,31.359327 42.810387,42.810387 0 0 1 29.18323,12.508804 42.810387,42.810387 0 0 1 12.52172,29.18374 42.810379,42.810379 0 0 0 31.34692,-12.50931 42.810379,42.810379 0 0 0 0,-60.542561 42.810379,42.810379 0 0 0 -31.87247,-12.50931 z" />
|
||||||
|
<path
|
||||||
|
id="path64230"
|
||||||
|
style="color:#000000;fill:#4c9cef;fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
|
||||||
|
d="m 315.19016,26.638861 c -38.79025,-4e-6 -70.32595,31.537755 -70.32594,70.328005 0,3.295284 0.23305,6.536374 0.67334,9.712064 a 42.810379,42.810379 0 0 1 7.99021,-4.75784 c -0.12896,-1.63432 -0.19688,-3.28624 -0.19689,-4.954224 0,-34.214527 27.64475,-61.861342 61.85928,-61.861339 34.21452,9e-6 61.86134,27.646823 61.86134,61.861339 -2e-5,34.214504 -27.64683,61.859264 -61.86134,61.859274 -1.66127,0 -3.30619,-0.0669 -4.93407,-0.19482 a 42.810379,42.810379 0 0 1 -4.7656,7.99021 c 3.17179,0.43918 6.40861,0.67128 9.69967,0.67128 38.79023,-1e-5 70.32644,-31.53572 70.32645,-70.325944 10e-6,-38.790239 -31.53621,-70.327996 -70.32645,-70.328005 z" />
|
||||||
|
<path
|
||||||
|
id="path64232"
|
||||||
|
style="font-variation-settings:'wght' 800;fill:#4cdcdf;fill-opacity:1;stroke:none;stroke-width:6.35001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stop-color:#000000"
|
||||||
|
d="m 290.03102,159.54343 a 26.458333,26.458333 0 0 1 -37.41773,0 26.458333,26.458333 0 0 1 0,-37.41773 26.458333,26.458333 0 0 1 37.41773,0 26.458333,26.458333 0 0 1 0,37.41773 z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 3.5 KiB |
|
@ -1,97 +0,0 @@
|
||||||
%%-
|
|
||||||
title: qwik cms
|
|
||||||
header: qwik cms intro
|
|
||||||
date: 8th August 2021
|
|
||||||
-%%
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
BurnyLlama started working on this project as a part of [qwik](https://qwik.space).
|
|
||||||
We tried to find a good and simple CMS solution, but we couldn't really find something that
|
|
||||||
worked for and suited us. We decided to make our own, and that's when the `qwik-cms` repo was created.
|
|
||||||
|
|
||||||
## Basic ideas
|
|
||||||
We wanted to keep it simple, yet powerful. At first we only wanted to use *include/import statements*,
|
|
||||||
but later we came to the realization that you could add other QoL things, like automatically generating
|
|
||||||
a table of contents for articles.
|
|
||||||
|
|
||||||
We also want to make development of content be as fast as possible. Especially with when it comes to
|
|
||||||
writing articles. Writing articles in markdown can feel kinda nice as it (at least imo) saves a lot
|
|
||||||
of time compared to writing out HTML.
|
|
||||||
|
|
||||||
## Underlying technologies
|
|
||||||
Thanks to all the technologies used, the CMS is really hackable and can be used in different ways
|
|
||||||
depending on your liking. There are three main ways of creating content:
|
|
||||||
1. Normal HTML
|
|
||||||
2. Nunjacks (an HTML templating language)
|
|
||||||
3. Markdown
|
|
||||||
|
|
||||||
|
|
||||||
## Views on bloat
|
|
||||||
*This all sounds kinda bloated?*
|
|
||||||
I hear you asking... and yes, I am afraid this is a bit bloated (sadly). Although I wouldn't call it
|
|
||||||
bloated if you actually use the features. The project does pull in a few dependencies, and making the
|
|
||||||
system more modular could potentially make som of those dependencies optional, but as of now we
|
|
||||||
depend on:
|
|
||||||
* Express - the server framework
|
|
||||||
* nunjucks - the templating language that does very heavy lifting in this CMS.
|
|
||||||
* nunjucks-markdown - adds support for markdown in nunjucks
|
|
||||||
* marked - the actual renderer for the markdown (used by `nunjucks-markdown`)
|
|
||||||
* highlight.js - provides syntax highlighting for codeblocks in markdown.
|
|
||||||
* jsdom - makes us able to use DOM operations server-side (used to generate the table of contents)
|
|
||||||
* chokidar - used to reload nunjucks templates if they change on the disk (without having to restart the server)
|
|
||||||
|
|
||||||
So yes, we sure do have a lot of dependencies, but they are all used, so there are no dependencies just "lying around".
|
|
||||||
|
|
||||||
# Installation
|
|
||||||
The installation process will be quite trivial if you are used to node-based projects.
|
|
||||||
|
|
||||||
## Prerequesites
|
|
||||||
We will assume that you have `node` and `npm` installed already. Otherwise make sure to install those.
|
|
||||||
|
|
||||||
## Process
|
|
||||||
The process is really simple:
|
|
||||||
```bash
|
|
||||||
git clone https://git.qwik.space/BurnyLlama/qwik-cms
|
|
||||||
cd qwik-cms
|
|
||||||
npm i
|
|
||||||
node index.js
|
|
||||||
```
|
|
||||||
`npm i` installs all needed dependencies.
|
|
||||||
|
|
||||||
# Configuration
|
|
||||||
The CMS can be configured from `config.json` and the default config looks like this:
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"contentDir": "content",
|
|
||||||
"assetsDir": "assets",
|
|
||||||
|
|
||||||
"serverPort": "8789",
|
|
||||||
"serverName": "qwik"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Explanation
|
|
||||||
All of the options are kind of self-explanatory, but anyways:
|
|
||||||
|
|
||||||
### contentDir
|
|
||||||
Specifies which directory the content is in.
|
|
||||||
|
|
||||||
Default: `content`
|
|
||||||
|
|
||||||
### assetsDir
|
|
||||||
Specifies which directory the assets are in. These items will be statically available on (your site's)
|
|
||||||
`/assets/`. I recommend storing CSS, images, etc. here.
|
|
||||||
|
|
||||||
Default: `assets`
|
|
||||||
|
|
||||||
### serverPort
|
|
||||||
The port the server should run on.
|
|
||||||
|
|
||||||
Default: `8789`
|
|
||||||
|
|
||||||
### serverName
|
|
||||||
This can be accessed in any page/template by using `{{ serverName }}`
|
|
||||||
|
|
||||||
Default: `qwik`
|
|
||||||
|
|
||||||
# Usage
|
|
166
content/pages/index.njk
Normal file
|
@ -0,0 +1,166 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
{% include "templates/defaultTags.njk" %}
|
||||||
|
<link rel="stylesheet" type="" href="/assets/css/landing.css">
|
||||||
|
<title>qwik</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<a href="#services">services</a>
|
||||||
|
<a href="#contact">contact</a>
|
||||||
|
<a href="#resources">resources</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="presentation">
|
||||||
|
<img class="logo" src="/assets/images/logo.svg" alt="qwik logo">
|
||||||
|
<header>qwik</header>
|
||||||
|
<p class="qwik-explained centered">
|
||||||
|
Welcome here! 😊
|
||||||
|
</p>
|
||||||
|
<p class="qwik-explained">
|
||||||
|
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="./privacy.html">privacy policy</a>.)
|
||||||
|
</p>
|
||||||
|
<p class="qwik-explained centered">
|
||||||
|
Please enjoy your stay. :)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a name="services"></a>
|
||||||
|
<h1 class="centered">services</h1>
|
||||||
|
<div class="services-list">
|
||||||
|
<div class="service">
|
||||||
|
<h2>Gitea</h2>
|
||||||
|
<p>
|
||||||
|
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).
|
||||||
|
</p>
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="https://git.qwik.space">get codin'</a>
|
||||||
|
<a href="http://qwikxlvkfhrba7jkzpl6lm762ynfyj2t5rd7cn7rlnwo2f4haq7gqzqd.onion" class="onion">tor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service">
|
||||||
|
<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>
|
||||||
|
<p>
|
||||||
|
XMPP is an instant messaging protocol. You can find more info in the article below.
|
||||||
|
</p>
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="./xmpp.html">get chattin'</a>
|
||||||
|
<a href="http://qwikxi43yi7we5wq3gewkbzdxif7aogulmtdv3icep6ks6ghlrh7vpyd.onion/xmpp.html" class="onion">tor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a name="contact"></a>
|
||||||
|
<h1 class="centered">contact</h1>
|
||||||
|
<div class="contact-box">
|
||||||
|
<p>
|
||||||
|
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>
|
||||||
|
|
||||||
|
<div class="maintainer-list">
|
||||||
|
<div class="maintainer">
|
||||||
|
<h2>BurnyLlama</h2>
|
||||||
|
|
||||||
|
<div class="contact-options">
|
||||||
|
<p class="contact-type">XMPP</p>
|
||||||
|
<p>burnyllama@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@qwik.space</p>
|
||||||
|
</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="./graphical-profile.html">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>
|
||||||
|
<p class="love">made with <span class="heart"> <3 </span> by team qwik</p>
|
||||||
|
|
||||||
|
<p style="color: var(--accent); margin-top: 2rem;">attributions & credits</p>
|
||||||
|
<p>the font used on this page is <a href="https://manropefont.com/">Manrope</a>.</p>
|
||||||
|
<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 style="color: var(--accent); margin-top: 2rem;">Visit us on Tor!</p>
|
||||||
|
<p><a href="http://qwikxi43yi7we5wq3gewkbzdxif7aogulmtdv3icep6ks6ghlrh7vpyd.onion">qwikxi43yi7we5wq3gewkbzdxif7aogulmtdv3icep6ks6ghlrh7vpyd.onion<a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
{% include "templates/defaultTags.njk" %}
|
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/sitemap.css">
|
|
||||||
<title>Site Map</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
Sitemap - "/"
|
|
||||||
</header>
|
|
||||||
<div class="sitemap-container">
|
|
||||||
{{ siteMap() | safe }}
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,6 +1,17 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicons/site.webmanifest">
|
||||||
|
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#3ddf89">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicons/favicon.ico">
|
||||||
|
<meta name="msapplication-TileColor" content="#181833">
|
||||||
|
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
|
||||||
|
<meta name="theme-color" content="#3ddf89">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/scaling.css">
|
<link rel="stylesheet" type="text/css" href="/assets/css/scaling.css">
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/colors.css">
|
<link rel="stylesheet" type="text/css" href="/assets/css/colors.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css">
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/theme.css">
|
<link rel="stylesheet" type="text/css" href="/assets/css/theme.css">
|
||||||
|
|