Merge pull request #26 from wushin/evol-csswiki

Evol Themed Wiki

16 files changed, 125 insertions, 73 deletions

diff --git a/images/wiki_logo.png b/images/wiki_logo.png
index a7e68df..58d2349 100644
--- a/images/wiki_logo.png
+++ b/images/wiki_logo.png
diff --git a/skins/foreground/assets/images/background.jpg b/skins/foreground/assets/images/background.jpg
new file mode 100644
index 0000000..c1e1050
--- /dev/null
+++ b/skins/foreground/assets/images/background.jpg
diff --git a/skins/foreground/assets/images/background_article.png b/skins/foreground/assets/images/background_article.png
new file mode 100644
index 0000000..c8a5fc6
--- /dev/null
+++ b/skins/foreground/assets/images/background_article.png
diff --git a/skins/foreground/assets/images/background_leftmenu.png b/skins/foreground/assets/images/background_leftmenu.png
new file mode 100644
index 0000000..b712505
--- /dev/null
+++ b/skins/foreground/assets/images/background_leftmenu.png
diff --git a/skins/foreground/assets/images/border_x.png b/skins/foreground/assets/images/border_x.png
new file mode 100644
index 0000000..5f4cab2
--- /dev/null
+++ b/skins/foreground/assets/images/border_x.png
diff --git a/skins/foreground/assets/images/border_y.jpg b/skins/foreground/assets/images/border_y.jpg
new file mode 100644
index 0000000..cb459e4
--- /dev/null
+++ b/skins/foreground/assets/images/border_y.jpg
diff --git a/skins/foreground/assets/images/button.png b/skins/foreground/assets/images/button.png
new file mode 100644
index 0000000..b7b2dc6
--- /dev/null
+++ b/skins/foreground/assets/images/button.png
diff --git a/skins/foreground/assets/images/button_rollover.png b/skins/foreground/assets/images/button_rollover.png
new file mode 100644
index 0000000..92d8b81
--- /dev/null
+++ b/skins/foreground/assets/images/button_rollover.png
diff --git a/skins/foreground/assets/images/header_background.png b/skins/foreground/assets/images/header_background.png
new file mode 100644
index 0000000..ba24890
--- /dev/null
+++ b/skins/foreground/assets/images/header_background.png
diff --git a/skins/foreground/assets/images/horizontal-left.png b/skins/foreground/assets/images/horizontal-left.png
new file mode 100644
index 0000000..e74ff27
--- /dev/null
+++ b/skins/foreground/assets/images/horizontal-left.png
diff --git a/skins/foreground/assets/images/horizontal-right.png b/skins/foreground/assets/images/horizontal-right.png
new file mode 100644
index 0000000..01c7dfd
--- /dev/null
+++ b/skins/foreground/assets/images/horizontal-right.png
diff --git a/skins/foreground/assets/images/leaves-top.png b/skins/foreground/assets/images/leaves-top.png
new file mode 100644
index 0000000..89050b7
--- /dev/null
+++ b/skins/foreground/assets/images/leaves-top.png
diff --git a/skins/foreground/assets/stylesheets/foreground.css b/skins/foreground/assets/stylesheets/foreground.css
index f71dd78..40c3f91 100644
--- a/skins/foreground/assets/stylesheets/foreground.css
+++ b/skins/foreground/assets/stylesheets/foreground.css
@@ -75,7 +75,7 @@ h2 span {
 }
 
 h2.title {
-  margin-bottom: 0.1em;
+  margin-bottom: 0em;
 }
 
 h3#tagline {
@@ -114,8 +114,10 @@ div.small-9.columns textarea {
 }
 
 footer.row {
-  margin-top: 2em;
-  color: grey;
+  background-image: url(../images/border_y.jpg), url(../images/border_y.jpg);
+  background-position: left, right;
+  background-repeat: repeat-y;
+  background-color: #151515;
 }
 
 div {
diff --git a/skins/foreground/assets/stylesheets/foundation.css b/skins/foreground/assets/stylesheets/foundation.css
index 5962d8c..38818d4 100644
--- a/skins/foreground/assets/stylesheets/foundation.css
+++ b/skins/foreground/assets/stylesheets/foundation.css
@@ -10,8 +10,12 @@ body {
   font-size: 100%; }
 
 body {
-  background: #eeeeee;
-  color: #222222;
+  background-image: url(../images/background.jpg);
+  background-size: cover;
+  background-repeat: repeat-x;
+  background-position: center top;
+  background-color: #3a4b9d;
+  height: 100%;
   padding: 0;
   margin: 0;
   font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
@@ -130,8 +134,6 @@ select {
 .column,
 .columns {
   position: relative;
-  padding-left: 0.9375em;
-  padding-right: 0.9375em;
   width: 100%;
   float: left; }
 
@@ -139,8 +141,6 @@ select {
   .column,
   .columns {
     position: relative;
-    padding-left: 0.9375em;
-    padding-right: 0.9375em;
     float: left; }
 
   .small-1 {
@@ -1061,13 +1061,11 @@ p {
 
 /* Default header styles */
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', sans-serif;
   font-weight: bold;
   font-style: normal;
-  color: #222222;
+  color: #d3b378;
   text-rendering: optimizeLegibility;
-  margin-top: 0.2em;
-  margin-bottom: 0.5em;
   line-height: 1.2125em; }
   h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
     font-size: 60%;
@@ -2628,8 +2626,8 @@ form.custom {
   height: 45px;
   line-height: 45px;
   position: relative;
-  background: #CBA083;
-  margin-bottom: .5em; }
+  background-image: url(../images/background_leftmenu.png);
+  background-repeat: repeat;}
   .top-bar ul {
     margin-bottom: 0;
     list-style: none; }
@@ -2657,7 +2655,7 @@ form.custom {
       margin: 0; }
       .top-bar .name h1 a {
         font-weight: bold;
-        color: white;
+        color: #ffdd9b;
         width: 50%;
         display: block;
         padding: 0 15px; }
@@ -2666,7 +2664,7 @@ form.custom {
     right: 0;
     top: 0; }
     .top-bar .toggle-topbar a {
-      color: white;
+      color: #ffdd9b;
       text-transform: uppercase;
       font-size: 0.8125em;
       font-weight: bold;
@@ -2686,7 +2684,7 @@ form.custom {
         height: 34px;
         line-height: 33px;
         padding: 0;
-        color: white; }
+        color: #ffdd9b; }
         .top-bar .toggle-topbar.menu-icon a span {
           position: absolute;
           right: 0;
@@ -2696,14 +2694,14 @@ form.custom {
           -webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
           box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white; }
   .top-bar-section ul li.active.hover > a {
-    background: #AB7958;
-    border-radius: 15px;
-    color: white; }
+    background-image: url(../images/button_rollover.png);
+    color: #ffdd9b; }
   .top-bar.expanded {
-    height: auto;
-    background: transparent; }
+    height: auto;}
     .top-bar.expanded .title-area {
-      background: #CBA083; }
+      background-image: url(../images/background_leftmenu.png);
+      background-repeat: repeat;
+      background: black; }
     .top-bar.expanded .toggle-topbar a {
       color: #888888; }
       .top-bar.expanded .toggle-topbar a span {
@@ -2721,7 +2719,9 @@ form.custom {
     width: 100%;
     height: auto;
     display: block;
-    background: #CBA083;
+    background-image: url(../images/background_leftmenu.png);
+    background-repeat: repeat;
+    background: black;
     font-size: 16px;
     margin: 0; }
   .top-bar-section .divider,
@@ -2732,15 +2732,14 @@ form.custom {
   .top-bar-section ul li > a {
     display: block;
     width: 100%;
-    color: white;
+    color: #ffdd9b;
     padding: 12px 0 12px 0;
     padding-left: 15px;
     font-size: 0.8125em;
-    font-weight: bold;
-    background: #CBA083; }
+    font-weight: bold;}
     .top-bar-section ul li > a.hover {
       background: #CBA083;
-      color: white; }
+      color: #ffdd9b; }
     .top-bar-section ul li > a.button {
       background: #2ba6cb;
       font-size: 0.8125em; }
@@ -2759,8 +2758,8 @@ form.custom {
       .top-bar-section ul li > a.button.alert.hover {
         background: #970b0e; }
   .top-bar-section ul li.active > a {
-    background: #CBA083;
-    color: white; }
+    background: url(../images/button.png) no-repeat;
+    color: #ffdd9b; }
   .top-bar-section .has-form {
     padding: 15px; }
   .top-bar-section .has-dropdown {
@@ -2789,6 +2788,7 @@ form.custom {
     visibility: hidden;
     z-index: 99; }
     .top-bar-section .dropdown li {
+      background: url(../images/button.png) no-repeat;
       width: 100%;
       height: auto; }
       .top-bar-section .dropdown li a {
@@ -2797,7 +2797,7 @@ form.custom {
       .top-bar-section .dropdown li.title h5 {
         margin-bottom: 0; }
         .top-bar-section .dropdown li.title h5 a {
-          color: white;
+          color: #ffdd9b;
           line-height: 22.5px;
           display: block; }
     .top-bar-section .dropdown label {
@@ -2817,7 +2817,8 @@ form.custom {
 
 @media only screen and (min-width: 86.75em) {
   .top-bar {
-    background: #CBA083;
+    background-image: url(../images/background_leftmenu.png);
+    background-repeat: repeat;
     *zoom: 1;
     overflow: visible; }
     .top-bar:before, .top-bar:after {
@@ -2861,13 +2862,11 @@ form.custom {
           display: none; }
     .top-bar-section li a:not(.button) {
       padding: 0 15px;
-      line-height: 45px;
-      background: #CBA083; }
-      .top-bar-section li a:not(.button).hover {
-        background: black; }
+      line-height: 45px;}
     .top-bar-section ul li.active.hover > a {
-      background: #CBA083;
-      color: white; }
+      background-image: url(../images/button_rollover.png);
+      background-size: 100% 100%;
+      color: #ffdd9b; }
     .top-bar-section .has-dropdown > a {
       padding-right: 35px !important; }
       .top-bar-section .has-dropdown > a:after {
@@ -2886,6 +2885,9 @@ form.custom {
         visibility: hidden; }
     .top-bar-section .has-dropdown.hover > .dropdown {
       visibility: visible; }
+    .top-bar-section ul li.active > a {
+      background-size: 100% 100%
+    }
     .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
       border: none;
       content: "\00bb";
@@ -2894,17 +2896,23 @@ form.custom {
     .top-bar-section .dropdown {
       left: 0;
       top: auto;
-      border: 1px solid black;
-      border-radius: 15px;
-      background: #CBA083;
+      background: url(../images/leaves-top.png) no-repeat,
+      url(../images/background_leftmenu.png) repeat;
+      background-repeat: repeat;
+      background-size: 100% 100%;
       min-width: 100%; }
+      .top-bar-section .dropdown li {
+        background: transparent;
+      }
       .top-bar-section .dropdown li a {
-        color: white;
-        line-height: 1;
+	margin: 5px 0px 5px 0px;
+        color: #ffdd9b;
+        line-height: 2;
         white-space: nowrap;
-        padding: 7px 15px;
-        border-radius: 15px;
-        background: #CBA083; }
+        padding: 7px 25px;
+        background: transparent;
+        background-image: url(../images/button.png);
+        background-size: 100% 100%;}
       .top-bar-section .dropdown li label {
         white-space: nowrap;
         background: #CBA083; }
@@ -2920,7 +2928,6 @@ form.custom {
       height: 45px;
       width: 0px; }
     .top-bar-section .has-form {
-      background: #CBA083;
       padding: 0 15px;
       height: 45px; }
     .top-bar-section ul.right li .dropdown {
diff --git a/skins/foreground/assets/stylesheets/normalize.css b/skins/foreground/assets/stylesheets/normalize.css
index 6d24a38..5cb961e 100644
--- a/skins/foreground/assets/stylesheets/normalize.css
+++ b/skins/foreground/assets/stylesheets/normalize.css
@@ -67,7 +67,7 @@ audio:not([controls]) {
 
 html {
     background: #fff; /* 1 */
-    color: #000; /* 2 */
+    color: #332100; /* 2 */
     font-family: sans-serif; /* 3 */
     -ms-text-size-adjust: 100%; /* 4 */
     -webkit-text-size-adjust: 100%; /* 4 */
diff --git a/skins/foreground/assets/stylesheets/tmw-custom.css b/skins/foreground/assets/stylesheets/tmw-custom.css
index 30bde04..325ad76 100644
--- a/skins/foreground/assets/stylesheets/tmw-custom.css
+++ b/skins/foreground/assets/stylesheets/tmw-custom.css
@@ -20,39 +20,70 @@ li.divider, li.divider.show-for-small {
 
 div#catlinks {
     background-color: #f2ebe7;
-    border: 1px solid black;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    margin-top: 5px;
+    margin: 10px;
     padding-left: 30px;
 }
 
 div#content {
-    padding: 10px;
-    border: 1px solid black;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    background-color: #F1D0BA;
+    padding: 0px 15px 10px 15px;
+    background: url(../images/border_y.jpg) repeat-y,
+    url(../images/border_y.jpg) repeat-y,
+    url(../images/background_leftmenu.png) repeat;
+    background-position: left, right, top left;
+    background-color: #151515;
+}
+
+div#footer {
+  padding-left: 2em;
+  padding-right: 2em;
+  color: #a9905f;
+}
+
+div#footer a {
+  color: #8b6c52;
+  text-decoration: underline;
+}
+
+div#footer a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+div#content a {
+    color: #473529;
+}
+
+div#content a:hover {
+    color: #473529;
+    border-bottom: 1px black dotted;
 }
 
 h2#firstHeading {
-    background-position: 0px 0px;
-    background-repeat: no-repeat;
-    background-color: #f2ebe7;
-    padding-left: 50px;
-    border: 1px solid black;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    line-height: 1.25em;
+    background: url(../images/horizontal-left.png) no-repeat,
+    url(../images/horizontal-right.png) no-repeat,
+    url(../images/border_x.png) repeat-x,
+    url(../images/header_background.png) no-repeat;
+    background-position: 0% 111%, 100% 111%, 100% 108%, 0% 100%;
+    background-size: auto, auto, auto, cover;
+    padding: 10px 0px 20px 50px;
+    line-height: 2em;
+    color: #ffdd9b;
+}
+
+div#contentSub {
+    background: url(../images/horizontal-left.png) no-repeat,
+    url(../images/horizontal-right.png) no-repeat,
+    url(../images/border_x.png) repeat-x;
+    background-position: 0% 290%, 100% 290%, 0% -900%;
+    height: 1em;
 }
 
 div#bodyContent.mw-bodytext {
-    margin-top:10px;
-    padding: 5px;
-    border: 1px solid black;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    background-color: white;
+    background-color: #d3b378;
+    background-image: url(../images/background_article.png);
+    margin:10px;
+    padding: 15px;
 }
 
 li#p-server_status.has-dropdown.active {
@@ -60,7 +91,15 @@ li#p-server_status.has-dropdown.active {
 }
 
 .dropdown li:hover a {
-    background: #AB7958;
+    background: black url(../images/button_rollover.png) no-repeat;
+}
+
+@media only screen and (min-width: 86.75em) {
+  .dropdown li:hover a {
+    background: black;
+    background-image: url(../images/button_rollover.png);
+    background-size: 100% 100%;
+  }
 }
 
 input[type="submit"], button, .button, .multipleTemplateAdder {
@@ -73,3 +112,7 @@ form#searchform.mw-search {
     margin-bottom: 10px;
     white-space: nowrap;
 }
+
+body.page-Main_Page div#navwrapper {
+/*    display: none;*/
+}