made the navigation responsive

1 files changed, 104 insertions, 0 deletions

diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 3f2b3641a..cea46ec0e 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -1,3 +1,32 @@
+.image-replacement {
+  text-indent: -1000%;
+  white-space: nowrap;
+  overflow: hidden; }
+
+.container {
+  max-width: 63.333333333em;
+  padding: 0 1em;
+  margin: 0 auto;
+  position: relative; }
+
+.unstyled-list, .unstyled, .site-nav ul {
+  margin-left: 0;
+  padding-left: 0;
+  list-style: none outside none; }
+
+.inline-list {
+  margin-left: -0.5em;
+  margin-bottom: 0; }
+  .inline-list li {
+    display: inline-block;
+    margin-left: 0.5em; }
+
+.text--center {
+  text-align: center; }
+
+.bg-default {
+  background: lightblue; }
+
 /* Alaveteli's purple */
 .hero, .what-is-alaveteli, .features, .get-started {
   padding: 2em 0; }
@@ -43,6 +72,78 @@ h3 {
     border-color: rgba(255, 255, 255, 0.2);
     text-decoration: none; }
 
+@media (min-width: 47.5em) {
+  .nav-position {
+    position: absolute;
+    top: 0.33em;
+    left: 180px; } }
+@media (min-width: 56.88889em) {
+  .nav-position {
+    left: 240px;
+    top: 0; } }
+
+.site-nav ul {
+  margin-top: 0; }
+@media (min-width: 47.5em) {
+  .site-nav li {
+    display: inline-block; } }
+.site-nav a {
+  color: #fff;
+  margin-right: 0.33em;
+  display: block;
+  padding: 0.33em;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
+  @media (min-width: 47.5em) {
+    .site-nav a {
+      display: inline-block;
+      border-bottom: none; } }
+  @media (min-width: 56.88889em) {
+    .site-nav a {
+      font-size: 1.125em;
+      margin-right: 0.66em; } }
+
+/*! responsive-nav.js 1.0.32 by @viljamis */
+.js .nav-collapse {
+  clip: rect(0 0 0 0);
+  max-height: 0;
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  zoom: 1; }
+
+.nav-collapse.opened {
+  max-height: 9999px; }
+
+.disable-pointer-events {
+  pointer-events: none !important; }
+
+.nav-toggle {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  position: absolute;
+  top: 0.1em;
+  right: 5em;
+  display: inline-block;
+  padding: 0.3em 0.75em;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  color: #fff;
+  font-size: 0.875em; }
+
+@media screen and (min-width: 47.5em) {
+  .js .nav-collapse {
+    position: relative; }
+
+  .js .nav-collapse.closed {
+    max-height: none; }
+
+  .nav-toggle {
+    display: none; } }
 .hero {
   background-color: #974495;
   background-size: cover;
@@ -55,6 +156,9 @@ h3 {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     padding-bottom: 0.5em;
     margin-bottom: 0.25em; }
+    @media (min-width: 56.88889em) {
+      .hero h1 {
+        font-size: 4em; } }
   .hero span {
     opacity: 0.7;
     display: block; }