diff options
Diffstat (limited to 'themes/lv2/static')
| -rw-r--r-- | themes/lv2/static/css/main.css | 116 | ||||
| -rw-r--r-- | themes/lv2/static/css/slideshow.css | 38 | ||||
| -rw-r--r-- | themes/lv2/static/js/slideshow.js | 40 |
3 files changed, 136 insertions, 58 deletions
diff --git a/themes/lv2/static/css/main.css b/themes/lv2/static/css/main.css index ace146d..2031cf9 100644 --- a/themes/lv2/static/css/main.css +++ b/themes/lv2/static/css/main.css @@ -1,7 +1,7 @@ /* Page Style */ body { - font-family: sans-serif; + font-family: sans-serif; font-size: 100%; background-color: #fff; color: #000; @@ -14,7 +14,7 @@ a:link { } a:visited { - text-decoration: none; + text-decoration: none; } a:link { @@ -77,7 +77,7 @@ table { th { vertical-align: text-top; - background-color: #F8F8F8; + background-color: #F8F8F8; } td, th { @@ -86,115 +86,115 @@ td, th { } th { - font-weight: bold; - text-align: left; + font-weight: bold; + text-align: left; } time, #sitename { - color: #c0c0c0; - font-size: 75%; - font-variant: small-caps; + color: #c0c0c0; + font-size: 75%; + font-variant: small-caps; } img { - border: none; + border: none; } blockquote { - color: #333; - margin: 0px; - padding: 0 4em 0 4em; + color: #333; + margin: 0px; + padding: 0 4em 0 4em; } p { - text-indent: 0px; + text-indent: 0px; } p.caption { - font-size: 80%; - margin-top: 0; + font-size: 80%; + margin-top: 0; } ul, ol { - padding: .25em 0em 0 3em; + padding: .25em 0em 0 3em; } ul li, ol li { - padding: 0 0 1em 0; + padding: 0 0 1em 0; } strong { - font-weight: bold; + font-weight: bold; } tt, pre { - font-family: monospace; - line-height: 1.2em; + font-family: monospace; + line-height: 1.2em; } pre { - font-size: 0.8em; - overflow: auto; - padding: 0.25em; - margin: 0.5em; - line-height: 1.5em; + font-size: 0.8em; + overflow: auto; + padding: 0.25em; + margin: 0.5em; + line-height: 1.5em; } nav { - background-color: #222; - background: linear-gradient(to bottom, #444 0%, #000 100%); - border-bottom: solid 2px #444; - border-left: solid 2px #444; - border-right: solid 2px #444; - border-radius: 0 0 6px 6px; - color: #EEE; - margin: 0; - margin-left: auto; - margin-right: auto; - max-width: 60em; - padding: 0.5em; + background-color: #222; + background: linear-gradient(to bottom, #444 0%, #000 100%); + border-bottom: solid 2px #444; + border-left: solid 2px #444; + border-right: solid 2px #444; + border-radius: 0 0 6px 6px; + color: #EEE; + margin: 0; + margin-left: auto; + margin-right: auto; + max-width: 60em; + padding: 0.5em; } nav a, nav a:link, nav a:visited { - border-bottom: none; - color: #EEE; + border-bottom: none; + color: #EEE; } nav ul { - margin: 0; - padding: 0; - font-size: large; - font-weight: bold; + margin: 0; + padding: 0; + font-size: large; + font-weight: bold; } nav li { - display: inline; - margin-right: 1em; + display: inline; + margin-right: 1em; } #logo { - vertical-align: middle; + vertical-align: middle; } header a#page-title { - font-weight: bold; - font-size: x-large; - color: black; + font-weight: bold; + font-size: x-large; + color: black; } #content { - padding: 0.5em 2em 2em 2em; - max-width: 60em; - margin-left: auto; - margin-right: auto; + padding: 0.5em 2em 2em 2em; + max-width: 60em; + margin-left: auto; + margin-right: auto; } .highlight { - font-family: monospace; - background-color: black; - border: solid 1px #eee; - color: white; - border-radius: 6px; + font-family: monospace; + background-color: black; + border: solid 1px #eee; + color: white; + border-radius: 6px; } diff --git a/themes/lv2/static/css/slideshow.css b/themes/lv2/static/css/slideshow.css new file mode 100644 index 0000000..7fe664d --- /dev/null +++ b/themes/lv2/static/css/slideshow.css @@ -0,0 +1,38 @@ +#slideshow { + background-color: #000; + border: 3px solid #000; + border-radius: 6px; + display: inline-block; + height: 20em; + line-height: 20em; + margin: 1em; + margin-left: auto; + margin-right: auto; + position: relative; + text-align: right; + vertical-align: middle; + width: 20em; +} + +#slideshow img { + left: 0; + width: 100%; + height: auto; + max-height: 100%; + opacity: 0; + position: absolute; + text-align: center; + transition-duration: 1s; + transition-property: opacity; + vertical-align: middle; +} + +#slideshow .fadein { + opacity: 1.0; + transform-origin: bottom left; +} + +#slideshow .fadeout { + opacity: 0.0; + transform-origin: bottom left; +} diff --git a/themes/lv2/static/js/slideshow.js b/themes/lv2/static/js/slideshow.js new file mode 100644 index 0000000..d9fb9c5 --- /dev/null +++ b/themes/lv2/static/js/slideshow.js @@ -0,0 +1,40 @@ +function getPreviousNode(n) { + var p = n.previousSibling; + while (p && p.nodeType !== 1) { + p = p.previousSibling; + } + return p; +} + +function startSlideShow() { + var slideshow = document.getElementById("slideshow"), + imgs = slideshow.getElementsByTagName("img"), + n = imgs.length, + m = Math.floor((Math.random() * n)), + pred = getPreviousNode(slideshow); + + // Shrink width of predecessor so gallery fits beside it + if (pred) { + pred.style.width = "50%"; + pred.style.display = "inline-block"; + } + + // Start transition of initial image + imgs[m].className = "fadein"; + m = (m + 1) % n; + + function tick() { + // Fade out the previous image, and fade in the next + var prev = (m + n - 1) % n, + next = (m + 1) % n; + + imgs[prev].className = ""; + imgs[m].className = "fadeout"; + imgs[next].className = "fadein"; + + m = (m + 1) % n; + } + window.setInterval(tick, 4000); +} + +startSlideShow(); |