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 e706795..4487e04 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ /dev.space +
@@ -14,7 +15,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 @@ -27,45 +28,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..31298fb 100644 --- a/styles/services.css +++ b/styles/services.css @@ -3,25 +3,24 @@ 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 { - display: flex; - width: 100vw; - justify-content: space-evenly; - flex-wrap: wrap; + display: grid; + grid-template-areas: + "matrix-heading git-heading boards-heading" + "matrix-description git-description boards-description" + "matrix-button git-button boards-button"; + width: 80vw; + padding: 0 10vw; } -.services__offers__card { - width: 15rem; -} .services__offers__card__heading { font-weight: 350; font-size: 2rem; @@ -29,20 +28,101 @@ .services__offers__card__description { margin-bottom: 1rem; + margin: 0 3rem; } .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; } + +.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) { + .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; + } +} + +/* 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 f740369..e6f00c3 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 { @@ -31,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