changed layout from 1 x 4 to 2 x 2, moved subject curriculum link to the very top, modified months / weeks design a bit; a warning though the css isn't all too pretty

2 files changed, 146 insertions, 63 deletions

diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html
index 58884b4..8590c7d 100644
--- a/chakra/grade1mathematics.html
+++ b/chakra/grade1mathematics.html
@@ -22,28 +22,24 @@
 	<nav id="knavbar">
 		<a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft" /></a>
 		<a href="grade1.html"><img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft"/></a>
+		<div id="curriculum"><a href="#">subject curriculum</a></div>
 		<img src="../assets/default/images/mathematics.png" alt="Mathematics" title="Grade 1 - Mathematics" class="topNav floatLeft" />
 		<img src="../assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight" />
 		<img src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" />
 	</nav>
-	<section id="curriculum">
-		<a href="#">Link</a> to subject curriculum.</a>
-	</section>
 	<section id="monthSelect">
 	<header class="floatLeft">Months</header>
-	<ul class="menuSelectType">
-		<li><a href="#weeksA"><img src="../assets/default/images/month_A.png"/></a></li>
-		<li><a href="#weeksB"><img src="../assets/default/images/month_B.png"/></a></li>
-		<li><a href="#weeksC"><img src="../assets/default/images/month_C.png"/></a></li>
-		<li><a href="#weeksD"><img src="../assets/default/images/month_D.png"/></a></li>
-		<li><a href="#weeksE"><img src="../assets/default/images/month_E.png"/></a></li>
-		<li><a href="#weeksF"><img src="../assets/default/images/month_F.png"/></a></li>
-		<li><a href="#weeksG"><img src="../assets/default/images/month_G.png"/></a></li>
-		<li><a href="#weeksH"><img src="../assets/default/images/month_H.png"/></a></li>
-		<li><a href="#weeksI"><img src="../assets/default/images/month_I.png"/></a></li>
-		<li><a href="#weeksJ"><img src="../assets/default/images/month_J.png"/></a></li>
-	</ul>
-</section><!-- end monthSelect -->
+	<a href="#weeksA"><img src="../assets/default/images/month_A.png"/></a>
+	<a href="#weeksB"><img src="../assets/default/images/month_B.png"/></a>
+	<a href="#weeksC"><img src="../assets/default/images/month_C.png"/></a>
+	<a href="#weeksD"><img src="../assets/default/images/month_D.png"/></a>
+	<a href="#weeksE"><img src="../assets/default/images/month_E.png"/></a>
+	<a href="#weeksF"><img src="../assets/default/images/month_F.png"/></a>
+	<a href="#weeksG"><img src="../assets/default/images/month_G.png"/></a>
+	<a href="#weeksH"><img src="../assets/default/images/month_H.png"/></a>
+	<a href="#weeksI"><img src="../assets/default/images/month_I.png"/></a>
+	<a href="#weeksJ"><img src="../assets/default/images/month_J.png"/></a>
+	</section><!-- end monthSelect -->
 </section>
 
 <section id="middle">
@@ -51,86 +47,160 @@
 	<section id="weeks">
 		<section id="weeksA" class="weekList">
 			<header class="floatLeft">Weeks</header>
-			<ul class="menuSelectType">
-				<li><a href="#week1"><img src="../assets/default/images/week1.png"/></a></li>
-				<li><a href="#week2"><img src="../assets/default/images/week2.png"/></a></li>
-				<li><a href="#week3"><img src="../assets/default/images/week3.png"/></a></li>
-				<li><a href="#week4"><img src="../assets/default/images/week4.png"/></a></li>
-			</ul>
+			<a href="#week1"><img src="../assets/default/images/week1.png"/></a>
+			<a href="#week2"><img src="../assets/default/images/week2.png"/></a>
+			<a href="#week3"><img src="../assets/default/images/week3.png"/></a>
+			<a href="#week4"><img src="../assets/default/images/week4.png"/></a>
 
-			<article id="week1" class="lesson">
+			<article id="week1" class="lessonList">
+				<div class="lesson">
 				<header class="lessonName">Quadrilaterals</header>
-				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				<a href="../examples/"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
 				<header class="lessonName">Adding up to 10</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
 				<header class="lessonName">Everyday expressions</header>
-				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				<a href="../examples/"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
 				<header class="lessonName">Can and can't</header>
-				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				<a href="../examples/"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
 			</article>
 		
-			<article id="week2" class="lesson">
+			<article id="week2" class="lessonList">
+				<div class="lesson">
 				<header class="lessonName">Adding up to 10</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
 			</article>
 	
-			<article id="week3" class="lesson">
+			<article id="week3" class="lessonList">
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
 				<header class="lessonName">Everyday expressions</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
 			</article>
 			
-			<article id="week4" class="lesson">
+			<article id="week4" class="lessonList">
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
 				<header class="lessonName">Can and can't</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
 			</article>
 		</section><!-- end weeksA -->
 		<section id="weeksB" class="weekList">
 			<header class="floatLeft">Weeks</header>
