Fix responsive css
This commit is contained in:
@@ -11,14 +11,14 @@
|
|||||||
<link href="/{{ site.baseurl }}/blog/atom.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }}" />
|
<link href="/{{ site.baseurl }}/blog/atom.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }}" />
|
||||||
|
|
||||||
{% if page.description %}
|
{% if page.description %}
|
||||||
<meta name="description" content="{{ page.description }}" />
|
<meta name="description" content="{{ page.description }}" />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.tags %}
|
{% if page.tags %}
|
||||||
<meta name="keywords" content="{{ page.tags|join:', ' }}" />
|
<meta name="keywords" content="{{ page.tags|join:', ' }}" />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<meta name="viewport" content="width=756" />
|
<meta name="viewport" content="width=device-width">
|
||||||
|
|
||||||
<link href="{{ site.absolute }}/{{ site.baseurl }}{{ page.url|replace:'/index.html','/' }}" rel="canonical" />
|
<link href="{{ site.absolute }}/{{ site.baseurl }}{{ page.url|replace:'/index.html','/' }}" rel="canonical" />
|
||||||
|
|
||||||
@@ -39,28 +39,30 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">
|
<body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">
|
||||||
<header id="masthead" class="site-header" role="banner">
|
<header id="masthead" role="banner">
|
||||||
<a class="home-link" href="/" title="Rik @ St. Andrews" rel="home"></a>
|
<a href="/{{ site.baseurl }}" title="{{ site.title }}" rel="home"></a>
|
||||||
</header>
|
</header>
|
||||||
<header class="navigation">
|
<header id="navigation">
|
||||||
<ul class="screen-only">
|
<div>
|
||||||
<li><a href="/{{ site.baseurl }}/blog/">blog</a></li>
|
<ul class="screen-only">
|
||||||
<li><a href="/{{ site.baseurl }}/gallery/">gallery</a></li>
|
<li><a href="/{{ site.baseurl }}/blog/">blog</a></li>
|
||||||
<li><a href="/{{ site.baseurl }}/about.html">about</a></li>
|
<li><a href="/{{ site.baseurl }}/gallery/">gallery</a></li>
|
||||||
</ul>
|
<li><a href="/{{ site.baseurl }}/about.html">about</a></li>
|
||||||
{% if page.print_blurb %}
|
|
||||||
<ul class="print-only">
|
|
||||||
<li>{{ page.print_blurb }}</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% if page.print_blurb %}
|
||||||
<div class="site-title">
|
<ul class="print-only">
|
||||||
<strong><a href="/{{ site.baseurl }}/">{{ site.title }}</a></strong>
|
<li>{{ page.print_blurb }}</li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="meta screen-only">
|
{% endif %}
|
||||||
<a href="{{ site.github }}">github</a>
|
<div class="site-title">
|
||||||
·
|
<strong><a href="/{{ site.baseurl }}/">{{ site.title }}</a></strong>
|
||||||
<a href="mailto:{{ site.email }}">email</a>
|
</div>
|
||||||
</div>
|
<div class="meta screen-only">
|
||||||
|
<a href="{{ site.github }}">github</a>
|
||||||
|
·
|
||||||
|
<a href="mailto:{{ site.email }}">email</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
|
|||||||
34
index.html
34
index.html
@@ -3,10 +3,9 @@ title: Home
|
|||||||
layout: default
|
layout: default
|
||||||
tags: blog scotland chemistry phd
|
tags: blog scotland chemistry phd
|
||||||
---
|
---
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p>
|
<p>
|
||||||
In dit blog zal ik jullie op de hoogte houden van mijn belevenissen in St Andrews, Schotland. Daar ben ik in november 2013 begonnen aan een vierjarige PhD in de scheikunde, met als uiteindelijk doel het halen van de doctor titel.
|
In dit blog houd ik jullie zo goed mogelijk op de hoogte van mijn belevenissen in St Andrews, Schotland. Daar ben ik in november 2013 begonnen aan een vierjarige PhD in de scheikunde, met als uiteindelijk doel het halen van de doctor titel. Nostalgicie zijn misschien verknocht aan de <a href="http://csbnw.no-ip.org:38/">oude versie</a> van dit blog.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -14,18 +13,21 @@ tags: blog scotland chemistry phd
|
|||||||
{% include post_detail.html %}
|
{% include post_detail.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
|
||||||
{% if paginator.total_pages > 1 %}
|
{% if paginator.total_pages > 1 %}
|
||||||
<ul class="pager">
|
<section>
|
||||||
{% if paginator.previous_page %}
|
<ul class="pager">
|
||||||
<a href="/{{ site.baseurl }}{{ paginator.previous_page_path }}">{{ site.previous_page }}</a>
|
{% if paginator.previous_page %}
|
||||||
{% endif %}
|
<a href="/{{ site.baseurl }}{{ paginator.previous_page_path }}">{{ site.previous_page }}</a>
|
||||||
{% if paginator.previous_page and paginator.next_page %}
|
{% endif %}
|
||||||
|
|
{% if paginator.previous_page and paginator.next_page %}
|
||||||
{% endif %}
|
|
|
||||||
{% if paginator.next_page %}
|
{% endif %}
|
||||||
<a href="/{{ site.baseurl }}{{ paginator.next_page_path }}">{{ site.next_page }}</a>
|
{% if paginator.next_page %}
|
||||||
{% endif %}
|
<a href="/{{ site.baseurl }}{{ paginator.next_page_path }}">{{ site.next_page }}</a>
|
||||||
|
|
{% endif %}
|
||||||
<a href="/{{ site.baseurl }}/blog/" class="read-more">{{ site.all_posts | replace:'#',site.posts.size }}</a>
|
|
|
||||||
</ul>
|
<a href="/{{ site.baseurl }}/blog/" class="read-more">{{ site.all_posts | replace:'#',site.posts.size }}</a>
|
||||||
{% endif %}
|
</ul>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
@@ -1,54 +1,66 @@
|
|||||||
---
|
---
|
||||||
---
|
---
|
||||||
* {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #333333;
|
color: #333;
|
||||||
font-family: Lato, sans-serif;
|
font-family: Lato,sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-width: 640px;
|
min-width: 640px;
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header, article > section {
|
body > header {
|
||||||
|
background-color: #f7f5e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > header,article > section {
|
||||||
border-bottom: #F0F0F0 solid 1px;
|
border-bottom: #F0F0F0 solid 1px;
|
||||||
padding: 24px 80px;
|
padding: 24px 80px;
|
||||||
width: 900px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
article > section {
|
body > article {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1000px) {
|
||||||
|
body > article,body > footer {
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -30%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article > section {
|
||||||
border-left: #E9E9E9 solid 1px;
|
border-left: #E9E9E9 solid 1px;
|
||||||
position: relative;
|
min-width: 400px;
|
||||||
left: 80px;
|
max-width: 600px;
|
||||||
}
|
|
||||||
header.site-header, header.navigation {
|
|
||||||
border: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header.site-header {
|
header#masthead {
|
||||||
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
background: url(/asset/header/{{ site.headers[0] }}.jpg) center;
|
||||||
background: url(/asset/header/{{ site.headers[0] }}.jpg) no-repeat scroll top;
|
|
||||||
background-size: 1600px auto;
|
background-size: 1600px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
header.site-header .home-link {
|
header#masthead a {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 1080px;
|
|
||||||
min-height: 225px;
|
min-height: 225px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header.navigation {
|
header#navigation {
|
||||||
background-color: #f7f5e7;
|
margin: 0;
|
||||||
padding: 10px 50px 10px 50px;
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header#navigation div {
|
||||||
|
padding: 5px 30px;
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.layout-gallery-photo > header {
|
body.layout-gallery-photo > header {
|
||||||
@@ -60,63 +72,58 @@ body.layout-gallery-photo article > section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body > footer {
|
body > footer {
|
||||||
color: #999999;
|
color: #999;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding: 16px 6px 28px 66px;
|
padding: 16px 6px 28px 66px;
|
||||||
width: 700px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body > footer a {
|
body > footer a {
|
||||||
color: #999999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.no-footer > footer {
|
body.no-footer > footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header {
|
body > header .meta {
|
||||||
width: 100%;
|
margin-bottom: 0;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header .meta {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header ul {
|
header ul {
|
||||||
float: right;
|
float: right;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 7px 0 0;
|
margin: 7px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li {
|
header ul li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li a {
|
header ul li a {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: #CF5406;
|
color: #CF5406;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
padding: 1px 5px 2px 5px;
|
padding: 1px 5px 2px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li a:hover {
|
header ul li a:hover {
|
||||||
background-color: #CF5406;
|
background-color: #CF5406;
|
||||||
color: #FFFFFF;
|
color: #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li .noanchor {
|
header ul li .noanchor {
|
||||||
color: #CCCCCC;
|
color: #CCC;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
padding: 1px 5px 2px 5px;
|
padding: 1px 5px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta {
|
.meta {
|
||||||
color: #333333;
|
color: #333;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
padding-left: 1px;
|
padding-left: 1px;
|
||||||
@@ -124,33 +131,28 @@ header ul {
|
|||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta a {
|
.meta a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta a:hover {
|
.meta a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #CF5406;
|
color: #CF5406;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.pager {
|
a.read-more,ul.pager a {
|
||||||
position: relative;
|
|
||||||
left: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.read-more, ul.pager a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.read-more:hover, ul.pager a:hover {
|
a.read-more:hover,ul.pager a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
color: #666666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.site-title {
|
div.site-title {
|
||||||
@@ -159,38 +161,41 @@ div.site-title {
|
|||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.site-title strong {
|
div.site-title strong {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.site-title strong a {
|
div.site-title strong a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.site-title small {
|
div.site-title small {
|
||||||
color: #999999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: #333333;
|
color: #333;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 1px 0;
|
padding: 1px 0;
|
||||||
}
|
}
|
||||||
h1 a {
|
|
||||||
color: #000000;
|
h1 a {
|
||||||
text-decoration: none;
|
color: #000;
|
||||||
}
|
text-decoration: none;
|
||||||
h1 a:hover {
|
}
|
||||||
text-decoration: underline;
|
|
||||||
}
|
h1 a:hover {
|
||||||
h1 small {
|
text-decoration: underline;
|
||||||
display: block;
|
}
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal;
|
h1 small {
|
||||||
}
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
border-bottom: #DEDEDE solid 1px;
|
border-bottom: #DEDEDE solid 1px;
|
||||||
@@ -213,13 +218,13 @@ hr {
|
|||||||
|
|
||||||
section .timeline > * {
|
section .timeline > * {
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 0.6;
|
opacity: .6;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.date-range {
|
span.date-range {
|
||||||
font-size: 0.8em;
|
font-size: .8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.layout-post section {
|
article.layout-post section {
|
||||||
@@ -227,24 +232,24 @@ article.layout-post section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.timeline {
|
.timeline {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFF;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
left: -24px;
|
margin-left: -100px;
|
||||||
width: 49px;
|
width: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline img {
|
.timeline img {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
width: 49px;
|
width: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline time {
|
.timeline time {
|
||||||
line-height: 11px;
|
line-height: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background-color: #F9F9F9;
|
background-color: #F9F9F9;
|
||||||
@@ -269,14 +274,14 @@ code {
|
|||||||
line-height: 0;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, ul, ol, dl {
|
p,ul,ol,dl {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl dt {
|
dl dt {
|
||||||
clear: left;
|
clear: left;
|
||||||
color: #666666;
|
color: #666;
|
||||||
float: left;
|
float: left;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@@ -340,7 +345,7 @@ img.iright {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img.ileft {
|
img.ileft {
|
||||||
float:left;
|
float: left;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
width: 34%;
|
width: 34%;
|
||||||
}
|
}
|
||||||
@@ -381,14 +386,14 @@ blockquote {
|
|||||||
line-height: 0;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-gallery img {
|
.list-gallery img {
|
||||||
padding: 2px !important;
|
padding: 2px !important;
|
||||||
margin: 8px 7px 0 0;
|
margin: 8px 7px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-gallery img:hover {
|
.list-gallery img:hover {
|
||||||
border: #999999 solid 1px !important;
|
border: #999 solid 1px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
@@ -402,18 +407,22 @@ blockquote {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption img {
|
.caption img {
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption p {
|
.caption p {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aligncenter {
|
.aligncenter {
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.pager {
|
||||||
|
margin-left: -50px;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user