├── .gitignore ├── css ├── snow.png ├── snowman.png ├── snow-layer.png ├── snow-icicles.png ├── MountainsofChristmas-webfont.eot ├── MountainsofChristmas-webfont.ttf ├── MountainsofChristmas-webfont.woff ├── main.css └── MountainsofChristmas-demo.html ├── index.md ├── _site ├── README.md ├── index.html └── gingerbread.html ├── _config.yml ├── _layouts ├── default.html ├── home.html └── recipe.html ├── _includes ├── head.html ├── nav.html └── foot.html ├── mince-pies.md ├── README.md ├── gingerbread.md ├── brandy-butter.md ├── shortcrust-pastry.md ├── christmas-pudding.md └── mincemeat.md /.gitignore: -------------------------------------------------------------------------------- 1 | _site -------------------------------------------------------------------------------- /css/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/snow.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Christmas Recipes 4 | home: true 5 | --- -------------------------------------------------------------------------------- /css/snowman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/snowman.png -------------------------------------------------------------------------------- /css/snow-layer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/snow-layer.png -------------------------------------------------------------------------------- /css/snow-icicles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/snow-icicles.png -------------------------------------------------------------------------------- /_site/README.md: -------------------------------------------------------------------------------- 1 | christmas-recipes 2 | ================= 3 | 4 | Nice things to cook around Christmas 5 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name: Christmas Recipes 2 | markdown: redcarpet 3 | pygments: true 4 | baseurl: /christmas-recipes -------------------------------------------------------------------------------- /css/MountainsofChristmas-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/MountainsofChristmas-webfont.eot -------------------------------------------------------------------------------- /css/MountainsofChristmas-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/MountainsofChristmas-webfont.ttf -------------------------------------------------------------------------------- /css/MountainsofChristmas-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maban/christmas-recipes/HEAD/css/MountainsofChristmas-webfont.woff -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 |

4 | 5 | {{ content }} 6 | 7 | {% include nav.html %} 8 | 9 | {% include foot.html %} -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ page.title }} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

-------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 |

4 | 5 | {{ content }} 6 | 7 | 24 | 25 | {% include foot.html %} -------------------------------------------------------------------------------- /_includes/nav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_layouts/recipe.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 | 4 | 5 | 6 | 7 |

8 | 9 |

10 | 11 |

12 |

13 |

14 | 15 | {{ content }} 16 | 17 |

Recipe by {{ page.recipe-attribution }}. Photo by {{ page.image-attribution }}.

18 | 19 |

