Browse Source

Merge remote-tracking branch 'upstream/main'

pull/5/head
FiliusPatris 3 years ago
parent
commit
60671313c6
Signed by untrusted user: TobTobXX
GPG Key ID: 12AC3D4752E2FA2E
  1. 1
      favicon.svg
  2. 97
      index.html
  3. 36
      styles/atoms.css
  4. 17
      styles/contact.css
  5. 14
      styles/darkmode.css
  6. 13
      styles/index.css
  7. 57
      styles/services.css
  8. 16
      styles/support.css
  9. 25
      styles/typography.css
  10. 31
      styles/welcome.css

1
favicon.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 100 100"><rect width="100" height="100" rx="0" fill="#000000"></rect><path d="M36.76 18.00L42.76 18.00L18.28 82L12.28 82L36.76 18.00ZM68.04 77.20L68.04 77.20Q63.08 77.20 58.92 74.72Q54.76 72.24 52.28 67.56Q49.80 62.88 49.80 56.40L49.80 56.40Q49.80 49.76 52.44 45.12Q55.08 40.48 59.40 38.04Q63.72 35.60 68.68 35.60L68.68 35.60Q73.64 35.60 77.28 38.16Q80.92 40.72 82.12 44.96L82.12 44.96L81.32 45.52L81.32 18.00L87.72 18.00L87.72 76.40L82.12 76.40L81.56 66.72L82.44 66.24Q81.88 69.76 79.76 72.20Q77.64 74.64 74.56 75.92Q71.48 77.20 68.04 77.20ZM68.68 71.60L68.68 71.60Q72.52 71.60 75.36 69.68Q78.20 67.76 79.76 64.20Q81.32 60.64 81.32 55.84L81.32 55.84Q81.32 51.28 79.76 48Q78.20 44.72 75.44 42.96Q72.68 41.20 69 41.20L69 41.20Q62.92 41.20 59.56 45.36Q56.20 49.52 56.20 56.40L56.20 56.40Q56.20 63.28 59.48 67.44Q62.76 71.60 68.68 71.60Z" fill="#fff"></path></svg>

After

Width:  |  Height:  |  Size: 941 B

97
index.html

@ -4,28 +4,33 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Where developers can collectively learn and grow.">
<meta name="keywords" content="Developers, Dev, Community, Open, Free">
<title>/dev.space</title>
<link rel="stylesheet" href="styles/index.css" />
<link rel="shortcut icon" href="favicon.svg" type="image/svg+xml" />
</head>
<body>
<section class="welcome">
<div class="welcome__container">
<h1 class="welcome__text-area__heading">
/dev.space
</h1>
<h1 class="welcome__text-area__heading">/dev.space</h1>
<h3 class="welcome__text-area__subheading">
Where developers can collectively learn an grow.
Where developers can collectively learn and grow.
</h3>
<p class="welcome__text-area__description">
<p class="description">
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.
</p>
</div>
</section>
<section class="services">
<div class="services__container">
<h1 class="services__heading">What you get</h1>
<h2 class="services__heading">Our Services</h2>
<p class="description">
Our suite of online services helps you turn your project
ideas into reality.
</p>
<div class="services__offers">
<div class="services__offers__card">
<h1 class="services__offers__card__heading">Chat</h1>
@ -35,11 +40,12 @@
</p>
<a
href="https://matrix.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
Join here!
<p>Join a room</p>
</a>
</div>
<div class="services__offers__card">
<h1 class="services__offers__card__heading">
Code Hosting
@ -49,11 +55,12 @@
</p>
<a
href="https://git.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
Set up your account!
<p>Set up your account</p>
</a>
</div>
<div class="services__offers__card">
<h1 class="services__offers__card__heading">Boards</h1>
<p class="services__offers__card__description">
@ -61,13 +68,75 @@
</p>
<a
href="https://boards.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
Get agile!
<p>Get agile</p>
</a>
</div>
<div class="services__offers__card">
<h1 class="services__offers__card__heading">
Fediverse
</h1>
<p class="services__offers__card__description">
We host our own federated social media instance.
</p>
<a
href="https://social.slashdev.space"
class="button__link"
>
<p>Toot with us</p>
</a>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="contact__container">
<h2>How to join</h2>
<p>
/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!
</p>
<a
class="button__link button__contact"
href="https://matrix.to/#/+community:matrix.slashdev.space"
><p>+community:matrix.slashdev.space</p></a
>
</div>
</section>
<section class="support-us">
<div class="support-us__container">
<h2>Support Us</h2>
<p>
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.
</p>
<div class="support-us__donations__container">
<a
class="button__link support-us__donations__button"
href="https://donate.slashdev.space"
><p>Donate with Fosspay</p></a
>
<a
class="button__link support-us__donations__button"
href="https://liberapay.com/slashdev.space/donate"
><p>Donate with Liberapay</p></a
>
</div>
</div>
</section>
</body>
<footer>
Copyright © 2021 Garrit Franke and /dev.space contributers.<br />
This website is licensed under the
<a
href="https://git.slashdev.space/garrit/slashdev.space-landing/src/branch/main/LICENSE"
>MIT License</a
>. The source code for this website can be found
<a href="https://git.slashdev.space/garrit/slashdev.space-landing"
>here</a
>.
</footer>
</html>

36
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;
}

17
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;
}
}

14
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;
}
}

13
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;
}

57
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;
}
}

16
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;
}

25
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;
}

31
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;
}
}
Loading…
Cancel
Save