Browse Source

chore: refactor grid to use flexbox

grid2flex
Garrit Franke 8 months ago
parent
commit
f075f52f63
  1. 94
      index.html
  2. 86
      styles/services.css

94
index.html

@ -6,21 +6,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" />
</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">
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. Our suite of online
services helps you turn your project ideas into reality.
</p>
</div>
</section>
@ -28,41 +26,59 @@
<div class="services__container">
<h1 class="services__heading">What you get</h1>
<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="services__offers_card__button"
>
<p>Join here!</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>
<a
href="https://git.slashdev.space"
class="services__offers_card__button git-button"
>
<p>Set up your account!</p>
</a>
<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="services__offers_card__button"
>
<p>Set up your account!</p>
</a>
</div>
<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"
>
<p>Get agile!</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="services__offers_card__button"
>
<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>

86
styles/services.css

@ -12,15 +12,18 @@
}
.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,6 +32,7 @@
.services__offers__card__description {
margin-bottom: 1rem;
margin: 0 3rem;
height: 3rem;
}
.services__offers_card__button {
@ -54,75 +58,13 @@
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) {
@media only screen and (max-width: 380px) {
.services__offers {
grid-template-areas:
"matrix-heading"
"matrix-description"
"matrix-button"
"git-heading"
"git-description"
"git-button"
"boards-heading"
"boards-description"
"boards-button";
width: 100vw;
padding: 0;
}
.services__offers_card__button {
margin: 2rem auto;
width: 11em;
}
.services__offers__card__description {
margin: 0 auto;
width: 9rem;
.services__offers__card {
width: 25rem;
}
}
/* 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;
}
}
Loading…
Cancel
Save