20 | 21 | {% include nav.html %} 22 | 23 | 24 | 25 | 26 | 27 | {% include foot.html %} -------------------------------------------------------------------------------- /mince-pies.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Mince Pies 4 | image: http://farm1.staticflickr.com/155/346461113_8852803073_q.jpg 5 | recipe-attribution: wikibooks 6 | recipe-attribution-link: http://en.wikibooks.org/wiki/Cookbook:Mince_pie 7 | image-attribution: wasabicube 8 | image-attribution-link: http://www.flickr.com/photos/wasabicube/346461113/ 9 | --- 10 | 11 | ## Ingredients 12 | 13 | * [Shortcrust pastry](shortcrust-pastry.html) 14 | * [Mincemeat](mincemeat.html) 15 | * Icing sugar (to dust) 16 | 17 | ## Method 18 | 19 | 1. Line greased tartlet pans with shortcrust pastry circlets. 20 | 2. Spoon heaped teaspoons of mince into each pie 21 | 3. Top the tartlets with slightly smaller circles of pastry, preferably cut with a fluted cutter 22 | 4. Bake until golden brown. 23 | 5. Just before serving, dust pies with a light sprinkling of icing sugar. -------------------------------------------------------------------------------- /_includes/foot.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Christmas Recipes 2 | ================= 3 | 4 | [View site, hosted on Github Pages](http://maban.github.io/christmas-recipes/) 5 | 6 | This is a demo site, accompanying a tutorial on 24 ways about [getting started with Git Pages and Jekyll](http://24ways.org/2013/get-started-with-github-pages/). 7 | 8 | Recipes and images are licensed under a [Creative Commons Attribution/Share-Alike License](http://creativecommons.org/licenses/by-sa/3.0/). 9 | 10 | ## Usage 11 | 12 | Files can be edited on the [Github site](https://github.com/maban/christmas-recipes/), or locally. For full instructions on how to edit files locally using Jekyll, [follow the tutorial on 24 ways](http://24ways.org/2013/get-started-with-github-pages/). 13 | 14 | Recipes are formatted in [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). 15 | 16 | Jekyll generates the raw files into the _site folder, so do no edit any of the files in here. 17 | 18 | ## Further Reading 19 | 20 | * [About Jekyll](http://jekyllrb.com/) 21 | * [About GitHub Pages](http://pages.github.com/) 22 | -------------------------------------------------------------------------------- /gingerbread.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Gingerbread 4 | recipe-attribution: HungryJenny 5 | recipe-attribution-link: http://www.opensourcefood.com/people/HungryJenny/recipes/soft-christmas-gingerbread-cookies 6 | image: http://farm4.staticflickr.com/3121/3117777526_6399dc0e08_q.jpg 7 | image-attribution: Deborah Lee Soltesz 8 | image-attribution-link: http://www.flickr.com/photos/dsoltesz/3117777526/ 9 | --- 10 | Makes about 15 small cookies. 11 | 12 | ## Ingredients 13 | 14 | * 175g plain flour 15 | * 90g brown sugar 16 | * 50g unsalted butter, diced, at room temperature 17 | * 2 tbsp golden syrup 18 | * 1 egg, beaten 19 | * 1 tsp ground ginger 20 | * 1 tsp cinnamon 21 | * 1 tsp bicarbonate of soda 22 | * Icing sugar to dust 23 | 24 | ## Method 25 | 26 | 1. Sift the flour, ginger, cinnamon and bicarbonate of soda into a large mixing bowl. 27 | 2. Use your fingers to rub in the diced butter. Mix in the sugar. 28 | 3. Mix the egg with the syrup then pour into the flour mixture. Fold in well to form a dough. 29 | 4. Tip some flour onto the work surface and knead the dough until smooth. 30 | 5. Preheat the oven to 180°C. 31 | 6. Roll the dough out flat and use a shaped cutter to make as many cookies as you like. 32 | 7. Transfer the cookies to a tray and bake in the oven for 15 minutes. Lightly dust the cookies with icing sugar. -------------------------------------------------------------------------------- /brandy-butter.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Brandy Butter 4 | image: http://farm3.staticflickr.com/2157/2133911076_1bc7193739_q.jpg 5 | recipe-attribution: wikihow 6 | recipe-attribution-link: http://www.wikihow.com/Make-Orange-Brandy-Butter 7 | image-attribution: Matt Biddulph 8 | image-attribution-link: http://www.flickr.com/photos/mbiddulph/2133911076/ 9 | --- 10 | 11 | ## Ingredients 12 | 13 | * 225g / 8 oz unsalted butter at room temperature 14 | * 750g / 1 1/2 lb icing (powdered) sugar, sifted 15 | * Grated peel of a fresh, washed orange (use organic/homegrown where possible) 16 | * 2 tbsp orange juice 17 | * 2 tbsp brandy 18 | 19 | ## Method 20 | 21 | 1. Place the butter in a mixing bowl and beat using an electric hand beater, or a whisk, until light and fluffy. 22 | 2. Add the icing sugar and mix thoroughly to form a smooth paste. This is best done by adding the icing sugar in gradually. 23 | 3. Add the orange peel, juice and brandy to the mixture. Combine gently. 24 | 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. 25 | 26 | ## Notes 27 | 28 | * This recipe makes approximately 1kg (2 lb) of orange brandy butter. 29 | * 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. 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /shortcrust-pastry.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Shortcrust pastry 4 | image: http://farm5.staticflickr.com/4060/4441228033_c5db8a4b8c_q.jpg 5 | recipe-attribution: Twice Cooked Guide to Shortcrust Pastry 6 | recipe-attribution-link: http://www.twice-cooked.com/2013/05/01/the-twice-cooked-guide-to-shortcrust-pastry/ 7 | image-attribution: Edward Kimber 8 | image-attribution-link: http://www.flickr.com/photos/woodwood/4441228033/ 9 | --- 10 | 11 | ## Ingredients 12 | 13 | * 1 ¼ cups white flour 14 | * ½ cup unsalted butter, cubed and chilled 15 | * 3 tbsp water 16 | * 2 tbsp granulated sugar (if you’re using the crust for something sweet) 17 | * ½-1 tsp salt 18 | 19 | ## Method 20 | 21 | 1. Add the flour, salt, and sugar (if you’re using it) to a bowl or food processor and mix. 22 | 2. Add the cubed butter and mix until it is incorporated and the mixture is the texture of sand. 23 | 3. Add the liquid, and mix until it all just barely comes together into a dough. 24 | 3. Tip the contents onto a piece of plastic wrap. Use the plastic wrap to shape the dough into a puck shape, and chill it in the refrigerator for at least half an hour. 25 | 4. At the end of that time, remove the dough from the refrigerator, and on a lightly floured board, roll it into a circle about an inch wider than your pie pan. 26 | 5. Lay it into the pan, pressing it into the corners so that it fits snugly. Use a fork to perforate the bottom, trim the overhanging dough to half an inch, and then refrigerate for at least half an hour before filling. -------------------------------------------------------------------------------- /christmas-pudding.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Christmas Pudding 4 | image: http://farm9.staticflickr.com/8354/8369364904_8254eda512_q.jpg 5 | recipe-attribution: wikibooks 6 | recipe-attribution-link: http://en.wikibooks.org/wiki/Cookbook:Christmas_Pudding 7 | image-attribution: James Petts 8 | image-attribution-link: http://www.flickr.com/photos/14730981@N08/8369364904/ 9 | --- 10 | 11 | ## Ingredients 12 | 13 | * ½ pound (lb) (225g) raisins 14 | * ¾ lb (340g) currants 15 | * ½ lb (225g) sultanas 16 | * ½ lb (225g) sugar (or less) 17 | * ¾ lb (340g) shredded suet (can be vegetarian; see note below) 18 | * ½ lb (225g) breadcrumbs 19 | * ¼ lb (110g) crystallised peel 20 | * 2 teaspoons (tsp) cinnamon 21 | * 2 oz (55g) almonds (chopped, but not too small) 22 | * ⅓ cup (about 60g) flour 23 | * ⅓ pint (about 190ml) milk 24 | * 3 large eggs (beaten) 25 | * Brandy 26 | * Juice and rind of 1 lemon 27 | * ⅓ of a nutmeg 28 | 29 | ## Method 30 | 31 | 1. Mix and stir well. 32 | 2. Place in pudding basins, and cover with cloths or buttered greaseproof paper, tied tightly in place with string. 33 | 3. Steam for 7 hours and keep till Christmas Day. 34 | 4. To prepare for serving, steam for 2 hours. Times can be reduced by using a pressure cooker. 35 | 36 | ## Notes 37 | 38 | * 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. 39 | * 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. 40 | * 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. -------------------------------------------------------------------------------- /mincemeat.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Mincemeat 4 | image: http://farm6.staticflickr.com/5503/11036090333_bc048afa11_q.jpg 5 | recipe-attribution: wikibooks 6 | recipe-attribution-link: http://en.wikibooks.org/wiki/Cookbook:Mincemeat 7 | image-attribution: gabludlow 8 | image-attribution-link: http://www.flickr.com/photos/gabludlow/11036090333/ 9 | --- 10 | 11 | (approx yield 4½ – 5 lb) 12 | 13 | ## Ingredients 14 | 15 | * 2 1/2 tsp ground cinnamon 16 | * 1/2 tsp ground nutmeg 17 | * 1/2 tsp ground cloves 18 | * 1 Tbsp dried coffee (regular or decaffeinated) 19 | * 1 tsp salt 20 | * 1/2 tsp ground black pepper — added after cooking 21 | * 4 cups sugar 22 | * 6-8 lbs. Baldwin apples 23 | * 1 whole lemon, remove only the seeds 24 | * 3 to 4 lbs. stew beef (neck, plate, etc.) 25 | * 2 cups seedless black raisins 26 | * 1 cup meat stock ( 1 1/2 c if not using brandy) 27 | * 1 1/2 cups sorghum (health food stores often have it, but molasses is easier to find in the supermarkets) 28 | * 1 cup cider vinegar 29 | * 1/2 to 3/4 cups brandy (optional, but don’t risk ruination with cheap brandy) 30 | 31 | ## Method 32 | 33 | 1. Core apples; remove the seeds, but don’t peel. The suet can be removed before cooking and the fat skimmed off that renders from the meat as it cooks if desired. 34 | 2. Cube meat and cover with salted water (salt optional). Simmer until tender - may take up to an hour. 35 | 3. Remove meat and cook the stock down to the amount needed, or thicken slightly with cornstarch. 36 | 4. Put meat through food mill (medium or coarse blade) or equivalent fineness in a food processor. For texture, I definitely prefer the grinder over the processor. 37 | 5. Cut lemon, remove seeds, and purée in a blender, rind and all, with some of the liquid ingredients, or process as finely as possible in a food processor. 38 | 6. Grind the apples, (or process using a coarse blade—but not too fine). 39 | 7. Mix into a large, heavy bottom, stew pot adding alternately apples, meat, raisins. 40 | 8. Add the sugar, spices, the liquids and the lemon purée to the to the meat and apples using hot meat stock to rinse the last of the sorghum into the mixture. Stir thoroughly. 41 | 9. Cook slowly uncovered, stirring often to prevent burning until the mixture is pasteurized and enough of the liquids have evaporated to produce the texture and thickness you want in the finished pie. 42 | 10. Let cool. 43 | 11. Stir in the ground pepper. 44 | 12. Refrigerate, allowing the spices to mellow for several weeks ...or until you can’t hold out any longer. -------------------------------------------------------------------------------- /_site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Christmas Recipes 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

