X-Git-Url: http://shamusworld.gotdns.org/cgi-bin/gitweb.cgi?a=blobdiff_plain;f=source%2Fcss%2Fapp.css;h=430e9699e507cef2bd479510799db5d6191faee4;hb=7e8bf55c0fec53615666090dc67a49066e1b5051;hp=6aa831cac8c71d28c74b86203abc8b7db4084684;hpb=f6c14980192554f29ec99542834d5bb234321cde;p=ardour-manual diff --git a/source/css/app.css b/source/css/app.css index 6aa831c..430e969 100644 --- a/source/css/app.css +++ b/source/css/app.css @@ -1,21 +1,47 @@ +@font-face { + font-family: 'junge-regular'; + src: url('junge-regular-webfont.woff2') format('woff2'), + url('junge-regular-webfont.woff') format('woff'), + url('junge-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +body { + font-family: 'junge-regular'; + font-size: 16px; + line-height: 2ex; +} + +div.clearer { + clear:both; +} + +ul.inside li, ol.inside li { + left: 1em; + position: relative; + padding-right: 1em; +} + #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 +49,6 @@ border-bottom: none; } -#tree a { - font-size: 14px; - line-height: 28px; -} - #tree dd.other { display: none; } @@ -48,36 +69,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 +90,24 @@ 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 td, +#content th{ + line-height: 2em; } #content h1, @@ -100,43 +115,89 @@ #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; + line-height: 2ex; +} + +#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; + min-width: 20%; + white-space:nowrap } #content table.dl td { + vertical-align: top; width: 100%; } @@ -156,11 +217,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,9 +309,6 @@ 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))); @@ -260,7 +319,14 @@ kbd { text-transform:capitalize; } -kbd.input,kbd.cmd,kbd.osc { +kbd.def { + font-weight:bolder; + margin-right:.2em; +} + +kbd.input, +kbd.cmd, +kbd.osc { font-family:mono; border-width:0; text-transform:none; @@ -297,20 +363,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; } @@ -330,7 +397,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))); @@ -360,8 +429,8 @@ samp { font-style:italic; color:#333333; background-color:transparent; - margin-left: 1ex; - margin-right: 1ex; + margin-left: 1em; + margin-right: 1em; } samp:before { @@ -373,7 +442,6 @@ samp:after { } #subtopics ul { - font-size:20px; font-weight:bold; } @@ -404,10 +472,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; @@ -419,7 +489,7 @@ samp:after { } #content code { - font-size: 14px; + font-size: .9em; color: #555; } @@ -442,12 +512,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 ";} @@ -485,11 +553,6 @@ samp:after { .mac .mod14n:before { content: "Cmd Opt";} .mac .mod23n:before { content: "Ctrl Shift";} -#gs_tti0 { - padding-top: 2px; - padding-bottom: 0; -} - @media (max-width: 800px) { #tree { position: relative; @@ -504,12 +567,18 @@ samp:after { } /* for the TOC */ +#chapter, +#subchapter, +#section, +#subsection { + line-height:1.5em; +} #chapter { padding-top: 1em; padding-left: 1em; } #subchapter { padding-left: 4em; } #section { padding-left: 6em; } #subsection { padding-left: 8em; } /* 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; } +.container { position: relative; border: none; } +.hoverimg { position: absolute; border: none; } +.hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }