diff options
| -rwxr-xr-x | chakra/grade1english.html | 155 | ||||
| -rwxr-xr-x | chakra/grade1mathematics.html | 46 | ||||
| -rwxr-xr-x | css/chakra.css | 42 |
3 files changed, 149 insertions, 94 deletions
diff --git a/chakra/grade1english.html b/chakra/grade1english.html index 5e9e0a8..3375a6f 100755 --- a/chakra/grade1english.html +++ b/chakra/grade1english.html @@ -26,65 +26,118 @@ </section> <section id="middle"> - <section> <section id="curriculum"> <a href="#">Link</a> to subject curriculum. </section> - - <div id="weekSelectInput"> - <label for="weekSelect">Select Week: </label> - <select id="weekSelect"> - <option value="0" selected="selected"> --- select week below --- </option> - <option value="1to4">1 - 4</option> - <option value="5to8">5 - 8</option> - <option value="9to12">9 - 12</option> - <option value="13to16">13 - 16</option> - <option value="17to20">17 - 20</option> - <option value="21to24">21 - 24</option> - <option value="25to28">25 - 28</option> - <option value="29to32">29 - 32</option> - <option value="33to36">33 - 36</option> - <option value="37to40">37 - 40</option> - <option value="41to44">41 - 44</option> - <option value="45to48">45 - 48</option> - <option value="49to52">49 - 52</option> - </select> - </div> - </section> - <section class="middleRow"> - <ul> - <li><a href="#week1">Week 1</a></li> - <li><a href="#week2">Week 2</a></li> - <li><a href="#week3">Week 3</a></li> - <li><a href="#week4">Week 4</a></li> - </ul> - </section><!-- end weeks --> - - <section id="week1" class="week"> - <article class="lesson"> - <header class="lessonName">Quadrilaterals</header> - <img src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /> - </article> - - <article class="lesson"> - <header class="lessonName">Adding up to 10</header> - <img src="../assets/images/preview2.jpg"/> - </article> + <section id="monthSelect"> + <header class="inline">Months</header> + <a href="#weeksA"><img src="../assets/images/month_A.png"/></a> + <a href="#weeksB"><img src="../assets/images/month_B.png"/></a> + <a href="#weeksC"><img src="../assets/images/month_C.png"/></a> + <a href="#weeksD"><img src="../assets/images/month_D.png"/></a> + <a href="#weeksE"><img src="../assets/images/month_E.png"/></a> + <a href="#weeksF"><img src="../assets/images/month_F.png"/></a> + <a href="#weeksG"><img src="../assets/images/month_G.png"/></a> + <a href="#weeksH"><img src="../assets/images/month_H.png"/></a> + <a href="#weeksI"><img src="../assets/images/month_I.png"/></a> + <a href="#weeksJ"><img src="../assets/images/month_J.png"/></a> + </section><!-- end monthSelect --> + + <section id="weeksA" class="monthList"> + <header class="inline">Weeks</header> + <a href="#week1"><img src="../assets/images/week1.png"/></a> + <a href="#week2"><img src="../assets/images/week2.png"/></a> + <a href="#week3"><img src="../assets/images/week3.png"/></a> + <a href="#week4"><img src="../assets/images/week4.png"/></a> + + <article id="week1" class="lessonList"> + <header>Week 1</header> + <div class="lesson"> + <header class="lessonName">Quadrilaterals</header> + <a href="../examples/"><img class="preview" src="../assets/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/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/"><img class="preview" src="../assets/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/"><img class="preview" src="../assets/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a> + </div> + </article> - <article class="lesson"> - <header class="lessonName">Everyday expressions</header> - <img src="../assets/images/preview3.jpg"/> - </article> - - <article class="lesson"> - <header class="lessonName">Can and can't</header> - <img src="../assets/images/preview4.jpg"/> - </article> - </section><!-- end week1 --> + <article id="week2" class="lessonList"> + <header>Week 2</header> + <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/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/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/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/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a> + </div> + </article> + + <article id="week3" class="lessonList"> + <header>Week 3</header> + <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/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/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/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/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a> + </div> + </article> + + <article id="week4" class="lessonList"> + <header>Week 4</header> + <div class="lesson"> + <header class="lessonName">Quadrilaterals</header> + <a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/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/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/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/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a> + </div> + </article> + </section><!-- end weeksA --> + <!-- start #weeksB , second month --> + <!-- end it here --> + <!-- etc etc --> </section><!-- end middle --> <script> +/* THIS CODE BELOW IS USELESS - there are no divs named like that anymore! */ $('#weekSelect').change(function() { $('#weeks div').hide(); var e = '#' + $(':selected', $(this)).attr('value'); diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html index e658096..e6f3145 100755 --- a/chakra/grade1mathematics.html +++ b/chakra/grade1mathematics.html @@ -19,37 +19,38 @@ <nav id="knavbar"> <a href="../index.html"><img src="../assets/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft" /></a> <a href="grade1.html"><img src="../assets/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/images/mathematics.png" alt="Mathematics" title="Grade 1 - Mathematics" class="topNav floatLeft" /> <img src="../assets/images/help.png" alt="Help" title="Help" class="topNav floatRight" /> <img src="../assets/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" /> </nav> - <section id="monthSelect"> - <header class="floatLeft">Months</header> - <a href="#weeksA"><img src="../assets/images/month_A.png"/></a> - <a href="#weeksB"><img src="../assets/images/month_B.png"/></a> - <a href="#weeksC"><img src="../assets/images/month_C.png"/></a> - <a href="#weeksD"><img src="../assets/images/month_D.png"/></a> - <a href="#weeksE"><img src="../assets/images/month_E.png"/></a> - <a href="#weeksF"><img src="../assets/images/month_F.png"/></a> - <a href="#weeksG"><img src="../assets/images/month_G.png"/></a> - <a href="#weeksH"><img src="../assets/images/month_H.png"/></a> - <a href="#weeksI"><img src="../assets/images/month_I.png"/></a> - <a href="#weeksJ"><img src="../assets/images/month_J.png"/></a> - </section><!-- end monthSelect --> </section> - +<div id="curriculum"><a href="#">subject curriculum</a></div> <section id="middle"> + <section id="monthSelect"> + <header class="inline">Months</header> + <a href="#weeksA"><img src="../assets/images/month_A.png"/></a> + <a href="#weeksB"><img src="../assets/images/month_B.png"/></a> + <a href="#weeksC"><img src="../assets/images/month_C.png"/></a> + <a href="#weeksD"><img src="../assets/images/month_D.png"/></a> + <a href="#weeksE"><img src="../assets/images/month_E.png"/></a> + <a href="#weeksF"><img src="../assets/images/month_F.png"/></a> + <a href="#weeksG"><img src="../assets/images/month_G.png"/></a> + <a href="#weeksH"><img src="../assets/images/month_H.png"/></a> + <a href="#weeksI"><img src="../assets/images/month_I.png"/></a> + <a href="#weeksJ"><img src="../assets/images/month_J.png"/></a> + </section><!-- end monthSelect --> + <section id="weeks"> - <section id="weeksA" class="weekList"> - <header class="floatLeft">Weeks</header> + <section id="weeksA" class="monthList"> + <header class="inline">Weeks</header> <a href="#week1"><img src="../assets/images/week1.png"/></a> <a href="#week2"><img src="../assets/images/week2.png"/></a> <a href="#week3"><img src="../assets/images/week3.png"/></a> <a href="#week4"><img src="../assets/images/week4.png"/></a> <article id="week1" class="lessonList"> + <header>Week 1</header> <div class="lesson"> <header class="lessonName">Quadrilaterals</header> <a href="../examples/"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a> @@ -69,6 +70,7 @@ </article> <article id="week2" class="lessonList"> + <header>Week 2</header> <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/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a> @@ -88,6 +90,7 @@ </article> <article id="week3" class="lessonList"> + <header>Week 3</header> <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/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a> @@ -107,6 +110,7 @@ </article> <article id="week4" class="lessonList"> + <header>Week 4</header> <div class="lesson"> <header class="lessonName">Quadrilaterals</header> <a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a> @@ -125,8 +129,8 @@ </div> </article> </section><!-- end weeksA --> - <section id="weeksB" class="weekList"> - <header class="floatLeft">Weeks</header> + <section id="weeksB" class="monthList"> + <header class="inline">Weeks</header> <a href="#week5"><img src="../assets/images/week1.png"/></a> <a href="#week6"><img src="../assets/images/week2.png"/></a> <a href="#week7"><img src="../assets/images/week3.png"/></a> @@ -163,8 +167,8 @@ <header class="lessonName">Week 4 Lessons</header> </article> </section><!-- end weeksB --> - <section id="weeksC" class="weekList"> - <header class="floatLeft">Weeks</header> + <section id="weeksC" class="monthList"> + <header class="inline">Weeks</header> <a href="#week9"><img src="../assets/images/week1.png"/></a> <a href="#week10"><img src="../assets/images/week2.png"/></a> <a href="#week11"><img src="../assets/images/week3.png"/></a> diff --git a/css/chakra.css b/css/chakra.css index d09c585..7e2362f 100755 --- a/css/chakra.css +++ b/css/chakra.css @@ -56,37 +56,32 @@ header, footer, aside, nav, article, section { margin: 0 auto; } -#monthSelect header { - text-align: left; - font-size: 1.0em; - margin: 5px 0 5px 0; - padding-bottom: 2px; - font-weight: bold; -} - #curriculum { padding: 5px; background: #ccc; margin: 10px; - display: inline; + display: block; + width: auto; + text-align: right; + display: none; + /* How about putting 'Link to subject curriculum' in the help section ? */ } .topNav { width: 30px; height: 30px; + padding: 5px; } .floatLeft { float: left; - margin-left: 5px; - margin-bottom: 5px; } - .floatRight { float: right; - margin-right: 5px; - margin-bottom: 5px; +} +.inline { + display: inline; } /* ====================================== */ @@ -177,22 +172,25 @@ header, footer, aside, nav, article, section { /* ====================================== */ /* ====== INDIVIDUAL GRADE SECTION ====== */ -#weekSelectInput { +#monthSelect { text-align: center; - border-bottom: 1px solid #666; - padding: 5px 0 5px 0; + font-size: 1.0em; + font-weight: bold; + padding: 5px 0 5px 0; } - #weekSelect { - list-style: none; - text-align: center; - } +.monthList { + /* */ + border-top: 1px solid #666; + text-align: center; + padding: 5px 0 5px 0; +} .lessonList { - border-top: 1px solid #666; padding: 1em; margin: 5px 0 5px 0; height: 500px; + border-top: 1px dashed #666; } .lessonName { |