Christmas Recipes

19 | 20 | 21 | 22 |

23 |

27 | 28 |
29 | 30 |
31 |
Brandy Butter
32 | 33 |
38 | 39 |
40 | 41 |
42 |
Christmas Pudding
43 | 44 |
49 | 50 |
51 | 52 |
53 |
Gingerbread
54 | 55 |
63 | 64 |
65 | 66 |
67 |
Mince Pies
68 | 69 |
74 | 75 |
76 | 77 |
78 |
Mincemeat
79 | 80 |
85 | 86 |
87 | 88 |
89 |
Shortcrust pastry
90 | 91 |

95 |

96 | 97 | 103 | 104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /_site/gingerbread.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Gingerbread 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 |

Gingerbread

25 | 26 |

27 |

28 |

29 | 30 |

Makes about 15 small cookies.

31 | 32 |

Ingredients

33 | 34 |

175g plain flour
90g brown sugar
50g unsalted butter, diced, at room temperature
2 tbsp golden syrup
1 egg, beaten
1 tsp ground ginger
1 tsp cinnamon
1 tsp bicarbonate of soda
Icing sugar to dust

45 | 46 |

Method

47 | 48 |

Sift the flour, ginger, cinnamon and bicarbonate of soda into a large mixing bowl.
Use your fingers to rub in the diced butter. Mix in the sugar.
Mix the egg with the syrup then pour into the flour mixture. Fold in well to form a dough.
Tip some flour onto the work surface and knead the dough until smooth.
Preheat the oven to 180°C.
Roll the dough out flat and use a shaped cutter to make as many cookies as you like.
Transfer the cookies to a tray and bake in the oven for 15 minutes. Lightly dust the cookies with icing sugar.

57 | 58 | 59 |

Recipe by HungryJenny. Photo by Deborah Lee Soltesz.

60 | 61 |

62 | 63 |

64 |

67 | 68 | Home 69 | 70 |
74 | 75 |
76 | 77 |
78 | Brandy Butter 79 | 80 |
85 | 86 |
87 | 88 |
89 | Christmas Pudding 90 | 91 |
96 | 97 |
98 | 99 |
100 | Gingerbread 101 | 102 |
110 | 111 |
112 | 113 |
114 | Mince Pies 115 | 116 |
121 | 122 |
123 | 124 |
125 | Mincemeat 126 | 127 |
132 | 133 |
134 | 135 |
136 | Shortcrust pastry 137 | 138 |

142 | 143 |

144 | 145 | 146 | 147 | 148 | 149 | 155 | 156 |

157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'mountains_of_christmasregular'; 3 | src: url('MountainsofChristmas-webfont.eot'); 4 | src: url('MountainsofChristmas-webfont.eot?#iefix') format('embedded-opentype'), 5 | url('MountainsofChristmas-webfont.woff') format('woff'), 6 | url('MountainsofChristmas-webfont.ttf') format('truetype'), 7 | url('MountainsofChristmas-webfont.svg#mountains_of_christmasregular') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* Paul Lloyd's reset stylesheet: http://barebones.paulrobertlloyd.com/_css/reset.css */ 13 | 14 | @-ms-viewport { 15 | width: device-width; 16 | } 17 | 18 | @viewport { 19 | width: device-width; 20 | } 21 | 22 | section, nav, article, aside, hgroup, header, footer, main, 23 | img, figure, figcaption, details, menu { 24 | display: block; 25 | } 26 | 27 | audio, video, canvas { 28 | display: inline-block; 29 | } 30 | 31 | * { 32 | -moz-box-sizing: border-box; 33 | -webkit-box-sizing: border-box; 34 | box-sizing: border-box; 35 | } 36 | 37 | body { 38 | color: #444; 39 | font-family: sans-serif; 40 | font-weight: 400; 41 | font-size: 1em; /* 16px */ 42 | line-height: 1; /* 16px */ 43 | text-rendering: optimizeLegibility; 44 | margin: 0 auto; 45 | padding: 0; 46 | } 47 | 48 | h1, 49 | h2 { 50 | font-family: 'mountains_of_christmasregular'; 51 | } 52 | 53 | h1 { 54 | font-weight: 700; 55 | font-size: 3.5em; 56 | line-height: 1; 57 | letter-spacing: -0.03125em; 58 | margin: 0.5em 0 1em; 59 | -webkit-font-smoothing: antialiased; 60 | } 61 | 62 | h2, 63 | article > h1, 64 | section > h1, 65 | nav > h1 { 66 | font-weight: 700; 67 | font-size: 2em; 68 | line-height: 1; 69 | margin: 1.3334em 0 0.3334em; 70 | -webkit-font-smoothing: antialiased; 71 | } 72 | 73 | h3, 74 | legend, 75 | article article > h1, 76 | article section > h1, 77 | section section > h1, 78 | section article > h1 { 79 | color: #333; 80 | font-weight: 400; 81 | font-size: 1.3125em; /* 21px */ 82 | line-height: 1.1429; /* 24px */ 83 | margin: 1.1429em 0 0.3810em; /* 24px 0 8px */ 84 | -webkit-font-smoothing: antialiased; 85 | } 86 | 87 | h4 { 88 | color: #444; 89 | font-weight: 400; 90 | font-size: 1.125em; /* 18px */ 91 | line-height: 1.3334; /* 24px */ 92 | margin: 1.3334em 0 0.4444em; /* 24px 0 8px */ 93 | -webkit-font-smoothing: antialiased; 94 | } 95 | 96 | h5 { 97 | color: #555; 98 | font-weight: 700; 99 | font-size: 1em; /* 16px */ 100 | line-height: 1; /* 16px */ 101 | margin: 1.5em 0 0.5em; /* 24px 0 8px */ 102 | -webkit-font-smoothing: antialiased; 103 | } 104 | 105 | h6 { 106 | color: #666; 107 | font-weight: 700; 108 | font-size: 0.875em; /* 14px */ 109 | line-height: 1.1429; /* 16px */ 110 | text-transform: uppercase; 111 | letter-spacing: 0.1429em; /* 2px */ 112 | margin: 1.7143em 0 0.5714em; /* 24px 0 8px */ 113 | -webkit-font-smoothing: antialiased; 114 | } 115 | 116 | p, pre, blockquote, ul, ol, dl, figure, figcaption, table, fieldset, details { 117 | font-size: 1em; /* 16px */ 118 | line-height: 1.5; /* 24px */ 119 | margin: 0.5em 0; /* 8px 0 */ 120 | } 121 | 122 | ol { 123 | list-style-type: decimal; 124 | padding: 0; 125 | } 126 | 127 | ul { 128 | list-style-type: square; 129 | padding: 0; 130 | } 131 | 132 | ul li li { 133 | list-style-type: circle; 134 | } 135 | 136 | dt { 137 | font-size: 1em; /* 16px */ 138 | font-weight: 700; 139 | line-height: 1.5; /* 24px */ 140 | } 141 | 142 | dd, li { 143 | margin-left: 1.5em; /* 24px */ 144 | } 145 | 146 | dd > *, li > * { 147 | margin-top: 0; 148 | } 149 | 150 | figcaption { 151 | color: #999; 152 | font-size: 0.75em; /* 12px */ 153 | line-height: 1.3334; /* 16px */ 154 | padding: 0.6667em 0; /* 8px 0 */ 155 | clear: left; 156 | } 157 | 158 | blockquote + figcaption: before { 159 | content: "\2014"; 160 | } 161 | 162 | a { 163 | color: #b3002d; 164 | text-decoration: none; 165 | border-bottom: 1px solid rgba(179, 0, 45, 0.2); 166 | } 167 | 168 | a:focus { 169 | outline: 1px solid rgba(179, 0, 45, 0.5); 170 | } 171 | 172 | a:hover { 173 | color: #b3002d; 174 | border-bottom-color: rgba(179, 0, 45, 0.5); 175 | } 176 | 177 | a:link, a:visited, a:hover { 178 | transition: all 0.2s ease; 179 | } 180 | 181 | a:active { 182 | color: #d25; 183 | border-bottom: 1px solid rgba(179, 0, 45, 0.5); 184 | transition: none; 185 | } 186 | 187 | em, i, cite, var { 188 | font-family: Georgia,serif; 189 | font-style: italic; 190 | line-height: 90%; 191 | } 192 | 193 | strong, b { 194 | color: #333; 195 | font-weight: 700; 196 | line-height: 90%; 197 | } 198 | 199 | small { 200 | color: #666; 201 | font-size: 0.75em; /* 12px */ 202 | line-height: 1.3334; /* 16px */ 203 | display: inline-block; 204 | } 205 | 206 | abbr { 207 | color: #666; 208 | font-size: 0.875em; /* 14px */ 209 | line-height: 90%; 210 | letter-spacing: 0.0357em; /* 0.5px */ 211 | } 212 | 213 | abbr[title], 214 | dfn[title] { 215 | border-bottom: 1px dotted rgba(0,0,0,0.3); 216 | cursor: help; 217 | } 218 | 219 | sub { 220 | font-size: smaller; 221 | line-height: 90%; 222 | vertical-align: sub; 223 | } 224 | 225 | sup { 226 | font-size: smaller; 227 | line-height: 90%; 228 | vertical-align: super; 229 | } 230 | 231 | mark, 232 | ins { 233 | background-color: #fff9d9; 234 | line-height: 90%; 235 | padding: 0 0.125em; /* 0 2px */ 236 | } 237 | 238 | ins { 239 | background-color: #e9e9e9; 240 | } 241 | 242 | del, s { 243 | line-height: 90%; 244 | text-decoration: line-through; 245 | } 246 | 247 | img { 248 | border: 0; 249 | max-width: 100%; 250 | } 251 | 252 | nav { 253 | padding: 2em 4% 3em; 254 | } 255 | 256 | nav ul { 257 | margin: 0; 258 | list-style: none; 259 | } 260 | 261 | @media print { 262 | 263 | @page { 264 | margin: 0.5cm; 265 | } 266 | 267 | * { 268 | background: transparent !important; 269 | color: #000 !important; 270 | text-shadow: none !important; 271 | box-shadow: none; 272 | } 273 | 274 | p, h1, h2, h3 { 275 | orphans: 3; 276 | widows: 3; 277 | } 278 | 279 | h1, h2, h3, h4 { 280 | page-break-after: avoid; 281 | } 282 | 283 | blockquote { 284 | border-left: 4px solid #ccc; 285 | padding: 0 1em; 286 | page-break-inside: avoid; 287 | } 288 | 289 | a, a:visited { 290 | color: #000 !important; 291 | border-bottom: 1px dotted #999; 292 | padding-left: 0 !important; 293 | } 294 | 295 | img { 296 | page-break-inside: avoid; 297 | } 298 | } 299 | 300 | 301 | main { 302 | padding: 2em 4% 2em; 303 | float: left; 304 | width: 100%; 305 | margin-bottom: 0; 306 | } 307 | 308 | @media (min-width:40em) { 309 | main { 310 | float: right; 311 | width: 70%; 312 | clear: none; 313 | } 314 | } 315 | 316 | .container { 317 | background: url("snow.png") #E5EAEE; 318 | width: 100%; 319 | float: left; 320 | } 321 | 322 | @media (min-width:40em) { 323 | .container { 324 | background: url("snow.png") #E5EAEE fixed; 325 | } 326 | } 327 | 328 | 329 | 330 | .global-footer { 331 | margin-top: 1em; 332 | border-top: 2px dotted #fff; 333 | padding-top: 0.5em; 334 | padding-bottom: 2.5em; 335 | background-color: rgba(255,255,255,0.4); 336 | clear: both; 337 | text-align: center; 338 | } 339 | 340 | @media (min-width:40em) { 341 | .global-footer { 342 | padding-right: 200px; 343 | padding-left: 200px; 344 | } 345 | } 346 | 347 | .img-wrapper { 348 | margin: 0; 349 | position: absolute; 350 | top: 0; 351 | right: 0; 352 | } 353 | 354 | .img-wrapper img { 355 | display: block; 356 | height: 150px; 357 | width: 150px; 358 | } 359 | 360 | .img-wrapper:before { 361 | content: " "; 362 | display: block; 363 | position: absolute; 364 | top: 0; 365 | right: 0; 366 | border: solid 75px; 367 | border-color: transparent transparent #b3002d #b3002d; 368 | box-shadow: 3px 2px 2px rgba(0,0,0,0.4); 369 | } 370 | 371 | main .img-wrapper { 372 | display: none; 373 | } 374 | 375 | @media (min-width: 40em) { 376 | main .img-wrapper { 377 | display: block; 378 | } 379 | } 380 | 381 | 382 | .grid { 383 | padding: 0; 384 | margin: 0 auto; 385 | width: 96%; 386 | } 387 | 388 | .grid li { 389 | position: relative; 390 | display: block; 391 | width: 100%; 392 | margin: 0 2% 1.5em 0; 393 | background-color: #fff; 394 | overflow: hidden; 395 | box-shadow: 0px 0px 2px rgba(0,0,0,0.1); 396 | } 397 | 398 | @media (min-width: 40em) { 399 | .grid li { 400 | float: left; 401 | width: 32%; 402 | } 403 | 404 | .grid li:nth-child(3n+3) { 405 | margin-right: 0; 406 | } 407 | 408 | } 409 | 410 | .grid li h2 { 411 | margin-right: 85px; 412 | font-size: 2.5em; 413 | margin-top: 0.5em; 414 | } 415 | 416 | .grid li .img-wrapper img { 417 | width: 76px; 418 | height: 76px; 419 | } 420 | 421 | .grid li .img-wrapper:before { 422 | border: solid 38px; 423 | border-color: transparent transparent #b3002d #b3002d; 424 | box-shadow: 1px 1px 1px rgba(0,0,0,0.35); 425 | } 426 | 427 | .grid li a { 428 | display: block; 429 | padding: 0.5em 2em; 430 | border-bottom: none; 431 | color: #b3002d; 432 | height: 150px; 433 | } 434 | 435 | .grid li a:hover h2, 436 | .grid li a:focus h2, 437 | .grid li a:active h2 { 438 | color: #444; 439 | } 440 | 441 | 442 | .nav-primary { 443 | float: left; 444 | margin: 0; 445 | padding: 0; 446 | font-family: 'mountains_of_christmasregular'; 447 | font-size: 1.5em; 448 | position: relative; 449 | display: block; 450 | width: 100%; 451 | margin: 0 0 1.5em 0; 452 | background-color: #fff; 453 | overflow: hidden; 454 | box-shadow: 0px 0px 2px rgba(0,0,0,0.1); 455 | } 456 | 457 | @media (min-width: 40em) { 458 | .nav-primary { 459 | width: 30%; 460 | } 461 | } 462 | 463 | .nav-primary li { 464 | position: relative; 465 | margin: 0; 466 | } 467 | 468 | .nav-primary li:first-child a { 469 | border-left: 50px solid #eee; 470 | padding-left: 4%; 471 | } 472 | 473 | @media (min-width: 40em) { 474 | .nav-primary li:first-child a { 475 | padding-top: 2em; 476 | 477 | } 478 | } 479 | 480 | .nav-primary li h2 { 481 | margin-right: 85px; 482 | font-size: 2.5em; 483 | margin-top: 0.5em; 484 | } 485 | 486 | .nav-primary li .img-wrapper { 487 | left: 0; 488 | 489 | 490 | } 491 | 492 | .nav-primary .img-wrapper img { 493 | width: 50px; 494 | height: 50px; 495 | background-color: #eee; 496 | opacity: 0.5; 497 | } 498 | 499 | .nav-primary .img-wrapper:before { 500 | border: none; 501 | } 502 | 503 | .nav-primary li a { 504 | display: block; 505 | border-bottom: none; 506 | color: #b3002d; 507 | padding: 8px 1em 6px 65px; 508 | background-color: #fff; 509 | } 510 | 511 | .nav-primary li a:hover, 512 | .nav-primary li a:focus, 513 | .nav-primary li a:active { 514 | color: #444; 515 | } 516 | 517 | .nav-primary li a:hover, 518 | .nav-primary li a:focus, 519 | .nav-primary li a:active, 520 | .nav-primary .active, 521 | .nav-primary .active:hover, 522 | .nav-primary .active:focus, 523 | .nav-primary .active:active { 524 | background-color: #6F1E1E; 525 | color: #fff; 526 | } 527 | 528 | .nav-primary li a:active, 529 | .nav-primary .active, 530 | .nav-primary .active:active { 531 | background-color: #b3002d; 532 | color: #fff; 533 | } 534 | 535 | .nav-primary a:hover .img-wrapper img, 536 | .nav-primary a:focus .img-wrapper img, 537 | .nav-primary a:active .img-wrapper img, 538 | .nav-primary .active .img-wrapper img, 539 | .nav-primary .active:hover .img-wrapper img, 540 | .nav-primary .active:focus .img-wrapper img, 541 | .nav-primary .active:active .img-wrapper img { 542 | opacity: 1; 543 | } 544 | 545 | .title-site { 546 | margin: 1.5em auto 1em; 547 | text-align: center; 548 | width: auto; 549 | display: block; 550 | position: relative; 551 | } 552 | 553 | .attribution { 554 | margin-top: 1.5em; 555 | font-weight: bold; 556 | } 557 | 558 | @media (min-width:1em) { 559 | .snow-layer { 560 | background: url(snow-layer.png) top center transparent repeat-x; 561 | z-index: 1; 562 | height: 20px; 563 | width: 100%; 564 | position: fixed; 565 | bottom: 0; 566 | display: block; 567 | background-size: auto 20px; 568 | } 569 | } 570 | 571 | @media (min-width:40em) { 572 | .snowman { 573 | background: url(snowman.png) top right transparent no-repeat; 574 | height: 110px; 575 | width: 100px; 576 | position: fixed; 577 | bottom: 0; 578 | right: 2%; 579 | z-index: 3; 580 | display: block; 581 | background-size: 80px; 582 | } 583 | } 584 | 585 | @media (min-width:1em) { 586 | .snow-icicles { 587 | background: url(snow-icicles.png) bottom center transparent repeat-x; 588 | z-index: 1; 589 | height: 30px; 590 | width: 100%; 591 | position: fixed; 592 | top: 0; 593 | display: block; 594 | background-size: auto 30px; 595 | } 596 | } 597 | -------------------------------------------------------------------------------- /css/MountainsofChristmas-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Mountains of Christmas Regular Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |

