From 75b4514f778d6b1e3af9ed9739f731676330d454 Mon Sep 17 00:00:00 2001 From: Ed Ward Date: Sun, 26 Mar 2017 16:55:59 +0200 Subject: [PATCH] tweaking the CSS (GCSE, HiDPI) --- page-template.txt | 16 ++-- source/css/app.css | 199 +++++++++++++++++++++++++++++---------------- 2 files changed, 139 insertions(+), 76 deletions(-) diff --git a/page-template.txt b/page-template.txt index 005e05d..f9dc51c 100644 --- a/page-template.txt +++ b/page-template.txt @@ -25,7 +25,9 @@ {% tree %}
- + {% breadcrumbs %}

{{ page.title }}

@@ -51,12 +53,12 @@ if ( (isA(/Mac/) || isAbout(/OS X/)) && (!isAbout(/Linux/)) ) { (function() { var cx = '011950134405426689607:2lg2y9xgf3a'; - var gcse = document.createElement('script'); gcse.type = 'text/javascript'; - gcse.async = true; - gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + - '//www.google.com/cse/cse.js?cx=' + cx; - var s = document.getElementsByTagName('script')[0]; - s.parentNode.insertBefore(gcse, s); + var gcse = document.createElement('script'); + gcse.type = 'text/javascript'; + gcse.async = true; + gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(gcse, s); })(); diff --git a/source/css/app.css b/source/css/app.css index 7e11052..bb72063 100644 --- a/source/css/app.css +++ b/source/css/app.css @@ -1,21 +1,28 @@ +body { + font-family: Junge; + font-size: 16px; + line-height: 2ex; +} + #tree { background-color: #212A30; + line-height: 1.8ex; height: 100%; overflow: scroll; position: fixed; top: 0; bottom: 0; left: 0; - width: 300px; + width: 20em; } #tree-inner { - padding: 15px 20px 30px 30px; + padding: 1em 1em 2em 1.5em; } #tree h1.title { - font-size: 28px; - margin-bottom: 20px; + font-size: 1.75em; + margin-bottom: 1em; font-weight: normal; } @@ -23,11 +30,6 @@ border-bottom: none; } -#tree a { - font-size: 14px; - line-height: 28px; -} - #tree dd.other { display: none; } @@ -48,36 +50,14 @@ display: none; } - -#search { - height: 70px; -} - -#content { - padding: 10px 30px 30px 350px; - margin-left: 0; -} - -#content-main { - padding-top: 10px; - padding-left: 10px; -} - -#content p, -#content li, -#content dt, -#content dd, -#content table.dl { - font-size: 16px; - line-height: 28px; -} - #tree a { display: inline !important; + font-size: 0.88em; font-weight: normal; + line-height: 2em; color: #E4E4E4; border-bottom: 1px solid transparent; - padding-bottom: 2px; + padding-bottom: .1ex; } #tree a:hover { @@ -91,8 +71,23 @@ border-bottom: 1px solid #FFF; } -#content, #tree { - font-family: Junge; +#content { + padding: 1em 2em 2ex 21em; + margin-left: 0; +} + +#content-main { + padding-top: 1ex; + padding-left: .5em; +} + + +#content p, +#content li, +#content dt, +#content dd, +#content table { + line-height: 2em; } #content h1, @@ -100,40 +95,84 @@ #content h3, #content h4 { font-weight: normal; + padding-bottom: .3ex; } #content h1.title { + font-size: 1.8em; + margin: 0 0 2ex 0; + padding-bottom: .8ex; border-bottom: 2px solid #ccc; - padding-bottom: 10px; - margin-bottom: 40px; } #content h2 { - margin: 30px 0 20px 0; - padding-bottom: 5px; - font-size: 22px; + font-size: 1.3em; + margin: 2ex 0 1ex 0; border-bottom: 2px solid #ddd; } #content h3 { - margin: 20px 0 10px 0; - padding-bottom: 5px; - font-size: 20px; + font-size: 1.2em; + margin: 1.5ex 0 1ex 0; border-bottom: 1px solid #eee; } #content h4 { - font-size: 18px; - margin: 20px 0 10px 0; - padding-bottom: 10px; + font-size: 1.1em; + margin: 1.5ex 0 .5ex 0; border-bottom: 1px solid #eee; } +#content table, +#content table.dl { + width:100%; + margin: 1em 0; + padding: 0; + font-weight: normal; + text-align: left; +} + +#content table tr { + border-bottom: 2px solid #eeeeee; +} + +#content table tr:nth-child(odd){ + background-color: white; +} + +#content table tr:nth-child(even){ + background-color: #f5f5f5; +} + +#content table tr:hover { + background-color: #F2F9FF; +} + +#content table td, +#content table th { + margin: 0; + padding: .5em; + font-weight: normal; +} + +#content table th.sub1 { + padding-left: 2em; +} + +#content table th.sub2 { + padding-left: 4em; +} + +#content table thead { + font-weight:bold; +} + #content table.dl th { /* dl class (definition list) is for 2-columns tables that describe properties: maximmizes the width of the 2nd (description) column */ min-width: 20%; vertical-align: top; + white-space:nowrap } #content table.dl td { @@ -156,11 +195,12 @@ clear:both; } -#content dt, #content dd { +#content dt, +#content dd { border-top: 2px solid #eee; float: left; margin: 0; - padding: 5px; + padding: .5em; font-weight: normal; } @@ -247,6 +287,9 @@ kbd { text-decoration: none; border-radius: .3em; cursor: default; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; background: rgb(250, 250, 250); background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); @@ -257,7 +300,9 @@ kbd { text-transform:capitalize; } -kbd.input,kbd.cmd,kbd.osc { +kbd.input, +kbd.cmd, +kbd.osc { font-family:mono; border-width:0; text-transform:none; @@ -294,20 +339,21 @@ kbd.cmd.win:before { color:#999999; } -kbd.optoff, kbd.option { +kbd.optoff, +kbd.option { border:none; background:none; } kbd.optoff:before { content:url('/images/checkbox-unchecked.png'); - margin: 0 5px 0 0; + margin: 0 1em 0 0; vertical-align:middle; } kbd.option:before { content:url('/images/checkbox-checked.png'); - margin: 0 5px 0 0; + margin: 0 1em 0 0; vertical-align:middle; } @@ -327,7 +373,9 @@ kbd.osc { text-align:left; } -kbd.fader, kbd.knob, kbd.button { +kbd.fader, +kbd.knob, +kbd.button { background: rgb(174, 174, 217); background: -moz-linear-gradient(top, rgb(174, 174, 217), rgb(221, 221, 255)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 174, 217)), to(rgb(221, 221, 255))); @@ -357,8 +405,8 @@ samp { font-style:italic; color:#333333; background-color:transparent; - margin-left: 1ex; - margin-right: 1ex; + margin-left: 1em; + margin-right: 1em; } samp:before { @@ -370,7 +418,6 @@ samp:after { } #subtopics ul { - font-size:20px; font-weight:bold; } @@ -401,10 +448,12 @@ samp:after { text-align:center; } -#content .note,.warning,.fixme { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; +#content .note, +#content .warning, +#content .fixme { + min-height: 1.5ex; + padding: 1em; + margin-bottom: 1em; border-style: solid; border-width: 1px 1px 1px 8px; -webkit-border-radius: 4px; @@ -416,7 +465,7 @@ samp:after { } #content code { - font-size: 14px; + font-size: .9em; color: #555; } @@ -439,12 +488,10 @@ samp:after { .fixme:before { content:'FIXME: '; font-style: italic; - font-size:200%; + font-size:2em; } - /* Keyboard modifiers */ - .mod1:before { content: "Ctrl ";} .mod2:before { content: "Alt ";} .mod3:before { content: "Shift ";} @@ -482,9 +529,23 @@ samp:after { .mac .mod14n:before { content: "Cmd Opt";} .mac .mod23n:before { content: "Ctrl Shift";} -#gs_tti0 { - padding-top: 2px; - padding-bottom: 0; +/* google search : reset style for the search field */ +#search table, +#search input, +#search tr, +#search td, +#search th, +#search thead, +#search tbody{ + margin: inherit; + padding: inherit; + color: inherit; + border: inherit; + background: inherit; + line-height: inherit; + font-size: inherit; + font-weight: inherit; + box-shadow: inherit; } @media (max-width: 800px) { @@ -509,4 +570,4 @@ samp:after { /* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */ .container { position:relative; border: none;} .hoverimg { position: absolute; border: none; } -.hoverimg:hover{ z-index:100; box-shadow: 0 0 5px 5px lightgreen; } +.hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; } -- 2.37.2