diff options
Diffstat (limited to 'themes/lv2')
-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 | ||||
-rw-r--r-- | themes/lv2/templates/base.html | 20 | ||||
-rw-r--r-- | themes/lv2/templates/page.html | 12 |
5 files changed, 159 insertions, 67 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(); diff --git a/themes/lv2/templates/base.html b/themes/lv2/templates/base.html index db03cfa..00f066d 100644 --- a/themes/lv2/templates/base.html +++ b/themes/lv2/templates/base.html @@ -1,17 +1,19 @@ <!DOCTYPE html> <html lang="en"> <head> - <title>{% block title %}{{ SITENAME }}{%endblock%}</title> - <meta charset="utf-8" /> - <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" /> - <link href="{{ SITEURL }}/{{ FEED }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" /> - {% if FEED_RSS %} - <link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" /> - {% endif %} + {% block head %} + <title>{% block title %}{{ SITENAME }}{%endblock%}</title> + <meta charset="utf-8" /> + <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" /> + <link href="{{ SITEURL }}/{{ FEED }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" /> + {% if FEED_RSS %} + <link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" /> + {% endif %} + {% endblock %} </head> <body> - {% include 'github.html' %} + <!-- {% include 'github.html' %} --> <nav> <ul> <li> @@ -23,7 +25,7 @@ {% endif %} </a> </li> - + {% for title, link in MENUITEMS %} <li><a href="{{ link }}">{{ title }}</a></li> {% endfor %} diff --git a/themes/lv2/templates/page.html b/themes/lv2/templates/page.html index 33f6aca..762dd27 100644 --- a/themes/lv2/templates/page.html +++ b/themes/lv2/templates/page.html @@ -1,4 +1,8 @@ {% extends "base.html" %} +{% block head %} + {{ super() }} + <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/slideshow.css" /> +{% endblock %} {% block title %} {% if page.title %} {{ page.title }} @@ -13,4 +17,12 @@ {% endif %} </header> {{ page.content }} + {% if page.gallery %} + <div id="slideshow"> + {% for photo_set in page.gallery.photos %} + <img src="{{ SITEURL }}/{{ photo_set['slider'].src }}" alt="{{ photo_set['slider'].src }}" /> + {% endfor %} + </div> + <script type="text/javascript" src="{{ SITEURL }}/theme/js/slideshow.js"></script> + {% endif %} {% endblock %} |