30 | 32 |

Specimen
Sample Layout
Installing Webfonts

38 | 39 |

40 | 41 | 42 |

43 | 44 |

45 |

46 |

AaBb

47 |

48 |

49 | 50 |

51 |

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

52 |

53 |

54 |

55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |

10	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

72 | 73 |

74 | 75 |

76 | 77 | 78 | 79 |

80 | 81 | 82 |

83 |

body

body

84 |

85 | bodyMountains of Christmas Regular 86 |

87 |

88 | bodyArial 89 |

90 |

91 | bodyVerdana 92 |

93 |

94 | bodyGeorgia 95 |

96 | 97 | 98 | 99 |

100 | 101 | 102 |

103 | 104 |

105 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

106 | 107 |

108 |

109 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

110 | 111 |

112 |

113 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

114 | 115 |

116 |

117 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

118 | 119 |

120 |

121 | 122 |

123 |

124 |

125 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

126 | 127 |

128 |

129 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

130 | 131 |

132 |

133 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

134 | 135 |

136 | 137 |

138 | 139 |

140 | 141 |

142 |

143 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

144 |

145 |

146 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

147 |

148 | 149 |

150 | 151 |

152 | 153 |

154 |

155 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

156 |

157 |

158 | 159 |

160 | 161 | 162 | 163 |

