Modularize into template files, add root gen
Removes most of the inline HTML to their own files Uses the most basic setup to create links for all the existing index files created with GenTemplate
This commit is contained in:
David Todd
parent
a9023f9380
commit
8e77c43d32
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@ thumbs/*
|
|||||||
GenThumb.log
|
GenThumb.log
|
||||||
index*.html
|
index*.html
|
||||||
.vscode
|
.vscode
|
||||||
|
gallery.html
|
||||||
|
|||||||
30
GenGallery.py
Executable file
30
GenGallery.py
Executable file
@ -0,0 +1,30 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
# GenThumb.py - Part of the simple s3 gallery
|
||||||
|
# Usage: ./GenThumb.py
|
||||||
|
|
||||||
|
from pathlib import Path
|
||||||
|
import getopt
|
||||||
|
import sys
|
||||||
|
import os
|
||||||
|
|
||||||
|
# Set these to override
|
||||||
|
baseuri = os.environ.get('BASEURI',"https://s3.wasabisys.com/c0de-photography/")
|
||||||
|
thumb_path = os.environ.get('THUMBNAILS', "./thumbs")
|
||||||
|
|
||||||
|
# Load templates into memory
|
||||||
|
gallery_template = open('templates/root_gallery.html', 'r').read()
|
||||||
|
card_template = open('templates/card.html', 'r').read()
|
||||||
|
|
||||||
|
# Get all the index files in local directory
|
||||||
|
indexlist = list(Path(".").rglob("index_*.html"))
|
||||||
|
|
||||||
|
with open('gallery.html', 'w') as gallery:
|
||||||
|
thumbrow = ""
|
||||||
|
for index in indexlist:
|
||||||
|
the_template = card_template # Don't mutate the source
|
||||||
|
# basic string replacements
|
||||||
|
the_template = the_template.replace("{{FULLLINK}}", index.name)
|
||||||
|
the_template = the_template.replace("{{TITLE}}", index.name.strip("index_").strip(".html").replace(":", "/"))
|
||||||
|
thumbrow += the_template.replace("{{THUMBNAIL}}", "thumbs/folder.png")
|
||||||
|
gallery.write(gallery_template.replace("{{THUMBROW}}", thumbrow))
|
||||||
|
|
||||||
160
GenTemplate.py
160
GenTemplate.py
@ -23,159 +23,12 @@ for opt, arg in opts:
|
|||||||
elif opt in ("-p", "--pathlist"):
|
elif opt in ("-p", "--pathlist"):
|
||||||
pathlist_file = arg # Index file created by GenThumb.py
|
pathlist_file = arg # Index file created by GenThumb.py
|
||||||
|
|
||||||
template = """
|
# Load templates into memory
|
||||||
<html>
|
gallery_template = open('templates/root_gallery.html', 'r').read()
|
||||||
<head>
|
card_template = open('templates/card.html', 'r').read()
|
||||||
<title>Simple S3 Gallery</title>
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="author" content="David Todd" />
|
|
||||||
<link rel="icon" type="image/png" href="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d" />
|
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
||||||
<style>
|
|
||||||
.bg-dark {
|
|
||||||
background-color: #343a40cc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.bcrumb {
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.jumbotron {
|
|
||||||
padding-top: 6rem;
|
|
||||||
padding-bottom: 6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-heading {
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron .container {
|
|
||||||
max-width: 40rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.25rem 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer p {
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="collapse bg-dark" id="navbarHeader">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8 col-md-7 py-4">
|
|
||||||
<h4 class="text-white">About</h4>
|
|
||||||
<p class="text-white">This is a small gallery to represent images that I have taken over the past few years. Most of these are unsorted and unedited, and thus a lot are blurry or have lighting issues. I have taken, and thereby own all photos on this site.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4 offset-md-1 py-4">
|
|
||||||
<h4 class="text-white">Contact</h4>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li><a href="https://c0defox.es" class="text-white">My contact site</a></li>
|
|
||||||
<li><a href="https://t.me/c0defox" class="text-white">Hit me up on Telegram</a></li>
|
|
||||||
<li><a href="c0de#0689" class="text-white">My Discord is c0de#0689</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
|
||||||
<div class="container d-flex justify-content-between">
|
|
||||||
<span class="navbar-brand d-flex align-items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|
||||||
<strong>Simple S3 Gallery</strong>
|
|
||||||
<nav class="text-dark bcrumb" aria-label="breadcrumb">
|
|
||||||
<ol class="breadcrumb">
|
|
||||||
{{BREADCRUMBS}}
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
</span>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main role="main">
|
|
||||||
|
|
||||||
<!-- Optional for creating a notification -->
|
|
||||||
<!--
|
|
||||||
<section class="jumbotron text-center">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="jumbotron-heading">Album example</h1>
|
|
||||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
|
||||||
<p>
|
|
||||||
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
|
||||||
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<div class="album py-3 bg-dark">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
{{THUMBROW}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="text-muted">
|
|
||||||
<div class="container">
|
|
||||||
<p class="float-right"><a href="#">Back to top</a></p>
|
|
||||||
<p>Simple S3 Gallery © 2019 <a href="https://c0defox.es">David Todd</a> - All photos are © <a href="https://dtodd.us">David Todd</a></p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
"""
|
|
||||||
|
|
||||||
template2 = """
|
|
||||||
<div class="col-md-3">
|
|
||||||
<a href="{{FULLLINK}}" target="{{FULLLINK}}">
|
|
||||||
<div class="card mb-3 bg-dark text-white rounded">
|
|
||||||
<div class="card-header">{{TITLE}}</div>
|
|
||||||
<img class=card-img" width="100%" height="100%" src="{{THUMBNAIL}}" />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
"""
|
|
||||||
|
|
||||||
crumb_template = """<li class="breadcrumb-item" aria-current="page">{{PATH}}</li>"""
|
crumb_template = """<li class="breadcrumb-item" aria-current="page">{{PATH}}</li>"""
|
||||||
|
|
||||||
|
# Get the paths of all JPGs in the thumbnail directory
|
||||||
thumblist = list(Path(thumb_path).rglob("*.[jJ][pP][gG]"))
|
thumblist = list(Path(thumb_path).rglob("*.[jJ][pP][gG]"))
|
||||||
|
|
||||||
with open(pathlist_file, 'r') as pathlist:
|
with open(pathlist_file, 'r') as pathlist:
|
||||||
@ -185,10 +38,11 @@ with open(pathlist_file, 'r') as pathlist:
|
|||||||
pathlist.sort()
|
pathlist.sort()
|
||||||
thumbrow = ""
|
thumbrow = ""
|
||||||
for image in thumblist:
|
for image in thumblist:
|
||||||
|
# Search the pathlist for any lines with a matching filename
|
||||||
indices = [i for i, s in enumerate(pathlist) if image.name in s]
|
indices = [i for i, s in enumerate(pathlist) if image.name in s]
|
||||||
if len(indices) > 0:
|
if len(indices) > 0:
|
||||||
imagename = "%s" % image
|
imagename = "%s" % image
|
||||||
the_template = template2
|
the_template = card_template # Don't mutate the source
|
||||||
the_template = the_template.replace("{{FULLLINK}}", pathlist[indices[0]])
|
the_template = the_template.replace("{{FULLLINK}}", pathlist[indices[0]])
|
||||||
the_template = the_template.replace("{{TITLE}}", imagename.strip("thumbs/"))
|
the_template = the_template.replace("{{TITLE}}", imagename.strip("thumbs/"))
|
||||||
thumbrow += the_template.replace("{{THUMBNAIL}}", "%s" % image)
|
thumbrow += the_template.replace("{{THUMBNAIL}}", "%s" % image)
|
||||||
@ -199,5 +53,5 @@ with open(pathlist_file, 'r') as pathlist:
|
|||||||
the_template = crumb_template
|
the_template = crumb_template
|
||||||
crumblist += the_template.replace("{{PATH}}", crumb)
|
crumblist += the_template.replace("{{PATH}}", crumb)
|
||||||
|
|
||||||
index.write(template.replace("{{THUMBROW}}", thumbrow).replace("{{BREADCRUMBS}}", crumblist))
|
index.write(gallery_template.replace("{{THUMBROW}}", thumbrow).replace("{{BREADCRUMBS}}", crumblist))
|
||||||
|
|
||||||
|
|||||||
@ -52,6 +52,7 @@ def gen_thumb(image, imagepath):
|
|||||||
|
|
||||||
logging.info("Saved Thumbnail as %s" % thumbname)
|
logging.info("Saved Thumbnail as %s" % thumbname)
|
||||||
|
|
||||||
|
logging.debug("Creating pathlist file as: pathlist_%s.txt" % browse_path.replace('/', ':'))
|
||||||
with open('pathlist_%s.txt' % browse_path.replace('/', ':'), 'w') as pathlist:
|
with open('pathlist_%s.txt' % browse_path.replace('/', ':'), 'w') as pathlist:
|
||||||
for image in filelist:
|
for image in filelist:
|
||||||
imagepath = "%s" % image.parent
|
imagepath = "%s" % image.parent
|
||||||
|
|||||||
8
templates/card.html
Normal file
8
templates/card.html
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<div class="col-md-3">
|
||||||
|
<a href="{{FULLLINK}}" target="{{FULLLINK}}">
|
||||||
|
<div class="card mb-3 bg-dark text-white">
|
||||||
|
<div class="card-header">{{TITLE}}</div>
|
||||||
|
<img class="card-img" width="250" src="{{THUMBNAIL}}" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
123
templates/root_gallery.html
Normal file
123
templates/root_gallery.html
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Simple S3 Gallery</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="David Todd" />
|
||||||
|
<link rel="icon" type="image/png" href="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d" />
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||||
|
<style>
|
||||||
|
.jumbotron {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.jumbotron {
|
||||||
|
padding-top: 6rem;
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron-heading {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron .container {
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.25rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="collapse bg-dark" id="navbarHeader">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8 col-md-7 py-4">
|
||||||
|
<h4 class="text-white">About</h4>
|
||||||
|
<p class="text-muted">This was a small gallery that I put together to make my photography available to the world. Images are grouped in folders for what I've done.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 offset-md-1 py-4">
|
||||||
|
<h4 class="text-white">Contact</h4>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="https://c0defox.es" class="text-white">My contact site</a></li>
|
||||||
|
<li><a href="https://t.me/c0defox" class="text-white">Hit me up on Telegram</a></li>
|
||||||
|
<li><a href="c0de#0689" class="text-white">My Discord is c0de#0689</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||||||
|
<div class="container d-flex justify-content-between">
|
||||||
|
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||||
|
<strong>Simple S3 Gallery</strong>
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main role="main">
|
||||||
|
|
||||||
|
<!-- Optional for creating a notification -->
|
||||||
|
<!--
|
||||||
|
<section class="jumbotron text-center">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="jumbotron-heading">Album example</h1>
|
||||||
|
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
||||||
|
<p>
|
||||||
|
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
||||||
|
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="album py-4 bg-dark">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
{{THUMBROW}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="text-muted">
|
||||||
|
<div class="container">
|
||||||
|
<p class="float-right"><a href="#">Back to top</a></p>
|
||||||
|
<p><a href="https://github.com/alopexc0de/simple-s3-gallery"></a>Simple S3 Gallery</a> © 2019 <a href="https://c0defox.es">David Todd</a> - All photos are © David Todd</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
137
templates/sub_gallery.html
Normal file
137
templates/sub_gallery.html
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Simple S3 Gallery</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="David Todd" />
|
||||||
|
<link rel="icon" type="image/png" href="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d" />
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||||
|
<style>
|
||||||
|
.bg-dark {
|
||||||
|
background-color: #343a40cc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.bcrumb {
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.jumbotron {
|
||||||
|
padding-top: 6rem;
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron-heading {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron .container {
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.25rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="collapse bg-dark" id="navbarHeader">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8 col-md-7 py-4">
|
||||||
|
<h4 class="text-white">About</h4>
|
||||||
|
<p class="text-white">This is a small gallery to represent images that I have taken over the past few years. Most of these are unsorted and unedited, and thus a lot are blurry or have lighting issues. I have taken, and thereby own all photos on this site.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 offset-md-1 py-4">
|
||||||
|
<h4 class="text-white">Contact</h4>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><a href="https://c0defox.es" class="text-white">My contact site</a></li>
|
||||||
|
<li><a href="https://t.me/c0defox" class="text-white">Hit me up on Telegram</a></li>
|
||||||
|
<li><a href="c0de#0689" class="text-white">My Discord is c0de#0689</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||||||
|
<div class="container d-flex justify-content-between">
|
||||||
|
<span class="navbar-brand d-flex align-items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||||
|
<strong>Simple S3 Gallery</strong>
|
||||||
|
<nav class="text-dark bcrumb" aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
{{BREADCRUMBS}}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</span>
|
||||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main role="main">
|
||||||
|
|
||||||
|
<!-- Optional for creating a notification -->
|
||||||
|
<!--
|
||||||
|
<section class="jumbotron text-center">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="jumbotron-heading">Album example</h1>
|
||||||
|
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
||||||
|
<p>
|
||||||
|
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
||||||
|
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="album py-3 bg-dark">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
{{THUMBROW}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="text-muted">
|
||||||
|
<div class="container">
|
||||||
|
<p class="float-right"><a href="#">Back to top</a></p>
|
||||||
|
<p><a href="https://github.com/alopexc0de/simple-s3-gallery">Simple S3 Gallery</a> © 2019 <a href="https://c0defox.es">David Todd</a> - All photos are © David Todd</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user