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

Website version 1!

Browse Source
This commit is contained in:
BurnyLlama 2021-07-01 22:53:18 +02:00
parent 8dcd235987
commit ed0577a4b1
14 changed files with 420 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
index.html Normal file
View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<title>qwik</title>
</head>
<body>
<div class="grid-container">
<nav>
<a href="#services">services</a>
<a href="#maintainers">maintainers</a>
<a href="#contribute">contribute</a>
</nav>
<img class="logo" src="./resources/logo.svg" alt="qwik logo">
<header>qwik</header>
<a name="services"></a>
<h1>services</h1>
<div class="services-list">
<div class="service">
<h2>Gitea</h2>
<p>
Gitea is an alternative to Github, Gitlab, etc.
We host our instance. Please don't spam it with large files, or we might have to remove your repos.
</p>
<a href="https://git.qwik.space">get codin'</a>
</div>
<div class="service">
<h2>Nitter</h2>
<p>
Nitter is a Twitter frontend. Use it to browse Twitter without getting tracked.
</p>
<a href="https://nitter.qwik.space">get browsin'</a>
</div>
<div class="service">
<h2>Nextcloud</h2>
<p>
We host a Nextcloud 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>
<p>burnyllama [@] protonamail [.] com</p>
<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>
</div>
<a name="contribute"></a>
<h1>contribute</h1>
<p>
There’s currently no real way to contribute, but if you have any ideas of stuff to add feel free to contact the maintainers.
</p>
<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>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>
</div>
</body>
</html>

BIN
resources/Llama_min.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
resources/Manrope/Manrope-Bold.ttf Normal file
View File

Binary file not shown.

BIN
resources/Manrope/Manrope-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/Manrope/Manrope-ExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
resources/Manrope/Manrope-Light.ttf Normal file
View File

Binary file not shown.

BIN
resources/Manrope/Manrope-Medium.ttf Normal file
View File

Binary file not shown.

BIN
resources/Manrope/Manrope-Regular.ttf Normal file
View File

Binary file not shown.

BIN
resources/Manrope/Manrope-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/Picasso Llama.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

72
resources/logo.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

4
styles/fonts.css Normal file
View File

@ -0,0 +1,4 @@
@font-face {
font-family: 'Manrope XLight';
src: url('../resources/Manrope/Manrope-ExtraLight.ttf');
}

184
styles/main.css Normal file
View File

@ -0,0 +1,184 @@
@import url('./fonts.css');
@import url('./scaling.css');
:root {
--text: #f2f2ff;
--surface: #181833;
--primary: #3ddf89;
--accent: #4cdcdf;
--accent2: #4c9cef;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: var(--text);
font-family: 'Manrope XLight';
font-weight: unset;
}
html {
width: 100%;
scroll-behavior: smooth;
}
body {
background-color: var(--surface);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: 'pad1 content pad2';
width: 100%;
}
.grid-container {
width: min(95vw, 125ch);
grid-area: content;
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;
}
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;
}
nav > a:hover {
color: var(--primary);
border-bottom: .1rem solid var(--primary);
}
.logo {
width: 20vmax;
margin-top: 15vh;
}
header {
font-size: 6rem;
margin-bottom: 35vh;
}
h1 {
margin: 10rem 0 2rem 0;
font-size: 2.5rem;
color: var(--primary);
}
p {
font-size: 1.025rem;
}
a {
color: var(--accent2);
}
.services-list, .maintainer-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.service, .maintainer {
margin: 0 2rem;
padding: 1rem 2rem;
width: 30ch;
border: .1rem solid var(--accent);
border-radius: .5rem;
display: grid;
grid-template-rows: auto 1fr auto;
}
.service > h2, .maintainer > h2 {
color: var(--accent);
text-align: center;
font-size: 1.75rem;
margin-bottom: .5rem;
}
.service > a {
color: var(--primary);
border: .1rem solid var(--primary);
border-radius: 50rem;
font-size: 1.25rem;
text-align: center;
text-decoration: none;
display: block;
margin-top: 2rem;
padding: .5rem 1rem;
transition: color .3s, background-color .3s;
}
.service > a:hover {
color: var(--surface);
background-color: var(--primary);
}
.maintainer {
width: 45ch;
display: flex;
flex-direction: column;
align-items: center;
}
.maintainer > img {
margin: 1rem 0 2rem 0;
width: 70%;
border-radius: 100%;
}
.maintainer > .contact-type {
color: var(--accent);
font-size: 1.25rem;
margin-top: 1rem;
}
footer {
margin-top: 10rem;
padding-top: 1rem;
border-top: .1rem solid var(--accent);
display: flex;
flex-direction: column;
align-items: center;
}
.love {
font-size: 2rem;
display: flex;
align-self: center;
align-items: center;
margin-bottom: 2rem;
}
.heart {
margin-top: -.5rem;
color: var(--accent2);
font-size: 4rem;
}

70
styles/scaling.css Normal file
View File

@ -0,0 +1,70 @@
/*
THIS ALL JUST SCALES THE FONT SO THAT EVERYTHING LOOKS NICE ON ALL SCREENS B)
*/
@media screen and (min-width: 1px) {
:root {
font-size: 10px;
}
}
@media screen and (min-width: 300px) {
:root {
font-size: 11pt;
}
}
@media screen and (min-width: 400px) {
:root {
font-size: 12pt;
}
}
@media screen and (min-width: 500px) {
:root {
font-size: 13pt;
}
}
@media screen and (min-width: 600px) {
:root {
font-size: 14pt;
}
}
@media screen and (min-width: 700px) {
:root {
font-size: 15pt;
}
}
@media screen and (min-width: 802px) {
:root {
font-size: 10pt;
}
}
@media screen and (min-width: 1000px) {
:root {
font-size: 11pt;
}
}
@media screen and (min-width: 1200px) {
:root {
font-size: 12pt;
}
}
@media screen and (min-width: 1500px) {
:root {
font-size: 13pt;
}
}
@media screen and (min-width: 1800px) {
:root {
font-size: 14pt;
}
}
@media screen and (min-width: 2500px) {
:root {
font-size: 15pt;
}
}
@media screen and (min-width: 3000px) {
:root {
font-size: 16pt;
}
}