164 |

165 |

166 | 167 |

168 |

169 |

170 | 171 |

172 |

173 |

174 | 175 |

176 |

177 |

178 | 179 |

180 |

181 | 182 |

183 | 184 |

185 |

186 |

187 | 188 |

189 |

190 |

191 | 192 |

193 |

194 |

195 | 196 |

197 |

198 | 199 |

200 | 201 |

202 |

203 |

204 |

205 |

206 |

207 |

208 | 209 |

210 | 211 |

212 | 213 |

214 |

215 |

216 |

217 |

218 | 219 |

220 | 221 | 222 | 223 | 224 |

225 | 226 |

227 | 228 |

229 | 230 |

231 |

Lorem Ipsum Dolor

232 |

Etiam porta sem malesuada magna mollis euismod

233 | 234 |

By Aenean Lacinia

235 |

236 |

237 |

238 |

239 |

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

240 | 241 | 242 |

Pellentesque ornare sem

243 | 244 |

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

245 | 246 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

247 | 248 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

249 | 250 |

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

251 | 252 |

Cras mattis consectetur

253 | 254 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

255 | 256 |

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

257 |

258 | 259 |

260 | 261 |

262 |

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

263 |

264 | 265 |

Maecenas sed diam eget risus varius.

266 | 267 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

