Swapped class names, cleaned CSS & HTML, tidy'd.

Switched .exhibit to .tab and .tab to .exhibit. Changed project specific class name's to ID's and standardized the naming. Added comments to group the ID's in includes/style.css.

Got rid of empty li elements and moved virtually all style to the stylesheet as it should be.

For some reason I can't figure out, the #peepshow_entry_title-2 anchor element is not inheriting font-style:italics.

diff --git a/includes/all.js b/includes/all.js
index 5760c4d..a910e5c 100644 (file)
--- a/includes/all.js
+++ b/includes/all.js
@@ -248,24 +248,21 @@ b.callback.apply(this,arguments);a.dequeue()}})})}})(jQuery);
 (function(c){c.effects.slide=function(d){return this.queue(function(){var a=c(this),h=["position","top","left"],f=c.effects.setMode(a,d.options.mode||"show"),b=d.options.direction||"left";c.effects.save(a,h);a.show();c.effects.createWrapper(a).css({overflow:"hidden"});var g=b=="up"||b=="down"?"top":"left";b=b=="up"||b=="left"?"pos":"neg";var e=d.options.distance||(g=="top"?a.outerHeight({margin:true}):a.outerWidth({margin:true}));if(f=="show")a.css(g,b=="pos"?isNaN(e)?"-"+e:-e:e);var i={};i[g]=(f==
 "show"?b=="pos"?"+=":"-=":b=="pos"?"-=":"+=")+e;a.animate(i,{queue:false,duration:d.duration,easing:d.options.easing,complete:function(){f=="hide"&&a.hide();c.effects.restore(a,h);c.effects.removeWrapper(a);d.callback&&d.callback.apply(this,arguments);a.dequeue()}})})}})(jQuery);
 ;$(document).ready(function() {
-       $(".tabs").hide();
+       $(".exhibit").hide();
        var divs = document.getElementsByTagName('div');
        if(document.location.hash){
                $(document.location.hash + '_').show();
        }
        var i = 0;
-       $("ul.portfolio li.project a.exhibit").click(function() {
+       $("ul#portfolio li a.tab").click(function() {
                i++;
-               $(".tabs").hide();
-               $("ul.portfolio li").removeClass("active");
-               $(this).addClass("active_project");
-
+               $(".exhibit").hide();
                var activeTab = $(this).attr("href") + '_';
                if (i==1)
                        $(activeTab).show("slide", 600);
                else
                        $(activeTab).show("puff", 600);
-               $(activeTab).addClass("active_tab");
+               $(activeTab).addClass("active_exhibit");
        });
        $('#showdivs').click(function() {
                for(i=0;i<divs.length;i++){

diff --git a/includes/style.css b/includes/style.css
index 94e69a5..2b1fc6c 100644 (file)
--- a/includes/style.css
+++ b/includes/style.css
@@ -3,37 +3,23 @@
        margin: 0;
        }
 
+h3 {
+       margin-top:15px;
+}
+
 a {
        text-decoration:none;
 }
 
 li {
        list-style:none;
+       display:block;
 }
 
 #structure {
-       padding-top:1px;
        width:960px;
        margin: 0 auto;
        margin-top: 30px;
-       text-align: left;
-       border: 10px solid #fff;
-}
-
-#logo_box {
-       background-image:url('../images/logo.png');
-       margin-top:25px;
-       margin-left:25px;
-       width:150px;
-       min-height:150px;
-}
-
-#about_bar {
-       background-image:url('../images/logo.png');
-       margin-top:25px;
-       margin-left:25px;
-       width:150px;
-       min-height:500px;
 }
 
 #banner {
@@ -49,82 +35,93 @@ li {
        margin-right:15px;
        padding:5px;
        padding-left:20px;
-       padding-top:25px;
        padding-bottom:25px;
 }
 
-.portfolio {
+#portfolio {
        float:right;
        width:350px;
        margin-right:17px;
 }
 
-.portfolio li a {
-       text-decoration:none;
-}
-
 #exhibit {
        float:right;
 }
 
-.tabs {
+#exhibit h1 {
+       margin-bottom:15px;
+}
+
+.exhibit {
        width:300px;
        min-height:600px;
        border:1px solid black;
        padding:10px;
 }
 
-.project {
-       float:right;
-       list-style:none;
-}
-
-.active_project {
-       display:block;
-       /*margin-right:-15px;*/
+.shownDiv {
+       border:1px solid black;
 }
 
-.active_tab {
-       /*margin-right:15px;*/
+#contact_me {
+       margin-top:100px;
 }
 
-.reprap_entry-title {
+/* reprap */
+#reprap_entry {
        font: 1.5em georgia, times;
        text-decoration: none;
        display: block;
 }
 
-.peepshow_entry-title {
-       font:1.6em verdana;
+/* peepshow */
+#peepshow_title_1 {
+       font-style:italic;
+       margin-top:0px;
+}
+
+#peephow_title_2 {
+       font-style:italic; /* not sure why this isn't working :( */
+       background-color:red;
+       font:3em;
 }
 
-.peepshow_entry {
-       font:1.3em verdana;
+#peepshow_entry {
+       font:1.4em "lucida console";
 }
-.readoo_entry{
+
+/* readoo */
+#readoo_title {
        font:1.6em arial;
 }
 
-.drawcss_entry{
-       font:1.6em "lucida console";
+#readoo_entry {
+       font:1.6em arial;
 }
 
-.youtube_backup-entry-title{
+/* drawcss */
+#drawcss_title {
        font:1.6em "lucida console";
 }
 
-.youtube_backup-entry{
-       font:1.3em "lucida console";
-}
+#drawcss_entry {
+       font:1.6em "lucida console";
+ }
 
-.i_like_pandora-entry-title{
-       font:2em "lucida console";
+/* youtube_backup */
+#youtube_backup_title {
+       font:1.6em "lucida console";
 }
 
-.i_like_pandora-entry{
+#youtube_backup_entry {
        font:1.4em "lucida console";
 }
 
-.shownDiv{
-       border:1px solid black;
+/* i_like_pandora */
+#i_like_pandora_title {
+       font:1.6em "lucida console";
+}
+
+#i_like_pandora_entry {
+       font:1.4em "lucida console";
 }

