summaryrefslogtreecommitdiffstats
path: root/blog
diff options
context:
space:
mode:
authorHarald Eilertsen <haraldei@anduin.net>2017-03-10 19:26:11 +0100
committerHarald Eilertsen <haraldei@anduin.net>2017-03-10 19:26:11 +0100
commit0cb9284d51b16d192f42e2d2a4c12a2911668b2e (patch)
tree365ca4077c408c45da535cacd98eeefb8464cc58 /blog
parentc8ba2958ba509b98896100db2c190ace48d103c8 (diff)
downloadnorsk-urskog-main-0cb9284d51b16d192f42e2d2a4c12a2911668b2e.tar.gz
norsk-urskog-main-0cb9284d51b16d192f42e2d2a4c12a2911668b2e.tar.bz2
norsk-urskog-main-0cb9284d51b16d192f42e2d2a4c12a2911668b2e.zip
First attempt at responsive design for site.
- Droppped sidebar from all pages. - Wrapped post images in a div for easier styling. - Drop the Inferno banner on too small displays. Most stuff works quite well for a first attempt, mthinks.
Diffstat (limited to 'blog')
-rw-r--r--blog/_assets/stylesheets/_config.scss9
-rw-r--r--blog/_assets/stylesheets/_header.scss27
-rw-r--r--blog/_assets/stylesheets/_post.scss23
-rw-r--r--blog/_assets/stylesheets/main.scss25
-rw-r--r--blog/_includes/menubar.html22
-rw-r--r--blog/_includes/post-excerpt.html8
-rw-r--r--blog/_layouts/default.html9
-rw-r--r--blog/_layouts/post.html8
8 files changed, 77 insertions, 54 deletions
diff --git a/blog/_assets/stylesheets/_config.scss b/blog/_assets/stylesheets/_config.scss
index c8b5066..77d3c8b 100644
--- a/blog/_assets/stylesheets/_config.scss
+++ b/blog/_assets/stylesheets/_config.scss
@@ -1,8 +1,11 @@
+$base-font-size: 12pt;
+$huge-font-size: $base-font-size * 1.25;
+
$body-bg: rgba(0, 0, 0, 0.4);
-$text-color: #acbed5;
-$heading-color: #3379BF;
+$text-color: #6c7683;
+$heading-color: #2B4662;
$dimmed-text-color: darken($text-color, 20%);
-$link-color: #93A2B1; //#686;
+$link-color: #384e68; //#686;
$link-hover-color: lighten(#686, 5%);
$side-bar-background: rgba(20, 20, 20, 0.7);
$menu-bar-background: transparentize(#243B48, 0.2); //rgba(128, 256, 128, 0.15);
diff --git a/blog/_assets/stylesheets/_header.scss b/blog/_assets/stylesheets/_header.scss
index 7998bb5..fc93a19 100644
--- a/blog/_assets/stylesheets/_header.scss
+++ b/blog/_assets/stylesheets/_header.scss
@@ -1,20 +1,33 @@
#header {
width: 100%;
- font-size: 110%;
- font-weight: 600;
+ font-weight: bold;
#logo {
- position: relative;
- width: 479px;
text-align: center;
+ float: left;
p {
margin-top: 0;
}
+
+ @media screen and (min-width: 28cm) {
+ width: 50%; //479px;
+ }
}
#banner-pos-1 {
- position: absolute;
- top: 1.5em;
- right: 0;
+ text-align: center;
+ float: left;
+ visibility: hidden;
+ display: none;
+
+ @media screen and (min-width: 28cm) {
+ width: 50%; //479px;
+ visibility: visible;
+ display: block;
+ }
+ }
+
+ #page-menu {
+ clear: both;
}
}
diff --git a/blog/_assets/stylesheets/_post.scss b/blog/_assets/stylesheets/_post.scss
index 436b828..b2e737f 100644
--- a/blog/_assets/stylesheets/_post.scss
+++ b/blog/_assets/stylesheets/_post.scss
@@ -49,4 +49,27 @@
visibility: hidden;
clear: both;
}
+ .post-image {
+ text-align: center;
+ float: right;
+
+ @media screen and (max-width: 590px){
+ float: none;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+}
+
+.post-excerpt {
+ .post-body {
+ .post-image {
+ @media screen and (min-width: 500px) {
+ float: right;
+ width: 300px;
+ }
+ }
+ }
}
diff --git a/blog/_assets/stylesheets/main.scss b/blog/_assets/stylesheets/main.scss
index a4e284c..5da3093 100644
--- a/blog/_assets/stylesheets/main.scss
+++ b/blog/_assets/stylesheets/main.scss
@@ -32,18 +32,14 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
- font-size: 20pt;
-}
-
-strong {
- color: $dimmed-text-color;
+ font-size: $huge-font-size;
}
#page-container {
position: relative;
- width: 28cm;
+ max-width: 28cm;
margin: {
- top: 10mm;
+ //top: 10mm;
left: auto;
right: auto;
}
@@ -61,24 +57,19 @@ strong {
min-height: 700px;
line-height: 170%;
- padding: 1cm;
- font-size: 16pt;
+ font-size: $base-font-size;
background-color: $body-bg;
+ @media screen and (min-width: 28cm) {
+ padding: 1cm;
+ }
+
@include round-corners;
#body {
- float: left;
- width: 16cm;
}
#side-body {
- float: right;
- width: 8cm;
- padding: 2mm;
- background: {
- color: $side-bar-background
- }
}
#news, #links {
diff --git a/blog/_includes/menubar.html b/blog/_includes/menubar.html
index 04be761..3076326 100644
--- a/blog/_includes/menubar.html
+++ b/blog/_includes/menubar.html
@@ -1,10 +1,12 @@
-<nav class="site-nav">
- <a class="page-link" href="{{ site.baseurl | append: "/" }}">{% t titles.home %}</a>
- <a class="page-link" href="{{ site.baseurl_root | append: "/registration" }}">{% t titles.registration %}</a>
- {% for page in site.pages %}
- {% if page.title and (!page.hidden == true) %}
- <a class="page-link" href="{{ page.url | prepend: site.baseurl | remove: 'index.html' }}">{% page_title page.title %}</a>
- {% endif %}
- {% endfor %}
- {% include language-switcher.html %}
-</nav>
+<div id="page-menu">
+ <nav class="site-nav">
+ <a class="page-link" href="{{ site.baseurl | append: "/" }}">{% t titles.home %}</a>
+ <a class="page-link" href="{{ site.baseurl_root | append: "/registration" }}">{% t titles.registration %}</a>
+ {% for page in site.pages %}
+ {% if page.title and (!page.hidden == true) %}
+ <a class="page-link" href="{{ page.url | prepend: site.baseurl | remove: 'index.html' }}">{% page_title page.title %}</a>
+ {% endif %}
+ {% endfor %}
+ {% include language-switcher.html %}
+ </nav>
+</div>
diff --git a/blog/_includes/post-excerpt.html b/blog/_includes/post-excerpt.html
index e87b12b..b3616d8 100644
--- a/blog/_includes/post-excerpt.html
+++ b/blog/_includes/post-excerpt.html
@@ -1,13 +1,11 @@
{% assign post = include.post %}
-<article class="post">
+<article class="post-excerpt">
{% include post-header.html post = post %}
<section class="post-body">
{% if post.page-image %}
- {% if include.sidebar %}
+ <div class="post-image">
{{ post.page-image | img: "magick:resize:290x" }}
- {% else %}
- {{ post.page-image | img: "magick:resize:290x class:right" }}
- {% endif %}
+ </div>
{% endif %}
{{ post.excerpt }}
<p><a href="{{ post.url | prepend: site.baseurl }}">{% t global.read_more %}</a></p>
diff --git a/blog/_layouts/default.html b/blog/_layouts/default.html
index 2488ce3..bd0ee80 100644
--- a/blog/_layouts/default.html
+++ b/blog/_layouts/default.html
@@ -10,15 +10,6 @@
<section id="body">
{{ content }}
</section>
- <section id="side-body">
- {% include news.html sidebar=true %}
-
- {% if site.links %}
- <section id="links">
- <h2>{% t home.links %}</h2>
- </section>
- {% endif %}
- </section>
</section>
</section>
diff --git a/blog/_layouts/post.html b/blog/_layouts/post.html
index 555bdc6..8a3cccb 100644
--- a/blog/_layouts/post.html
+++ b/blog/_layouts/post.html
@@ -5,9 +5,11 @@ layout: default
<article class="post">
{% include post-header.html post = page %}
<section class="post-body">
- {% if page.page-image %}
- {{ page.page-image | img: "magick:resize:590x" }}
- {% endif %}
+ <div class="post-image">
+ {% if page.page-image %}
+ {{ page.page-image | img: "magick:resize:590x" }}
+ {% endif %}
+ </div>
{{ content }}
</section>
<footer>