aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authorYaroslav de la Peña Smirnov <yps@yaroslavps.com>2021-12-16 02:04:43 +0300
committerYaroslav de la Peña Smirnov <yps@yaroslavps.com>2021-12-16 02:04:43 +0300
commit9297781c79dbfe68a817474d0395001fd9746770 (patch)
treea1ef30b48f1c1c453ba37f9a2126fa58550f4b29 /assets
parent0e2f57884b494aa676686db132994a3df2b73c70 (diff)
downloadrevela-9297781c79dbfe68a817474d0395001fd9746770.tar.gz
revela-9297781c79dbfe68a817474d0395001fd9746770.zip
Added basic builtin templates and css
Diffstat (limited to 'assets')
-rw-r--r--assets/static/css/gallery.css85
-rw-r--r--assets/templates/album.html24
-rw-r--r--assets/templates/base.html17
-rw-r--r--assets/templates/image.html31
-rw-r--r--assets/templates/index.html33
5 files changed, 190 insertions, 0 deletions
diff --git a/assets/static/css/gallery.css b/assets/static/css/gallery.css
new file mode 100644
index 0000000..c72dd80
--- /dev/null
+++ b/assets/static/css/gallery.css
@@ -0,0 +1,85 @@
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ min-height: 100vh;
+ background-color: #faf6e5;
+ font-family: Helvetica, Verdana, sans-serif;
+}
+
+.header-container,
+.gallery-container {
+ width: 90vw;
+ height: auto;
+ margin: 0 auto;
+ padding: 1em;
+}
+
+.album-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.album-container a {
+ text-decoration: none;
+ flex-grow: 1;
+ height: 150px;
+}
+
+.album-container img {
+ max-height: 100%;
+ min-width: 100%;
+ object-fit: cover;
+}
+
+.album-container::after {
+ content: "";
+ flex-grow: 10;
+}
+
+.image-container {
+ text-align: center;
+ background-color: #000;
+}
+
+.image-container img {
+ display: inline-block;
+ max-width: 100vw;
+ max-height: 85vh;
+}
+
+.control-btn {
+ display: inline-block;
+ text-decoration: none;
+ padding: 0.5em;
+ color: #fff !important;
+}
+
+.control-btn:hover {
+ text-decoration: none;
+ background-color: #333;
+ color: #fff;
+}
+
+.control-btn.hidden {
+ visibility: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+ html, body {
+ background-color: #151517;
+ color: #fcf8e2;
+ }
+
+ a {
+ color: #3f6e90;
+ }
+
+ a:visited {
+ color: #9c6992;
+ }
+}
diff --git a/assets/templates/album.html b/assets/templates/album.html
new file mode 100644
index 0000000..95d9935
--- /dev/null
+++ b/assets/templates/album.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="header-container">
+ <h1>
+ <a href="{{ index }}/#{{ album.year }}">{{ album.year }}</a>
+ {% if album.title %}
+ {{ album.title }}
+ {% else %}
+ Untitled
+ {% endif %}
+ </h1>
+ <p>from <a href="{{ index }}/">{{ title }}</a> </p>
+</div>
+<div class="gallery-container">
+ <p>{{ album.desc }}</p>
+ <div class="album-container">
+ {% for thumb in album.thumbs %}
+ <a href="{{ thumb.link }}">
+ <img class="thumbnail" src="{{ thumb.source }}">
+ </a>
+ {% endfor %}
+ </div>
+</div>
+{% endblock %}
diff --git a/assets/templates/base.html b/assets/templates/base.html
new file mode 100644
index 0000000..1f2d8dc
--- /dev/null
+++ b/assets/templates/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta content="width=device-width, initial-scale=1" name="viewport">
+ <title>
+ {% block title %}
+ A photo gallery by Yaroslav de la Peña Smirnov
+ {% endblock %}
+ </title>
+ <link rel="stylesheet" href="{{ index }}/css/gallery.css">
+ </head>
+ <body>
+ {% block content %}
+ {% endblock %}
+ </body>
+</html>
diff --git a/assets/templates/image.html b/assets/templates/image.html
new file mode 100644
index 0000000..8f7dd11
--- /dev/null
+++ b/assets/templates/image.html
@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="image-container">
+ <a href="{{ image.source }}"><img class="full" src="{{ image.source }}"></a>
+ <div class="controls-container">
+ {% if image.prev %}
+ <a class="control-btn" href="{{ image.prev }}">⮜ Previous</a>
+ {% else %}
+ <a class="control-btn hidden" href="#">⮜ Previous</a>
+ {% endif %}
+ {% if image.next %}
+ <a class="control-btn" href="{{ image.next }}">Next ⮞</a>
+ {% else %}
+ <a class="control-btn hidden" href="#">Next ⮞</a>
+ {% endif %}
+ </div>
+</div>
+<div class="gallery-container">
+ <h3>
+ From <a href="{{ index }}/#{{ album.year }}">{{ album.year }}</a>
+ {% if album.title %}
+ <a href="{{ album.link }}">{{ album.title }}</a>
+ {% else %}
+ <a href="{{ album.link }}">Untitled</a>
+ {% endif %}
+ in <a href="{{ index }}/">{{ title }}</a>
+ </h3>
+ <p>Taken {{ image.date }}</p>
+</div>
+{% endblock %}
+
diff --git a/assets/templates/index.html b/assets/templates/index.html
new file mode 100644
index 0000000..61160a5
--- /dev/null
+++ b/assets/templates/index.html
@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="header-container">
+ <h1>{{ title }}</h1>
+</div>
+<div class="gallery-container">
+ <p>
+ Jump to year:
+ {% for year in years %}
+ <a href="#{{ year.name }}">{{ year.name }}</a>
+ {% endfor %}
+ </p>
+ {% for year in years %}
+ <h2 id="{{ year.name }}">{{ year.name }}</h2>
+ {% for album in year.albums %}
+ {% if album.title %}
+ <a href="{{ album.link }}"><h3>{{ album.title }}</h3></a>
+ {% else %}
+ <a href="{{ album.link }}"><h3>Untitled</h3></a>
+ {% endif %}
+ <div class="album-container">
+ {% for thumb in album.thumbs %}
+ {% if loop.index < 4 %}
+ <a href="{{ thumb.link }}">
+ <img class="thumbnail" src="{{ thumb.source }}">
+ </a>
+ {% endif %}
+ {% endfor %}
+ </div>
+ {% endfor %}
+ {% endfor %}
+</div>
+{% endblock %}