garrit
/
slashdev.space
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: garrit:main
Branches Tags
garrit:grid2flex
garrit:gridify-service-cards
garrit:main
garrit:restructure
garrit:simple.css
..
compare: garrit:gridify-service-cards
Branches Tags
garrit:grid2flex
garrit:gridify-service-cards
garrit:main
garrit:restructure
garrit:simple.css

No commits in common. 'main' and 'gridify-service-cards' have entirely different histories.
main ... gridify-se

9 changed files with 145 additions and 254 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  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
Unescape View File

@ -4,128 +4,67 @@
<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>
<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 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>
<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>
<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>
<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">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">
<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>
<a
class="button__link support-us__donations__button"
href="https://donate.slashdev.space"
><p>Donate with Fosspay</p></a
href="https://git.slashdev.space"
class="services__offers_card__button git-button"
>
<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
class="button__link support-us__donations__button"
href="https://liberapay.com/slashdev.space/donate"
><p>Donate with Liberapay</p></a
href="https://boards.slashdev.space"
class="services__offers_card__button boards-button"
>
<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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

117
styles/services.css
Unescape View File

@ -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: flex;
flex-wrap: wrap;
justify-content: space-evenly;
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 {
height: 15rem;
width: 20rem;
}
.services__offers__card__heading {
font-weight: 350;
font-size: 2rem;
@ -29,33 +29,100 @@
.services__offers__card__description {
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__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 {
font-size: 1.3rem;
height: auto;
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) {
.services__offers {
width: 100vw;
padding: 0;
.welcome__text-area__description {
font-size: 1.7rem;
}
.services__offers__card {
width: 25rem;
margin-bottom: 3rem;
.services__heading {
font-size: 4rem;
}
.services__offers__card__heading {
font-size: 2.8rem;
}
.services__offers__card__description {
font-size: 1.3rem;
height: auto;
}
.services__offers_card__button {
width: 14rem;
font-size: 1.3rem;
}
}
.services__offers__card__description {
width: 13rem;
}
}

16
styles/support.css
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save