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