Commit 6972f36b authored by Tobias Bernard's avatar Tobias Bernard 🌱
Browse files

style: improve sizing and mobile layout, minor content changes

parent 93cd57b3
......@@ -60,8 +60,8 @@
<div class="block">
<img class="icon icon-shadow" src="assets/hardware.svg">
<h3 class="">Try on real hardware</h3>
<p>Something something about how to get it running on real hardware.</p>
<a href="" class="button small-button white-button">Coming Soon</a>
<p>This isn't quite ready yet, stay tuned for installation instructions.</p>
<a href="" class="button small-button white-button disabled-button">Coming Soon</a>
</div>
</div>
......@@ -83,7 +83,7 @@
<h3 class="">Get Involved</h3>
<p>Get in touch with the developers, ask questions, and join the fun.</p>
<a href="https://discourse.gnome.org/c/platform/5" class="button small-button blue-button">Discourse</a>
<a href="https://matrix.to/#/#_gimpnet_#gnome-os:gnome.org" class="button small-button white-button">IRC</a>
<a href="https://matrix.to/#/#_gimpnet_#gnome-os:gnome.org" class="button small-button white-button">IRC/Matrix</a>
</div>
</div>
......
......@@ -33,7 +33,7 @@
html, body {
margin: 0;
padding: 0;
font-size: 14px;
font-size: 16px;
font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif;
font-weight: 400;
line-height: 1.6;
......@@ -42,7 +42,7 @@ html, body {
}
@media (min-width: 700px) {
html, body {
font-size: 16px;
font-size: 18px;
}
}
body {
......@@ -68,18 +68,18 @@ a {
/* COMPONENTS */
.title {
font-size: 3rem;
font-size: 2.5rem;
text-align: center;
}
.subtitle {
display: block;
max-width: 20em;
margin: 2rem auto 0;
margin: 1.6rem auto 0.5rem;
text-align: center;
font-size: 1.5rem;
font-size: 1.1rem;
}
.small-print {
font-size: 1em;
font-size: 0.9em;
text-align: center;
max-width: 30em;
margin: 1.5rem auto 3rem;
......@@ -90,6 +90,7 @@ a {
border-radius: 99999px;
margin: 0 auto;
text-align: center;
/* font-size: 0.9em; */
font-weight: bold;
text-decoration: none;
transition: all 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28);
......@@ -110,10 +111,11 @@ a {
width: 80%;
margin: 1rem auto;
max-width: 14em;
font-weight: 600;
}
@media (min-width: 1100px) {
.small-button {
width: 45%;
width: 48%;
}
}
.blue-button {
......@@ -132,6 +134,16 @@ a {
background: linear-gradient(0deg, #c01c28 0%, #ed333b 100%);
color: white;
}
.disabled-button {
background: none;
opacity: 0.6;
color: white;
border: 2px solid #c0bfbc85;
}
.disabled-button:hover {
transform: none;
cursor: default;
}
.icon-shadow {
filter: /* Sharp drop shadow */
......@@ -168,7 +180,12 @@ a {
/* ONE-OFF */
.top-row {
padding: 8rem 0 3rem;
padding: 4rem 0 3rem;
}
@media (min-height: 700px) and (max-width: 500px) {
.top-row {
padding: 8rem 0 3rem;
}
}
.try-row {
overflow: hidden;
......@@ -182,29 +199,32 @@ a {
.laptop {
display: block;
margin: 0 auto;
margin: 2rem auto;
width: 100%;
}
@media (min-width: 700px) {
.laptop {
width: auto;
margin: 0 auto;
}
}
.download-button {
width: 12em;
padding: 0.9em 3em;
font-size: 1.4em;
font-size: 1.2em;
}
/* FOOTER */
footer {
background-color: black;
background-color: #131019;
text-align: center;
padding: 4em 0 4em;
color: white;
font-size: 0.9em;
}
footer a {
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
font-weight: 600;
color: white;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment