responsive

hlaueriksson · May 31, 2017 · 4bb5b80 · 4bb5b80
1 parent a19bb18
commit 4bb5b80
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git a/src/site/content/about.md b/src/site/content/about.md
@@ -16,14 +16,14 @@ The site is hosted by [GitHub Pages](https://pages.github.com) at: [https://hlau
 
 The jam recipes was taken from the Swedish site [Tasteline.com](http://www.tasteline.com):
 
-* Apple Jam: [http://www.tasteline.com/recept/appelmos-grundrecept/](http://www.tasteline.com/recept/appelmos-grundrecept/)
-* Lingonberry Jam: [http://www.tasteline.com/recept/lingonsylt/](http://www.tasteline.com/recept/lingonsylt/)
-* Strawberry Jam: [http://www.tasteline.com/recept/jordgubbssylt/](http://www.tasteline.com/recept/jordgubbssylt/)
+* [Apple Jam](http://www.tasteline.com/recept/appelmos-grundrecept/)
+* [Lingonberry Jam](http://www.tasteline.com/recept/lingonsylt/)
+* [Strawberry Jam](http://www.tasteline.com/recept/jordgubbssylt/)
 
 Translations from Swedish to English was done with [Google Translate](https://translate.google.com/#sv/en/).
 
 The images was taken from [Flickr](https://www.flickr.com/):
 
-* Apples: [https://www.flickr.com/photos/1sock/7910673688/](https://www.flickr.com/photos/1sock/7910673688/) by 1sock
-* Lingonberries: [https://www.flickr.com/photos/kymis/2875484409/](https://www.flickr.com/photos/kymis/2875484409/) by Jyrki Kymäläinen
-* Strawberries: [https://www.flickr.com/photos/42787780@N04/6984507532/](https://www.flickr.com/photos/42787780@N04/6984507532/) by Fried Dough
+* [Apples](https://www.flickr.com/photos/1sock/7910673688/) by 1sock
+* [Lingonberries](https://www.flickr.com/photos/kymis/2875484409/) by Jyrki Kymäläinen
+* [Strawberries](https://www.flickr.com/photos/42787780@N04/6984507532/) by Fried Dough
diff --git a/src/site/layouts/page/submit.html b/src/site/layouts/page/submit.html
@@ -5,20 +5,19 @@
       {{ .Content | markdownify }}
 
       <form id="recipe" action="{{ .Site.Data.api.submit.post_recipe }}" method="post">
-        <fieldset>
-          <legend>Recipe</legend>
-
-          <label for="title">Title:</label><br />
-          <input type="text" id="title" name="title" size="80" /><br />
-
-          <label for="ingredients">Ingredients:</label><br />
-          <textarea id="ingredients" name="ingredients" rows="4" cols="80"></textarea><br />
-
-          <label for="method">Method:</label><br />
-          <textarea id="method" name="method" rows="8" cols="80"></textarea><br />
-
-          <input type="submit" value="Submit">
-        </fieldset>
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input type="text" class="form-control" id="title" name="title">
+        </div>
+        <div class="form-group">
+          <label for="ingredients">Ingredients</label>
+          <textarea class="form-control" id="ingredients" name="ingredients" rows="5"></textarea>
+        </div>
+        <div class="form-group">
+          <label for="method">Method</label>
+          <textarea class="form-control" id="method" name="method" rows="5"></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
       </form>
 
       <div id="result"></div>

diff --git a/src/site/layouts/partials/summary.html b/src/site/layouts/partials/summary.html
@@ -1,5 +1,5 @@
 <h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
 <p>{{ $.Param "description" }}</p>
 <a href="{{ .Permalink }}">
-  <img src="{{ .URL }}{{ $.Param "image.url" }}" alt="{{ $.Param "image.text" }}">
+  <img src="{{ .URL }}{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}">
 </a>
diff --git a/src/site/layouts/recipe/recipe.html b/src/site/layouts/recipe/recipe.html
@@ -6,7 +6,7 @@
   <div class="col">
       <h1>{{ .Title }}</h1>
       <p>{{ $.Param "description" }}</p>
-      <img src="{{ .URL }}{{ $.Param "image.url" }}" alt="{{ $.Param "image.text" }}" />
+      <img src="{{ .URL }}{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}" />
 
       <div id="measurements">
         <span>Display measurements in:</span>