Update styles
This commit is contained in:
Anna Debenham
parent
3609e0f0c6
commit
17b1384b4a
|
|
@ -1,2 +1,16 @@
|
|||
</body>
|
||||
<footer class="global-footer">
|
||||
<p>Created as part of a Github Pages and Jekyll tutorial on <a href="http://24ways.org/">24 Ways</a>.</p>
|
||||
<small>All recipes and images licenced under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution/Share-Alike License</a>.</small>
|
||||
<small>Background image from <a href="http://subtlepatterns.com/">Subtle Patterns</a>. Mountains of Christmas font from <a href="http://www.fontsquirrel.com/fonts/mountains-of-christmas">Font Squirrel</a>.</small>
|
||||
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="snowman"></span>
|
||||
|
||||
<span class="snow-layer"></span>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,8 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en-gb">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="noindex, nofollow"><!-- Since this is a demo site, I don't want search engines to index it. -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ page.title }}</title>
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" >
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body>
|
||||
|
||||
<span class="snow-icicles"></span>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
{% include head.html %}
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
<h1 class="title-site">{{ page.title }}</h1>
|
||||
|
||||
{{ content }}
|
||||
|
||||
|
|
@ -23,7 +21,5 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
{% include foot.html %}
|
||||
|
|
@ -1,21 +1,27 @@
|
|||
{% include head.html %}
|
||||
|
||||
<main role="main">
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
<main role="main">
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ page.image }}" />
|
||||
</div>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<p class="attribution">Recipe by <a href="{{ page.recipe-attribution-link }}">{{ page.recipe-attribution }}</a>. Photo by <a href="{{ page.image-attribution-link }}">{{ page.image-attribution }}</a>.</p>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ page.image }}" />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<p>Recipe by <a href="{{ page.recipe-attribution-link }}">{{ page.recipe-attribution }}</a>.</p>
|
||||
|
||||
<p>Photo by <a href="{{ page.image-attribution-link }}">{{ page.image-attribution }}</a>.</p>
|
||||
{% include nav.html %}
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
{% include nav.html %}
|
||||
|
||||
{% include foot.html %}
|
||||
|
|
@ -1,21 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en-gb">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="noindex, nofollow"><!-- Since this is a demo site, I don't want search engines to index it. -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gingerbread</title>
|
||||
<link rel="stylesheet" href="/christmas-recipes/css/main.css" >
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main>
|
||||
|
||||
<h1>Gingerbread</h1>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm4.staticflickr.com/3121/3117777526_6399dc0e08_q.jpg" />
|
||||
</div>
|
||||
|
||||
<p>Makes about 15 small cookies.</p>
|
||||
<body>
|
||||
|
||||
<span class="snow-icicles"></span>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<main role="main">
|
||||
|
||||
<h1>Gingerbread</h1>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm4.staticflickr.com/3121/3117777526_6399dc0e08_q.jpg" />
|
||||
</div>
|
||||
|
||||
<p>Makes about 15 small cookies.</p>
|
||||
|
||||
<h2>Ingredients</h2>
|
||||
|
||||
|
|
@ -43,26 +55,110 @@
|
|||
<li>Transfer the cookies to a tray and bake in the oven for 15 minutes. Lightly dust the cookies with icing sugar.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<p class="attribution">Recipe by <a href="http://www.opensourcefood.com/people/HungryJenny/recipes/soft-christmas-gingerbread-cookies">HungryJenny</a>. Photo by <a href="http://www.flickr.com/photos/dsoltesz/3117777526/">Deborah Lee Soltesz</a>.</p>
|
||||
|
||||
<p>Recipe by <a href="http://www.opensourcefood.com/people/HungryJenny/recipes/soft-christmas-gingerbread-cookies">HungryJenny</a>.</p>
|
||||
</main>
|
||||
|
||||
<p>Photo by <a href="http://www.flickr.com/photos/dsoltesz/3117777526/">Deborah Lee Soltesz</a>.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<nav class="nav-primary" role="navigation" >
|
||||
<nav class="nav-primary">
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="active" href="/christmas-recipes/gingerbread.html">Gingerbread</a>
|
||||
<a href="/christmas-recipes/brandy-butter.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm3.staticflickr.com/2157/2133911076_1bc7193739_q.jpg" />
|
||||
</div>
|
||||
Brandy Butter
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/index.html">Home</a>
|
||||
<a href="/christmas-recipes/christmas-pudding.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm9.staticflickr.com/8354/8369364904_8254eda512_q.jpg" />
|
||||
</div>
|
||||
Christmas Pudding
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a class="active" href="/christmas-recipes/gingerbread.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm4.staticflickr.com/3121/3117777526_6399dc0e08_q.jpg" />
|
||||
</div>
|
||||
Gingerbread
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/mince-pies.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm1.staticflickr.com/155/346461113_8852803073_q.jpg" />
|
||||
</div>
|
||||
Mince Pies
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/mincemeat.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm6.staticflickr.com/5503/11036090333_bc048afa11_q.jpg" />
|
||||
</div>
|
||||
Mincemeat
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/shortcrust-pastry.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm5.staticflickr.com/4060/4441228033_c5db8a4b8c_q.jpg" />
|
||||
</div>
|
||||
Shortcrust pastry
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="global-footer">
|
||||
<p>Created as part of a Github Pages and Jekyll tutorial on <a href="http://24ways.org/">24 Ways</a>.</p>
|
||||
<small>All recipes and images licenced under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution/Share-Alike License</a>.</small>
|
||||
<small>Background image from <a href="http://subtlepatterns.com/">Subtle Patterns</a>. Mountains of Christmas font from <a href="http://www.fontsquirrel.com/fonts/mountains-of-christmas">Font Squirrel</a>.</small>
|
||||
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="snowman"></span>
|
||||
|
||||
<span class="snow-layer"></span>
|
||||
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
122
_site/index.html
122
_site/index.html
|
|
@ -1,30 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en-gb">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Home</title>
|
||||
<meta name="robots" content="noindex, nofollow"><!-- Since this is a demo site, I don't want search engines to index it. -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Christmas Recipes</title>
|
||||
<link rel="stylesheet" href="/christmas-recipes/css/main.css" >
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Home</h1>
|
||||
|
||||
<p>Is this thing on?</p>
|
||||
|
||||
<span class="snow-icicles"></span>
|
||||
|
||||
<nav class="nav-primary" role="navigation" >
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/gingerbread.html">Gingerbread</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="active" href="/christmas-recipes/index.html">Home</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="container">
|
||||
|
||||
<h1 class="title-site">Christmas Recipes</h1>
|
||||
|
||||
|
||||
|
||||
<nav class="grid">
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/brandy-butter.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm3.staticflickr.com/2157/2133911076_1bc7193739_q.jpg" />
|
||||
</div>
|
||||
<h2>Brandy Butter</h2>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/christmas-pudding.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm9.staticflickr.com/8354/8369364904_8254eda512_q.jpg" />
|
||||
</div>
|
||||
<h2>Christmas Pudding</h2>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/gingerbread.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm4.staticflickr.com/3121/3117777526_6399dc0e08_q.jpg" />
|
||||
</div>
|
||||
<h2>Gingerbread</h2>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/mince-pies.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm1.staticflickr.com/155/346461113_8852803073_q.jpg" />
|
||||
</div>
|
||||
<h2>Mince Pies</h2>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/mincemeat.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm6.staticflickr.com/5503/11036090333_bc048afa11_q.jpg" />
|
||||
</div>
|
||||
<h2>Mincemeat</h2>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/christmas-recipes/shortcrust-pastry.html">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://farm5.staticflickr.com/4060/4441228033_c5db8a4b8c_q.jpg" />
|
||||
</div>
|
||||
<h2>Shortcrust pastry</h2>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<footer class="global-footer">
|
||||
<p>Created as part of a Github Pages and Jekyll tutorial on <a href="http://24ways.org/">24 Ways</a>.</p>
|
||||
<small>All recipes and images licenced under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution/Share-Alike License</a>.</small>
|
||||
<small>Background image from <a href="http://subtlepatterns.com/">Subtle Patterns</a>. Mountains of Christmas font from <a href="http://www.fontsquirrel.com/fonts/mountains-of-christmas">Font Squirrel</a>.</small>
|
||||
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="snowman"></span>
|
||||
|
||||
<span class="snow-layer"></span>
|
||||
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,23 +2,31 @@
|
|||
layout: recipe
|
||||
title: Brandy Butter
|
||||
image: http://farm3.staticflickr.com/2157/2133911076_1bc7193739_q.jpg
|
||||
recipe-attribution: wikihow
|
||||
recipe-attribution-link: http://www.wikihow.com/Make-Orange-Brandy-Butter
|
||||
image-attribution: Matt Biddulph
|
||||
image-attribution-link: http://www.flickr.com/photos/mbiddulph/2133911076/
|
||||
---
|
||||
|
||||
## Ingredients
|
||||
|
||||
* 3oz unsalted butter
|
||||
* 3oz caster sugar
|
||||
* Grated rind of half orange
|
||||
* 2-3 tablespoons brandy (you can also use rum, whisky or orange liqueur)
|
||||
* 225g / 8 oz unsalted butter at room temperature
|
||||
* 750g / 1 1/2 lb icing (powdered) sugar, sifted
|
||||
* Grated peel of a fresh, washed orange (use organic/homegrown where possible)
|
||||
* 2 tbsp orange juice
|
||||
* 2 tbsp brandy
|
||||
|
||||
## Method
|
||||
|
||||
1. Cream the butter until soft and pale in colour.
|
||||
2. Beat in the sugar and orange rind.
|
||||
3. Gradually beat in the brandy until the mixture is frothy.
|
||||
4. Chill in the refrigerator for 2-3 hours or until solid.
|
||||
1. Place the butter in a mixing bowl and beat using an electric hand beater, or a whisk, until light and fluffy.
|
||||
2. Add the icing sugar and mix thoroughly to form a smooth paste. This is best done by adding the icing sugar in gradually.
|
||||
3. Add the orange peel, juice and brandy to the mixture. Combine gently.
|
||||
4. Dollop the orange brandy butter into a serving or storage container in advance of the event. This can be kept for up to six weeks, covered and refrigerated.
|
||||
|
||||
## Notes
|
||||
|
||||
* This recipe makes approximately 1kg (2 lb) of orange brandy butter.
|
||||
* If you want to give this as a gift, place the butter in a nice small jar with a lid. Cover the lid with fabric and add a label describing the contents. Be sure to add that the item needs refrigeration.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,28 +2,39 @@
|
|||
layout: recipe
|
||||
title: Christmas Pudding
|
||||
image: http://farm9.staticflickr.com/8354/8369364904_8254eda512_q.jpg
|
||||
recipe-attribution: wikibooks
|
||||
recipe-attribution-link: http://en.wikibooks.org/wiki/Cookbook:Christmas_Pudding
|
||||
image-attribution: James Petts
|
||||
image-attribution-link: http://www.flickr.com/photos/14730981@N08/8369364904/
|
||||
---
|
||||
|
||||
* 1kg mixed fruit
|
||||
* 150ml brandy
|
||||
* 100g stem ginger in syrup, chopped, plus 2 tbsp of the syrup
|
||||
* 2 apples or quinces, grated
|
||||
* 2 oranges, juice and zest
|
||||
* 6 eggs, beaten
|
||||
* 250g shredded suet
|
||||
* 350g soft muscovado sugar
|
||||
* 250g fresh breadcrumbs
|
||||
* 175g self-raising flour
|
||||
* 1 tsp mixed spice
|
||||
## Ingredients
|
||||
|
||||
* ½ pound (lb) (225g) raisins
|
||||
* ¾ lb (340g) currants
|
||||
* ½ lb (225g) sultanas
|
||||
* ½ lb (225g) sugar (or less)
|
||||
* ¾ lb (340g) shredded suet (can be vegetarian; see note below)
|
||||
* ½ lb (225g) breadcrumbs
|
||||
* ¼ lb (110g) crystallised peel
|
||||
* 2 teaspoons (tsp) cinnamon
|
||||
* 2 oz (55g) almonds (chopped, but not too small)
|
||||
* ⅓ cup (about 60g) flour
|
||||
* ⅓ pint (about 190ml) milk
|
||||
* 3 large eggs (beaten)
|
||||
* Brandy
|
||||
* Juice and rind of 1 lemon
|
||||
* ⅓ of a nutmeg
|
||||
|
||||
1. Soak the sultanas, raisins, currants, figs, peel, apricots and cherries in the brandy overnight, giving it a good stir now and again.
|
||||
2. The following day, in a large bowl mix the ginger, syrup, apples or quinces, orange juice and zest with the eggs, suet, sugar, crumbs and flour.
|
||||
3. Stir in the soaked fruit and spice.
|
||||
4. Butter the two pudding basins and divide the mix between them.
|
||||
5. Cut two circles of greaseproof paper to cover the top of the pudding and fold a pleat down the centre to allow pudding to expand.
|
||||
6. Put lids on the basins and steam puddings for 3½ hours.
|
||||
7. Let puddings cool before removing greaseproof paper and covering tightly with cling film and lid. The puddings can now be stored in a cool, dry place until Christmas.
|
||||
8. To reheat, steam pudding for a further 3½ hours, turn out and flame with brandy.
|
||||
## Method
|
||||
|
||||
1. Mix and stir well.
|
||||
2. Place in pudding basins, and cover with cloths or buttered greaseproof paper, tied tightly in place with string.
|
||||
3. Steam for 7 hours and keep till Christmas Day.
|
||||
4. To prepare for serving, steam for 2 hours. Times can be reduced by using a pressure cooker.
|
||||
|
||||
## Notes
|
||||
|
||||
* Suet can be difficult to find in some countries, e.g. the USA. Butter is an excellent substitute. To incorporate the butter in the mixture, melt it in a microwave or saucepan, and pour into your mixing bowl.
|
||||
* It was common practice to include small silver coins in the pudding mixture, which could be kept by the person whose serving included them. The usual choice was a silver 3d piece (the threepence), or a sixpence. However this practice fell away once real silver coins were not available, as it was believed that alloy coins would taint the pudding.
|
||||
* Once turned out of its basin, the Christmas pudding is traditionally decorated with a spray of holly, then dowsed in brandy, flamed, and brought to the table ceremonially - where it should be greeted with a round of applause. It is best eaten with brandy butter, cream (lemon cream is excellent) or custard. Christmas puddings have very good keeping properties and many families keep one back from Christmas to be eaten at another celebration later in the year.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
731
css/main.css
731
css/main.css
|
|
@ -1,7 +1,3 @@
|
|||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'mountains_of_christmasregular';
|
||||
src: url('MountainsofChristmas-webfont.eot');
|
||||
|
|
@ -11,47 +7,33 @@
|
|||
url('MountainsofChristmas-webfont.svg#mountains_of_christmasregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
}
|
||||
/* Paul Lloyd's reset stylesheet: http://barebones.paulrobertlloyd.com/_css/reset.css */
|
||||
|
||||
/* Paul Lloy'd reset stylesheet: http://barebones.paulrobertlloyd.com/_css/reset.css */
|
||||
|
||||
/* ============================================================
|
||||
Viewport
|
||||
============================================================ */
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
}
|
||||
|
||||
@viewport {
|
||||
width: device-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
HTML5 Elements
|
||||
============================================================ */
|
||||
section, nav, article, aside, hgroup, header, footer, main,
|
||||
img, figure, figcaption, details, menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
audio, video, canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Box sizing
|
||||
============================================================ */
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Sectioning
|
||||
============================================================ */
|
||||
body {
|
||||
color: #444;
|
||||
font-family: sans-serif;
|
||||
|
|
@ -61,14 +43,12 @@ body {
|
|||
text-rendering: optimizeLegibility;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
background-color: rgba(219, 207, 198, 0.44);
|
||||
background-image: url("snow.png");
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: 'mountains_of_christmasregular';
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
|
|
@ -77,7 +57,8 @@ h1 {
|
|||
letter-spacing: -0.03125em;
|
||||
margin: 0.5em 0 1em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
article > h1,
|
||||
section > h1,
|
||||
|
|
@ -87,7 +68,8 @@ nav > h1 {
|
|||
line-height: 1;
|
||||
margin: 1.3334em 0 0.3334em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
legend,
|
||||
article article > h1,
|
||||
|
|
@ -100,7 +82,8 @@ section article > h1 {
|
|||
line-height: 1.1429; /* 24px */
|
||||
margin: 1.1429em 0 0.3810em; /* 24px 0 8px */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
|
|
@ -108,7 +91,8 @@ h4 {
|
|||
line-height: 1.3334; /* 24px */
|
||||
margin: 1.3334em 0 0.4444em; /* 24px 0 8px */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #555;
|
||||
font-weight: 700;
|
||||
|
|
@ -116,7 +100,8 @@ h5 {
|
|||
line-height: 1; /* 16px */
|
||||
margin: 1.5em 0 0.5em; /* 24px 0 8px */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
|
|
@ -126,418 +111,238 @@ h6 {
|
|||
letter-spacing: 0.1429em; /* 2px */
|
||||
margin: 1.7143em 0 0.5714em; /* 24px 0 8px */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
footer {
|
||||
margin-top: 1em;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
nav {
|
||||
padding: 2em 4% 3em;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
main,
|
||||
.container {
|
||||
padding: 2em 4% 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@media (min-width:40em) {
|
||||
main {
|
||||
float: right;
|
||||
width: 70%;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.nav-primary {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Grouping
|
||||
============================================================ */
|
||||
p, pre, blockquote, ul, ol, dl, figure, figcaption, table, fieldset, details {
|
||||
font-size: 1em; /* 16px */
|
||||
line-height: 1.5; /* 24px */
|
||||
margin: 0.5em 0; /* 8px 0 */
|
||||
}
|
||||
hr {
|
||||
font-weight: 700;
|
||||
font-size: 2em; /* 32px */
|
||||
line-height: 1; /* 32px */
|
||||
text-align: center;
|
||||
margin: 1em 0 2em; /* 0 0 32px */
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
hr::after {
|
||||
content: "···";
|
||||
color: #bbb;
|
||||
letter-spacing: 1em;
|
||||
padding-left: 1em;
|
||||
height: 0;
|
||||
}
|
||||
pre {
|
||||
margin-left: 1.5em; /* 24px */
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
pre code,
|
||||
pre samp {
|
||||
line-height: 1.5;
|
||||
}
|
||||
blockquote {
|
||||
color: #666;
|
||||
font-size: 1em; /* 16px */
|
||||
line-height: 1.5; /* 32px */
|
||||
border-left: 0.25em solid #e9e9e9;
|
||||
padding: 0 1.5em 0 1em; /* 0 24px 0 16px */
|
||||
}
|
||||
blockquote p {
|
||||
line-height: 1.5; /* 24px */
|
||||
margin: 0.5em 0; /* 8px 0 */
|
||||
}
|
||||
}
|
||||
|
||||
/* Grouping > Lists */
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
padding: 0;
|
||||
}
|
||||
ul li li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
ul li li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-size: 1em; /* 16px */
|
||||
font-weight: 700;
|
||||
line-height: 1.5; /* 24px */
|
||||
}
|
||||
}
|
||||
|
||||
dd, li {
|
||||
margin-left: 1.5em; /* 24px */
|
||||
}
|
||||
dd > *, li > * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dd > *, li > * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Grouping > Figures */
|
||||
figcaption {
|
||||
color: #999;
|
||||
font-size: 0.75em; /* 12px */
|
||||
line-height: 1.3334; /* 16px */
|
||||
padding: 0.6667em 0; /* 8px 0 */
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote + figcaption: before {
|
||||
content: "\2014";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Text-level semantics
|
||||
============================================================ */
|
||||
a {
|
||||
color: #25d;
|
||||
color: #b3002d;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(34,85,221,0.1);
|
||||
}
|
||||
a:focus {
|
||||
outline: 1px solid rgba(34,85,221,0.3);
|
||||
}
|
||||
a:hover {
|
||||
color: #52d;
|
||||
border-bottom-color: rgba(85,34,221,0.2);
|
||||
}
|
||||
a:link, a:visited, a:hover {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
a:active {
|
||||
color: #d25;
|
||||
border-bottom: 1px solid rgba(221,34,85,0.25);
|
||||
transition: none;
|
||||
border-bottom: 1px solid rgba(179, 0, 45, 0.2);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 1px solid rgba(179, 0, 45, 0.5);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #b3002d;
|
||||
border-bottom-color: rgba(179, 0, 45, 0.5);
|
||||
}
|
||||
|
||||
a:link, a:visited, a:hover {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #d25;
|
||||
border-bottom: 1px solid rgba(179, 0, 45, 0.5);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
em, i, cite, var {
|
||||
font-family: Georgia,serif;
|
||||
font-style: italic;
|
||||
line-height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
strong, b {
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
line-height: 90%;
|
||||
}
|
||||
: lang(en-gb)>q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
q::before { content: open-quote; }
|
||||
q::after { content: close-quote;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: #666;
|
||||
font-size: 0.75em; /* 12px */
|
||||
line-height: 1.3334; /* 16px */
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
abbr {
|
||||
color: #666;
|
||||
font-size: 0.875em; /* 14px */
|
||||
line-height: 90%;
|
||||
letter-spacing: 0.0357em; /* 0.5px */
|
||||
}
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
dfn[title] {
|
||||
border-bottom: 1px dotted rgba(0,0,0,0.3);
|
||||
cursor: help;
|
||||
}
|
||||
code, samp {
|
||||
font-family: 'DejaVu Sans Mono',Inconsolata,Consolas,'Lucida Console',monospace;
|
||||
font-size: 1em; /* 16px */
|
||||
line-height: 90%;
|
||||
}
|
||||
code {
|
||||
color: #b03;
|
||||
}
|
||||
code .comment {
|
||||
color: #999;
|
||||
}
|
||||
samp {
|
||||
background-color: #f9f9f9;
|
||||
padding: 0.25em;
|
||||
}
|
||||
kbd {
|
||||
color: #666;
|
||||
font-family: inherit;
|
||||
font-size: 87.5%;
|
||||
line-height: 90%;
|
||||
background-color: #f9f9f9;
|
||||
margin: 0 0.25em; /* 0 4px */
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 4px;
|
||||
padding: 0.3334em 0.5em;
|
||||
box-shadow: inset 0 1px 0 #fff;
|
||||
}
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: smaller;
|
||||
line-height: 90%;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: smaller;
|
||||
line-height: 90%;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Edits
|
||||
============================================================ */
|
||||
mark, ins {
|
||||
mark,
|
||||
ins {
|
||||
background-color: #fff9d9;
|
||||
line-height: 90%;
|
||||
padding: 0 0.125em; /* 0 2px */
|
||||
}
|
||||
ins {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
ins {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
del, s {
|
||||
line-height: 90%;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Embedded content
|
||||
============================================================ */
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 2em 4% 3em;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Tabular data
|
||||
============================================================ */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
caption {
|
||||
caption-side: bottom;
|
||||
color: #999;
|
||||
font-size: 0.75em; /* 12px */
|
||||
line-height: 1.3334; /* 16px */
|
||||
text-align: left;
|
||||
margin: 1em 0; /* 12px 0 */
|
||||
}
|
||||
td, th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
padding: 0.375em 2em 0.375em 0; /* 6px 32px 6px 0 */
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
font-weight: 700;
|
||||
padding-bottom: 0.5em; /* 8px */
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Forms
|
||||
============================================================ */
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
legend {
|
||||
nav ul {
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
}
|
||||
select {
|
||||
-webkit-appearance: button;
|
||||
appearance: normal;
|
||||
}
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
line-height: normal;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
/* Placheolder */
|
||||
::-webkit-input-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
:focus::-webkit-input-placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
:focus:-moz-placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
:focus:-ms-input-placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Interactive
|
||||
============================================================ */
|
||||
summary {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Print styles
|
||||
============================================================ */
|
||||
@media print {
|
||||
|
||||
@page {
|
||||
margin: 0.5cm;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
p, h1, h2, h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #ccc;
|
||||
padding: 0 1em;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: #000 !important;
|
||||
border-bottom: 1px dotted #999;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr, img {
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
border-bottom: 1px solid #999;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
main .img-wrapper {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: 2em 4% 2em;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width:40em) {
|
||||
main {
|
||||
float: right;
|
||||
width: 70%;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url("snow2.png") rgba(219, 207, 198, 0.44);
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media (min-width:40em) {
|
||||
.container {
|
||||
background: url("snow2.png") rgba(219, 207, 198, 0.44) fixed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.global-footer {
|
||||
margin-top: 1em;
|
||||
border-top: 2px dotted #fff;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 2.5em;
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width:40em) {
|
||||
.global-footer {
|
||||
padding-right: 200px;
|
||||
padding-left: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
margin: 0;
|
||||
|
|
@ -547,10 +352,10 @@ main .img-wrapper {
|
|||
}
|
||||
|
||||
.img-wrapper img {
|
||||
display: block;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
display: block;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.img-wrapper:before {
|
||||
content: " ";
|
||||
|
|
@ -561,94 +366,153 @@ width: 150px;
|
|||
border: solid 75px;
|
||||
border-color: transparent transparent #b3002d #b3002d;
|
||||
box-shadow: 3px 2px 2px rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
main .img-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
main .img-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-primary,
|
||||
.grid {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
margin: 0 auto;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.nav-primary {
|
||||
font-family: 'mountains_of_christmasregular';
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.nav-primary li,
|
||||
.grid li {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 2% 1.5em 0;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-primary li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
.grid li {
|
||||
float: left;
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.grid li:nth-child(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-primary li h2,
|
||||
.grid li h2 {
|
||||
margin-right: 85px;
|
||||
font-size: 2.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.grid li .img-wrapper img {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.nav-primary .img-wrapper img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid li .img-wrapper:before {
|
||||
border: solid 38px;
|
||||
border-color: transparent transparent #b3002d #b3002d;
|
||||
box-shadow: 1px 1px 1px rgba(0,0,0,0.35);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-primary .img-wrapper:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-primary li a,
|
||||
.grid li a {
|
||||
display: block;
|
||||
padding: 0.5em 2em;
|
||||
border-bottom: none;
|
||||
color: #b3002d;
|
||||
}
|
||||
|
||||
.nav-primary li a {
|
||||
padding: 0.2em 1em 0.2em 65px;
|
||||
}
|
||||
|
||||
.nav-primary li .img-wrapper {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.grid li a {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-primary li a:hover,
|
||||
.nav-primary li a:focus,
|
||||
.nav-primary li a:active,
|
||||
.grid li a:hover h2,
|
||||
.grid li a:focus h2,
|
||||
.grid li a:active h2 {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-primary {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'mountains_of_christmasregular';
|
||||
font-size: 1.5em;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 0 1.5em 0;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.nav-primary {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-primary li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-primary li:first-child a {
|
||||
border-left: 50px solid #eee;
|
||||
padding-left: 4%;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.nav-primary li:first-child a {
|
||||
padding-top: 2em;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.nav-primary li h2 {
|
||||
margin-right: 85px;
|
||||
font-size: 2.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.nav-primary li .img-wrapper {
|
||||
left: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.nav-primary .img-wrapper img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #eee;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nav-primary .img-wrapper:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-primary li a {
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
color: #b3002d;
|
||||
padding: 8px 1em 6px 65px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.nav-primary li a:hover,
|
||||
.nav-primary li a:focus,
|
||||
.nav-primary li a:active {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.nav-primary li a:hover,
|
||||
.nav-primary li a:focus,
|
||||
|
|
@ -659,19 +523,68 @@ width: 150px;
|
|||
.nav-primary .active:active {
|
||||
background-color: #b3002d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-primary a:hover .img-wrapper img,
|
||||
.nav-primary a:focus .img-wrapper img,
|
||||
.nav-primary a:active .img-wrapper img,
|
||||
.nav-primary .active .img-wrapper img,
|
||||
.nav-primary .active:hover .img-wrapper img,
|
||||
.nav-primary .active:focus .img-wrapper img,
|
||||
.nav-primary .active:active .img-wrapper img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.grid li {
|
||||
float: left;
|
||||
width: 32%;
|
||||
}
|
||||
.grid li:nth-child(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
main .img-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
.title-site {
|
||||
margin: 1.5em auto 1em;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.attribution {
|
||||
margin-top: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width:1em) {
|
||||
.snow-layer {
|
||||
background: url(snow-layer.png) top center transparent repeat-x;
|
||||
z-index: 1;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
background-size: auto 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:40em) {
|
||||
.snowman {
|
||||
background: url(snowman.png) top right transparent no-repeat;
|
||||
height: 110px;
|
||||
width: 100px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 2%;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
background-size: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1em) {
|
||||
.snow-icicles {
|
||||
background: url(snow-icicles.png) bottom center transparent repeat-x;
|
||||
z-index: 1;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: block;
|
||||
background-size: auto 30px;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After < |