From 332e64a82adaccda866812ff1b5b2f76ddf7d859 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9gory=20Bodin?= Date: Sun, 19 May 2013 16:47:01 +0200 Subject: [PATCH] Add a style specific for eink devices. --- style-eink.css | 304 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 304 insertions(+) create mode 100644 style-eink.css diff --git a/style-eink.css b/style-eink.css new file mode 100644 index 0000000..ae83d28 --- /dev/null +++ b/style-eink.css @@ -0,0 +1,304 @@ +/* Global Box Sizing and Font-Smoothing */ +*, *:after, *:before { + box-sizing:border-box; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-font-smoothing:antialiased; + -moz-font-smoothing:antialiased; + -o-font-smoothing:antialiased; + font-smoothing:antialiased; + text-rendering:optimizeLegibility; +} + +html { font-size: 100%; -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + +body { + font-family: 'Open Sans', sans-serif; + line-height:18px; + color: #1c1c1c; /* Lighter on the eyes than #000 Black */ + margin: 0px; background: #cccccc; background-size: cover; +} + +img { + border: 0px; + max-width: 100%; + height: auto; + width: auto\9; /* ie8 */ + opacity: 1; +} + +/* ========================================================================== + Typography stuff goes here + ========================================================================== */ +h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;} +/*h1 see mediaqueries*/ +h2 {font-size: 1.2em;} +h3 {font-size: 1.1em;} +h4 {font-size: 1.0em; } +h5 {font-size: 0.83em;} +h6 {font-size: 0.75em;} + +a:hover, a:active { outline: none; } +a { + color: black; + text-decoration: none; + font-weight: bold; +} +a:hover { color:#000; text-decoration: none; } +.frontpage a {display:block; } +.frontpage a:hover { width: 100%; background-color: white;} +.books:hover { width: 100%; background-color: silver; } +.link a:hover { display:inline-block; width: 100%; background-color: #778899; /*Dirty IE Hack*/ zoom: 1; *display: inline;} + +img +{ +margin:0; +padding:0; +border:0; +} + +/* ============================================================================= + Main container stuff goes here and other globals + ========================================================================== */ +.container{ + border:1px solid #000; border-radius:10px; + max-width:800px;width:95%;margin:0 auto;position:relative; + background-color: white; +} + +.fancyabout { font-weight:400; text-decoration: none; } + +/* ============================================================================= + Header stuff goes here + ========================================================================== */ +header { + clear:both; + color: black; + text-align:center; + display:block; + min-height:70px; + border-radius: 10px 10px 0px 0px; + border-bottom: 2px dashed gray; + font-variant: small-caps; + letter-spacing: 2px; +} + +.headleft { + float: left; +} + +.headcenter +{ +float:none; +margin:auto; +text-align:center; +height:70px; +display:table; +} + +header h1{ + display: table-cell; + vertical-align: middle; + text-align: center; + line-height: 100%; + text-shadow: 0px 4px 3px rgba(0,0,0,0.4), + 0px 8px 13px rgba(0,0,0,0.1), + 0px 18px 23px rgba(0,0,0,0.1); +} + +.headright { + float: right; +} + +/* ============================================================================= + Section and Article stuff goes here + ========================================================================== */ +section { +clear:both; +background-color: #fff; +} + +article { +border-bottom: 1px solid black; +max-width:800px; +} + +/*-------------frontpage article-------------*/ + +.frontpage h2 { + text-align: center; + letter-spacing: 2px; + color: black; + font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; + padding: 5px 0; +} + +.frontpage h4 { + padding: 5px 0; + text-align: center; + color: gray; + font-style: italic; + font-size: 13px; + text-decoration: overline; + } + +/*-------------books article-------------*/ +.books { + clear: both; + padding: 10px; + min-height: 90px; +} + +.cover { + float:left; + margin: 0 10px 0 0; + min-width: 56px; + min-height: 70px; +} + +.download { + float: right; + line-height:40px; + text-align: right; +} + +.download a { + border-radius: 6px; + box-shadow:0 0 10px #000; + background: darkgray; + background: radial-gradient(#666, black); + color: #EEE; + text-decoration : none; + font-weight: bold; + padding: 5px 10px 5px 10px; +} + + +.books h4{ + display: inline; + font-style: italic; +} + +/*-------------books popup article-------------*/ +.bookpopup h2{ + margin: 15px 15px; +} + +.bookpopup h3{ + display:inline; /*Dirty IE Hack*/ zoom: 1; *display: inline; +} + +.bookpopup h4{ + border-top: 1px solid black; +} + +.fullclickpopup{ + display: block; + color: black; +} + +section .bookpopup{ + padding: 8px 8px; +} + +/* ============================================================================= + Footer stuff goes here + ========================================================================== */ +footer +{ +clear:both; +color:white; +border-radius: 0px 0px 10px 10px; +height:32px; +} + +.footright +{ +float:right; +height:32px; +} + +.footcenter +{ +margin:auto; +text-align:center; +height:32px; +display:table; +} + +.footcenter p, .footcenter a +{ +display: table-cell; +vertical-align: middle; +text-align: center; +line-height: 100%; +} + +/* ============================================================================= + Aside stuff goes here + ========================================================================== */ +#tool +{ +width:100%; +height:32px; +overflow: hidden; +} + + +/*-------------Search Aside-------------*/ +#tool input[type=text] +{ +vertical-align: middle; +width: 100%; +margin: 5px; +} + +.stop select +{ +vertical-align: middle; +margin: 5px; +} + +#sort +{ +cursor:pointer; +} + +.stop +{ +display: block; +overflow: hidden; +} + +/* ============================================================================= + Mediaquerie stuff goes here + ========================================================================== */ +/* 100px and greater */ +@media only screen and (min-width: 100px) { +h1 {font-size: 1em;} +.container { width:100%; } +} + +/* 320px and greater */ +@media only screen and (min-width: 320px) { +h1 {font-size: 1.2em;} +} + +/* 480px and greater */ +@media only screen and (min-width: 480px) { +h1 {font-size: 1.5em;} +body { font-size: 1em;/*12px/16px */ + font-weight:450; /* Better supported than 'lighter' attribute */ + } +} + +/* 810px and greater */ +@media only screen and (min-width: 768px) { +h1 {font-size: 2em;} +.container { box-shadow:0 0 20px #000; } +body { margin: 5px; + font-size: 0.85em;/*12px/16px */ + font-weight:400; /* Better supported than 'lighter' attribute */ + } +} \ No newline at end of file