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..1628d4f 100644 --- a/index.html +++ b/index.html @@ -4,28 +4,33 @@ + + /dev.space +
-

- /dev.space -

+

/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 - to connect with likeminded people. Our suite of online services - helps you turn your project ideas into reality. + to connect with likeminded people. /dev.space is the + community you've been looking for.

-

What you get

+

Our Services

+

+ Our suite of online services helps you turn your project + ideas into reality. +

Chat

@@ -35,11 +40,12 @@

- Join here! +

Join a room
+

Code Hosting @@ -49,11 +55,12 @@

- Set up your account! +

Set up your account

+

Boards

@@ -61,13 +68,75 @@

- Get agile! +

Get agile
+
+

+ Fediverse +

+

+ We host our own federated social media instance. +

+ +

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! +

+

+community:matrix.slashdev.space

 +
+
+
+
+

Support Us

+

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

+
+

Donate with Fosspay

 +

Donate with Liberapay
+ diff --git a/styles/atoms.css b/styles/atoms.css new file mode 100644 index 0000000..c18b99a --- /dev/null +++ b/styles/atoms.css @@ -0,0 +1,36 @@ +.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; +} + +@media only screen and (max-width: 520px) { + .button__link p { + font-size: 1.3rem; + } +} + +/* Description */ + +.description { + margin-right: 12vw; + margin-left: 12vw; +} \ No newline at end of file diff --git a/styles/contact.css b/styles/contact.css new file mode 100644 index 0000000..af16740 --- /dev/null +++ b/styles/contact.css @@ -0,0 +1,17 @@ +.contact__container { + width: 80vw; + margin: auto; + justify-content: center; +} + +.button__contact { + margin: auto; + margin-bottom: 2rem; + width: 20rem; +} + +@media only screen and (max-width: 520px) { + .button__contact { + width: auto; + } +} \ No newline at end of file diff --git a/styles/darkmode.css b/styles/darkmode.css new file mode 100644 index 0000000..26790f9 --- /dev/null +++ b/styles/darkmode.css @@ -0,0 +1,14 @@ +@media (prefers-color-scheme: dark) { + :root { + background-color: #161618; + color: #dbd7db; + } + + .button__link { + background-color: #67676c; + } + + a { + color: #dbd7db; + } +} diff --git a/styles/index.css b/styles/index.css index 0cf8923..8712674 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,6 +1,14 @@ +@import url("./typography.css"); +@import url("./atoms.css"); +@import url("./darkmode.css"); + + /* Components */ @import url("./welcome.css"); @import url("./services.css"); +@import url("./contact.css"); +@import url("./support.css"); + /* Fonts */ @font-face { @@ -19,4 +27,9 @@ body { font-family: "Work Sans", sans-serif; font-weight: 250; overflow-x: hidden; + text-align: center; +} + +footer { + margin-bottom: 2rem; } diff --git a/styles/services.css b/styles/services.css index 4baf097..53482db 100644 --- a/styles/services.css +++ b/styles/services.css @@ -2,26 +2,25 @@ align-items: center; 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; + justify-content: space-evenly; + width: 80vw; + padding: 0 10vw; } .services__offers__card { - width: 15rem; + height: 15rem; + width: 20rem; } + .services__offers__card__heading { font-weight: 350; font-size: 2rem; @@ -29,20 +28,34 @@ .services__offers__card__description { margin-bottom: 1rem; + margin: 0 3rem; + height: 3rem; + font-size: 1rem; } -.services__offers_card__button { - font-weight: 350; - background: black; - border: 0px; - color: white; - text-decoration: none; - padding: 0.6rem 2rem; - transition: 0.2s; -} - -.services__offers_card__button:hover { - border: 1px solid black; - color: black; - background: white; +@media only screen and (max-width: 520px) { + .services__offers__card { + margin-bottom: 3rem; + } + .services__offers__card__description { + font-size: 1.3rem; + height: auto; + } +} + +@media only screen and (max-width: 380px) { + .services__offers { + width: 100vw; + padding: 0; + } + + .services__offers__card { + width: 25rem; + margin-bottom: 3rem; + } + + .services__offers__card__description { + font-size: 1.3rem; + height: auto; + } } diff --git a/styles/support.css b/styles/support.css new file mode 100644 index 0000000..7d90504 --- /dev/null +++ b/styles/support.css @@ -0,0 +1,16 @@ +.support-us__container { + width: 80vw; + margin: auto; + justify-content: center +} + +.support-us__donations__container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 2rem; +} + +.support-us__donations__button { + margin: 1rem; +} \ No newline at end of file diff --git a/styles/typography.css b/styles/typography.css new file mode 100644 index 0000000..79202f8 --- /dev/null +++ b/styles/typography.css @@ -0,0 +1,25 @@ +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; + line-height: 1.3; +} + +a { + color: black; +} \ No newline at end of file diff --git a/styles/welcome.css b/styles/welcome.css index f740369..9bd72ad 100644 --- a/styles/welcome.css +++ b/styles/welcome.css @@ -2,33 +2,34 @@ 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; + margin-left: auto; + margin-right: auto; } .welcome__text-area__description { - font-size: 1.5rem; - font-weight: 200; - 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