268 | 269 | 270 | 271 |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

272 | 273 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

274 | 275 |

276 |

277 | 278 |

279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 |

289 | 290 |

291 | 292 |

293 |

294 |

295 |

Installing Webfonts

296 | 297 |

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

298 | 299 |

1. Upload your webfonts

300 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

301 | 302 |

2. Include the webfont stylesheet

303 |

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

304 | 305 | 306 |


307 | @font-face{ 
308 | 	font-family: 'MyWebFont';
309 | 	src: url('WebFont.eot');
310 | 	src: url('WebFont.eot?iefix') format('eot'),
311 | 	     url('WebFont.woff') format('woff'),
312 | 	     url('WebFont.ttf') format('truetype'),
313 | 	     url('WebFont.svg#webfont') format('svg');
314 | }
315 |

316 | 317 |

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

318 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 319 | 320 |

3. Modify your own stylesheet

321 |

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

322 | p { font-family: 'MyWebFont', Arial, sans-serif; } 323 | 324 |

4. Test

325 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

326 |

327 | 328 |

329 |

330 |

Troubleshooting
Font-Face Problems

331 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

332 | 333 |

Fonts not showing in any browser

334 | 335 |

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

336 | 337 |

Fonts not loading in iPhone or iPad

338 | 339 |

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

340 | 341 |

Fonts not loading in Firefox

342 | 343 |

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

344 | 345 |

Fonts not loading in IE

346 | 347 |

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

348 | 349 |

Fonts not loading in IE9

350 | 351 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

352 |

353 |

354 |

355 | 356 |

357 | 358 |

359 | 362 |

363 | 364 | 365 | --------------------------------------------------------------------------------

{{ page.title }}

{{ page.title }}

{{ page.title }}

Christmas Recipes

Gingerbread

Ingredients

Method

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

Pellentesque ornare sem

Cras mattis consectetur

Installing Webfonts

1. Upload your webfonts

2. Include the webfont stylesheet

3. Modify your own stylesheet

4. Test

TroubleshootingFont-Face Problems

Fonts not showing in any browser

Fonts not loading in iPhone or iPad

Fonts not loading in Firefox

Fonts not loading in IE

Fonts not loading in IE9

Troubleshooting
Font-Face Problems