Compare commits

...

4 Commits

Author SHA1 Message Date
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
  1. 1
      favicon.svg
  2. 3
      index.html
  3. 63
      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

3
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

63
styles/services.css

@ -58,4 +58,65 @@
.boards-heading {grid-area: boards-heading;}
.boards-description {grid-area: boards-description;}
.boards-button {grid-area: boards-button;}
.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