[Summary view] [Print] [Text view]

   1  /*
   2      This is the CSS stylesheet that is used for the default Nucleus skin.
   3      
   4      Here's how the pages are built up:
   5  
   6      (Note: the format outlined below is NOT mandatory. If you want your 
   7       site to use another structure, edit skins and templates, and define 
   8       your own stylesheet. The default skins and templates only serves as 
   9       an example of how a site running Nucleus can look.)
  10  
  11      MAIN PAGE
  12      ---------
  13  
  14      body
  15        div.contents
  16          h1 (site title)
  17            h2 (date header)
  18              h3 (item title)
  19                div.itembody (item text)
  20                span.iteminfo (time / author / editlink / amount of comments)
  21        div.logo
  22        div.menu
  23          h1 (navigation, hidden link)
  24            h2 (menu titles)
  25      
  26      DETAILED PAGE
  27      -------------
  28      body
  29        div.contents
  30          h1 (site title)
  31            h2 (item title)
  32              div.itembody (item text)
  33              div.iteminfo (item info)
  34            h2 (comments)
  35              h3 (commentor name)
  36                  div.commentbody
  37            h2 (add comment)
  38        div.logo
  39        div.menu    
  40          h1 (navigation, hidden link)
  41            h2 (menu titles)
  42  
  43      OTHER PAGES
  44      -----------
  45      
  46      other pages are similar, having a .contents and a .menu part
  47  */
  48   
  49  
  50  /*
  51      The body definitions define how the page should globally look:
  52      - a small verdana, arial or font from the sans-serif family
  53      - black text on a white background
  54  */
  55  
  56  
  57  body {
  58      font-family: verdana, arial, sans-serif;
  59      font-size: small;    
  60      background-color: #fff;
  61      color: #000;
  62  }
  63  
  64  /* 
  65      The definitions below determine how the page looks.
  66      
  67      There are 3 main div-elements, which are all positioned absolute
  68      (relative to the upper left corner of the screen):
  69      
  70      .contents: contains the main contents of the page.
  71      .menu: sidebar with menu
  72      .logo: logo to be displayed above the sidebar
  73  
  74  */
  75  
  76  /* definitions applying to the contents block */
  77  .contents {
  78      position: absolute;
  79  
  80      left: 200px;
  81      width: 550px;
  82  }
  83  
  84  /* definitions applying to the logo */
  85  .logo {
  86      position: absolute;
  87  
  88      top: 20px;
  89      left: 20px;
  90  }
  91  
  92  .menu {
  93      position: absolute;
  94  
  95      top: 175px;
  96      left: 30px;
  97      width: 110px;
  98  
  99      /* use a lighter text color (grey) and a smaller font */
 100      color: #777;
 101      font-size: small;    
 102  }
 103  
 104  /*
 105      Definitions for headers in the menu (.menu h2), page titles (h1) 
 106      and dateheads (.contents h2):
 107      - page titles are centered (within the .contents div)
 108      - menu headers (h2) use a small font
 109      - dateheads use a large font and are in a box
 110  */
 111  
 112  h1 {
 113      text-align: center;
 114  }
 115  
 116  .menu h2 {
 117      font-size: small;
 118  }
 119  
 120  .contents h2 {
 121      background-color: whitesmoke;
 122      border: 1px solid #ccc;
 123  
 124      padding: 5px; 
 125      
 126      font-size: large;
 127  
 128      margin-bottom: 5px;
 129  }
 130  
 131  /* 
 132      Definitions for the item listings like they are done on the main page and in archives
 133      - h3.item is the title of an item (<h3 class="item">)
 134      - .itembody is the item contents
 135      - .iteminfo contains the time of posting and the name of the author, and the amount of comments
 136      
 137      anchors in the iteminfo (.iteminfo a) are not underlined and bold
 138  */
 139  
 140  /* item title */
 141  h3.item {
 142      font-size: medium;
 143      margin: 0px;
 144      margin-top: 10px;
 145  }
 146  
 147  .itembody {    
 148      margin-top: 5px;    
 149      margin-bottom: 5px;
 150  }
 151  
 152  .iteminfo {    
 153      font-size: x-small;
 154      color: gray;
 155  }
 156  
 157  .iteminfo a {
 158      font-weight: bolder;
 159      color: #555;
 160      text-decoration: none;
 161  }
 162  
 163  /*
 164      Definitions of how comments listings look like on item pages
 165      - h3.comment contains the name of the comment author
 166      - .commentbody contains the text from the comment
 167      - .commentinfo contains the time of commenting
 168  */
 169  
 170  /* comment title */
 171  h3.comment {
 172      font-size: medium;
 173      margin-bottom: 10px;
 174  }
 175  
 176  .commentbody {
 177      text-align: justify;
 178  }
 179  
 180  .commentinfo {    
 181      font-size: x-small;
 182      color: gray;
 183  }
 184  
 185  
 186  /*
 187      Some rules that apply to contents generated using the markup buttons 
 188      "add left box" and "add right box"
 189      
 190      both boxes have slightly larger text, and take a maximum of 20% of 
 191      the width of the contents.
 192  */
 193  
 194  .leftbox, .rightbox {
 195      margin: 3px;
 196      padding: 3px;
 197      font-size: larger;
 198      width: 20%;
 199  }
 200  .leftbox {
 201      float: left;
 202      border-right: 2px solid #ccc;    
 203  }
 204  .rightbox {
 205      float: right;
 206      border-left: 2px solid #ccc;    
 207  }
 208  
 209  
 210  /*
 211      Some general rules:
 212      - images never have a border (even when they are inside a hyperlink)
 213      - elements having class="skip" are not shown
 214      - item lists using <ul class="nobullets"> have no list-item bullets
 215      - highlighted text (in search results) have a yellow background
 216  */
 217  
 218  img {
 219      border: none;
 220  }
 221  
 222  .skip {
 223      display: none;
 224  }
 225  
 226  ul.nobullets {
 227      list-style: none;
 228      margin-left: 0px;
 229      padding-left: 0px;
 230  }
 231  
 232  .highlight {
 233      background-color: yellow;
 234  }
 235  
 236  
 237