From 2327880c41c4881d0df77b0a55b4b1a47670fe30 Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 17:27:35 +0100 Subject: [PATCH 01/24] Put the cards into a css grid --- index.html | 74 +++++++++++++++++++++------------------------ styles/services.css | 23 ++++++++++---- 2 files changed, 52 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index e706795..e0645b9 100644 --- a/index.html +++ b/index.html @@ -27,45 +27,41 @@

What you get

-
-

Chat

-

- We're hosting our own Matrix server to keep in touch - and share ideas. -

- - Join here! - -
-
-

- Code Hosting -

-

- We use Gitea to collaboratively work on our code. -

- - Set up your account! - -
-
-

Boards

-

- We provide free Kanban boards to plan your projects. -

- - Get agile! - -
+

Chat

+

+ We're hosting our own Matrix server to keep in touch + and share ideas. +

+ + Join here! + + +

+ Code Hosting +

+

+ We use Gitea to collaboratively work on our code. +

+ + Set up your account! + + +

Boards

+

+ We provide free Kanban boards to plan your projects. +

+ + Get agile! +
diff --git a/styles/services.css b/styles/services.css index 4baf097..6f5175e 100644 --- a/styles/services.css +++ b/styles/services.css @@ -13,15 +13,14 @@ } .services__offers { - display: flex; + display: grid; + grid-template-areas: + "matrix-heading git-heading boards-heading" + "matrix-description git-description boards-description" + "matrix-button git-button boards-button"; width: 100vw; - justify-content: space-evenly; - flex-wrap: wrap; } -.services__offers__card { - width: 15rem; -} .services__offers__card__heading { font-weight: 350; font-size: 2rem; @@ -46,3 +45,15 @@ color: black; background: white; } + +.matrix-heading {grid-area: matrix-heading;} +.matrix-description {grid-area: matrix-description;} +.matrix-button {grid-area: matrix-button;} + +.git-heading {grid-area: git-heading;} +.git-description {grid-area: git-description;} +.git-button {grid-area: git-button;} + +.boards-heading {grid-area: boards-heading;} +.boards-description {grid-area: boards-description;} +.boards-button {grid-area: boards-button;} \ No newline at end of file From 8b1f9031bb016041f6ce03be9fbada2a1a1726cc Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 17:30:47 +0100 Subject: [PATCH 02/24] Make cards look good again --- styles/services.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/styles/services.css b/styles/services.css index 6f5175e..f3e3166 100644 --- a/styles/services.css +++ b/styles/services.css @@ -18,7 +18,8 @@ "matrix-heading git-heading boards-heading" "matrix-description git-description boards-description" "matrix-button git-button boards-button"; - width: 100vw; + width: 80vw; + padding: 0 10vw; } .services__offers__card__heading { @@ -28,6 +29,7 @@ .services__offers__card__description { margin-bottom: 1rem; + margin: 0 3rem; } .services__offers_card__button { @@ -37,6 +39,7 @@ color: white; text-decoration: none; padding: 0.6rem 2rem; + margin: 2rem 2.5rem; transition: 0.2s; } From c5cd2ca76d78ae9b076746f8aed9d6ae0d0e4494 Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 17:32:42 +0100 Subject: [PATCH 03/24] Balance vertical margins --- styles/services.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/styles/services.css b/styles/services.css index f3e3166..4676543 100644 --- a/styles/services.css +++ b/styles/services.css @@ -3,13 +3,12 @@ display: flex; justify-content: center; text-align: center; - margin-top: 2rem; } .services__heading { font-size: 3.3rem; font-weight: 350; - margin-bottom: 1rem; + margin-bottom: 1.5rem; } .services__offers { From c450dd558a4a2964687ade72c9051065d0905267 Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 17:36:57 +0100 Subject: [PATCH 04/24] Fix typo --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e0645b9..106180c 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ /dev.space

- Where developers can collectively learn an grow. + Where developers can collectively learn and grow.

Whether you're freshly starting out, or you are just looking From 4d95765d87a428c3aeabd1845bb718eafc69645e Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 23:10:07 +0100 Subject: [PATCH 05/24] Add favicon --- favicon.svg | 1 + index.html | 1 + 2 files changed, 2 insertions(+) create mode 100644 favicon.svg diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..0964547 --- /dev/null +++ b/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 106180c..0684946 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ /dev.space +

From f83ff1a3dd8320aecdd805294b7f1d5397ef5942 Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 23:47:33 +0100 Subject: [PATCH 06/24] Responsiveness for computer > size > phone --- styles/services.css | 28 +++++++++++++++++++++++++++- styles/welcome.css | 3 +++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/styles/services.css b/styles/services.css index 4676543..9696643 100644 --- a/styles/services.css +++ b/styles/services.css @@ -58,4 +58,30 @@ .boards-heading {grid-area: boards-heading;} .boards-description {grid-area: boards-description;} -.boards-button {grid-area: boards-button;} \ No newline at end of file +.boards-button {grid-area: boards-button;} + +/* The "Join here!" button wraps at 857px, so this is the breakpoint. */ +@media only screen and (max-width: 858px) { + .services__offers { + grid-template-areas: + "matrix-heading" + "matrix-description" + "matrix-button" + "git-heading" + "git-description" + "git-button" + "boards-heading" + "boards-description" + "boards-button"; + } + + .services__offers_card__button { + margin: 2rem auto; + width: 11em; + } + + .services__offers__card__description { + margin: 0 auto; + width: 9rem; + } +} \ No newline at end of file diff --git a/styles/welcome.css b/styles/welcome.css index f740369..b4d1317 100644 --- a/styles/welcome.css +++ b/styles/welcome.css @@ -23,6 +23,9 @@ text-align: center; margin-top: 0; margin-bottom: 2em; + max-width: 80vw; + margin-left: auto; + margin-right: auto; } .welcome__text-area__description { From a64c9676b21d432190ac68d8074cc66f30d70b53 Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sun, 28 Mar 2021 00:06:20 +0100 Subject: [PATCH 07/24] Responsive down to about 315px I'm not too sure, but I don't think there are tons of devices lower than this width. --- styles/services.css | 35 +++++++++++++++++++++++++++++++++++ styles/welcome.css | 13 +++++++++++++ 2 files changed, 48 insertions(+) diff --git a/styles/services.css b/styles/services.css index 9696643..5262251 100644 --- a/styles/services.css +++ b/styles/services.css @@ -84,4 +84,39 @@ margin: 0 auto; width: 9rem; } +} + +/* At smaller than 520px the fonts get too large to fit in one line */ +@media only screen and (max-width: 520px) { + .services__heading { + font-size: 3.8rem; + } + .services__offers__card__heading { + font-size: 2.5rem; + } + .services__offers__card__description { + font-size: 1.1rem; + } +} +/* At smaller than 380px the fonts get too large again to fit in one line */ +@media only screen and (max-width: 380px) { + .welcome__text-area__description { + font-size: 1.7rem; + } + .services__heading { + font-size: 4rem; + } + .services__offers__card__heading { + font-size: 2.8rem; + } + .services__offers__card__description { + font-size: 1.3rem; + } + .services__offers_card__button { + width: 14rem; + font-size: 1.3rem; + } + .services__offers__card__description { + width: 13rem; + } } \ No newline at end of file diff --git a/styles/welcome.css b/styles/welcome.css index b4d1317..e6f00c3 100644 --- a/styles/welcome.css +++ b/styles/welcome.css @@ -34,4 +34,17 @@ text-align: center; margin-left: 12vw; margin-right: 12vw; +} + +/* At smaller than 520px the fonts get too large to fit in one line */ +@media only screen and (max-width: 520px) { + :root { + font-size: .8em; + } +} +/* At smaller than 380px the fonts get too large again to fit in one line */ +@media only screen and (max-width: 380px) { + :root { + font-size: .6em; + } } \ No newline at end of file From fc064fb28291684276f73c7b590234cc6d99ff3b Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sun, 28 Mar 2021 12:29:18 +0200 Subject: [PATCH 08/24] Center text in buttons --- index.html | 6 +++--- styles/services.css | 10 ++++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 0684946..4487e04 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@ href="https://matrix.slashdev.space" class="services__offers_card__button matrix-button" > - Join here! +

