Merge branch 'release/v0.5' into dev

5 files changed, 43 insertions, 18 deletions

diff --git a/README.md b/README.md
index 637c90f..8f9e020 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,23 @@
 # Hamburg
-(based on the [vienna-theme](https://github.com/keichi/vienna) from [keichi](https://github.com/keichi))
+
+Hamburg is a simple and clean blog theme for [Hugo](http://gohugo.io/) based on the [vienna-theme](https://github.com/keichi/vienna) from [keichi](https://github.com/keichi).
 
 # Overview
 
-Hamburg is a simple and clean blog theme for [Hugo](http://gohugo.io/).
 Notable features I would tell somebody are:
 
-- Clean and flat design
-- Tags
-- Menu
+- Consistent design
+	- Clean and flat design
+	- Easy to customize
+	- Responsive design (mobile friendly)
+	- Font Awesome icons
+- Navigation
+	- Tags
+	- Menu
 - Support for multiple authors
 - Multilingual (in every way! Author information, menus, pages, posts, tags)
-- Responsive design (mobile friendly)
-- Font Awesome icons
-- Analytics with Google Analytics, Mixpanel or custom tracking page
-- Easy to customize
+- Analytics with any JavaScript-Snipped based service (Google Analytics, Matomo/Piwik, ...)
+- Addional shortcodes
 
 # Installation
 
@@ -124,6 +127,19 @@ Includes images and opens them in a new tab when clicked:
 {{< img "photo.png" "What a lovely picture" >}}
 ```
 
+### Get URL to an image
+Creates a link to the given image
+```
+{{< imgUrl "photo.png" "link text" >}}
+```
+
+### Embed scaled image
+Scales an image to the given size and embeds it like the shortcode `img` does.
+```
+{{< imgUrl "photo.png" "What a lovely picture" "500x" >}}
+```
+(This image is scaled to 500 pixels in width, the height is determined automatically)
+
 ## Multiple authors
 This theme will read the information of an author based on the language code of a page.
 
@@ -144,10 +160,3 @@ You can use the above configuration with e.g. Google Analytics or use your own J
 For a custom JavaScript snippet you have to create a `layouts/partials/tracking.html` file and put the necessary code into this file. The file (if it exists) will be embedded into the header right before the `</head>` tag.
 
 I tested this with the Matomo analytics software, which provides a JavaScript snipped I put into the `tracking.html`.
-
-### Temporarily
-Use the normal hugo `-t` option to specify the theme:
-
-`hugo server -t hamburg`
-
-The theme must be available in the `./themes/hamburg/` folder.
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index b1cee32..e195301 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -13,7 +13,7 @@
 <figure>
 	<a href={{ $image.Permalink }} target="_blank">
 		<center>
-			<img src={{ $image.Permalink }}>
+			<img class="embedded-image" src={{ $image.Permalink }}>
 		</center>
 	</a>
 	<figcaption>
diff --git a/layouts/shortcodes/imgScale.html b/layouts/shortcodes/imgScale.html
index 7c155af..e8600c1 100644
--- a/layouts/shortcodes/imgScale.html
+++ b/layouts/shortcodes/imgScale.html
@@ -17,7 +17,7 @@
 <figure>
 	<a href={{ $originalImage.Permalink }} target="_blank">
 		<center>
-			<img src={{ $scaledImage.Permalink }}>
+			<img class="embedded-image" src={{ $scaledImage.Permalink }}>
 		</center>
 	</a>
 	<figcaption>
diff --git a/static/css/color-theme.css b/static/css/color-theme.css
index 95d42d0..b7ce984 100644
--- a/static/css/color-theme.css
+++ b/static/css/color-theme.css
@@ -2,10 +2,12 @@
 From material design color palette:
 
 #dcedc8 - Light Green 100
+#9ccc65 - Light Green 400
 #558b2f - Light Green 800
 
 #bdbdbd - Gray 400
 #757575 - Gray 600
+#424242 - Gray 800
 
 #000000 - Black
 */
@@ -142,3 +144,12 @@ a.btn-primary.disabled:focus {
   background-color: #424242;
   color: #fff;
 }
+
+.embedded-image {
+    border: 1px solid #dcedc8;
+}
+
+.embedded-image:hover,
+.embedded-image:focus {
+    border: 1px solid #9ccc65;
+}
diff --git a/static/css/main.css b/static/css/main.css
index 2f2bb68..a70f1c4 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -342,3 +342,8 @@ I don't use the default pager-class because I want to use the normal buttons wit
     width: 1170px;
   }
 }
+
+/* Images */
+.embedded-image {
+	padding: 5px;
+}