Merge pull request #11 from mjashanks/master

WORKS BETTER ON MOBILE + BLOG NOW ACCESSIBLE

_includes/header.html

@@ -1,7 +1,53 @@
 <header>
-    <a href="/">Home</a>
-    <a href="https://github.com/aletheia-foundation/aletheia-app">Download</a>
-    <a href="/about">About</a>
-    <a href="#">Blog</a>
-    <a href="https://github.com/aletheia-foundation/aletheia-admin">Get Involved</a>
- </header>
+
+    <div id="header-large-screen">
+        <a href="/">Home</a>
+        <a href="https://github.com/aletheia-foundation/aletheia-app">Download</a>
+        <a href="/about">About</a>
+        <a href="/blog">Blog</a>
+        <a href="https://github.com/aletheia-foundation/aletheia-admin">Get Involved</a>
+    </div>
+
+    <div id="header-small-screen">
+        <div id="header-menu-container">
+            <button id="smallscreen-header-button">
+                <i class="fa fa-bars" aria-hidden="true"></i>
+            </button>
+            <div id="header-small-screen-menu">
+                <ul>
+                    <li><a href="/">Home</a></li>
+                    <li><a href="https://github.com/aletheia-foundation/aletheia-app">Download</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/blog">Blog</a></li>
+                    <li><a href="https://github.com/aletheia-foundation/aletheia-admin">Get Involved</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+</header>
+
+ <script>
+
+    function InitialiseHeader_ForSmallScreens() {
+
+        let dropdown = document.getElementById("header-small-screen-menu");
+
+        let button = document.getElementById("smallscreen-header-button");
+        let dropdownIsOpen = false;
+        var openClass = "header-menu-open";
+        button.onclick = () => {
+            if(dropdownIsOpen) {
+                dropdown.classList.remove(openClass);
+                dropdownIsOpen = false;
+            } else {
+                dropdown.classList.add(openClass);
+                dropdownIsOpen = true;                
+            }
+        };
+
+    }
+
+    InitialiseHeader_ForSmallScreens();
+
+ </script>

_sass/common.sass

@@ -1,20 +1,43 @@
 
+$aletheia_grey: rgba(130,130,131,1)
+$aletheia_darkgreen: rgba(26,170,90,1)
+$aletheia_lightgreen: rgba(170,207,56,1)
+
+$small_screen_max_width: 740px
+$large_screen_min_width: 741px
+
+$small_screen_dpi: 100dpi
+$large_screen_dpi: 101dpi
+
 html
     width: 100%
     min-height: 100%
     margin: 0
     padding: 0
+    font-size: 12pt
+    font-family: 'Calibri', sans-serif
 
 
 body 
     width: 100%
-    height: 100%
+    height: 100vh
     /* https://pixabay.com/en/landscape-forest-trees-jungle-2584127/ */
-    background-image: url("/images/bg4.jpg")
+    background-image: url("/images/bg_100pc.jpg")
     background-size: 100% 100%
     background-attachment: fixed 
     margin: 0
     padding: 0
 
-$aletheia_grey: rgba(130,130,131,1)
-$aletheia_darkgreen: rgba(26,170,90,1)
+@media screen and (max-width: $small_screen_max_width)
+    body
+        background-size: auto 100%
+
+
+//@media screen and (max-resolution: $small_screen_dpi)
+//    body
+//        background-image: url("/images/bg_30pc.jpg")
+
+//@media screen and (min-resolution: $large_screen_dpi)
+//    body
+//        background-image: url("/images/bg_100pc.jpg")
+        

_sass/footer.sass

@@ -1,9 +1,10 @@
+$footer_height: 30px
 
 footer 
     position: fixed
     bottom: 0
     left: 0
-    height: 30px
+    height: $footer_height
     background: black
     width: 100%
 
@@ -19,7 +20,7 @@ footer
 #footer-container i 
     margin: 0 20px
     color: $aletheia_grey
-    font-size: 24px
+    font-size: 1.7em
     vertical-align: middle
 
 

_sass/header.sass

@@ -1,28 +1,87 @@
+$header_height: 34px
 
 header 
     position: fixed
     top: 0
     left: 0
-    height: 34px
+    height: $header_height
+    line-height: $header_height
     background: black
     width: 100%
     text-align: right
-    font-family: 'Open Sans', sans-serif
     z-index: 1
 
+@media screen and (min-width: $large_screen_min_width)
 
