Add a few project links, improve for small screens (closes #4)
This commit is contained in:
parent
4e38387f92
commit
c768b92cad
|
@ -7,6 +7,13 @@ isPage: true
|
|||
<section id="teaser">
|
||||
<h1><%= @document.title %></h1>
|
||||
<h2>Open-source group communication for the 21st century</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://wiki.67p.io">Wiki</a></li>
|
||||
<li><a href="https://github.com/67P">GitHub</a></li>
|
||||
<li><a href="https://twitter.com/KosmosHQ">Twitter</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--
|
||||
<p>
|
||||
Kosmos is a new kind of team communication service. All of it is based on
|
||||
|
|
|
@ -57,6 +57,48 @@ section#teaser {
|
|||
p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
width: 100%;
|
||||
ul {
|
||||
display: block;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
|
||||
@include display(flex);
|
||||
@include flex-direction(row);
|
||||
@include flex-wrap(nowrap);
|
||||
@include align-items(center);
|
||||
@include align-content(center);
|
||||
@include justify-content(center);
|
||||
@include flex-grow(1);
|
||||
|
||||
li {
|
||||
@include flex(1);
|
||||
height: 48px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 8px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 24px;
|
||||
@include transition(all linear 150ms);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
@include transition(all linear 150ms);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
|
@ -69,3 +111,11 @@ footer {
|
|||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
section#teaser {
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue