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

Merge pull request 'chore: refactor grid to use flexbox' (#4) from grid2flex into main 

Reviewed-on: garrit/slashdev.space-landing#4
main
Garrit Franke 3 years ago
parent
57e56ea5b7 f075f52f63
commit
ee461fe98d
2 changed files with 69 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      index.html
  2. 86
      styles/services.css

94
index.html
Unescape View File

@ -6,21 +6,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>/dev.space</title> <title>/dev.space</title>
<link rel="stylesheet" href="styles/index.css" /> <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" />
</head> </head>
<body> <body>
<section class="welcome"> <section class="welcome">
<div class="welcome__container"> <div class="welcome__container">
<h1 class="welcome__text-area__heading"> <h1 class="welcome__text-area__heading">/dev.space</h1>
/dev.space
</h1>
<h3 class="welcome__text-area__subheading"> <h3 class="welcome__text-area__subheading">
Where developers can collectively learn and grow. Where developers can collectively learn and grow.
</h3> </h3>
<p class="welcome__text-area__description"> <p class="welcome__text-area__description">
Whether you're freshly starting out, or you are just looking Whether you're freshly starting out, or you are just looking
to connect with likeminded people. Our suite of online services to connect with likeminded people. Our suite of online
helps you turn your project ideas into reality. services helps you turn your project ideas into reality.
</p> </p>
</div> </div>
</section> </section>
@ -28,41 +26,59 @@
<div class="services__container"> <div class="services__container">
<h1 class="services__heading">What you get</h1> <h1 class="services__heading">What you get</h1>
<div class="services__offers"> <div class="services__offers">
<h1 class="services__offers__card__heading matrix-heading">Chat</h1> <div class="services__offers__card">
<p class="services__offers__card__description matrix-description"> <h1 class="services__offers__card__heading">Chat</h1>
We're hosting our own Matrix server to keep in touch <p class="services__offers__card__description">
and share ideas. We're hosting our own Matrix server to keep in touch
</p> and share ideas.
<a </p>
href="https://matrix.slashdev.space" <a
class="services__offers_card__button matrix-button" href="https://matrix.slashdev.space"
> class="services__offers_card__button"
<p>Join here!</p> >
</a> <p>Join here!</p>
</a>
</div>
<h1 class="services__offers__card__heading git-heading"> <div class="services__offers__card">
Code Hosting <h1 class="services__offers__card__heading">
</h1> Code Hosting
<p class="services__offers__card__description git-description"> </h1>
We use Gitea to collaboratively work on our code. <p class="services__offers__card__description">
</p> We use Gitea to collaboratively work on our code.
<a </p>
href="https://git.slashdev.space" <a
class="services__offers_card__button git-button" href="https://git.slashdev.space"
> class="services__offers_card__button"
<p>Set up your account!</p> >
</a> <p>Set up your account!</p>
</a>
</div>
<h1 class="services__offers__card__heading boards-heading">Boards</h1> <div class="services__offers__card">
<p class="services__offers__card__description boards-description"> <h1 class="services__offers__card__heading">Boards</h1>
We provide free Kanban boards to plan your projects. <p class="services__offers__card__description">
</p> We provide free Kanban boards to plan your projects.
<a </p>
href="https://boards.slashdev.space" <a
class="services__offers_card__button boards-button" href="https://boards.slashdev.space"
> class="services__offers_card__button"
<p>Get agile!</p> >
</a> <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>
</div> </div>
</section> </section>

86
styles/services.css
Unescape View File

@ -12,15 +12,18 @@
} }
.services__offers { .services__offers {
display: grid; display: flex;
grid-template-areas: flex-wrap: wrap;
"matrix-heading git-heading boards-heading" justify-content: space-evenly;
"matrix-description git-description boards-description"
"matrix-button git-button boards-button";
width: 80vw; width: 80vw;
padding: 0 10vw; padding: 0 10vw;
} }
.services__offers__card {
height: 15rem;
width: 20rem;
}
.services__offers__card__heading { .services__offers__card__heading {
font-weight: 350; font-weight: 350;
font-size: 2rem; font-size: 2rem;
@ -29,6 +32,7 @@
.services__offers__card__description { .services__offers__card__description {
margin-bottom: 1rem; margin-bottom: 1rem;
margin: 0 3rem; margin: 0 3rem;
height: 3rem;
} }
.services__offers_card__button { .services__offers_card__button {
@ -54,75 +58,13 @@
background: white; background: white;
} }
.matrix-heading {grid-area: matrix-heading;} @media only screen and (max-width: 380px) {
.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 { .services__offers {
grid-template-areas: width: 100vw;
"matrix-heading" padding: 0;
"matrix-description"
"matrix-button"
"git-heading"
"git-description"
"git-button"
"boards-heading"
"boards-description"
"boards-button";
} }
.services__offers_card__button { .services__offers__card {
margin: 2rem auto; width: 25rem;
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__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) {
.welcome__text-area__description {
font-size: 1.7rem;
}
.services__heading {
font-size: 4rem;
}
.services__offers__card__heading {
font-size: 2.8rem;
}
.services__offers__card__description {
font-size: 1.3rem;
}
.services__offers_card__button {
width: 14rem;
font-size: 1.3rem;
}
.services__offers__card__description {
width: 13rem;
}
}
Write Preview
Loading…
Cancel
Save