local.css

   1 /*      lessish stylesheet for ikiwiki
   2         responsive styles based on the Less CSS Framework
   3         version 0.1 - 29 June 2012
   4         https://github.com/spiffin/ikiwiki_lessish */
   5
   6 /*      Less Framework 4
   7         http://lessframework.com
   8         by Joni Korpi
   9         License: http://opensource.org/licenses/mit-license.php */
  10
  11 /*      Typography presets
  12         ------------------      */
  13
  14 .gigantic {
  15         font-size: 110px;
  16         line-height: 120px;
  17         letter-spacing: -2px;
  18 }
  19
  20 .huge, h1 {
  21         font-size: 52px;
  22         line-height: 61px;
  23         letter-spacing: -1px;
  24 }
  25
  26 .large, h2 {
  27         font-size: 42px;
  28         line-height: 48px;
  29 }
  30
  31 .bigger, h3 {
  32         font-size: 26px;
  33         line-height: 36px;
  34 }
  35
  36 .big, h4 {
  37         font-size: 22px;
  38         line-height: 30px;
  39 }
  40
  41 body {
  42         font: 1.25em/150% Georgia, serif;
  43 }
  44
  45 .small, small {
  46         font-size: 13px;
  47         line-height: 18px;
  48 }
  49
  50 /* Selection colours (easy to forget) */
  51
  52 ::selection             {background: rgb(255,255,158);}
  53 ::-moz-selection        {background: rgb(255,255,158);}
  54 img::selection          {background: transparent;}
  55 img::-moz-selection     {background: transparent;}
  56 body {-webkit-tap-highlight-color: rgb(255,255,158);}
  57
  58 /*              Default Layout: 992px.
  59                 Gutters: 24px.
  60                 Outer margins: 48px.
  61                 Leftover space for scrollbars @1024px: 32px.
  62 -------------------------------------------------------------------------------
  63 cols    1     2      3      4      5      6      7      8      9      10
  64 px      68    160    252    344    436    528    620    712    804    896    */
  65
  66 body {
  67         width: 896px;
  68         padding: 72px 48px 84px;
  69         margin: 0 auto;
  70         color: rgb(60,60,60);
  71         -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
  72 }
  73
  74 /*              Tablet Layout: 768px.
  75                 Gutters: 24px.
  76                 Outer margins: 28px.
  77                 Inherits styles from: Default Layout.
  78 -----------------------------------------------------------------
  79 cols    1     2      3      4      5      6      7      8
  80 px      68    160    252    344    436    528    620    712    */
  81
  82 @media only screen and (min-width: 768px) and (max-width: 991px) {
  83
  84         body {
  85                 width: 712px;
  86                 padding: 48px 28px 60px;
  87         }
  88 }
  89
  90 /*              Mobile Layout: 320px.
  91                 Gutters: 24px.
  92                 Outer margins: 34px.
  93                 Inherits styles from: Default Layout.
  94 ---------------------------------------------
  95 cols    1     2      3
  96 px      68    160    252    */
  97
  98 @media only screen and (max-width: 767px) {
  99
 100         body {
 101                 width: 252px;
 102                 padding: 48px 34px 60px;
 103         }
 104
 105 }
 106
 107 /*              Wide Mobile Layout: 480px.
 108                 Gutters: 24px.
 109                 Outer margins: 22px.
 110                 Inherits styles from: Default Layout, Mobile Layout.
 111 ------------------------------------------------------------
 112 cols    1     2      3      4      5
 113 px      68    160    252    344    436    */
 114
 115 @media only screen and (min-width: 480px) and (max-width: 767px) {
 116
 117         body {
 118                 width: 436px;
 119                 padding: 36px 22px 48px;
 120         }
 121
 122 }
 123
 124 /*      End Less
 125         ------  */
 126
 127 .header {
 128         font-weight: normal;
 129         font-size: 200%;
 130 }
 131
 132 h1, h2, h3, h4 { font-weight: normal; margin: 10px 0 -10px; }
 133
 134 p + p { margin-top: 8px; }
 135
 136 a:link { text-decoration: underline; color: #59c903; }
 137 a:visited { text-decoration: underline; color: #5d9a20; }
 138 a:hover { background: #efefef; text-decoration: none; color: #333; }
 139 a:active { background: #efefef; text-decoration: underline; color: #00ff00; }
 140
 141 hr { border: 0; height: 1px; color: #333; margin: 10px 0; background-color: #666; }
 142
 143 .actions ul {
 144         margin: 0 0 10px;
 145         padding: 16px .8em 10px 0px;
 146         height: auto;
 147 }
 148 .actions li {
 149         padding: 0 .5em 0 0;
 150 }
 151
 152 .pagedate,
 153 .pagelicense,
 154 .pagecopyright {
 155         font-size: small;
 156         color: #ccc;
 157 }
 158
 159 blockquote {
 160         font-style: italic;
 161 }
 162
 163 code {
 164         font: 14px Monaco, Courier, monospace;
 165         line-height: 24px;
 166 }
 167
 168 textarea {
 169         font: 12.5px Monaco, monospace;
 170         background: #232323;
 171         color: #a7ed61;
 172 }
 173
 174 .pageheader #otherlanguages,
 175 .pageheader .actions ul {
 176         border-bottom: 1px solid #666;
 177 }
 178
 179 #pageinfo {
 180         margin: 1em 0;
 181         border-top: 1px solid #666;
 182 }
 183
 184 .notebox {
 185         color: #333 !important;
 186 }
 187
 188 .sidebar {
 189         border: 1px solid #aaa;
 190 }
 191
 192 input#searchbox {
 193         background: none;
 194 }