diff --git a/includes/tabs.js b/includes/tabs.js
index b4036f4..79d76bb 100644 (file)
--- a/includes/tabs.js
+++ b/includes/tabs.js
@@ -1,22 +1,19 @@
 $(document).ready(function() {
-       $(".tabs").hide();
+       $(".exhibit").hide();
        var divs = document.getElementsByTagName('div');
        if(document.location.hash){
                $(document.location.hash + '_').show();
        }
        var i = 0;
-       $("ul.portfolio li.project a.exhibit").click(function() {
+       $("ul#portfolio li a.tab").click(function() {
                i++;
-               $(".tabs").hide();
-               $("ul.portfolio li").removeClass("active");
-               $(this).addClass("active_project");
-
+               $(".exhibit").hide();
                var activeTab = $(this).attr("href") + '_';
                if (i==1)
                        $(activeTab).show("slide", 600);
                else
                        $(activeTab).show("puff", 600);
-               $(activeTab).addClass("active_tab");
+               $(activeTab).addClass("active_exhibit");
        });
        $('#showdivs').click(function() {
                for(i=0;i<divs.length;i++){

diff --git a/index.php b/index.php
index f9020b5..bccbb1d 100644 (file)
--- a/index.php
+++ b/index.php
@@ -5,8 +5,6 @@
 <head>
   <meta name="generator" content=
   "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
-  <meta http-equiv="Content-type" content=
-  "text/html; charset=us-ascii">
 
   <title>dylanstestserver</title>
   <link href="includes/style.css" rel="stylesheet" type="text/css">
@@ -26,11 +24,10 @@
 
     <div id="content">
       <div id="exhibit">
-        <div class="tabs" id="repthis_">
-          <span class="reprap_entry-title">3D printing is a form of
-          additive manufacturing technology where a three
-          dimensional object is created by successive layers of
-          material. [1]:<a href=
+        <div class="exhibit" id="repthis_">
+          <span id="reprap_entry">3D printing is a form of additive
+          manufacturing technology where a three dimensional object
+          is created by successive layers of material. [1]:<a href=
           "http://repthis.info/">http://en.wikipedia.org/wiki/3D_printing</a><br>
 
           <br>
@@ -44,13 +41,10 @@
           <br></span>
         </div>
 
-        <div class="tabs" id="youtube_backup_">
-          <span class="youtube_backup-entry-title"><a href=
-          "https://github.com/nospampleasemam/youtube_backup">youtube_backup</a></span><br>
-
-          <br>
-          <span class="youtube_backup-entry"><br>
-          backs up all the <a href="http://youtube.com">youtube</a>
+        <div class="exhibit" id="youtube_backup_">
+          <h1 id="youtube_backup_title"><a href=
+          "https://github.com/nospampleasemam/youtube_backup">youtube_backup</a></h1><span id="youtube_backup_entry">backs
+          up all the <a href="http://youtube.com">youtube</a>
           videos in a users favorites list.<br>
           <br>
           this is my fork of the <a href=
@@ -62,19 +56,15 @@
           "http://www.python.org/">python</a>.</span>
         </div>
 
-        <div class="tabs" id="i_like_pandora_">
-          <span class="i_like_pandora-entry-title"><a href=
-          "https://github.com/nospampleasemam/i_like_pandora">i_like_pandora</a></span><br>
-
-          <br>
-          <span class="i_like_pandora-entry"><br>
-          searches <a href="http://youtube.com">youtube</a> for
-          what you like on <a href=
-          "http://pandora.com">pandora</a>.<br>
+        <div class="exhibit" id="i_like_pandora_">
+          <h1 id="i_like_pandora_title"><a href=
+          "https://github.com/nospampleasemam/i_like_pandora">i_like_pandora</a></h1><span id="i_like_pandora_entry">searches
+          <a href="http://youtube.com">youtube</a> for what you
+          like on <a href="http://pandora.com">pandora</a>.<br>
           <br>
           then it downloads the first video.<br>
           <br>
-          it's not <i>quite</i> done yet.<br>
+          it's not quite done yet.<br>
           <br>
           <br>
           the code is free (as in freedom), <a href=
@@ -82,31 +72,27 @@
           </span>
         </div>
 
-        <div class="tabs" id="peepshow_">
-          <h3><span class="peepshow-entry-title"><i><a href=
-          "foxy-addons/peepshow/peepshow.xpi">foxy-addons/</a></i></span></h3>
-
-          <h1><span class="peepshow-entry"><i><a href=
-          "foxy-addons/peepshow/peepshow.xpi">peepshow</a></i></span></h1><span class="i_like_pandora-entry"><br>
+        <div class="exhibit" id="peepshow_">
+          <h3 id="peepshow_title_1"><a href=
+          "foxy-addons/peepshow/peepshow.xpi">foxy-addons/</a></h3>
 
-          <br>
-          <br>
-          <span class="peepshow_entry">a <a href=
+          <h1 id="peepshow_title_2"><a href=
+          "foxy-addons/peepshow/peepshow.xpi">peepshow</a></h1><span id="peepshow_entry">a
+          <a href=
           "http://www.mozilla.com/en-US/products/download.html">firefox</a>
           addon, to load linked images inline (like on <a href=
           "http://reddit.com/r/pics">reddit</a>).<br>
           <br>
           here's the <a href=
           "http://github.com/nospampleasemam/peepshow/">repo</a>
-          for the source code.</span></span>
+          for the source code.</span>
         </div>
 
-        <div class="tabs" id="drawcss_">
-          <span class="drawcss_entry"><a href=
-          "drawcss">drawcss</a><br>
-          <br>
-          writing markup for website wireframes always seemed
-          silly.<br>
+        <div class="exhibit" id="drawcss_">
+          <h1 id="drawcss_title"><a href=
+          "drawcss">drawcss</a></h1><span id=
+          "drawcss_entry">writing markup for website wireframes
+          always seemed silly.<br>
           <br>
           this is a tool to draw them (it's not done).<br>
           <br>
@@ -118,10 +104,10 @@
           code</a>.</span>
         </div>
 
-        <div class="tabs" id="readoo_">
-          <span class="readoo_entry"><a href=
-          "http://github.com/nospampleasemam/readoo">readoo</a>
-          helps you find search keywords to target.<br>
+        <div class="exhibit" id="readoo_">
+          <h1 id="readoo_title"><a href=
+          "http://github.com/nospampleasemam/readoo">readoo</a></h1><span id="readoo_entry">helps
+          you find search keywords to target.<br>
           <br>
           it reads your IIS logs, and finds successful keywords
           worth focusing on.<br>
@@ -129,95 +115,62 @@
           it's not done yet! here's the <a href=
           "http://github.com/nospampleasemam/readoo">source
           code</a>.</span>
-        </div><br>
+        </div>
       </div>
 
-      <ul class="portfolio" style="text-align:right">
-        <li style="list-style: none; display: inline">
+      <ul id="portfolio" style="text-align:right">
+        <li>
           <h3>my projects:</h3>
         </li>
 
-        <li class="project"><a class="exhibit" href=
-        "#repthis">repthis.info</a></li>
+        <li><a class="tab" href="#repthis">repthis.info</a></li>
 
-        <li style="list-style: none"><br></li>
-
-        <li class="project"><a class="exhibit" href=
+        <li><a class="tab" href=
         "#youtube_backup">youtube_backup</a></li>
 
-        <li style="list-style: none"><br></li>
-
-        <li class="project"><a class="exhibit" href=
+        <li><a class="tab" href=
         "#i_like_pandora">i_like_pandora</a></li>
 
-        <li style="list-style: none"><br></li>
-
-        <li class="project"><a class="exhibit" href=
+        <li><a class="tab" href=
         "#peepshow">foxy-addons/peepshow</a></li>
 
-        <li style="list-style: none"><br></li>
-
-        <li class="project"><a class="exhibit" href=
-        "#drawcss">drawcss</a></li>
+        <li><a class="tab" href="#drawcss">drawcss</a></li>
 
-        <li style="list-style: none"><br></li>
-
-        <li class="project"><a class="exhibit" href=
-        "#readoo">readoo</a></li>
-
-        <li style="list-style: none">
-          <br>
-          <br>
+        <li><a class="tab" href="#readoo">readoo</a></li>
 
+        <li>
           <h3>things i've done for others:</h3>
         </li>
 
-        <li class="project"><a href=
+        <li><a href=
         "http://activehamptons.com">activehamptons.com</a></li>
 
-        <li style="list-style: none"><br></li>
-
-        <li class="project"><a href=
+        <li><a href=
         "http://transfishing.com">transfishing.com</a></li>
 
-        <li style="list-style: none">
-          <br>
-          <br>
-
+        <li>
           <h3>something i've worked on:</h3>
         </li>
 
-        <li class="project"><a href=
+        <li><a href=
         "http://tempositions.com">tempositions.com</a></li>
 
-        <li style="list-style: none">
-          <br>
-          <br>
-
+        <li>
           <h3>my github repo:</h3>
         </li>
 
-        <li class="project"><a href=
+        <li><a href=
         "http://github.com/nospampleasemam">github@github.com:nospampleasemam</a></li>
 
-        <li style="list-style: none">
-          <br>
-          <br>
-
+        <li>
           <h3>my repo:</h3>
         </li>
 
-        <li class="project">
-        git://dylanstestserver.com/project_name</li>
-
-        <li style="list-style: none">
-          <br>
-          <br>
-          <br>
-          <br>
-          <br>
+        <li>git://dylanstestserver.com/project_name</li>
 
-          <h1><a href="mailto:dylan@psu.edu">dylan</a></h1><a href=
+        <li>
+          <h1 id="contact_me"><a href=
+          "mailto:dylan@psu.edu">dylan</a></h1><a href=
           "mailto:dylan@psu.edu">@psu.edu</a>
         </li>
       </ul>