-			<ul class="menuSelectType">
-				<li><a href="#week5"><img src="../assets/default/images/week1.png"/></a></li>
-				<li><a href="#week6"><img src="../assets/default/images/week2.png"/></a></li>
-				<li><a href="#week7"><img src="../assets/default/images/week3.png"/></a></li>
-				<li><a href="#week8"><img src="../assets/default/images/week4.png"/></a></li>
-			</ul>
+			<a href="#week5"><img src="../assets/default/images/week1.png"/></a>
+			<a href="#week6"><img src="../assets/default/images/week2.png"/></a>
+			<a href="#week7"><img src="../assets/default/images/week3.png"/></a>
+			<a href="#week8"><img src="../assets/default/images/week4.png"/></a>
 			
-			<article id="week5" class="lesson">
-				<header class="lessonName">Week 1 Lessons</header>
+			<article id="week5" class="lessonList">
+				<div class="lesson">
+				<header class="lessonName lesson1">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName lesson2">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName lesson3">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName lesson4">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
 			</article>
 			
-			<article id="week6" class="lesson">
+			<article id="week6" class="lessonList">
 				<header class="lessonName">Week 2 Lessons</header>
 			</article>
 			
-			<article id="week7" class="lesson">
+			<article id="week7" class="lessonList">
 				<header class="lessonName">Week 3 Lessons</header>
 			</article>
 			
-			<article id="week8" class="lesson">
+			<article id="week8" class="lessonList">
 				<header class="lessonName">Week 4 Lessons</header>
 			</article>
 		</section><!-- end weeksB -->
 		<section id="weeksC" class="weekList">
 			<header class="floatLeft">Weeks</header>
-			<ul class="menuSelectType">
-				<li><a href="#week9"><img src="../assets/default/images/week1.png"/></a></li>
-				<li><a href="#week10"><img src="../assets/default/images/week2.png"/></a></li>
-				<li><a href="#week11"><img src="../assets/default/images/week3.png"/></a></li>
-				<li><a href="#week12"><img src="../assets/default/images/week4.png"/></a></li>
-			</ul>
+			<a href="#week9"><img src="../assets/default/images/week1.png"/></a>
+			<a href="#week10"><img src="../assets/default/images/week2.png"/></a>
+			<a href="#week11"><img src="../assets/default/images/week3.png"/></a>
+			<a href="#week12"><img src="../assets/default/images/week4.png"/></a>
 			
-			<article id="week9" class="lesson">
-				<header class="lessonName">Week 1 Lessons</header>
+			<article id="week9" class="lessonList">
+				<div class="lesson">
+				<header class="lessonName">Quadrilaterals</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				</div>
+				<div class="lesson">
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
+				</div>
 			</article>
 			
-			<article id="week10" class="lesson">
+			<article id="week10" class="lessonList">
 				<header class="lessonName">Week 2 Lessons</header>
 			</article>
 			
-			<article id="week11" class="lesson">
+			<article id="week11" class="lessonList">
 				<header class="lessonName">Week 3 Lessons</header>
 			</article>
 			
-			<article id="week12" class="lesson">
+			<article id="week12" class="lessonList">
 				<header class="lessonName">Week 4 Lessons</header>
 			</article>
 		</section><!-- end weeksC -->
diff --git a/css/chakra.css b/css/chakra.css
index 71b1ca9..d09c585 100644
--- a/css/chakra.css
+++ b/css/chakra.css
@@ -58,9 +58,18 @@ header, footer, aside, nav, article, section {
 
 #monthSelect header {
 	text-align: left;
-	font-size: 1.4em;
+	font-size: 1.0em;
 	margin: 5px 0 5px 0;
 	padding-bottom: 2px;
+	font-weight: bold;
+}
+
+#curriculum
+{
+	padding: 5px;
+	background: #ccc;
+	margin: 10px;
+	display: inline;
 }
 	
 .topNav {
@@ -91,9 +100,10 @@ header, footer, aside, nav, article, section {
 
 #middle header {
 	text-align: center;
-	font-size: 1.4em;
+	font-size: 1.0em;
 	margin: 5px 0 5px 0;
 	padding-bottom: 2px;
+	font-weight: bold;
 }
 
 	.middleRow ul { 
@@ -167,14 +177,6 @@ header, footer, aside, nav, article, section {
 
 /* ====================================== */
 /* ====== INDIVIDUAL GRADE SECTION ====== */
-#curriculum
-{
-	text-align: right;
-	padding: 3px;
-	background: #ccc;
-	margin: 0px 0 5px 0;
-}
-
 #weekSelectInput {
 	text-align: center;
 	border-bottom: 1px solid #666;
@@ -186,10 +188,11 @@ header, footer, aside, nav, article, section {
 		text-align: center;
 	}
 
-.lesson {
+.lessonList {
 	border-top: 1px solid #666;
 	padding: 1em;
 	margin: 5px 0 5px 0;
+	height: 500px;
 }
 
 	.lessonName { 
@@ -199,13 +202,23 @@ header, footer, aside, nav, article, section {
 		font-size: 1.1em;
 		margin-bottom: 1em;
 	}
-	.lesson img {
+	.lessonList img {
 		display: block;
 		margin: 0 auto;
 		padding: 5px;
 		border: 1px solid #aaa;
 		background: #ddd;
 	}
+	
+.lesson {
+	width: 300px;
+	height: 250px;
+	float: left;
+}
+
+.preview{
+	width: 250px;
+}
 
 .menuSelectType {
 	margin: 0;