Added colorbox

This commit is contained in:
Leander Hutton 2022-01-02 21:52:32 -05:00
parent 26381ccbfb
commit 5fb63895a1
12 changed files with 431 additions and 0 deletions

50
static/css/colorbox.css Normal file
View File

@ -0,0 +1,50 @@
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxContent{margin-top:32px; overflow:visible; background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background:#000; padding:1px;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxLoadingOverlay{background:#000;}
#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxPrevious{background-position:0px 0px; right:44px;}
#cboxPrevious:hover{background-position:0px -25px;}
#cboxNext{background-position:-25px 0px; right:22px;}
#cboxNext:hover{background-position:-25px -25px;}
#cboxClose{background-position:-50px 0px; right:0;}
#cboxClose:hover{background-position:-50px -25px;}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

102
static/css/justifiedGallery.min.css vendored Normal file
View File

@ -0,0 +1,102 @@
/*!
* justifiedGallery - v3.7.0
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
width: 100%;
position: relative;
overflow: hidden;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure {
position: absolute;
display: inline-block;
overflow: hidden;
/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
filter: "alpha(opacity=10)";
opacity: 0.1;
margin: 0;
padding: 0;
}
.justified-gallery > a > img,
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: none;
filter: "alpha(opacity=0)";
opacity: 0;
}
.justified-gallery > a > .caption,
.justified-gallery > div > .caption,
.justified-gallery > figure > .caption {
display: none;
position: absolute;
bottom: 0;
padding: 5px;
background-color: #000000;
left: 0;
right: 0;
margin: 0;
color: white;
font-size: 12px;
font-weight: 300;
font-family: sans-serif;
}
.justified-gallery > a > .caption.caption-visible,
.justified-gallery > div > .caption.caption-visible,
.justified-gallery > figure > .caption.caption-visible {
display: initial;
filter: "alpha(opacity=70)";
opacity: 0.7;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
.justified-gallery > .entry-visible > img,
.justified-gallery > .entry-visible > a > img {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-filtered {
display: none;
}
.justified-gallery > .spinner {
position: absolute;
bottom: 0;
margin-left: -24px;
padding: 10px 0 10px 0;
left: 50%;
filter: "alpha(opacity=100)";
opacity: 1;
overflow: initial;
}
.justified-gallery > .spinner > span {
display: inline-block;
filter: "alpha(opacity=0)";
opacity: 0;
width: 8px;
height: 8px;
margin: 0 4px 0 4px;
background-color: #000;
border-radius: 6px;
}

6
static/js/jquery.colorbox-min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
static/js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,7 @@
jQuery('a.mybox').colorbox({
maxWidth:"90%",
maxHeight:"90%",
transition:"elastic",
opacity:"0.9",
rel:"group1",
scrolling: false });

View File

@ -3,6 +3,7 @@
<head> <head>
<title>{% block title %}{{ SITENAME }}{%endblock%}</title> <title>{% block title %}{{ SITENAME }}{%endblock%}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="/theme/css/colorbox.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" /> <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
<link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" /> <link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
{% if FEED_RSS %} {% if FEED_RSS %}
@ -72,6 +73,9 @@
{% include 'analytics.html' %} {% include 'analytics.html' %}
{% include 'piwik.html' %} {% include 'piwik.html' %}
{% include 'disqus_script.html' %} {% include 'disqus_script.html' %}
<script src="/theme/js/jquery.min.js"></script>
<script src="/theme/js/jquery.colorbox-min.js"></script>
<script src="/theme/js/load-colorbox.js"></script>
</div> </div>

85
templates/base.html.old Normal file
View File

@ -0,0 +1,85 @@
<!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_ATOM }}" 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 %}
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie.css"/>
<script src="{{ SITEURL }}/js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie6.css"/><![endif]-->
</head>
<body>
<div id="wrap" style="width:100%">
<div id="container" style="width:70%">
<div class="entry">
{% block content %}
{% endblock %}
</div>
</div>
<div id="sidebar" style="width:25%">
<h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
<span class="description">{{ DESCRIPTION }} </span>
<nav>
<ul>
<li><a href="{{ SITEURL }}/index.html">Home</a></li>
<li><a href="{{ SITEURL }}/posts.html">Articles</a></li>
<li><a href="{{ SITEURL }}/portfolio.html">Photography</a></li>
<li><a href="{{ SITEURL }}/about.html">About</a></li>
<li><a href="{{ SITEURL }}/recommendations.html">Recommendations</a></li>
{% if categories|length > 1 %}
<!-- <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
{% endif %}
{% if tags|length > 1 %}
<li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
{% endif %} -->
<br />
<!--
<li>Galleries:</li>
{% for page in pages %}
{% if page.title != "About" and page.title !="Welcome" %}
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}{% endif %}</li>
{% endif %}
{% endfor %}
<br />
-->
<li>{{ LINKS_WIDGET_NAME | default('links') }}</li>
{% for name, link in LINKS %}
<li><a href="{{ link }}">{{ name }}</a></li>
{% endfor %}
</ul>
</nav>
<span class="feed"><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS</a> | <a href="{{ SITEURL }}/{{ FEED_ATOM }}">Atom</a></span>
</div>
<div id="footer">
<div id="credits">
<span>Powered by <a href="https://www.debian.org/" target="_blank">Debian GNU/Linux</a> and <a href="https://blog.getpelican.com/" target="_blank">Pelican</a>.</span>
</div>
</div>
{% include 'analytics.html' %}
{% include 'piwik.html' %}
{% include 'disqus_script.html' %}
</div>
</body>
</html>

View File

@ -0,0 +1,83 @@
<!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_ATOM }}" 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 %}
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie.css"/>
<script src="{{ SITEURL }}/js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie6.css"/><![endif]-->
</head>
<body>
<div id="wrap" style="width:100%">
<div id="container" style="width:70%">
<div id="landing" class="entry">
{{ page.content }}
</div>
</div>
<div id="sidebar" style="width:25%">
<h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
<span class="description">{{ DESCRIPTION }} </span>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="posts.html">Articles</a></li>
<li><a href="portfolio.html">Photography</a></li>
<li><a href="about.html">About</a></li>
{% if categories|length > 1 %}
<!-- <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
{% endif %}
{% if tags|length > 1 %}
<li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
{% endif %} -->
<br />
<!--
<li>Galleries:</li>
{% for page in pages %}
{% if page.title != "About" and page.title !="Welcome" %}
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}{% endif %}</li>
{% endif %}
{% endfor %}
<br />
--> <li>{{ LINKS_WIDGET_NAME | default('links') }}</li>
{% for name, link in LINKS %}
<li><a href="{{ link }}">{{ name }}</a></li>
{% endfor %}
</ul>
</nav>
<span class="feed"><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS</a> | <a href="{{ SITEURL }}/{{ FEED_ATOM }}">Atom</a></span>
</div>
<div id="footer">
<div id="credits">
<span>Powered by <a href="https://www.debian.org/" target="_blank">Debian GNU/Linux</a> and <a href="https://blog.getpelican.com/" target="_blank">Pelican</a>.</span>
</div>
</div>
{% include 'analytics.html' %}
{% include 'piwik.html' %}
{% include 'disqus_script.html' %}
</div>
</body>
</html>

View File

@ -0,0 +1,84 @@
<!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_ATOM }}" 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 %}
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie.css"/>
<script src="{{ SITEURL }}/js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="{{ SITEURL }}/css/ie6.css"/><![endif]-->
</head>
<body>
<div id="wrap" style="width:100%">
<div id="container" style="width:70%">
<div class="portfolio">
{{ page.content }}
</div>
</div>
<div id="sidebar" style="width:25%">
<h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
<span class="description">{{ DESCRIPTION }} </span>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="posts.html">Articles</a></li>
<li><a href="portfolio.html">Photography</a></li>
<li><a href="about.html">About</a></li>
{% if categories|length > 1 %}
<!-- <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
{% endif %}
{% if tags|length > 1 %}
<li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
{% endif %} -->
<br />
<!--
<li>Photo Portfolio:</li>
{% for page in pages %}
{% if page.title != "About" and page.title !="Welcome" and page.title !="Portfolio" %}
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}{% endif %}</li>
{% endif %}
{% endfor %}
<br />
-->
<li>{{ LINKS_WIDGET_NAME | default('links') }}</li>
{% for name, link in LINKS %}
<li><a href="{{ link }}">{{ name }}</a></li>
{% endfor %}
</ul>
</nav>
<span class="feed"><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS</a> | <a href="{{ SITEURL }}/{{ FEED_ATOM }}">Atom</a></span>
</div>
<div id="footer">
<div id="credits">
<span>Powered by <a href="https://www.debian.org/" target="_blank">Debian GNU/Linux</a> and <a href="https://blog.getpelican.com/" target="_blank">Pelican</a>.</span>
</div>
</div>
{% include 'analytics.html' %}
{% include 'piwik.html' %}
{% include 'disqus_script.html' %}
</div>
</body>
</html>