From: Paul Hänsch Date: Tue, 18 Jun 2019 17:46:06 +0000 (+0200) Subject: separated color declarations for easyer syling X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;ds=sidebyside;h=39a000d658162202953c2bb16104d6c1d4246aac;p=clickslide separated color declarations for easyer syling --- diff --git a/clickslide.css b/clickslide.css index 084bf68..2e76754 100644 --- a/clickslide.css +++ b/clickslide.css @@ -1,3 +1,44 @@ +/* === Colors === */ + +footer, +body a.toplevel:before, +body span.count, +div.slide:target:after, +div.slide:target + a, div.slide:target + a + a, +:target + a:before, :target + a + a:before +{ color: #888; } + +body +{ background-color: #AAA; + background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px); +} + +div.slide +{ background-color: #FFF; + background-image: repeating-linear-gradient( #FFF, #EEE 4px); +} + +div.slide:target:after, +footer:before, body:after +{ background-color: #EEE; + background-image: repeating-linear-gradient(#EEE, #DDD 8px); +} + +div.slide h1, div.slide h2 +{ background-color: #EEE; + background-image: repeating-linear-gradient(#EEE, #DDD 8px); +} + +div.slide pre, div.slide code +{ background-color: #DDD; + background-image: repeating-linear-gradient(#CCC, #DDD 4px); +} + +div.slide:after /* slide number on overview screen */ +{ color: #AAA; } + +/* === Overall Layout === */ + * { box-sizing: border-box; margin: 0; padding: 0; @@ -20,7 +61,7 @@ body { font-family: sans-serif; padding: 2em 1em 6em 1em; - background-color: #555; + #background-color: #555; text-align: center; overflow-x: hidden; } @@ -33,9 +74,9 @@ body:after { position: fixed; bottom: 0; left: 0; width: 100%; - background-color: #EEE; height: 1.25em; content: ' '; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } a.previous, a.next ,a.toplevel { @@ -49,16 +90,17 @@ footer { font-size: .75em; padding: .5em 4em .5em 12em; text-align: center; - color: #888; + #color: #888; z-index: 4; + /* footer must not have background, so slide number is not covered */ } -footer:before { +footer:before { /* fake background in case footer spans multiple lines */ content: ' '; position: absolute; top: 0; left: 0; bottom: 1.5em; width: 100%; - background-color: #EEE; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); z-index: -1; } @@ -68,11 +110,11 @@ body a.toplevel { width: 2ex; overflow: hidden; font-size: .875em; padding-bottom: .25em; - color: #EEE; + color: transparent; z-index: 5; } body a.toplevel:before { - color: #888; + #color: #888; content: '\2196'; } @@ -81,7 +123,7 @@ body span.count { bottom: 0; left: 6.25em; font-size: .875em; padding-bottom: .125em; - color: #888; + #color: #888; z-index: 5; } @@ -108,7 +150,7 @@ div.slide:after { /* slide number */ text-align: left; content: attr(count); padding-left: .125em; - color: #DDD; + #color: #DDD; } div.slide + a { display: none; } @@ -117,7 +159,7 @@ a.nextslide { position: relative; vertical-align: top; width: 48em; line-height: 30em; - color: rgba(0, 0, 0, 0); + color: transparent; z-index: 2; } #div.slide:nth-of-type(1) { margin-right: .5em; } @@ -125,7 +167,7 @@ a.nextslide { /* ==== Slide Appearance ==== */ div.slide { - background: #FFF no-repeat center; + #background: #FFF no-repeat center; text-align: center; line-height: 1.5em; } @@ -145,12 +187,12 @@ div.slide > h2:first-child + :last-child { div.slide h1, div.slide h2 { display: block; - background-color: #EEE; text-align: center; font-size: 1.5em; margin-top: 0; margin-bottom: 1em; width: 100%; max-width: 100%; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } div.slide h1, @@ -187,13 +229,18 @@ div.slide > ol { margin: .25em auto; } +div.slide pre, div.slide code { + #background-color: rgba(224,224,224,128); + font-family: monospace; +} div.slide pre { - background-color: rgba(192,192,192,128); padding: 1ex; text-align: left; - font-family: monospace; overflow: hidden; } +div.slide code { + padding: 0 .5em; +} /* ==== Slide Display ==== */ @@ -217,8 +264,8 @@ div.slide:target:after { text-align: left; content: attr(count) " /"; padding-left: 4em; - background-color: #EEE; - color: #888; + #color: #888; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } /* back and forth link buttons */ @@ -228,13 +275,13 @@ div.slide:target + a + a { display: block; font-size: inherit; line-height: 1em; - color: #888; + #color: #888; } :target + a:before, :target + a + a:before { display: block; position: fixed; bottom: 0; - color: #888; + #color: #888; padding: 0 1em .25em 1em; z-index: 4; }