Compare commits

...

28 Commits

Author SHA1 Message Date
FiliusPatris 60671313c6
Merge remote-tracking branch 'upstream/main' 3 years ago
FiliusPatris dd5af942ca
Hide x-direction scrollbar 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
FiliusPatris fc064fb282
Center text in buttons 3 years ago
FiliusPatris a64c9676b2
Responsive down to about 315px 3 years ago
FiliusPatris f83ff1a3dd
Responsiveness for computer > size > phone 3 years ago
FiliusPatris 4d95765d87
Add favicon 3 years ago
FiliusPatris c450dd558a
Fix typo 3 years ago
FiliusPatris c5cd2ca76d
Balance vertical margins 3 years ago
FiliusPatris 8b1f9031bb
Make cards look good again 3 years ago
FiliusPatris 2327880c41
Put the cards into a css grid 3 years ago
  1. 1
      favicon.svg
  2. 97
      index.html
  3. 36
      styles/atoms.css
  4. 17
      styles/contact.css
  5. 14
      styles/darkmode.css
  6. 14
      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;
}
}

14
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 {
@ -18,4 +26,10 @@ body {
margin: 0;
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