Join here!

@@ -50,7 +50,7 @@ href="https://git.slashdev.space" class="services__offers_card__button git-button" > - Set up your account! +

Set up your account!

Boards

@@ -61,7 +61,7 @@ href="https://boards.slashdev.space" class="services__offers_card__button boards-button" > - Get agile! +

Get agile!

diff --git a/styles/services.css b/styles/services.css index 5262251..31298fb 100644 --- a/styles/services.css +++ b/styles/services.css @@ -34,16 +34,22 @@ .services__offers_card__button { font-weight: 350; background: black; - border: 0px; + border: 1px solid black; color: white; text-decoration: none; padding: 0.6rem 2rem; margin: 2rem 2.5rem; transition: 0.2s; + + display: flex; + align-items: center; +} + +.services__offers_card__button > p { + margin: auto; } .services__offers_card__button:hover { - border: 1px solid black; color: black; background: white; } From f075f52f633ff8de065e56b8266e2b2839feaaff Mon Sep 17 00:00:00 2001 From: Garrit Franke Date: Sun, 28 Mar 2021 20:37:15 +0200 Subject: [PATCH 09/24] chore: refactor grid to use flexbox --- index.html | 94 ++++++++++++++++++++++++++------------------- styles/services.css | 86 +++++++---------------------------------- 2 files changed, 69 insertions(+), 111 deletions(-) diff --git a/index.html b/index.html index 4487e04..1a859d1 100644 --- a/index.html +++ b/index.html @@ -6,21 +6,19 @@ /dev.space - +
-

