diff options
| author | Yaroslav de la Peña Smirnov <yps@yaroslavps.com> | 2021-12-16 02:04:43 +0300 |
|---|---|---|
| committer | Yaroslav de la Peña Smirnov <yps@yaroslavps.com> | 2021-12-16 02:04:43 +0300 |
| commit | 9297781c79dbfe68a817474d0395001fd9746770 (patch) | |
| tree | a1ef30b48f1c1c453ba37f9a2126fa58550f4b29 /assets | |
| parent | 0e2f57884b494aa676686db132994a3df2b73c70 (diff) | |
| download | revela-9297781c79dbfe68a817474d0395001fd9746770.tar.gz revela-9297781c79dbfe68a817474d0395001fd9746770.zip | |
Added basic builtin templates and css
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/static/css/gallery.css | 85 | ||||
| -rw-r--r-- | assets/templates/album.html | 24 | ||||
| -rw-r--r-- | assets/templates/base.html | 17 | ||||
| -rw-r--r-- | assets/templates/image.html | 31 | ||||
| -rw-r--r-- | assets/templates/index.html | 33 |
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 %} |