Permalink
Browse files

Added time and pubdate elements to article date; figure and figcaptio…

…n to article image; made div#nav -> nav#latest
  • Loading branch information...
1 parent cfb419e commit cc07a289c1f55cebe9ddb4a6b5297debdcebf35c @adrianshort committed Apr 4, 2012
Showing with 42 additions and 19 deletions.
  1. +16 −12 article.html
  2. +26 −7 style.css
View
@@ -8,20 +8,24 @@
</head>
<body>
- <div id="warning">This is an unofficial experiment by <a href="http://about.adrianshort.co.uk/">Adrian Short</a>. It is not published by Sutton Council.<br />See the <a target="_blank" href="http://www.sutton.gov.uk/suttonpress/index.aspx?articleid=16018">official page</a> for comparison. <a href="https://github.com/adrianshort/Sutton-Press-Office-demo">Fork it on Github</a> if you want to play with it.</a> <a href="#" onclick="document.getElementById('warning').style.display='none';">Hide this box</a></div>
-
+ <div id="warning">This is an unofficial experiment by <a href="http://about.adrianshort.co.uk/">Adrian Short</a>. It is not published by Sutton Council.<br />See the <a target="_blank" href="http://www.sutton.gov.uk/suttonpress/index.aspx?articleid=16018">official page</a> for comparison. <a href="https://github.com/adrianshort/Sutton-Press-Office-demo">Fork it on Github</a> if you want to play with it.</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="document.getElementById('warning').style.display='none'; return false;">Hide this box</a></div>
<img src="img/layout/logo.gif" width="143" height="132" alt="Sutton Council logo" />
-
+
<article>
- <p id="dateline">Press Release &middot; 30 March 2012</p>
-
- <h1 id="headline">Time capsule buried at the new Westcroft leisure centre</h1>
-
- <p id="standfirst">Pupils at All Saints Primary in Carshalton dug deep to leave a little piece of history under the foundations of the new Westcroft leisure centre.</p>
+ <header>
+ <p id="dateline">Press Release &middot; <time datetime="2012-03-30" pubdate>30 March 2012</time></p>
+
+ <h1 id="headline">Time capsule buried at the new Westcroft leisure centre</h1>
+
+ <p id="standfirst">Pupils at All Saints Primary in Carshalton dug deep to leave a little piece of history under the foundations of the new Westcroft leisure centre.</p>
+ </header>
+
+ <figure>
+ <img src="img/articles/time_capsule.jpg" width="180" height="230" alt="Time capsule" />
+ <figcaption>Pupils from All Saints primary school with the time capsule</figcaption>
+ </figure>
- <img src="img/articles/time_capsule.jpg" width="180" height="230" alt="Time capsule" />
-
<p>As work continues on the refurbishment of the leisure centre, the children made a time capsule to let young people of the future know what it was like to grow up in Sutton in 2012.</p>
<p>Items in the time capsule, which was buried on 27 March, include a lunch menu, school tie, class photo, and stories and artwork the pupils had created. Everyone Active, which runs the centre on behalf of Sutton Council, also added an old group exercise programme, and an Everyone Active membership card. An Olympic pinbadge, featuring Honeywood Museum, was also placed in the capsule.</p>
@@ -64,7 +68,7 @@ <h1 id="headline">Time capsule buried at the new Westcroft leisure centre</h1>
</p>
</div>
- <div id="nav">
+ <nav id="latest">
<h2><a href="http://www.sutton.gov.uk/suttonpress/index.aspx?articleid=16023"><img src="img/layout/rss28.png" width="28" height="28" alt="Latest press releases RSS feed" /></a> Latest press releases</h2>
<ul>
@@ -129,7 +133,7 @@ <h1 id="headline">Time capsule buried at the new Westcroft leisure centre</h1>
<a href="http://www.sutton.gov.uk/suttonpress/index.aspx?articleid=15941">A helping hand with rising rent</a>
</li>
</ul>
- </div>
+ </nav>
View
@@ -39,6 +39,24 @@ a img {
padding: 0;
}
+figure {
+ background-color: #eee;
+ padding: 10px;
+ float: right;
+ width: 180px;
+ margin-left: 20px;
+ border-radius: 10px;
+}
+
+figure img {
+ margin: 0 0 10px 0;
+}
+
+figcaption {
+ font-size: 0.9em;
+ font-style: normal;
+}
+
p {
margin: 25px 0;
color: #333;
@@ -51,43 +69,43 @@ blockquote {
}
-#nav, #contacts {
+#latest, #contacts {
display: block;
background-color: #;
margin: 60px 0;
border-top: 1px solid #eee;
}
-#nav h2, #contacts h2 {
+#latest h2, #contacts h2 {
font-size: 1.6em;
margin: 30px 0;
}
-#nav li {
+#latest li {
background-color: #fff;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px dotted #eee;
}
-#nav a, #contacts a {
+#latest a, #contacts a {
text-decoration: none;
color: #000;
padding: 5px 10px;
}
-#nav a:hover, #contacts a:hover {
+#latest a:hover, #contacts a:hover {
color: #fff;
background-color: #000;
padding: 5px 10px;
}
-#nav a:visited, #contacts a:visited {
+#latest a:visited, #contacts a:visited {
color: #777;
padding: 5px 10px;
}
-#nav .current {
+#latest .current {
background-color: #C10031;
color: white;
padding: 5px 10px;
@@ -101,6 +119,7 @@ blockquote {
margin: 0 0 60px 0;
padding: 20px;
line-height: 1.5em;
+ border-radius: 10px;
}
#warning a, #warning a:visited {

0 comments on commit cc07a28

Please sign in to comment.