From 2327880c41c4881d0df77b0a55b4b1a47670fe30 Mon Sep 17 00:00:00 2001 From: FiliusPatris Date: Sat, 27 Mar 2021 17:27:35 +0100 Subject: [PATCH 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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; }