- /dev.space -

+

/dev.space

Where developers can collectively learn and grow.

Whether you're freshly starting out, or you are just looking - to connect with likeminded people. Our suite of online services - helps you turn your project ideas into reality. + to connect with likeminded people. Our suite of online + services helps you turn your project ideas into reality.

@@ -28,41 +26,59 @@

What you get

-

Chat

-

- We're hosting our own Matrix server to keep in touch - and share ideas. -

- -

Join here!

- +
+

Chat

+

+ We're hosting our own Matrix server to keep in touch + and share ideas. +

+ +

Join here!

+ +
-

- Code Hosting -

-

- We use Gitea to collaboratively work on our code. -

- -

Set up your account!

- +
+

+ Code Hosting +

+

+ We use Gitea to collaboratively work on our code. +

+ +

Set up your account!

+ +
-

Boards

-

- We provide free Kanban boards to plan your projects. -

- -

Get agile!

- +
+

Boards

+

+ We provide free Kanban boards to plan your projects. +

+ +

Get agile!

+ +
+
+

Fediverse

+

+ We host our own federated social media instance. +

+ +

Toot with us!

+ +
diff --git a/styles/services.css b/styles/services.css index 31298fb..336e218 100644 --- a/styles/services.css +++ b/styles/services.css @@ -12,15 +12,18 @@ } .services__offers { - display: grid; - grid-template-areas: - "matrix-heading git-heading boards-heading" - "matrix-description git-description boards-description" - "matrix-button git-button boards-button"; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; width: 80vw; padding: 0 10vw; } +.services__offers__card { + height: 15rem; + width: 20rem; +} + .services__offers__card__heading { font-weight: 350; font-size: 2rem; @@ -29,6 +32,7 @@ .services__offers__card__description { margin-bottom: 1rem; margin: 0 3rem; + height: 3rem; } .services__offers_card__button { @@ -54,75 +58,13 @@ background: white; } -.matrix-heading {grid-area: matrix-heading;} -.matrix-description {grid-area: matrix-description;} -.matrix-button {grid-area: matrix-button;} - -.git-heading {grid-area: git-heading;} -.git-description {grid-area: git-description;} -.git-button {grid-area: git-button;} - -.boards-heading {grid-area: boards-heading;} -.boards-description {grid-area: boards-description;} -.boards-button {grid-area: boards-button;} - -/* The "Join here!" button wraps at 857px, so this is the breakpoint. */ -@media only screen and (max-width: 858px) { +@media only screen and (max-width: 380px) { .services__offers { - grid-template-areas: - "matrix-heading" - "matrix-description" - "matrix-button" - "git-heading" - "git-description" - "git-button" - "boards-heading" - "boards-description" - "boards-button"; + width: 100vw; + padding: 0; } - .services__offers_card__button { - margin: 2rem auto; - width: 11em; - } - - .services__offers__card__description { - margin: 0 auto; - width: 9rem; + .services__offers__card { + width: 25rem; } } - -/* At smaller than 520px the fonts get too large to fit in one line */ -@media only screen and (max-width: 520px) { - .services__heading { - font-size: 3.8rem; - } - .services__offers__card__heading { - font-size: 2.5rem; - } - .services__offers__card__description { - font-size: 1.1rem; - } -} -/* At smaller than 380px the fonts get too large again to fit in one line */ -@media only screen and (max-width: 380px) { - .welcome__text-area__description { - font-size: 1.7rem; - } - .services__heading { - font-size: 4rem; - } - .services__offers__card__heading { - font-size: 2.8rem; - } - .services__offers__card__description { - font-size: 1.3rem; - } - .services__offers_card__button { - width: 14rem; - font-size: 1.3rem; - } - .services__offers__card__description { - width: 13rem; - } -} \ No newline at end of file From 22e933466d206804cc2e162956fdaa31d5dd0350 Mon Sep 17 00:00:00 2001 From: Garrit Franke Date: Mon, 29 Mar 2021 10:33:09 +0200 Subject: [PATCH 10/24] feat: change services heading --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1a859d1..5833861 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
-

What you get

+

Our Services

Chat

From a2b2e52301de53c454dc4305e823928509766b81 Mon Sep 17 00:00:00 2001 From: Garrit Franke Date: Mon, 29 Mar 2021 22:10:08 +0200 Subject: [PATCH 11/24] chore: refactor styles --- styles/index.css | 3 +++ styles/services.css | 5 ++--- styles/typography.css | 20 ++++++++++++++++++++ styles/welcome.css | 15 --------------- 4 files changed, 25 insertions(+), 18 deletions(-) create mode 100644 styles/typography.css diff --git a/styles/index.css b/styles/index.css index f564248..441a3b2 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,5 @@ +@import url("./typography.css"); + /* Components */ @import url("./welcome.css"); @import url("./services.css"); @@ -18,4 +20,5 @@ body { margin: 0; font-family: "Work Sans", sans-serif; font-weight: 250; + text-align: center; } diff --git a/styles/services.css b/styles/services.css index 336e218..20beec3 100644 --- a/styles/services.css +++ b/styles/services.css @@ -2,12 +2,9 @@ align-items: center; display: flex; justify-content: center; - text-align: center; } .services__heading { - font-size: 3.3rem; - font-weight: 350; margin-bottom: 1.5rem; } @@ -33,6 +30,7 @@ margin-bottom: 1rem; margin: 0 3rem; height: 3rem; + font-size: 1rem; } .services__offers_card__button { @@ -50,6 +48,7 @@ } .services__offers_card__button > p { + font-size: 1rem; margin: auto; } diff --git a/styles/typography.css b/styles/typography.css new file mode 100644 index 0000000..f34f0c3 --- /dev/null +++ b/styles/typography.css @@ -0,0 +1,20 @@ +h1 { + font-size: 5rem; + font-weight: 400; + margin: 1rem; +} + +h2 { + font-size: 3.3rem; + font-weight: 350; +} + +h3 { + font-size: 2rem; + font-weight: 300; +} + +p { + font-size: 1.5rem; + font-weight: 200; +} \ No newline at end of file diff --git a/styles/welcome.css b/styles/welcome.css index e6f00c3..9bd72ad 100644 --- a/styles/welcome.css +++ b/styles/welcome.css @@ -2,25 +2,13 @@ align-items: center; display: flex; justify-content: center; - font-family: "Work Sans", sans-serif; } .welcome__container { margin-top: 8vh; - text-align: center; -} - -.welcome__text-area__heading { - font-size: 5rem; - font-weight: 400; - margin: 1rem; - text-align: center; } .welcome__text-area__subheading { - font-size: 2rem; - font-weight: 300; - text-align: center; margin-top: 0; margin-bottom: 2em; max-width: 80vw; @@ -29,9 +17,6 @@ } .welcome__text-area__description { - font-size: 1.5rem; - font-weight: 200; - text-align: center; margin-left: 12vw; margin-right: 12vw; } From a97593356cf5a5d5a5d9bff0f34aa1979738e089 Mon Sep 17 00:00:00 2001 From: Garrit Franke Date: Mon, 29 Mar 2021 22:45:09 +0200 Subject: [PATCH 12/24] feat: contact section --- index.html | 38 ++++++++++++++++++++++++++++---------- styles/atoms.css | 23 +++++++++++++++++++++++ styles/contact.css | 10 ++++++++++ styles/index.css | 3 +++ styles/services.css | 24 ------------------------ styles/typography.css | 4 ++++ 6 files changed, 68 insertions(+), 34 deletions(-) create mode 100644 styles/atoms.css create mode 100644 styles/contact.css diff --git a/index.html b/index.html index 5833861..2f3a98f 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
-