-header a 
-    color: $aletheia_grey
-    border-style: solid
-    border-width: 0 1px 0 0
-    text-decoration: none
-    font-size: 14pt
-    padding: 4px 30px
-    position: relative
-    top: 5px
-    font-weight: bold
+    #header-small-screen
+        display: none
+
+    #header-large-screen 
+        height: 100%
+        a 
+            color: $aletheia_grey
+            border-style: solid
+            border-width: 0 1px 0 0
+            text-decoration: none
+            font-size: 1.4em
+            height: $header_height
+            padding-left: 30px
+            padding-right: 30px
+            text-align: center
+            height: 100%
+            display: inline-block
+            vertical-align: middle
 
+        a:hover 
+            color: whitesmoke
+            border-color: $aletheia_grey
 
-header a:hover 
-    color: whitesmoke
-    border-color: $aletheia_grey
+
+@media screen and (max-width: $small_screen_max_width)
+
+    #header-large-screen 
+        display: none
+
+    #header-menu-container
+        position: relative
+
+        button
+            font-size: 1.4em
+            display: block
+            border-style: none
+            color: $aletheia_grey
+            background: black
+            font-weight: bold
+            cursor: pointer
+            padding: 4px 30px
+            outline: none
+
+        button:hover
+            color: white
+
+    .header-menu-open
+        display: block !important
+
+    #header-small-screen-menu
+
+        display: none
+        border-style: solid
+        border-width: 0px 0px 1px 0px
+        border-color: $aletheia_grey
+        background: black
+        position: fixed
+        top: $header_height
+        width: 100%
+
+        ul
+            list-style-type: none
+
+        li
+            padding: 10px
+
+        a
+            color: $aletheia_grey
+            text-decoration: none
+            font-size: 1.2em
+            display: block
+            text-align: left

about.md

@@ -2,6 +2,7 @@
 layout: blogpost
 title: About
 permalink: /about/
+id: About
 ---
 
 # What is Aletheia?

blog.html

@@ -0,0 +1,16 @@
+---
+layout: blogpost
+title: Aletheia - Blog
+---
+
+<ul class="post-list">
+{% for post in site.posts %}
+  <li>
+    <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+
+    <h2>
+      <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+    </h2>
+  </li>
+{% endfor %}
+</ul>

css/blogpost.sass

@@ -7,17 +7,17 @@
 @import "footer"
 
 main
-    min-height: calc(100% - 64px)
+    height: calc(100% - 64px)
     position: relative
     top: 34px
     width: 100%
     color: #555f61
-    font-size: 13pt    
+    font-size: 1.3em
 
 #post-container
     /*height minus header and footer*/ 
-    min-height: calc(100% - 64px) 
-    background: white
+    overflow-y: auto
+    background: rgba(255,255,255,0.8)
     width: 900px
     font-family: Calibri, sans-serif
     padding: 20px
@@ -26,4 +26,6 @@ main
 h1, h2, h3, h4, h5
     color: $aletheia_darkgreen
 
-
+@media screen and (max-width: $small_screen_max_width)
+    #post-container
+        width: 100%

css/landing.sass

@@ -8,14 +8,17 @@
 
 main 
     position: fixed
-    top: 20%
+    top: $header_height
     left: 0
     width: 100%
+    height: calc(100% - #{$header_height} - #{$footer_height})
+    display: flex
+    align-items: center
 
 #mid-section-container 
     padding: 20px
     background: rgba(255, 255, 255, 0.8)
-    width: 700px
+    width: 692px
     margin: auto
 
 #logo-container 
@@ -28,8 +31,16 @@ main
     margin: auto
 
 #title 
-    font-size: 40px
+    font-size: 2.6em
     color: $aletheia_darkgreen
     text-align: center
     margin-top: 35px
-    font-family: 'Calibri', sans-serif
+
+@media screen and (max-width: $small_screen_max_width)
+    #mid-section-container 
+        width: 100%
+        padding-left: 0
+        padding-right: 0
+
+    #title
+        font-size: 1.9em

index.html

@@ -2,6 +2,7 @@
 title: Aletheia
 stylesheet: landing
 layout: null
+id: Home
 ---
 
 <!DOCTYPE html>
@@ -20,9 +21,7 @@
                 <img src="images/Aletheia_Logo_200.png"> 
             </div>
 
-            <div id="title">
-                    A Decentralised, Open Access, <br/>Publishing Platform for Scientific Research
-            </div>
+            <div id="title">A Decentralised, Open Access, Publishing Platform for Scientific Research</div>
 
         </div>
     </main>