summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHans-Nikolai Viessmann2015-05-01 12:48:38 +0200
committerHans-Nikolai Viessmann2015-05-01 12:48:38 +0200
commit1d29eae14ade32e1ea507a511d59a8a81febfa3d (patch)
tree601c6296614804d8b4763526aed3483941baac48
parent7d571a44c6552ca0fbd3cbff96c6b518e53d82aa (diff)
downloadblog-1d29eae14ade32e1ea507a511d59a8a81febfa3d.tar.gz
blog-1d29eae14ade32e1ea507a511d59a8a81febfa3d.zip
Completed responsiveness for really small screens.
-rwxr-xr-x_assets/javascripts/nav.js52
-rwxr-xr-x_assets/stylesheets/main.css.scss49
-rw-r--r--_config.yml1
-rwxr-xr-x_layouts/default.html2
-rwxr-xr-xabout-me/index.html10
5 files changed, 68 insertions, 46 deletions
diff --git a/_assets/javascripts/nav.js b/_assets/javascripts/nav.js
index 3321368..239f77e 100755
--- a/_assets/javascripts/nav.js
+++ b/_assets/javascripts/nav.js
@@ -1,27 +1,29 @@
$(document).ready(function(){
- var nav = $("nav");
- var top = nav.offset().top;
- var diffhieght = $("article").height() + $("article").offset().top - nav.height() - parseInt($("p").css("margin-bottom"));
- // Navigation scroll function
- function navYScrolling(){
- if($(window).scrollTop() > top && $(window).scrollTop() < diffhieght){
- nav.css({
- "margin-top":($(window).scrollTop() - top)+"px"
- });
- } else if($(window).scrollTop() <= top){
- nav.css({
- "margin-top": ""
- });
- } else {
- nav.css({
- "margin-bottom": "-"+($(window).scrollTop() - top)+"px"
- });
- }
- }
- // small hack to ensure that on page refresh (local anchor),
- // we check the current position of the nav bar v. the top of the window.
- navYScrolling();
- $(window).scroll(function(){
- navYScrolling();
- });
+ if ($(window).width() > 767) {
+ var nav = $("nav");
+ var top = nav.offset().top;
+ var diffhieght = $("article").height() + $("article").offset().top - nav.height() - parseInt($("p").css("margin-bottom"));
+ // Navigation scroll function
+ function navYScrolling(){
+ if($(window).scrollTop() > top && $(window).scrollTop() < diffhieght){
+ nav.css({
+ "margin-top":($(window).scrollTop() - top)+"px"
+ });
+ } else if($(window).scrollTop() <= top){
+ nav.css({
+ "margin-top": ""
+ });
+ } else {
+ nav.css({
+ "margin-bottom": "-"+($(window).scrollTop() - top)+"px"
+ });
+ }
+ }
+ // small hack to ensure that on page refresh (local anchor),
+ // we check the current position of the nav bar v. the top of the window.
+ navYScrolling();
+ $(window).scroll(function(){
+ navYScrolling();
+ });
+ }
});
diff --git a/_assets/stylesheets/main.css.scss b/_assets/stylesheets/main.css.scss
index f2af496..bdca0c9 100755
--- a/_assets/stylesheets/main.css.scss
+++ b/_assets/stylesheets/main.css.scss
@@ -27,6 +27,10 @@ p, dl, menu, ol, ul{
margin: 0.5rem 0rem;
}
+html {
+ line-height: initial;
+}
+
/* Font-face */
@mixin font-face($nick, $name, $file, $weight: normal, $style: normal) {
@@ -75,7 +79,7 @@ html {
@include mq(xs) {
min-width: $default-min-width - 650;
max-width: $default-max-width - 650;
- margin: 25px auto 130px; /* must be >= footer height */
+ margin: 0px auto 130px; /* must be >= footer height */
}
@include mq(sm) {
min-width: $default-min-width;
@@ -115,19 +119,18 @@ body {
}
input#menu {
- position: absolute;
- top: -9999px;
- left: -9999px;
+ display: none;
}
label#label {
cursor: pointer;
user-select: none;
- position: absolute;
margin: 0;
transition: color .3s ease-in-out;
- left: 0;
display: none;
+ position: fixed;
+ width: 100%;
+ background-color: #090D11;
}
/* Front Matter */
@@ -210,7 +213,8 @@ header {
nav {
@include mq(xs) {
- position: absolute;
+ top: 3.5rem;
+ position: fixed;
left: -156px;
width: 156px;
}
@@ -226,10 +230,10 @@ nav {
margin: 0;
font-weight: bold;
font-size: 1.4rem;
- }
- ul > li {
- width: 100%;
- line-height: 1.7rem;
+ & > li {
+ width: 100%;
+ line-height: 1.7rem;
+ }
}
#nav-extra {
li {
@@ -244,10 +248,9 @@ nav {
label#label {
display: block;
&:after {
- position: absolute;
content: "\2261";
- font-size: 2rem;
- bottom: 0;
+ font-size: 2.5rem;
+ margin-left: 1rem;
}
}
input#menu:checked {
@@ -297,6 +300,15 @@ footer {
color: $nav-op;
}
+.anchor {
+ @include mq(xs) {
+ height: 3.5rem;
+ margin-top: -3.5rem;
+ }
+ visibility: none;
+ display: block;
+}
+
#tags {
display: inline-block;
width: 33%;
@@ -327,16 +339,19 @@ article {
@include mq(xs) {
min-width: $default-min-width - 650;
margin-left: 0;
+ margin-top: 3.5rem;
transition: margin .3s ease-in-out;
}
+ @include mq(lg) {
+ > :first-child {
+ margin-top: 0 !important;
+ }
+ }
min-width: $default-min-width - 258;
margin-left: 181px; /* nav width + space */
overflow: hidden;
font-family: $opensans;
padding-top: 0;
- > :first-child {
- margin-top: 0 !important;
- }
h1 {
margin-top: 0;
line-height: 75%;
diff --git a/_config.yml b/_config.yml
index 093f74a..ee4e528 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,6 +1,7 @@
# Configuration file for hans.viessmann.co
safe: false
port: 4000
+host: 0000
source: ./
plugins: ./_plugins
diff --git a/_layouts/default.html b/_layouts/default.html
index 53b6a83..f5d4b85 100755
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -65,6 +65,7 @@ file at http://hans.viessmann.co/humans.txt for more information.
<!-- RESPONSIVE MENU -->
<input type="checkbox" id="menu">
<label id="label" for="menu" onclick></label>
+ <!-- END -->
<nav>
<ul>
{% for link in page.navigation %}
@@ -78,7 +79,6 @@ file at http://hans.viessmann.co/humans.txt for more information.
{% endfor -%}
</ul>
</nav>
- <!-- END -->
<article>
{{ content }}
</article>
diff --git a/about-me/index.html b/about-me/index.html
index 5a176d6..832267b 100755
--- a/about-me/index.html
+++ b/about-me/index.html
@@ -17,7 +17,8 @@ side:
description: Some details about me, I am a computer scientist. What does that
mean, it means I know my way around computers inside and out.
---
-<em class="section title" id="intro">Introduction</em>
+<span class="anchor" id="intro"></span>
+<em class="section title">Introduction</em>
<div class="part">
<p>
Hello, my name is Hans-Nikolai Viessmann, and I am a computer scientist.
@@ -37,7 +38,8 @@ description: Some details about me, I am a computer scientist. What does that
</ul>
</div>
<!-- Section -->
-<em class="section title" id="work">Work Experience</em>
+<span class="anchor" id="work"></span>
+<em class="section title">Work Experience</em>
<div class="part">
<strong id="bgs1" class="title">British Geological Survey</strong>
<div class="subsection">
@@ -98,7 +100,8 @@ description: Some details about me, I am a computer scientist. What does that
</div>
</div>
<!-- Section -->
-<em class="section title" id="skills">Skills</em>
+<span class="anchor" id="skills"></span>
+<em class="section title">Skills</em>
<div class="part">
<strong>Web Development</strong>
<p>
@@ -141,6 +144,7 @@ description: Some details about me, I am a computer scientist. What does that
</p>
</div>
<!-- Section -->
+<span class="anchor" id="edu"></span>
<em class="section title" id="edu">Eduction</em>
<div class="part">
<strong id="phd" class="title">Heriot-Watt University and University of Edinburgh, <small>Edinburgh, UK</small></strong>