Skip to content

Commit e1cfbdc

Browse files
mregomrego
committed
Add another demo "Treasure Island"
1 parent ebfd2b0 commit e1cfbdc

File tree

5 files changed

+284
-0
lines changed

5 files changed

+284
-0
lines changed

‎index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,15 @@ <h4 class="list-group-item-heading">Calendar demo</h4>
316316
</p>
317317
<p>Example of a calendar created using CSS Grid Layout. The days are added with JavaScript and only the column of the first day is set (depending on the day of the week) and the rest of them are placed automatically. If you double-click in the page, the alignment of the days numbers is changed.</p>
318318
</li>
319+
<li class="list-group-item">
320+
<h4 class="list-group-item-heading">Another responsive grid</h4>
321+
<p>
322+
<a href="treasure-island.html" class="label label-primary">example</a>
323+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/treasure-island.html" class="label label-success">html</a>
324+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/treasure-island.png" class="label label-info">screenshot</a>
325+
</p>
326+
<p>Example grid that adapts itself to window size. Layout changes depending on window size using media queries.</p>
327+
</li>
319328
</ul>
320329
</div>
321330
</div>

‎treasure-island-background.png

606 Bytes
Loading

‎treasure-island-pirate.jpg

83.7 KB
Loading

‎treasure-island.html

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Grid Layout example</title>
5+
<link href='https://fonts.googleapis.com/css?family=Tangerine|Calligraffitti|Oswald' rel='stylesheet' type='text/css'>
6+
<style>
7+
html, body, h1, h2, h3, h4 {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
body {
13+
background-image: url("treasure-island-background.png");
14+
background-repeat: repeat;
15+
16+
display: grid;
17+
18+
grid-template-columns: auto 1fr 25%;
19+
grid-template-rows: auto auto auto auto 1fr auto;
20+
grid-gap: 20px;
21+
22+
border: 10px solid rgba(0, 0, 0, 0);
23+
box-sizing: border-box;
24+
25+
font-family: 'Calligraffitti', cursive;
26+
font-size: 2em;
27+
28+
height: 100vh;
29+
}
30+
31+
h1, h2, h3, h4 {
32+
justify-self: center;
33+
margin: 0;
34+
padding: 10px;
35+
border-radius: 10px;
36+
37+
font-family: 'Oswald', sans-serif;
38+
}
39+
40+
h1 {
41+
grid-column: 1 / span 3;
42+
grid-row: 1;
43+
background: #FAFADA;
44+
opacity: 0.8;
45+
padding: 10px 40px;
46+
}
47+
48+
h2 {
49+
background: cyan;
50+
grid-column: 1 / span 3;
51+
grid-row: 2;
52+
background: #FAFADA;
53+
opacity: 0.8;
54+
padding: 5px 20px;
55+
font-size: 1.4em;
56+
}
57+
58+
h3 {
59+
grid-column: 1 / span 2;
60+
grid-row: 3;
61+
background: #FAFADA;
62+
opacity: 0.8;
63+
padding: 2px 10px;
64+
}
65+
66+
h4 {
67+
background: #FAFADA;
68+
opacity: 0.8;
69+
padding: 1px 5px;
70+
grid-column: 2;
71+
grid-row: 4;
72+
}
73+
74+
nav {
75+
background: #3A3A0A;
76+
opacity: 0.8;
77+
color: white;
78+
font-weight: bold;
79+
grid-column: 1;
80+
grid-row: 4 / span 2;
81+
padding-left: 40px;
82+
padding-right: 20px;
83+
width: 300px;
84+
font-size: 0.9em;
85+
}
86+
87+
li:hover {
88+
text-decoration: underline;
89+
}
90+
91+
article {
92+
grid-column: 2;
93+
grid-row: 5;
94+
overflow-y: auto;
95+
96+
background: #FAFADA;
97+
opacity: 0.8;
98+
border: 5px solid white;
99+
padding: 0px 20px;
100+
font-family: 'Tangerine', cursive;
101+
font-size: 2em;
102+
}
103+
104+
figure {
105+
grid-column: 3;
106+
grid-row: 3 / span 3;
107+
108+
display: grid;
109+
grid-template-columns: 100%;
110+
grid-template-rows: 1fr auto;
111+
height: 90%;
112+
}
113+
114+
img {
115+
grid-row: 1;
116+
width: 100%;
117+
height: 100%;
118+
}
119+
120+
figcaption {
121+
grid-row: 2;
122+
font-size: 0.8em;
123+
font-weight: bold;
124+
}
125+
126+
footer {
127+
grid-column: 1 / span 3;
128+
grid-row: 6;
129+
justify-self: end;
130+
131+
font-size: 0.7em;
132+
font-family: 'Oswald', sans-serif;
133+
}
134+
135+
@media (max-width: 1500px) {
136+
body {
137+
font-size: 1.8em;
138+
139+
grid-template-columns: 1fr 1fr 25%;
140+
grid-template-rows: auto auto 1fr auto;
141+
grid-gap: 10px;
142+
}
143+
144+
h1 {
145+
grid-column: 1 / span 2;
146+
grid-row: 1;
147+
align-self: center;
148+
}
149+
150+
h2 {
151+
grid-column: 3;
152+
grid-row: 1 / span 2;
153+
align-self: center;
154+
}
155+
156+
h3 {
157+
grid-column: 1;
158+
grid-row: 2;
159+
justify-self: start;
160+
align-self: center;
161+
}
162+
163+
h4 {
164+
grid-column: 2;
165+
grid-row: 2;
166+
align-self: center;
167+
}
168+
169+
nav {
170+
display: none;
171+
}
172+
173+
article {
174+
grid-column: 1 / span 2;
175+
grid-row: 3;
176+
}
177+
178+
figure {
179+
grid-column: 3;
180+
grid-row: 3;
181+
}
182+
183+
footer {
184+
grid-column: 1 / span 3;
185+
grid-row: 4;
186+
}
187+
}
188+
189+
@media (max-width: 1200px) {
190+
body {
191+
font-size: 1.4em;
192+
}
193+
}
194+
195+
@media (max-width: 900px) {
196+
body {
197+
font-size: 1.2em;
198+
grid-template-columns: 1fr 1fr;
199+
grid-template-rows: auto auto 1fr auto;
200+
}
201+
202+
h1 {
203+
grid-column: 1;
204+
grid-row: 1;
205+
}
206+
207+
h2 {
208+
grid-column: 2;
209+
grid-row: 1;
210+
}
211+
212+
h3 {
213+
display: none;
214+
}
215+
216+
h4 {
217+
grid-column: 1 / span 2;
218+
grid-row: 2;
219+
}
220+
221+
figure {
222+
display: none;
223+
}
224+
225+
footer {
226+
grid-column: 1 / span 2;
227+
grid-row: 4;
228+
}
229+
}
230+
231+
@media (max-width: 600px) {
232+
body {
233+
font-size: 1.2em;
234+
}
235+
}
236+
</style>
237+
</head>
238+
<body>
239+
240+
241+
<h1>Treasure Island</h1>
242+
<h2>by Robert Louis Stevenson</h2>
243+
<h3>PART I: The Old Buccaneer</h3>
244+
<nav>
245+
<ol type="I">
246+
<li>At the "Admiral Benbow"</li>
247+
<li>Black Dog Appears and Disappears</li>
248+
<li>The Black Spot</li>
249+
<li>The Sea-Chest</li>
250+
<li>The Last of the Blind Man</li>
251+
<li>The Captain's Papers</li>
252+
</ol>
253+
</nav>
254+
<h4>CHAPTER I: At the "Admiral Benbow"</h4>
255+
<article>
256+
<p>Squire Trelawney, Doctor Livesey, and the rest of these gentlemen having asked me to write down the whole particulars about Treasure Island, from the beginning to the end, keeping nothing back but the bearings of the island, and that only because there is still treasure not yet lifted, I take up my pen in the year of grace 17—, and go back to the time when my father kept the "Admiral Benbow" Inn, and the brown old seaman, with the saber cut, first took up his lodging under our roof.</p>
257+
<p>I remember him as if it were yesterday, as he came plodding to the inn door, his sea-chest following behind him in a hand-barrow; a tall, strong, heavy, nut-brown man; his tarry pig-tail falling over the shoulders of his soiled blue coat; his hands ragged and scarred, with black, broken nails, and the saber cut across one cheek, a dirty, livid white. I remember him looking round the cove and whistling to himself as he did so, and then breaking out in that old sea-song that he sang so often afterwards:</p>
258+
<p>"Fifteen men on the dead man's chest, Yo-ho-ho and a bottle of rum!"</p>
259+
<p>in the high, old tottering voice that seemed to have been tuned and broken at the capstan bars. Then he rapped on the door with a bit of stick like a handspike that he carried, and when my father appeared, called roughly for a glass of rum. This, when it was brought to him, he drank slowly, like a connoisseur, lingering on the taste, and still looking about him at the cliffs and up at our signboard.</p>
260+
<p>"This is a handy cove," says he, at length; "and a pleasant sittyated grog-shop. Much company, mate?"</p>
261+
<p>My father told him no, very little company, the more was the pity.</p>
262+
<p>"Well, then," said he, "this is the berth for me. Here you, matey," he cried to the man who trundled the barrow; "bring up alongside and help up my chest. I'll stay here a bit," he continued. "I'm a plain man; rum and bacon and eggs is what I want, and that head up there for to watch ships off. What you mought call me? You mought call me captain. Oh, I see what you're at—there"; and he threw down three or four gold pieces on the threshold. "You can tell me when I've worked through that," said he, looking as fierce as a commander.</p>
263+
<p>And, indeed, bad as his clothes were, and coarsely as he spoke, he had none of the appearance of a man who sailed before the mast, but seemed like a mate or skipper, accustomed to be obeyed or to strike. The man who came with the barrow told us the mail had set him down the morning before at the "Royal George"; that he had inquired what inns there were along the coast, and hearing ours well spoken of, I suppose, and described as lonely, had chosen it from the others for his place of residence. And that was all we could learn of our guest.</p>
264+
</article>
265+
266+
<figure>
267+
<img src="treasure-island-pirate.jpg" alt="Captain arriving to Admiral Benbow">
268+
<figcaption>I remember him as if it were yesterday as he came plodding to the inn door</figcaption>
269+
</figure>
270+
271+
272+
<footer>Excerpts from "Treasure Island" by Robert Louis Stevenson. Full book available at <a href="http://www.gutenberg.org/ebooks/27780">Project Gutenburg</a>.</footer>
273+
274+
</body>
275+
</html>

‎treasure-island.png

999 KB
Loading

0 commit comments

Comments
 (0)