seasons 0.9.3.beta1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/seasons.rb +3 -0
- data/seasons.gemspec +41 -0
- data/stylesheets/seasons/_core.sass +309 -0
- data/stylesheets/seasons/_tools.sass +5 -0
- data/stylesheets/seasons/tools/_basic-functions.sass +80 -0
- data/stylesheets/seasons/tools/_css3.sass +535 -0
- data/stylesheets/seasons/tools/_grid-tools.sass +17 -0
- data/stylesheets/seasons/tools/_modular-scale.sass +310 -0
- data/stylesheets/seasons/tools/_reset.sass +192 -0
- data/templates/project/_chrome.scss +52 -0
- data/templates/project/_config.sass +84 -0
- data/templates/project/_skin.scss +44 -0
- data/templates/project/article.html +129 -0
- data/templates/project/img.jpg +0 -0
- data/templates/project/index.html +102 -0
- data/templates/project/manifest.rb +24 -0
- data/templates/project/resources.html +168 -0
- data/templates/project/style.sass +33 -0
- data/templates/project/toc.json +22 -0
- data/templates/project/treesaver-0.9.3b.js +129 -0
- metadata +97 -0
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="no-treesaver no-js">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<!-- META AND PAGE INFO -->
|
|
6
|
+
<title>Title</title>
|
|
7
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
8
|
+
<meta name="viewport" content="width = device-width, height = device-height, maximum-scale=1.0, minimum-scale=1.0" />
|
|
9
|
+
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
10
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
11
|
+
|
|
12
|
+
<!-- LINK TO THE STYLE SHEET -->
|
|
13
|
+
<link rel="stylesheet" href="stylesheets/style.css" />
|
|
14
|
+
|
|
15
|
+
<!-- RESOURCES.HTML CONTAINS THE PAGE LAYOUTS -->
|
|
16
|
+
<link rel="resources prefetch" href="resources.html" />
|
|
17
|
+
|
|
18
|
+
<!-- TOC.JSON CONTAINS THE ARTICLE ORDER -->
|
|
19
|
+
<link rel="index" href="toc.json" type="application/json">
|
|
20
|
+
|
|
21
|
+
<!-- LOAD TREESAVER -->
|
|
22
|
+
<script src="javascripts/treesaver-0.9.3b.js"></script>
|
|
23
|
+
|
|
24
|
+
<!-- RESOURCES.HTML CONTAINS THE LAYOUTS AND TOC.HTML CONTAINS YOUR TABLE OF CONTENTS -->
|
|
25
|
+
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed.png" />
|
|
26
|
+
<link rel="shortcut icon" href="images/favicon.ico" />
|
|
27
|
+
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
|
|
31
|
+
<!-- NO-TREESAVER HEADDER+NAV -->
|
|
32
|
+
<!-- Note that HTML5 tags are not used because this will usually be viewed on old and incompatible browsers. -->
|
|
33
|
+
<div id="header">
|
|
34
|
+
<h1><a href="index.html">Page Title</a></h1>
|
|
35
|
+
<div class="nav">
|
|
36
|
+
<ol role="navigation sitemap">
|
|
37
|
+
<li><a href="#">Nav Link 1</a></li>
|
|
38
|
+
<li><a href="#">Nav Link 2</a></li>
|
|
39
|
+
<li><a href="#">Articles</a>
|
|
40
|
+
<ol>
|
|
41
|
+
<li><a href="#">Article link 1</a></li>
|
|
42
|
+
<li><a href="#">Article link 2</a></li>
|
|
43
|
+
<li><a href="#">Article link 3</a></li>
|
|
44
|
+
<li><a href="#">Article link 4</a></li>
|
|
45
|
+
<li><a href="#">Article link 5</a></li>
|
|
46
|
+
<li><a href="#">Article link 6</a></li>
|
|
47
|
+
<li><a href="#">Article link 7</a></li>
|
|
48
|
+
</ol>
|
|
49
|
+
</li>
|
|
50
|
+
</ol>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div id="content">
|
|
55
|
+
|
|
56
|
+
<!--======================== CONTENT ========================-->
|
|
57
|
+
<article data-grids="department">
|
|
58
|
+
|
|
59
|
+
<figure>
|
|
60
|
+
<hgroup data-sizes="title fallback">
|
|
61
|
+
<h3 class="byline">byline</h3>
|
|
62
|
+
<h1 class="hed">Hed</h1>
|
|
63
|
+
<h2 class="dek">Dek</h2>
|
|
64
|
+
<h4 class="timestamp">timestamp</h4>
|
|
65
|
+
</hgroup>
|
|
66
|
+
</figure>
|
|
67
|
+
|
|
68
|
+
<p class="noindent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non eros ac augue eleifend malesuada. Praesent sagittis nisl eu elit ultrices adipiscing. Maecenas lectus ligula, mollis rutrum sagittis nec, pretium et neque. Praesent sit amet justo ut diam mollis laoreet sit amet sed dui. Nulla id nunc non tortor semper tincidunt nec nec elit. Maecenas convallis nisi in eros interdum euismod. Cras laoreet consequat eros, vel posuere est hendrerit sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at sapien eros, et blandit ipsum. Aliquam elementum orci eget tortor feugiat eu eleifend elit volutpat. Mauris auctor velit eget nisl tincidunt elementum. Fusce dignissim urna ut augue accumsan at aliquam mauris vulputate. Fusce facilisis lorem ac nunc sollicitudin ultrices. Vestibulum egestas placerat orci, eget egestas dui pretium eu. Aenean vel neque egestas dolor molestie tincidunt. Cras id nulla ante, quis pulvinar magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ut eros lectus.</p>
|
|
69
|
+
|
|
70
|
+
<!--A sample image-->
|
|
71
|
+
<figure class="zoomable">
|
|
72
|
+
<!-- USE DIFFERENT SIZED IMAGES TO HELP LOAD TIME -->
|
|
73
|
+
<!-- data-minWidth is used to let Treesaver know the minimum space required for figures to fit in grids and lightboxes -->
|
|
74
|
+
<div data-sizes="single" data-minWidth="243" data-minHeight="202" ratio="4x3">
|
|
75
|
+
<img data-src="images/img.jpg" width="243" height="182" />
|
|
76
|
+
<p class="caption">Caption congue eu sollicitudin ac, fringilla vitae elit. <span class="credit">John Smith</span></p>
|
|
77
|
+
</div>
|
|
78
|
+
<!--Using regular "src" and the class "no-treesaver" so this displays on old browsers or without JavaScript.-->
|
|
79
|
+
<div data-sizes="double" data-minWidth="507" data-minHeight="400" ratio="4x3" class="no-treesaver">
|
|
80
|
+
<img src="images/img.jpg" width="507" height="380" />
|
|
81
|
+
<p class="caption">Caption congue eu sollicitudin ac, fringilla vitae elit. <span class="credit">John Smith</span></p>
|
|
82
|
+
</div>
|
|
83
|
+
<div data-sizes="triple" data-minWidth="771" data-minHeight="598" ratio="4x3">
|
|
84
|
+
<img data-src="images/img.jpg" width="771" height="578" />
|
|
85
|
+
<p class="caption">Caption congue eu sollicitudin ac, fringilla vitae elit. <span class="credit">John Smith</span></p>
|
|
86
|
+
</div>
|
|
87
|
+
<div data-sizes="quad" data-minWidth="1035" data-minHeight="796" ratio="4x3">
|
|
88
|
+
<img data-src="images/img.jpg" width="1035" height="776" />
|
|
89
|
+
<p class="caption">Caption congue eu sollicitudin ac, fringilla vitae elit. <span class="credit">John Smith</span></p>
|
|
90
|
+
</div>
|
|
91
|
+
<!-- Fallback content will be run into the column if a figure doesn’t place -->
|
|
92
|
+
<div data-sizes="fallback"><p>Figure didn’t place, click to view.</p></div>
|
|
93
|
+
</figure>
|
|
94
|
+
|
|
95
|
+
<p>Integer ultrices sodales nibh, sed convallis mauris accumsan vitae. Proin libero ipsum, congue eu dignissim nec, malesuada eu ante. Nulla sit amet odio nec risus tempor ultricies. Nunc sit amet risus lectus. Aliquam est lorem, congue eu sollicitudin ac, fringilla vitae elit. Nam sollicitudin, urna at pellentesque tempus, tellus diam ultricies tellus, sagittis pretium nulla risus ut quam. Donec cursus enim vel orci imperdiet egestas. Donec porttitor, risus at ornare condimentum, metus felis pulvinar magna, eu mollis lorem dui convallis sem. Aliquam elementum diam ut quam tempus imperdiet. Etiam egestas, dolor a ullamcorper feugiat, diam orci facilisis tortor, eget scelerisque sem nunc nec nisl. Nullam aliquam egestas porttitor. Donec convallis, lectus eget consequat bibendum, tellus eros semper leo, vel vehicula risus diam sed urna. Ut viverra justo ut purus posuere malesuada. Quisque nec nunc dui. Nunc consectetur, felis ac ultrices bibendum, elit sapien tristique lorem, nec facilisis felis mi vel est. Donec nec nisi ac sapien consectetur tempor. Nunc interdum felis et erat tincidunt id luctus tortor fermentum. Suspendisse vehicula odio in mi auctor sed pellentesque felis varius. Proin fermentum nunc vel risus dictum non eleifend dui feugiat.</p>
|
|
96
|
+
<h5>Subhed one</h5>
|
|
97
|
+
<p>Aliquam rutrum, turpis sit amet iaculis tincidunt, lorem elit porttitor risus, ut elementum arcu urna et odio. Quisque adipiscing diam non velit dapibus hendrerit. In hac habitasse platea dictumst. Proin egestas, lectus vitae pharetra eleifend, ipsum dolor eleifend arcu, quis suscipit augue metus eu tellus. Morbi felis nisi, accumsan ac tincidunt eleifend, ornare nec magna. Duis eget accumsan sem. Morbi eu tellus turpis. Duis sagittis velit in justo pulvinar eget congue justo mollis. Nulla varius rhoncus lacinia. Ut lobortis tempor laoreet. Nam sollicitudin aliquam nulla, in bibendum risus dictum id. Donec ultricies adipiscing tortor, vitae facilisis arcu accumsan sed. Donec nec augue at justo dignissim tempor sed eget justo. Cras justo lorem, porta eget vulputate tempor, scelerisque ut dolor. Donec nec porttitor risus. Nunc vitae urna in orci placerat cursus non eu nunc.</p>
|
|
98
|
+
<h6>Subhed two</h6>
|
|
99
|
+
<p>Nunc massa risus, fermentum ut malesuada vitae, vehicula in felis. Maecenas lobortis elit tempor nisi condimentum posuere. Morbi dignissim quam id nisl dapibus vehicula consectetur velit pretium. Nam eu varius nisl. Maecenas condimentum viverra ante, id rhoncus turpis eleifend quis. Curabitur suscipit malesuada tellus ullamcorper malesuada. Phasellus sit amet risus at sapien rutrum congue. Suspendisse ultrices augue ut ante tempus in ultrices elit convallis. Aenean non leo vitae orci volutpat ornare. Nam vitae euismod risus. Sed eu turpis nisi. Mauris ipsum mi, convallis nec pretium sit amet, posuere nec elit. Suspendisse euismod, quam quis volutpat placerat, lacus urna interdum neque, eu pellentesque eros sapien eget enim. Nam suscipit bibendum nulla non aliquam. Ut id dui tellus, eget sollicitudin tellus. Aenean suscipit elit id massa scelerisque porta eget eu lorem.</p>
|
|
100
|
+
<p>Sed euismod ligula et nibh tincidunt a elementum odio consequat. Donec cursus nunc non eros feugiat sit amet pharetra risus mattis. Aliquam volutpat auctor iaculis. Vestibulum elementum felis vitae lacus gravida in euismod nulla posuere. Aliquam nulla purus, viverra volutpat sagittis quis, ultrices at augue. Vestibulum eu eros at neque facilisis accumsan. Morbi ligula mi, fermentum a sagittis sed, luctus adipiscing quam. Fusce sollicitudin mollis sem non vulputate. Vestibulum tincidunt, massa et egestas vestibulum, ligula tortor ullamcorper enim, eget ultricies lectus libero et nibh. Etiam ultrices molestie arcu. In urna purus, euismod ac dictum vitae, iaculis ac leo. Phasellus lectus massa, scelerisque non hendrerit in, porttitor ut sapien. Maecenas ipsum neque, volutpat ac ultrices eget, venenatis sed odio. Suspendisse potenti. Morbi mattis cursus diam vel placerat. Phasellus congue, ligula non congue rutrum, nisl nulla placerat justo, et imperdiet urna justo id nisl. Sed ligula tortor, consequat quis auctor at, aliquet non tortor. Sed sodales aliquam justo, ut sagittis orci ultricies vel. Pellentesque ut ligula massa, posuere lobortis risus.</p>
|
|
101
|
+
|
|
102
|
+
</article>
|
|
103
|
+
<!--====================== END CONTENT ======================-->
|
|
104
|
+
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<!--NO-JS FOOTER-->
|
|
108
|
+
<div id="footer">
|
|
109
|
+
<div class="nav">
|
|
110
|
+
<ol>
|
|
111
|
+
<li><a href="#">Nav Link 1</a></li>
|
|
112
|
+
<li><a href="#">Nav Link 2</a></li>
|
|
113
|
+
<li><a href="#">Articles</a>
|
|
114
|
+
<ol>
|
|
115
|
+
<li><a href="#">Article link 1</a></li>
|
|
116
|
+
<li><a href="#">Article link 2</a></li>
|
|
117
|
+
<li><a href="#">Article link 3</a></li>
|
|
118
|
+
<li><a href="#">Article link 4</a></li>
|
|
119
|
+
<li><a href="#">Article link 5</a></li>
|
|
120
|
+
<li><a href="#">Article link 6</a></li>
|
|
121
|
+
<li><a href="#">Article link 7</a></li>
|
|
122
|
+
</ol>
|
|
123
|
+
</li>
|
|
124
|
+
</ol>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="no-treesaver no-js">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<!-- META AND PAGE INFO -->
|
|
6
|
+
<title>Title</title>
|
|
7
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
8
|
+
<meta name="viewport" content="width = device-width, height = device-height, maximum-scale=1.0, minimum-scale=1.0" />
|
|
9
|
+
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
10
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
11
|
+
|
|
12
|
+
<!-- LINK TO THE STYLE SHEET -->
|
|
13
|
+
<link rel="stylesheet" href="stylesheets/style.css" />
|
|
14
|
+
|
|
15
|
+
<!-- RESOURCES.HTML CONTAINS THE PAGE LAYOUTS -->
|
|
16
|
+
<link rel="resources prefetch" href="resources.html" />
|
|
17
|
+
|
|
18
|
+
<!-- TOC.JSON CONTAINS THE ARTICLE ORDER -->
|
|
19
|
+
<link rel="index" href="toc.json" type="application/json">
|
|
20
|
+
|
|
21
|
+
<!-- LOAD TREESAVER -->
|
|
22
|
+
<script src="javascripts/treesaver-0.9.3b.js"></script>
|
|
23
|
+
|
|
24
|
+
<!-- RESOURCES.HTML CONTAINS THE LAYOUTS AND TOC.HTML CONTAINS YOUR TABLE OF CONTENTS -->
|
|
25
|
+
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed.png" />
|
|
26
|
+
<link rel="shortcut icon" href="images/favicon.ico" />
|
|
27
|
+
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
|
|
31
|
+
<!-- NO-TREESAVER HEADDER+NAV -->
|
|
32
|
+
<!-- Note that HTML5 tags are not used because this will usually be viewed on old and incompatible browsers. -->
|
|
33
|
+
<div id="header">
|
|
34
|
+
<h1><a href="index.html">Page Title</a></h1>
|
|
35
|
+
<div class="nav">
|
|
36
|
+
<ol role="navigation sitemap">
|
|
37
|
+
<li><a href="#">Nav Link 1</a></li>
|
|
38
|
+
<li><a href="#">Nav Link 2</a></li>
|
|
39
|
+
<li><a href="#">Articles</a>
|
|
40
|
+
<ol>
|
|
41
|
+
<li><a href="#">Article link 1</a></li>
|
|
42
|
+
<li><a href="#">Article link 2</a></li>
|
|
43
|
+
<li><a href="#">Article link 3</a></li>
|
|
44
|
+
<li><a href="#">Article link 4</a></li>
|
|
45
|
+
<li><a href="#">Article link 5</a></li>
|
|
46
|
+
<li><a href="#">Article link 6</a></li>
|
|
47
|
+
<li><a href="#">Article link 7</a></li>
|
|
48
|
+
</ol>
|
|
49
|
+
</li>
|
|
50
|
+
</ol>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div id="content">
|
|
55
|
+
|
|
56
|
+
<!--======================== CONTENT ========================-->
|
|
57
|
+
<article data-grids="cover">
|
|
58
|
+
<p>asdf</p>
|
|
59
|
+
<figure class="required">
|
|
60
|
+
<!-- USE DIFFERENT SIZED IMAGES TO HELP LOAD TIME -->
|
|
61
|
+
<div data-sizes="single" ratio="3x4">
|
|
62
|
+
<img data-src="images/img.jpg" width="243" height="324" />
|
|
63
|
+
</div>
|
|
64
|
+
<!--Using regular "src" and the class "no-treesaver" so this displays on old browsers or without JavaScript.-->
|
|
65
|
+
<div data-sizes="double" ratio="3x4" class="no-treesaver">
|
|
66
|
+
<img src="images/img.jpg" width="507" height="676" />
|
|
67
|
+
</div>
|
|
68
|
+
<div data-sizes="triple" ratio="3x4">
|
|
69
|
+
<img data-src="images/img.jpg" width="771" height="1028" />
|
|
70
|
+
</div>
|
|
71
|
+
<div data-sizes="quad" ratio="3x4">
|
|
72
|
+
<img data-src="images/img.jpg" width="1035" height="1380" />
|
|
73
|
+
</div>
|
|
74
|
+
</figure>
|
|
75
|
+
|
|
76
|
+
</article>
|
|
77
|
+
<!--====================== END CONTENT ======================-->
|
|
78
|
+
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!--NO-JS FOOTER-->
|
|
82
|
+
<div id="footer">
|
|
83
|
+
<div class="nav">
|
|
84
|
+
<ol>
|
|
85
|
+
<li><a href="#">Nav Link 1</a></li>
|
|
86
|
+
<li><a href="#">Nav Link 2</a></li>
|
|
87
|
+
<li><a href="#">Articles</a>
|
|
88
|
+
<ol>
|
|
89
|
+
<li><a href="#">Article link 1</a></li>
|
|
90
|
+
<li><a href="#">Article link 2</a></li>
|
|
91
|
+
<li><a href="#">Article link 3</a></li>
|
|
92
|
+
<li><a href="#">Article link 4</a></li>
|
|
93
|
+
<li><a href="#">Article link 5</a></li>
|
|
94
|
+
<li><a href="#">Article link 6</a></li>
|
|
95
|
+
<li><a href="#">Article link 7</a></li>
|
|
96
|
+
</ol>
|
|
97
|
+
</li>
|
|
98
|
+
</ol>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
description "Seasons treesaver framework"
|
|
2
|
+
|
|
3
|
+
stylesheet 'style.sass'
|
|
4
|
+
stylesheet '_config.sass'
|
|
5
|
+
stylesheet '_skin.scss'
|
|
6
|
+
stylesheet '_chrome.scss'
|
|
7
|
+
|
|
8
|
+
html 'resources.html'
|
|
9
|
+
html 'index.html'
|
|
10
|
+
html 'article.html'
|
|
11
|
+
|
|
12
|
+
javascript 'treesaver-0.9.3b.js'
|
|
13
|
+
|
|
14
|
+
image 'img.jpg'
|
|
15
|
+
|
|
16
|
+
file 'toc.json'
|
|
17
|
+
|
|
18
|
+
help %Q{
|
|
19
|
+
For help please visit http://github.com/scottkellum/Seasons
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
welcome_message %Q{
|
|
23
|
+
Trees change with the seasons.
|
|
24
|
+
}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Resources</title>
|
|
5
|
+
</head>
|
|
6
|
+
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<h1>Publication</h1>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<div class="chrome">
|
|
13
|
+
|
|
14
|
+
<!--PAGES ARE PLACED IN THE VIEWER-->
|
|
15
|
+
<div class="viewer"></div>
|
|
16
|
+
|
|
17
|
+
<!--NAVIGATION "CHROME" BELOW-->
|
|
18
|
+
<nav>
|
|
19
|
+
|
|
20
|
+
<!--SIDEBAR GENERATED FROM "_/toc.json"-->
|
|
21
|
+
<div class="sidebar contents">
|
|
22
|
+
<!--A CLASS OF SCROLL ADDS TOUCH BASED SCROLLING SUPPORT-->
|
|
23
|
+
<div class="content scroll" data-ts-template="publication">
|
|
24
|
+
{{#contents}}
|
|
25
|
+
<a href="{{url}}">
|
|
26
|
+
<span class="title">{{title}}</span>
|
|
27
|
+
</a>
|
|
28
|
+
{{/contents}}
|
|
29
|
+
</div>
|
|
30
|
+
<!--SHOW OR HIDE CONTENTS-->
|
|
31
|
+
<button class="open-sidebar">Show Contents</button>
|
|
32
|
+
<button class="close-sidebar">Hide Contents</button>
|
|
33
|
+
<button class="toggle-sidebar">Toggle Contents</button>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!--PAGE NUMBERS-->
|
|
37
|
+
<div class="numbering" data-ts-template="position">{{pagenumber}}/{{pagecount}}</div>
|
|
38
|
+
|
|
39
|
+
<!--PREVIOUS/NEXT BUTTONS-->
|
|
40
|
+
<button class="prev">Prev</button>
|
|
41
|
+
<button class="next">Next</button>
|
|
42
|
+
<button class="prevArticle">Prev Article</button>
|
|
43
|
+
<button class="nextArticle">Next Article</button>
|
|
44
|
+
|
|
45
|
+
<!--MENU-->
|
|
46
|
+
<div class="menu">
|
|
47
|
+
<button>Menu</button>
|
|
48
|
+
<ul class="content">
|
|
49
|
+
<li>Option 1</li>
|
|
50
|
+
<li>Option 2</li>
|
|
51
|
+
<li>Option 3</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
</nav>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div class="lightbox">
|
|
58
|
+
<div class="container"></div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
<!-- Cover -->
|
|
63
|
+
|
|
64
|
+
<div class="grid cover fixed w1 r3x4 trimleft trimright">
|
|
65
|
+
<div class="container w1 img fixed fullbleed" data-sizes="single"></div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="grid cover fixed w2 r3x4 trimleft trimright">
|
|
69
|
+
<div class="container w2 img fixed fullbleed" data-sizes="single"></div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="grid cover fixed w3 r3x4 trimleft trimright">
|
|
73
|
+
<div class="container w3 img fixed fullbleed" data-sizes="single"></div>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="grid cover fixed w4 r3x4 trimleft trimright">
|
|
77
|
+
<div class="container w4 img fixed fullbleed" data-sizes="double"></div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="grid cover fixed w5 r3x4 trimleft trimright">
|
|
81
|
+
<div class="container w5 img fixed fullbleed" data-sizes="double"></div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div class="grid cover fixed w6 r3x4 trimleft trimright">
|
|
85
|
+
<div class="container w6 img fixed fullbleed" data-sizes="double"></div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="grid cover fixed w7 r3x4 trimleft trimright">
|
|
89
|
+
<div class="container w7 img fixed fullbleed" data-sizes="triple"></div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div class="grid cover fixed w8 r3x4 trimleft trimright">
|
|
93
|
+
<div class="container w8 img fixed fullbleed" data-sizes="triple"></div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="grid cover fixed w9 r3x4 trimleft trimright">
|
|
97
|
+
<div class="container w9 img fixed fullbleed" data-sizes="triple"></div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="grid cover fixed w10 r3x4 trimleft trimright">
|
|
101
|
+
<div class="container w10 img fixed fullbleed" data-sizes="quad"></div>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div class="grid cover fixed w11 r3x4 trimleft trimright">
|
|
105
|
+
<div class="container w11 img fixed fullbleed" data-sizes="quad"></div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="grid cover fixed w12 r3x4 trimleft trimright">
|
|
109
|
+
<div class="container w12 img fixed fullbleed" data-sizes="quad"></div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
<!-- Department -->
|
|
114
|
+
|
|
115
|
+
<div class="grid department w3"><div data-ts-template="document">
|
|
116
|
+
<div class="runningtitle"><span class="publication">{{publication}}</span><span class="section">{{section}}</span></div>
|
|
117
|
+
<div class="container c1 w3 title" data-sizes="title"></div>
|
|
118
|
+
<div class="container c1 w3 img" data-sizes="single"></div>
|
|
119
|
+
<div class="column c1"></div>
|
|
120
|
+
</div></div>
|
|
121
|
+
|
|
122
|
+
<div class="grid department w6"><div data-ts-template="document">
|
|
123
|
+
<div class="runningtitle"><span class="publication">{{publication}}</span><span class="section">{{section}}</span></div>
|
|
124
|
+
<div class="container c1 w6 title" data-sizes="title"></div>
|
|
125
|
+
<div class="column c1"></div>
|
|
126
|
+
<div class="group">
|
|
127
|
+
<div class="container c4 w3 img" data-sizes="single"></div>
|
|
128
|
+
<div class="column c4"></div>
|
|
129
|
+
</div>
|
|
130
|
+
</div></div>
|
|
131
|
+
|
|
132
|
+
<div class="grid department w9"><div data-ts-template="document">
|
|
133
|
+
<div class="runningtitle"><span class="publication">{{publication}}</span><span class="section">{{section}}</span></div>
|
|
134
|
+
<div class="container c1 w6 title" data-sizes="title"></div>
|
|
135
|
+
<div class="column c1"></div>
|
|
136
|
+
<div class="column c4"></div>
|
|
137
|
+
<div>
|
|
138
|
+
<div class="container c7 w3 img" data-sizes="single"></div>
|
|
139
|
+
<div class="column c7"></div>
|
|
140
|
+
</div>
|
|
141
|
+
</div></div>
|
|
142
|
+
|
|
143
|
+
<div class="grid department w12"><div data-ts-template="document">
|
|
144
|
+
<div class="runningtitle"><span class="publication">{{publication}}</span><span class="section">{{section}}</span></div>
|
|
145
|
+
<div class="container c1 w6 title" data-sizes="title"></div>
|
|
146
|
+
<div class="column c1"></div>
|
|
147
|
+
<div class="column c4"></div>
|
|
148
|
+
<div>
|
|
149
|
+
<div class="container c7 w6 img" data-sizes="double"></div>
|
|
150
|
+
<div class="column c7"></div>
|
|
151
|
+
<div class="column c10"></div>
|
|
152
|
+
</div>
|
|
153
|
+
</div></div>
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
<!--========================== ERROR GRIDS ==========================-->
|
|
157
|
+
|
|
158
|
+
<div class="loading">
|
|
159
|
+
Loading
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div class="error">
|
|
163
|
+
Error
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
</body>
|
|
168
|
+
</html>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// CREDITS
|
|
2
|
+
// Thanks to Filipe Fortes and Bram Stein for Treesaver :: http://treesaverjs.com/
|
|
3
|
+
// Thanks to Tim Murtaugh and Michael Pick for HTML5 Reset :: http://html5reset.org/
|
|
4
|
+
//
|
|
5
|
+
// Seasons is created and developed by Scott Kellum in collaboration with the Treesaver team :: http://treesaver.net/
|
|
6
|
+
|
|
7
|
+
// This is a styling framework to be used with Treesaver
|
|
8
|
+
// It creates a flexable yet solid foundation for building templates.
|
|
9
|
+
|
|
10
|
+
// IMPORT TOOLS AND RESET:
|
|
11
|
+
@import seasons/tools
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
// Configuration:
|
|
16
|
+
@import config
|
|
17
|
+
|
|
18
|
+
// Skin:
|
|
19
|
+
@import skin
|
|
20
|
+
|
|
21
|
+
// Chrome:
|
|
22
|
+
@import chrome
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
// CORE TREESAVER FUNCTIONALITY:
|
|
27
|
+
@import seasons/core
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
// PLUGINS:
|
|
31
|
+
//@import seasons/plugin/ios-perfect
|
|
32
|
+
//@import seasons/plugin/mobile
|
|
33
|
+
//@import seasons/plugin/no-treesaver
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"date": "date",
|
|
3
|
+
"contents": [
|
|
4
|
+
{
|
|
5
|
+
"url": "index.html",
|
|
6
|
+
"title": "title",
|
|
7
|
+
"publication": "publication",
|
|
8
|
+
"timestamp": "timestamp"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"url": "article.html",
|
|
12
|
+
"title": "title",
|
|
13
|
+
"publication": "publication",
|
|
14
|
+
"section": "section",
|
|
15
|
+
"subject": "subject",
|
|
16
|
+
"hed": "hed",
|
|
17
|
+
"dek": "dek",
|
|
18
|
+
"byline": "byline",
|
|
19
|
+
"timestamp": "timestamp"
|
|
20
|
+
}
|
|
21
|
+
]
|
|
22
|
+
}
|