Tardis:CSS notes

From Tardis Wiki, the free Doctor Who reference
Revision as of 19:25, 6 January 2014 by CzechOut (talk | contribs)

The following important notes were removed from MediaWiki:Common.css in order to reduce lag. They are vital to understanding the general design goals of the wiki.

/***** HISTORY AND THANKS *****/

/* This wiki was late in adopting CSS.  V E R Y late.  So late, in fact,
   that we didn't have any CSS formatting until early 2011.  As a result
   we have only worked with CSS since well after Wikia introduced the 
   Wikia (or Oasis) skin.  This means that we were considerably less pissed
   off than other Wikia communities when they forced the Wikia skin on us
   in mid-2010.  
   
   Our late start on CSS means that we've been able to cherrypick from the 
   hard work of other people around the larger wikia community.  I've tried to 
   remark from where I've gotten specific elements, but, as with any bit of 
   wiki editing, the code has gradually become more and more unique, and some 
   of the origins have become obscured.  

   Nevertheless, it is fair to say that the basic underpinnings come largely
   from the fusion of CSS styling "ideas" from MemoryAlpha, Wookieepedia, the
   Fable wikia, the CSS code wikia, the Russian Wikipedia, and others.  That said,
   almost nothing here actually looks all that similar to styling elements from 
   other wikis, as our color palette and design goals are simply different
   to others.
  
   Moreover, some stylistic elements — such as the user warning system — wholly
   originated here.  Others, like catlinks, top-of-page banners, TOC styling,
   and others are also stylistically novel to this wiki, even if the underpinning
   came from elswhere.

   We nevertheless gratefully acknowledge all those code warriors out there
   who helped make their home wikis more beautiful, and therefore inspired us.

   -- CzechOut 13 Mar 2011  */
 
/* +++++++++++++++++++
   THE BIG CHART
   in which our Heroes define
   the basic stylistic elements
   of This Fine Wiki
   +++++++++++++++++++
   CHAPTER THE FIRST:
   Colors 
   
   in which our Heroes explore the 
   color pallet of the wiki
   =-=-=-=-=-=-=-=-=-=

   The following colors are used extensively throughout this style sheet:
   
   #2F2CB8 - is the main "blue" of the site.  Nicknamed "New Tardis Blue" or "NTB",
             it's the color of blue at the dead center of the gradient used in the 
             DW "TARDIS device" seen in our logo.  Thus, the blue on the site
             perfectly matches our logo.
   #7473BE - is a pale "reflection" of New Tardis Blue, used in concert with NTB
             on buttons to give them a 3D look through gradients.  The color itself
             was not defined by me but by wikia as an automatic process associated
             with selecting NTB as button color with Theme Designer.
             It's used to define links, headlines, borders, and "glowy" effects.
   #6E6AC4 - is another pale reflection of NTB.  It's used mainly as the color for
             Bots, but also is the "visited link" color.  Could be used as a color
             in gradients with NTB, but isn't at of 9/11.
   #ECECEC - is the off-white color which comprises the bulk of the "white" space
             on most pages.  It's caused by setting the pages transparent, and 
             then setting #BOBOBO as the main color of the background in 
             Theme Designer.  In general, it's preferred to set background-colors 
             to "transparent", but for drop-down menus, it's better to set it 
             as the "color of transparency" so that there IS a color
             to the background, but the color matches the rest of the page.  
             If you simply set a drop-down background to transparent, 
             the letters on the drop-down bleed down to the text underneath.  
   #D5D4F0 - is what the Theme Designer automatically sets as the "hover color" for drop-down
             menus, if you set the text and button colors to be "New Tardis Blue".  It complements
             NTB precisely, as it's simply a less saturated version of the same color. 
   #C47042 - is an orange compound of New Tardis Blue (as calculated by 
             kuler.com)  It's used as the mouseover link color.
   #B92F2D - is a red within the same color palette as New Tardis Blue.  It's the "red link" red.
   #CC6600 - is a red deliberately out of accord with the NTB palette.  It's the red for when you've
             attempted to visit a red-link before.
   #1F1E38 - is a darker blue that's an absolute shade of NTB. It's used to differentiate the names
             of editors who've made an edit in the Recent Wiki Activities module
   #5A54A0 - It's used to show when you've visited a link, and therefore
             help with navigation.   

             Note that there are other colors which are currently specified as special 
             link colors, but they don't, as of 12 March 2011, seem to be 
             working in Wikia, even though they do in Monobook. 
    
   +++++++++++++++++++ 
   CHAPTER THE SECOND:
   Page dimensions

   in which our heroes take note 
   of anything having to do with 
   the size of pages 
   =-=-=-=-=-=-=-=-=-=
   Width of text area in Wikia skin is 680px.
   +++++++++++++++++++
   CHAPTER THE THIRD:
   Font stacks

   in which our Heroes define
   font stacks that have been tested
   on this wiki, and gives notes as
   to their general suitability.
   =-=-=-=-=-=-=-=-=-=
   SANS-SERIF
   =-=-=-=-=-=-=-=-=-= 
   font-family: 'Trebuchet MS'   
            is sans-serif font with clear diff btween l and I and thin when bolded
   font family:'Century Gothic', 'Gill Sans', 'Franklin Gothic Medium', Verdana, Tahoma, 
                'URW Gothic L', 'Nimbus Sans-L', sans-serif;     
            are sans-serif fonts where l and I look alike and are typically extremely thick when bolded
   =-=-=-=-=-=-=-=-=-=
   SERIF
   =-=-=-=-=-=-=-=-=-=
   font-family: Baskerville, // Mac 90+ 
             "Baskerville Old Face", // Win 
             Perpetua, // Win  
             Caslon, // Unix preferred, but only 5% have this 
             "DejaVu Serif", // Unix 90+% 
             Georgia, // All the stragglers 
             serif;

              this serif font-stack is mainly transitional, save maybe Georgia.  Looks Great in regular text, but 
              the bold and bold italic is just a bit funky. 

     
   font-family: "Footlight MT Light", //Mac 40/Win 60
             "Big Caslon", //mac 53
             Caslon, //Linux preferred, but only 5
             "Calisto MT", //Win 24/Mac 3
             "Lucida Bright", //Win 13/Mac 3/Linux 60
             Georgia, //Win 5/Mac .02/Linux 25
             "DejaVu Serif", //Linux 11 (but 90& of Linux users have this one)
             serif;  
  
               this serif font stack features big, readable characters.  Footlight is sort of the 
               odd font out, as it has the most unusual characters, especially amongst
               lower case letters.   
              
   font-family:'Footlight MT Light', 'Big Caslon', Caslon, 
                'Calisto MT',
                'Lucida Bright',Georgia,'DejaVu Serif',serif !important;
 
                 this serif font stack has a problem with its top line fonts.
                 they don't transform "a"s and other letters when italic, making the
                 thing look all squashed up, especially when italic AND bold.  I love
                 the regular fonts of these, though.
   =-=-=-=-=-=-=-=-=-=   
   MONOSPACE
   =-=-=-=-=-=-=-=-=-=
   font-family: Monaco, // zeros are clear here 
               "Andale Mono" // zeroes are clear here too 
               "Lucida Sans Typewriter", // Nice, naturally dark, preferred monospace 
               "Lucida Console", // Nicest thing most Windows users have 
               "Nimbus Mono L", // for 99% of UNIX friends 
               "Courier New", // An all-purpose fallback 
                monospace;