Compare commits

..

No commits in common. 'main' and 'grid2flex' have entirely different histories.

  1. 89
      index.html
  2. 36
      styles/atoms.css
  3. 17
      styles/contact.css
  4. 18
      styles/darkmode.css
  5. 18
      styles/index.css
  6. 39
      styles/services.css
  7. 16
      styles/support.css
  8. 25
      styles/typography.css
  9. 15
      styles/welcome.css

89
index.html

@ -4,14 +4,9 @@
<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" />
<!-- Plausible analytics -->
<script async defer data-domain="slashdev.space" src="https://analytics.slashdev.space/js/plausible.js"></script>
</head>
<body>
<section class="welcome">
@ -20,20 +15,16 @@
<h3 class="welcome__text-area__subheading">
Where developers can collectively learn and grow.
</h3>
<p class="description">
<p class="welcome__text-area__description">
Whether you're freshly starting out, or you are just looking
to connect with likeminded people. /dev.space is the
community you've been looking for.
to connect with likeminded people. Our suite of online
services helps you turn your project ideas into reality.
</p>
</div>
</section>
<section class="services">
<div class="services__container">
<h2 class="services__heading">Our Services</h2>
<p class="description">
Our suite of online services helps you turn your project
ideas into reality.
</p>
<h1 class="services__heading">What you get</h1>
<div class="services__offers">
<div class="services__offers__card">
<h1 class="services__offers__card__heading">Chat</h1>
@ -43,9 +34,9 @@
</p>
<a
href="https://matrix.slashdev.space"
class="button__link"
class="services__offers_card__button"
>
<p>Join a room</p>
<p>Join here!</p>
</a>
</div>
@ -58,9 +49,9 @@
</p>
<a
href="https://git.slashdev.space"
class="button__link"
class="services__offers_card__button"
>
<p>Set up your account</p>
<p>Set up your account!</p>
</a>
</div>
@ -71,61 +62,25 @@
</p>
<a
href="https://boards.slashdev.space"
class="button__link"
class="services__offers_card__button"
>
<p>Get agile</p>
<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="services__offers_card__button"
>
<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/#/#lobby:matrix.slashdev.space"
><p>#lobby: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 © 2022 <a href="https://garrit.xyz">Garrit Franke</a> 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

@ -1,36 +0,0 @@
.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

@ -1,17 +0,0 @@
.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;
}
}

18
styles/darkmode.css

@ -1,18 +0,0 @@
@media (prefers-color-scheme: dark) {
:root {
background-color: #161618;
color: #dbd7db;
}
html {
scrollbar-color: #dbd7db #161618 !important;
}
.button__link {
background-color: #67676c;
}
a {
color: #dbd7db;
}
}

18
styles/index.css

@ -1,14 +1,6 @@
@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 {
@ -22,18 +14,8 @@
font-style: italic;
}
html {
scrollbar-color: black white;
}
body {
margin: 0;
font-family: "Work Sans", sans-serif;
font-weight: 250;
overflow-x: hidden;
text-align: center;
}
footer {
margin-bottom: 2rem;
}

39
styles/services.css

@ -2,9 +2,12 @@
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.services__heading {
font-size: 3.3rem;
font-weight: 350;
margin-bottom: 1.5rem;
}
@ -30,17 +33,29 @@
margin-bottom: 1rem;
margin: 0 3rem;
height: 3rem;
font-size: 1rem;
}
@media only screen and (max-width: 520px) {
.services__offers__card {
margin-bottom: 3rem;
}
.services__offers__card__description {
font-size: 1.3rem;
height: auto;
}
.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 {
margin: auto;
}
.services__offers_card__button:hover {
color: black;
background: white;
}
@media only screen and (max-width: 380px) {
@ -51,11 +66,5 @@
.services__offers__card {
width: 25rem;
margin-bottom: 3rem;
}
.services__offers__card__description {
font-size: 1.3rem;
height: auto;
}
}

16
styles/support.css

@ -1,16 +0,0 @@
.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

@ -1,25 +0,0 @@
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;
}

15
styles/welcome.css

@ -2,13 +2,25 @@
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;
@ -17,6 +29,9 @@
}
.welcome__text-area__description {
font-size: 1.5rem;
font-weight: 200;
text-align: center;
margin-left: 12vw;
margin-right: 12vw;
}

Loading…
Cancel
Save