Compare commits

...

24 Commits

Author SHA1 Message Date
Garrit Franke fccca87cd7 footer: update copyright 2 years ago
Garrit Franke e34c9bd675 feat: link to matrix lobby 3 years ago
Garrit Franke 98a645e49e
fix: invalid comment 3 years ago
Garrit Franke 55154c7468
feat: plausible analytics 3 years ago
Garrit Franke e354e27d20
Remove social.slashdev.space 3 years ago
TobTobXX 9f3c3c1cb4 Give some care for the scrollbars (#5) 3 years ago
Garrit Franke 57e228bbea
fix: darkmode color palette 3 years ago
Garrit Franke c22ec2d0de
feat: dark mode! 3 years ago
Garrit Franke f13b4fa7d5
feat: add matrix community 3 years ago
Garrit Franke d040d15143
feat: add meta tags 3 years ago
Garrit Franke 1981397235
fix: typo 3 years ago
Garrit Franke a94173c866
fix: donation link 3 years ago
Garrit Franke 179dc4eb34
feat: note about matrix public directory 3 years ago
Garrit Franke 5e6a10ef78
feat: better line height 3 years ago
Garrit Franke 6db4dd8d95
feat: liberapay donation button 3 years ago
Garrit Franke 9fc749a0e3
fix: text sizes 3 years ago
Garrit Franke 2c53164350
feat: add note for contributers 3 years ago
Garrit Franke d3b4f23a02
feat: support us section 3 years ago
Garrit Franke a97593356c
feat: contact section 3 years ago
Garrit Franke a2b2e52301
chore: refactor styles 3 years ago
Garrit Franke 22e933466d
feat: change services heading 3 years ago
Garrit Franke ee461fe98d Merge pull request 'chore: refactor grid to use flexbox' (#4) from grid2flex into main 3 years ago
Garrit Franke f075f52f63 chore: refactor grid to use flexbox 3 years ago
Garrit Franke 57e56ea5b7 Merge pull request 'More responsiveness (and other improvements)' (#3) from TobTobXX/slashdev.space-landing:gridify-service-cards into main 3 years ago
  1. 137
      index.html
  2. 36
      styles/atoms.css
  3. 17
      styles/contact.css
  4. 18
      styles/darkmode.css
  5. 18
      styles/index.css
  6. 117
      styles/services.css
  7. 16
      styles/support.css
  8. 25
      styles/typography.css
  9. 15
      styles/welcome.css

137
index.html

@ -4,67 +4,128 @@
<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">
<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">
<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 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">
<h1 class="services__offers__card__heading matrix-heading">Chat</h1>
<p class="services__offers__card__description matrix-description">
We're hosting our own Matrix server to keep in touch
and share ideas.
</p>
<a
href="https://matrix.slashdev.space"
class="services__offers_card__button matrix-button"
>
<p>Join here!</p>
</a>
<div class="services__offers__card">
<h1 class="services__offers__card__heading">Chat</h1>
<p class="services__offers__card__description">
We're hosting our own Matrix server to keep in touch
and share ideas.
</p>
<a
href="https://matrix.slashdev.space"
class="button__link"
>
<p>Join a room</p>
</a>
</div>
<h1 class="services__offers__card__heading git-heading">
Code Hosting
</h1>
<p class="services__offers__card__description git-description">
We use Gitea to collaboratively work on our code.
</p>
<div class="services__offers__card">
<h1 class="services__offers__card__heading">
Code Hosting
</h1>
<p class="services__offers__card__description">
We use Gitea to collaboratively work on our code.
</p>
<a
href="https://git.slashdev.space"
class="button__link"
>
<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">
We provide free Kanban boards to plan your projects.
</p>
<a
href="https://boards.slashdev.space"
class="button__link"
>
<p>Get agile</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
href="https://git.slashdev.space"
class="services__offers_card__button git-button"
class="button__link support-us__donations__button"
href="https://donate.slashdev.space"
><p>Donate with Fosspay</p></a
>
<p>Set up your account!</p>
</a>
<h1 class="services__offers__card__heading boards-heading">Boards</h1>
<p class="services__offers__card__description boards-description">
We provide free Kanban boards to plan your projects.
</p>
<a
href="https://boards.slashdev.space"
class="services__offers_card__button boards-button"
class="button__link support-us__donations__button"
href="https://liberapay.com/slashdev.space/donate"
><p>Donate with Liberapay</p></a
>
<p>Get agile!</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

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

18
styles/darkmode.css

@ -0,0 +1,18 @@
@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,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 {
@ -14,8 +22,18 @@
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;
}

117
styles/services.css

@ -2,25 +2,25 @@
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.services__heading {
font-size: 3.3rem;
font-weight: 350;
margin-bottom: 1.5rem;
}
.services__offers {
display: grid;
grid-template-areas:
"matrix-heading git-heading boards-heading"
"matrix-description git-description boards-description"
"matrix-button git-button boards-button";
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 80vw;
padding: 0 10vw;
}
.services__offers__card {
height: 15rem;
width: 20rem;
}
.services__offers__card__heading {
font-weight: 350;
font-size: 2rem;
@ -29,100 +29,33 @@
.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: 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;
}
.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 {
margin-bottom: 3rem;
}
.services__offers__card__description {
font-size: 1.1rem;
font-size: 1.3rem;
height: auto;
}
}
/* 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 {
width: 100vw;
padding: 0;
}
.services__offers__card__heading {
font-size: 2.8rem;
.services__offers__card {
width: 25rem;
margin-bottom: 3rem;
}
.services__offers__card__description {
font-size: 1.3rem;
}
.services__offers_card__button {
width: 14rem;
font-size: 1.3rem;
height: auto;
}
.services__offers__card__description {
width: 13rem;
}
}
}

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

15
styles/welcome.css

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

Loading…
Cancel
Save