some styling
This commit is contained in:
parent
321cbee134
commit
085c1dee88
4 changed files with 39 additions and 2 deletions
|
@ -156,10 +156,15 @@ def generate_html(config: Config, root_dir: ImageDirectory) -> None:
|
||||||
|
|
||||||
for album_dir in root_dir.walk():
|
for album_dir in root_dir.walk():
|
||||||
html_path = album_dir.path / "index.html"
|
html_path = album_dir.path / "index.html"
|
||||||
|
static_path = root_dir.path.relative_to(
|
||||||
|
html_path.parent, walk_up=True
|
||||||
|
) / "static"
|
||||||
|
|
||||||
logger.debug(f"Rendering {html_path}")
|
logger.debug(f"Rendering {html_path}")
|
||||||
with html_path.open("w") as f:
|
with html_path.open("w") as f:
|
||||||
f.write(
|
f.write(
|
||||||
album_tmpl.render(
|
album_tmpl.render(
|
||||||
|
static_dir=static_path,
|
||||||
album_dir=album_dir,
|
album_dir=album_dir,
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
@ -168,11 +173,16 @@ def generate_html(config: Config, root_dir: ImageDirectory) -> None:
|
||||||
# TODO: If a file with a matching name but .txt or .md, add that as the
|
# TODO: If a file with a matching name but .txt or .md, add that as the
|
||||||
# description for the image
|
# description for the image
|
||||||
html_path = image_path.html_path()
|
html_path = image_path.html_path()
|
||||||
|
static_path = root_dir.path.relative_to(
|
||||||
|
html_path.parent, walk_up=True
|
||||||
|
) / "static"
|
||||||
html_path.parent.mkdir(exist_ok=True)
|
html_path.parent.mkdir(exist_ok=True)
|
||||||
|
|
||||||
logger.debug(f"Rendering {html_path}")
|
logger.debug(f"Rendering {html_path}")
|
||||||
with html_path.open("w") as f:
|
with html_path.open("w") as f:
|
||||||
f.write(
|
f.write(
|
||||||
photo_tmpl.render(
|
photo_tmpl.render(
|
||||||
|
static_dir=static_path,
|
||||||
image_path=image_path,
|
image_path=image_path,
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,9 +1,15 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
{% if not album_dir.is_root %}
|
||||||
|
<p>
|
||||||
|
<a href="..">up</a>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% if album_dir.children %}
|
{% if album_dir.children %}
|
||||||
<h1>Albums</h1>
|
<h1>Albums</h1>
|
||||||
<div id="albums">
|
<div id="album-children">
|
||||||
{% for child in album_dir.children %}
|
{% for child in album_dir.children %}
|
||||||
<div class="album">
|
<div class="album">
|
||||||
<a href="{{child.path.name}}/">
|
<a href="{{child.path.name}}/">
|
||||||
|
@ -16,7 +22,7 @@
|
||||||
|
|
||||||
{% if album_dir.images %}
|
{% if album_dir.images %}
|
||||||
<h1>Photos</h1>
|
<h1>Photos</h1>
|
||||||
<div id="photos">
|
<div id="album-photos">
|
||||||
{% for image in album_dir.images %}
|
{% for image in album_dir.images %}
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<a href="slides/{{image.html_filename()}}">
|
<a href="slides/{{image.html_filename()}}">
|
||||||
|
|
|
@ -7,7 +7,9 @@
|
||||||
<title>My Photos</title>
|
<title>My Photos</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="content">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
body {
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
width: 1500px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#album-photos {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
margin: 1em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue