diff static/css/wikked.less @ 61:130eccd396d8

Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents 8250c977bc50
children acc615617fdf
line wrap: on
line diff
--- a/static/css/wikked.less	Tue Feb 05 14:49:34 2013 -0800
+++ b/static/css/wikked.less	Wed Feb 06 08:22:31 2013 -0800
@@ -1,16 +1,12 @@
 // Includes
-@import "/bootstrap/css/bootstrap.min.css";
+@import "/bootstrap/less/bootstrap.less";
 @import "/css/syntax.css";
 @import "/css/wmd.css";
 
 // Constants
-@baseFontSize: 18px;
-@baseLineHeight: (@baseFontSize * 1.5);
-@smallFontSize: 16px;
-@smallerFontSize: 12px;
-
-@colorNavLink: rgb(128, 128, 128);
-@colorNavLinkHover: rgb(96, 96, 96);
+@wikiLinkColor: #12f;
+@wikiLinkColorHover: #36f;
+@wikiLinkColorMissing: #f12;
 
 @colorBlueDark: #48577D;
 @colorBlueMedium: #7690CF;
@@ -20,14 +16,10 @@
 @colorGrayBlueMedium: #9197A6;
 @colorGrayBlueDark: #43464C;
 
-@colorGrayLight: #EEE;
-@colorGrayMedium: #AAA;
-@colorGrayDark: #666;
-
 @colorCode: #523C37;
 
-@backgroundPage: white;
-@backgroundPageSpecial: #E5D19E;
+@pageBackground: white;
+@pageBackgroundSpecial: #E5D19E;
 
 // Macros
 .box-shadow(@style, @c) {
@@ -40,73 +32,19 @@
 body {
     background: url('../img/gray_jean.png');
     //background-image: url(http://basehold.it/i/27);
-    font-size: @baseFontSize;
-    color: #333;
-}
-p {
-    font-size: @baseFontSize;
-    line-height: @baseLineHeight;
-    margin-top: @baseLineHeight;
-    margin-bottom: @baseLineHeight;
-}
-h1 {
-    font-size: (@baseFontSize * 2);
-    line-height: (@baseLineHeight * 2);
-    margin-top: @baseLineHeight;
-    margin-bottom: 0;
-}
-h2 {
-    font-size: (@baseFontSize * 1.5);
-    line-height: @baseLineHeight;
-    margin-top: @baseLineHeight;
-    margin-bottom: 0;
-}
-h3 {
-    font-size: (@baseFontSize * 1.2);
-    line-height: @baseLineHeight;
-    margin-top: @baseLineHeight;
-    margin-bottom: 0;
-}
-h4 {
-    font-size: @baseFontSize;
-    line-height: @baseLineHeight;
-    margin-top: @baseLineHeight;
-    margin-bottom: 0;
-}
-h5 {
-    font-size: (@baseFontSize / 1.1);
-    line-height: @baseLineHeight;
-    margin-top: @baseLineHeight;
-    margin-bottom: 0;
-}
-h6 {
-    font-size: (@baseFontSize / 1.2);
-    line-height: @baseLineHeight;
-    margin-top: @baseLineHeight;
-    margin-bottom: 0;
-}
-pre {
-    margin-top: @baseLineHeight;
-    margin-bottom: @baseLineHeight;
-}
-sup, sub {
-    line-height: 0;
-}
-li {
-    line-height: @baseLineHeight;
 }
 
 // Global classes
 a.wiki-link {
-    color: #12f;
     text-decoration: none;
-    &:link { color: #12f; }
-    &:visited { color: #12f; }
-    &:hover { color: #36f; }
-    &:active { color: #12f; }
+    color: @wikiLinkColor;
+    &:link { color: @wikiLinkColor; }
+    &:visited { color: @wikiLinkColor; }
+    &:hover { color: @wikiLinkColorHover; text-decoration: underline; }
+    &:active { color: @wikiLinkColor; }
 }
 a.wiki-link.missing {
-    color: #f12;
+    color: @wikiLinkColorMissing;
 }
 .decorator {
     text-transform: uppercase;
@@ -115,47 +53,56 @@
     letter-spacing: 0.1em;
     color: @colorBlueDark;
     .rev_id {
-        font-family: monospace;
+        font-family: @monoFontFamily;
         color: @colorCode;
     }
 }
 
+div.alert {
+    font-size: @fontSizeSmall;
+}
+
 .container {
     nav, .meta {
-        color: @colorNavLink;
-        font-size: @smallFontSize;
+        color: @grayLight;
+        font-size: @fontSizeSmall;
         line-height: (@baseLineHeight * 2);
         a {
             padding: 0 1em;
             display: inline-block;
             text-decoration: none;
-            color: @colorNavLink;
-            &:link { color: @colorNavLink; }
-            &:visited { color: @colorNavLink; }
-            &:hover { color: @colorNavLinkHover; }
-            &:active { color: @colorNavLink; }
+            color: @grayLight;
+            &:link { color: @grayLight; }
+            &:visited { color: @grayLight; }
+            &:hover { color: @linkColorHover; }
+            &:active { color: @grayLight; }
         }
     }
     .page {
         .box-shadow(0 0 10px, rgb(210, 210, 210));
         padding: @baseLineHeight;
-        background: @backgroundPage;
+        background: @pageBackground;
     }
     .page.special {
-        background: @backgroundPageSpecial;
+        background: @pageBackgroundSpecial;
     }
 
     .page>pre {
         margin-top: @baseLineHeight;
     }
     .meta {
-        font-size: @smallerFontSize;
+        font-size: @fontSizeMini;
     }
 }
 
-form.search {
+form.form-search {
     display: inline-block;
     margin: 0;
+    
+    .search-query {
+        font-size: @fontSizeSmall;
+        height: @fontSizeSmall * 1.5;
+    }
 }
 ul.search-results {
     list-style: none;
@@ -164,8 +111,8 @@
 form.page-edit {
     textarea {
         height: 10em;
-        font-size: 1em;
-        font-family: "Lucida Console", Monaco, Consolas, "Courier New", monospace;
+        font-size: @baseFontSize;
+        font-family: @monoFontFamily;
         margin-bottom: 0;
         border-radius: 0;
     }
@@ -174,8 +121,8 @@
     padding: 1em 0;
 
     .wmd-input-grip { 
-        background: @colorGrayLight;
-        border: 1px solid @colorGrayMedium;
+        background: @grayLighter;
+        border: 1px solid @grayLight;
         border-width: 0 1px 1px 1px;
         height: 12px;
         cursor: ns-resize;