summaryrefslogtreecommitdiffstats
path: root/themes
diff options
context:
space:
mode:
Diffstat (limited to 'themes')
-rw-r--r--themes/lv2/static/css/main.css116
-rw-r--r--themes/lv2/static/css/slideshow.css38
-rw-r--r--themes/lv2/static/js/slideshow.js40
-rw-r--r--themes/lv2/templates/base.html20
-rw-r--r--themes/lv2/templates/page.html12
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 %}
generated by cgit v1.2.1 (git 2.18.0) at 2024-10-01 20:13:57 +0000