Added footer. Shrinking logo on small screens.

README.md

@@ -5,10 +5,10 @@ Pixelated Github organisation website
 
 ## Run locally
 
-You can run the Jekyll site locally with the `run_site.sh` script. This requires Jekyll.
+You can run the site locally with Jekyll. This requires a local installation of Jekyll.
 
     gem install jekyll
-    ./run_site.sh
+    jekyll serve
 
 By default the site is available at [http://localhost:4000](http://localhost:4000)
 
@@ -22,5 +22,4 @@ Simply push the changes to the origin on Github.
 
 * make flexbozes grow and shrink a bit depending on viewport width
 * maybe make left/right marging smaller on small screens
-* shrink logo on small screens
 * move welcome image below paragraph on small screens

_sass/_main.scss

@@ -48,6 +48,9 @@ a {
   background: #DDD;
 }
 
+.footer-band {
+  background: #AAA;
+}
 
 /* content divs that have a maximum width */
 
@@ -88,6 +91,22 @@ section.faq, section.status {
   padding-bottom: 2em;
 }
 
+footer {
+  @include content-div;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  text-align: center;
+}
+
+footer a {
+  color: black;
+
+  &:hover,
+  &:focus {
+    color: #666;
+  }
+}
+
 /* features section with flex boxes */
 
 section.features {
@@ -111,9 +130,16 @@ section.features > div > h2 {
 
 /* specific formatting */
 
+section.logo img {
+  max-width: 90%;
+}
+
 .welcome-img {
   float: right;
   margin-top: 1em;
   margin-left: 1em;
 }
 
+footer .icon {
+  height: 2em;
+}

index.html

@@ -135,3 +135,10 @@ <h2>Status of Pixelated</h2>
 
   </section>
 </div>
+
+<div class="footer-band">
+  <footer>
+      <a href="https://github.com/pixelated"><img class="icon" src="/assets/images/github.svg"><br>
+      github.com/pixelated</a>
+  </footer>
+</div>