Browse Source

Merge pull request 'More responsiveness (and other improvements)' (#3) from TobTobXX/slashdev.space-landing:gridify-service-cards into main

Reviewed-on: garrit/slashdev.space-landing#3
grid2flex
Garrit Franke 3 years ago
parent
commit
57e56ea5b7
  1. 1
      favicon.svg
  2. 77
      index.html
  3. 102
      styles/services.css
  4. 16
      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

77
index.html

@ -6,6 +6,7 @@
<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">
</head>
<body>
<section class="welcome">
@ -14,7 +15,7 @@
/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">
Whether you're freshly starting out, or you are just looking
@ -27,45 +28,41 @@
<div class="services__container">
<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="services__offers_card__button"
>
Join here!
</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="services__offers_card__button"
>
Set up your account!
</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="services__offers_card__button"
>
Get agile!
</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>
<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>
<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>
</div>
</section>

102
styles/services.css

@ -3,25 +3,24 @@
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;
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 {
width: 15rem;
}
.services__offers__card__heading {
font-weight: 350;
font-size: 2rem;
@ -29,20 +28,101 @@
.services__offers__card__description {
margin-bottom: 1rem;
margin: 0 3rem;
}
.services__offers_card__button {
font-weight: 350;
background: black;
border: 0px;
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 {
border: 1px solid black;
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__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;
}
}

16
styles/welcome.css

@ -23,6 +23,9 @@
text-align: center;
margin-top: 0;
margin-bottom: 2em;
max-width: 80vw;
margin-left: auto;
margin-right: auto;
}
.welcome__text-area__description {
@ -31,4 +34,17 @@
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