Our Services

+

Our Services

Chat

@@ -34,9 +34,9 @@

-

Join here!

+

Join a room
@@ -49,9 +49,9 @@

-

Set up your account!

+

Set up your account
@@ -62,25 +62,43 @@

-

Get agile!

+

Get agile
-

Fediverse

+

+ Fediverse +

We host our own federated social media instance.

-

Toot with us!

+

Toot with us
+
+
+

How to join

+

+ /dev.space is a free and open community. Anyone and everyone + is welcome. Simply join our Matrix server and chat with us. + Already got an account on another instance? Great! See + what's up in our lobby: +

+

#lobby:matrix.slashdev.space

 +
+
diff --git a/styles/atoms.css b/styles/atoms.css new file mode 100644 index 0000000..f16492e --- /dev/null +++ b/styles/atoms.css @@ -0,0 +1,23 @@ +.button__link { + font-weight: 350; + background: black; + border: 1px solid black; + color: white; + text-decoration: none; + padding: 0.6rem 2rem; + margin: 2rem 2.5rem; + transition: 0.2s; + + display: flex; + align-items: center; +} + +.button__link > p { + font-size: 1rem; + margin: auto; +} + +.button__link:hover { + color: black; + background: white; +} \ No newline at end of file diff --git a/styles/contact.css b/styles/contact.css new file mode 100644 index 0000000..6bf86ca --- /dev/null +++ b/styles/contact.css @@ -0,0 +1,10 @@ +.contact__container { + margin: auto 12vw; + justify-content: center; +} + +.button__contact { + margin: auto; + margin-bottom: 2rem; + width: 15rem; +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 441a3b2..0519ddd 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,8 +1,11 @@ @import url("./typography.css"); +@import url("./atoms.css"); + /* Components */ @import url("./welcome.css"); @import url("./services.css"); +@import url("./contact.css"); /* Fonts */ @font-face { diff --git a/styles/services.css b/styles/services.css index 20beec3..158a8d0 100644 --- a/styles/services.css +++ b/styles/services.css @@ -33,30 +33,6 @@ font-size: 1rem; } -.services__offers_card__button { - font-weight: 350; - background: black; - border: 1px solid black; - color: white; - text-decoration: none; - padding: 0.6rem 2rem; - margin: 2rem 2.5rem; - transition: 0.2s; - - display: flex; - align-items: center; -} - -.services__offers_card__button > p { - font-size: 1rem; - margin: auto; -} - -.services__offers_card__button:hover { - color: black; - background: white; -} - @media only screen and (max-width: 380px) { .services__offers { width: 100vw; diff --git a/styles/typography.css b/styles/typography.css index f34f0c3..131d18d 100644 --- a/styles/typography.css +++ b/styles/typography.css @@ -17,4 +17,8 @@ h3 { p { font-size: 1.5rem; font-weight: 200; +} + +a { + color: black; } \ No newline at end of file From d3b4f23a0227c742248bb456b7f1d49856c787e8 Mon Sep 17 00:00:00 2001 From: Garrit Franke Date: Mon, 29 Mar 2021 23:18:18 +0200 Subject: [PATCH 13/24] feat: support us section --- index.html | 26 ++++++++++++++++++++++++++ styles/contact.css | 3 ++- styles/index.css | 6 ++++++ styles/support.css | 5 +++++ 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 styles/support.css diff --git a/index.html b/index.html index 2f3a98f..d00312c 100644 --- a/index.html +++ b/index.html @@ -100,5 +100,31 @@ > +
+
+

Support Us

+

+ The services on this platform are 100% free of charge. + Hosting servers does have its price though. Concider + supporting us by leaving a small donation. +

+

Donate

 +
+
+
+ Copyright © 2021 Garrit Franke
+ This website is licensed under the + MIT License. The source code for this website can be found + here. +
diff --git a/styles/contact.css b/styles/contact.css index 6bf86ca..78244b8 100644 --- a/styles/contact.css +++ b/styles/contact.css @@ -1,5 +1,6 @@ .contact__container { - margin: auto 12vw; + width: 80vw; + margin: auto; justify-content: center; } diff --git a/styles/index.css b/styles/index.css index 0519ddd..3046510 100644 --- a/styles/index.css +++ b/styles/index.css @@ -6,6 +6,8 @@ @import url("./welcome.css"); @import url("./services.css"); @import url("./contact.css"); +@import url("./support.css"); + /* Fonts */ @font-face { @@ -25,3 +27,7 @@ body { font-weight: 250; text-align: center; } + +footer { + margin-bottom: 2rem; +} diff --git a/styles/support.css b/styles/support.css new file mode 100644 index 0000000..b251424 --- /dev/null +++ b/styles/support.css @@ -0,0 +1,5 @@ +.support-us__container { + width: 80vw; + margin: auto; + justify-content: center +} \ No newline at end of file From 2c53164350abc0a7c74e0010899389953082e9e7 Mon Sep 17 00:00:00 2001 From: Garrit Franke Date: Mon, 29 Mar 2021 23:23:03 +0200 Subject: [PATCH 14/24] feat: add note for contributers --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index d00312c..60c46a8 100644 --- a/index.html +++ b/index.html @@ -117,7 +117,7 @@