diff options
| -rw-r--r-- | local.css | 205 |
1 files changed, 196 insertions, 9 deletions
@@ -1,13 +1,200 @@ -/* Embedded Moose local.css for use with ikiwiki - * Written by Josh Triplett <josh@freedesktop.org> - * Some ideas from the Debian lighttpd index.html page. */ +/* lessish stylesheet for ikiwiki + responsive styles based on the Less CSS Framework + version 0.1 - 29 June 2012 + https://github.com/spiffin/ikiwiki_lessish */ -body { background: #e7e7e7; } +/* Less Framework 4 + http://lessframework.com + by Joni Korpi + License: http://opensource.org/licenses/mit-license.php */ -#content { background: #ffffff; margin: 10px 0px; border: 2px solid #c0c0c0; padding: 10px; font-family: sans-serif;} +/* Typography presets + ------------------ */ -.header { background: #4b6983; border: 2px solid #7590ae; padding: 10px; color: #ffffff; font-family: sans-serif;} -.header a { margin-right: 1ex; color: #ffffff; font-family: sans-serif;} +.gigantic { + font-size: 110px; + line-height: 120px; + letter-spacing: -2px; +} -.actions ul { border: none; padding-bottom: 0px; font-family: sans-serif;} -#footer { border: none; font-family: sans-serif;} +.huge, h1 { + /*font-size: 52px;*/ + line-height: 61px; + letter-spacing: -1px; +} + +.large, h2 { + /*font-size: 42px;*/ + line-height: 48px; +} + +.bigger, h3 { + font-size: 26px; + line-height: 36px; +} + +.big, h4 { + font-size: 22px; + line-height: 30px; +} + +body { + font: 1.25em/150% Georgia, serif; +} + +.small, small { + font-size: 13px; + line-height: 18px; +} + +/* Selection colours (easy to forget) */ + +::selection {background: rgb(255,255,158);} +::-moz-selection {background: rgb(255,255,158);} +img::selection {background: transparent;} +img::-moz-selection {background: transparent;} +body {-webkit-tap-highlight-color: rgb(255,255,158);} + +/* Default Layout: 992px. + Gutters: 24px. + Outer margins: 48px. + Leftover space for scrollbars @1024px: 32px. +------------------------------------------------------------------------------- +cols 1 2 3 4 5 6 7 8 9 10 +px 68 160 252 344 436 528 620 712 804 896 */ + +body { + width: 896px; + padding: 72px 48px 84px; + margin: 0 auto; + color: rgb(60,60,60); + -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ +} + +/* Tablet Layout: 768px. + Gutters: 24px. + Outer margins: 28px. + Inherits styles from: Default Layout. +----------------------------------------------------------------- +cols 1 2 3 4 5 6 7 8 +px 68 160 252 344 436 528 620 712 */ + +@media only screen and (min-width: 768px) and (max-width: 991px) { + + body { + width: 712px; + padding: 48px 28px 60px; + } +} + +/* Mobile Layout: 320px. + Gutters: 24px. + Outer margins: 34px. + Inherits styles from: Default Layout. +--------------------------------------------- +cols 1 2 3 +px 68 160 252 */ + +@media only screen and (max-width: 767px) { + + body { + width: 252px; + padding: 48px 34px 60px; + } + +} + +/* Wide Mobile Layout: 480px. + Gutters: 24px. + Outer margins: 22px. + Inherits styles from: Default Layout, Mobile Layout. +------------------------------------------------------------ +cols 1 2 3 4 5 +px 68 160 252 344 436 */ + +@media only screen and (min-width: 480px) and (max-width: 767px) { + + body { + width: 436px; + padding: 36px 22px 48px; + } + +} + +/* End Less + ------ */ + +.header { + font-weight: normal; + font-size: 200%; +} + +h1, h2, h3, h4 { font-weight: normal; margin: 10px 0 -10px; } + +p + p { margin-top: 8px; } + +a:link { text-decoration: underline; color: #59c903; } +a:visited { text-decoration: underline; color: #5d9a20; } +a:hover { background: #efefef; text-decoration: none; color: #333; } +a:active { background: #efefef; text-decoration: underline; color: #00ff00; } + +hr { border: 0; height: 1px; color: #333; margin: 10px 0; background-color: #666; } + +.actions ul { + margin: 0 0 10px; + padding: 16px .8em 10px 0px; + height: auto; +} +.actions li { + padding: 0 .5em 0 0; +} + +.pagedate, +.pagelicense, +.pagecopyright { + font-size: small; + color: #ccc; +} + +blockquote { + font-style: italic; +} + +code { + /*font: 14px Monaco, Courier, monospace;*/ + line-height: 24px; +} + +textarea { + font: 12.5px Monaco, monospace; + background: #232323; + color: #a7ed61; +} + +.pageheader #otherlanguages, +.pageheader .actions ul { + border-bottom: 1px solid #666; +} + +#pageinfo { + margin: 1em 0; + border-top: 1px solid #666; +} + +.notebox { + color: #333 !important; +} + +.sidebar { + border: 1px solid #aaa; +} + +input#searchbox { + background: none; +} + +#content pre { + background: rgb(230,230,230); + padding: 10px; + border: solid 1px #BBBBBB; +} |