Browse Source

Support 'picture' type post

master
Chimo 5 months ago
parent
commit
af21f7d0a0
No known key found for this signature in database

+ 1
- 1
config.toml View File

@@ -1,4 +1,4 @@
languageCode = "en-us"
languageCode = "en-ca"
title = "chromic"
baseurl = "https://chromic.org"
theme = "so-simple"

+ 4
- 0
content/pictures/_index.md View File

@@ -0,0 +1,4 @@
---
title: "Pictures"
---


+ 0
- 0
themes/so-simple/archetypes/picture/images/.archetype View File


+ 18
- 0
themes/so-simple/archetypes/picture/index.md View File

@@ -0,0 +1,18 @@
---
title: ""
date: {{ .Date }}

resources:
- name: original
src: images/original.jpg

datetaken: {{ .Date }}
address1: ""
address2: ""
latitude: ""
longitude: ""
size: ""
resolution: ""
camera: "Google Pixel 2 XL"
---


+ 53
- 0
themes/so-simple/assets/js/panel.js View File

@@ -0,0 +1,53 @@
( function( document ) {
"use strict";

var Panel = class Panel {
constructor( panel ) {
this.panel = panel;
this.toggleButton = document.querySelector( "[href='#" + panel.getAttribute( "id" ) + "']" );
this.closeButton = panel.querySelector( ".js-panel-close" );

this.toggleButton.addEventListener( "click", ( e ) => {
e.preventDefault();

this.toggle()
} );

this.closeButton.addEventListener( "click", ( e ) => {
e.preventDefault();

this.close();
} );
}

toggle() {
let panel = this.panel;

this.toggleButton.classList.toggle( "active" );

panel.classList.toggle( "slide-in" );
panel.classList.toggle( "slide-out" );

if ( panel.classList.contains( "slide-in" ) ) {
panel.focus();
panel.scrollIntoView();
}
}

close() {
let panel = this.panel,
toggleButton = this.toggleButton;

panel.classList.remove( "slide-in" );
panel.classList.add( "slide-out" );

toggleButton.classList.remove( "active" );
toggleButton.focus();
}
};

document.querySelectorAll( ".js-panel" ).forEach( ( elm ) => {
new Panel( elm );
} );
}( document ) );


+ 82
- 0
themes/so-simple/assets/scss/chimo/_gallery.scss View File

@@ -0,0 +1,82 @@
/**
* Thumbnails
*/

.thumbnail-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0;
}

.thumbnail-list__item {
display: flex;
margin: 0;
padding: 0;
}

.thumbnail {
display: flex;
margin: 0;
position: relative;
}

.thumbnail--album::after {
background: #ce0000;
border-radius: 0 0 3px 3px;
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
color: #fff;
content: "\f02d";
display: block;
font-family: FontAwesome;
padding: 0 5px;
position: absolute;
right: 20px;
top: 0;
}

.thumbnail__title {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
top: 0;
transition: opacity 0.5s;
width: 100%;
}

.thumbnail-list__link{
color: #fff;
}

.thumbnail__image {
margin: 0;
}

.thumbnail-list__link:active .thumbnail__title,
.thumbnail-list__link:focus .thumbnail__title,
.thumbnail-list__link:hover .thumbnail__title {
opacity: 1;
}

/**
* Gallery
*/

/* TODO: Rename to gallery__title */
.pictures__title {
margin: 0;
}

.pictures__permalink {
color: #000;
text-decoration: none;
}


+ 141
- 0
themes/so-simple/assets/scss/chimo/_media.scss View File

@@ -0,0 +1,141 @@
/**
* Media
*/

.media {
max-width: 1170px;
}

.media__title {
margin: 0;
}

.media__permalink {
color: #000;
text-decoration: none;
}

.media__container {
position: relative;
}

.media__wrapper {
/*border-bottom: 1px solid #ddd;*/
margin: 0 0 40px;
text-align: center;
}

.media__content {
margin: 0;
max-width: 100%;
max-height: 100vh;
}

.media__description {
clear: both;
margin-bottom: 20px;
padding: 0 12px;
text-align: left;
}

.media__nav {
align-items: center;
display: flex;
justify-content: center;
list-style-type: none;
margin: 30px 0 0;
padding: 0;
}

.media__nav li {
margin: 0 10px;
}

.media__nav li > * {
display: inline-block;
min-height: 16px;
min-width: 30px;
text-align: center;
}

.media .interactions {
border-bottom: 0;
}

.p-skill {
display: inline-block;
}

.prev-next {
display: none;
}

.prev-next__nav {
list-style-type: none;
margin: 0;
padding: 0;
}

.prev-next__prev-link {
position: absolute;
left: 0;
top: 50%;
}

.prev-next__next-link {
position: absolute;
right: 0;
top: 50%;
}

.media__content,
.media__link {
text-align: center;
}

/* Picture-related stuff */
.pic-wrapper {
margin-bottom: 20px;
position: relative;
}

.pic-nav-link:hover,
.pic-nav-link:focus,
.pic-nav-link:hover + .pic-nav-link,
.pic-nav-link:focus + .pic-nav-link,
.media__link:hover + .pic-nav .pic-nav-link {
color: #fff;
opacity: 1;
}

.pic-nav-link {
background: rgba(0, 0, 0, 0.4) no-repeat center center;
bottom: 0;
color: #fff;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.5s ease;
width: 60px;
}

.pic-nav-link:visited {
color: #fff;
}

.pic-nav-link--prev {
background-image: url("/images/chevron-left.png");
left: 0;
}

.pic-nav-link--next {
background-image: url("/images/chevron-right.png");
right: 0;
}

.pic-nav-links-list,
.pic-nav-links-list li {
list-style-type: none;
margin: 0;
padding: 0;
}

+ 4
- 0
themes/so-simple/assets/scss/chimo/_overrides.scss View File

@@ -207,3 +207,7 @@ small {
}
}

#site-nav {
display: block;
}


+ 111
- 0
themes/so-simple/assets/scss/chimo/_panel.scss View File

@@ -0,0 +1,111 @@
/**
* Panel
*/

.panel {
background: #fff;
border-bottom: 1px solid #ddd;
bottom: 0;
left: 0;
margin-bottom: 40px;
overflow: auto;
padding-bottom: 40px;
top: 0;
}

.panel__close:hover {
color: #ad0000;
}

.panel__close {
background: none;
border: 0;
color: #ce0000;
cursor: pointer;
display: none;
padding: 0;
position: absolute;
right: 10px;
top: 10px;
}

.panel .profile {
padding-bottom: 5px;
}

/**
* Metadata
*/

.metadata {
font-size: 75%;
line-height: 33px; /* TODO: remove this and fix spacing with margins instead */
margin: 0;
padding: 0;
}

.metadata__term,
.metadata__description {
padding: 0 15px 0 0;
}

.metadata__term {
font-weight: bold;
}

.metadata__description {
border-bottom: 1px solid #ddd;
margin: 0 0 8px 0;
padding-bottom: 8px;
}

.metadata__description:last-child {
border: 0;
margin-bottom: 0;
}

@media (min-width: 640px) {
.js .panel {
border-bottom: 0;
border-right: 1px solid #ddd;
margin-bottom: 0;
position: fixed;
padding-bottom: 0;
transition: visibility 0s linear 0.5s, left 0.5s linear;
width: 280px;
}

.js .panel__close {
display: block;
}

.panel__title {
text-align: center;
}

.metadata__term,
.metadata__description {
padding: 0 15px;
}

/* TODO:
* - animations shouldn't be tied to panel
* - to figure out the width, use a 'grid'-type class
* - we can have a default width for panel and panel.slide-{in,out} could hold only 1 property: that width.
**/

/**
* Animations
*/

.js .panel.slide-in {
left: 0;
transition-delay: 0s;
visibility: visible;
}

.js .panel.slide-out {
left: -280px;
visibility: hidden;
}
}

+ 4
- 0
themes/so-simple/assets/scss/main.scss View File

@@ -38,3 +38,7 @@
@import "chimo/webmentions";
@import "chimo/chroma";

@import "chimo/gallery";
@import "chimo/panel";
@import "chimo/media";


+ 37
- 1
themes/so-simple/layouts/_default/baseof.html View File

@@ -5,8 +5,10 @@
<main class="page">
<article class="entry-wrapper hentry h-entry">
<header class="entry-header">
{{ block "local-nav" . }}
{{ end }}
<h1 class="entry-title p-name">
<a class="u-url" href="{{ .Permalink }}">
<a id="title" class="u-url" href="{{ .Permalink }}">
{{ .Title }}
<span class="link-arrow fa fa-link"></span>
</a>
@@ -14,6 +16,40 @@
{{ block "tags" . }}
{{ end }}
{{ block "byline" . }}
<!-- Author info -->
<div class="entry-author h-card">
<a class="u-url" href="http://chromic.org">
<img alt="Chimo bio photo" class="bio-photo u-photo"
src="https://avatars.chromic.org/avatar/1dfffb55178d6085935eafacf1a383a1"
style="height: 24px; width: 24px; vertical-align: top;" />
<span class="by-line">
<span class="sr-only">By</span>
<span class="p-author p-name" href="">Chimo</span>
</span>
</a>
</div>

<!-- Date published -->
<div class="entry-date date published">
<span title="Date published">
<i class="fa fa-calendar-o"></i>
<span class="sr-only">Date published</span>
</span>
<time class="dt-published" datetime="{{ .PublishDate }}">
{{ .PublishDate| dateFormat "Jan. 2, 2006" }}
</time>
</div>

<!-- Date modified -->
<div class="entry-date date modified">
<span title="Date modified">
<i class="fa fa-pencil"></i>
<span class="sr-only">Date modified</span>
</span>
<time class="dt-updated" datetime="{{ .Lastmod }}">
{{ .Lastmod | dateFormat "Jan. 2, 2006" }}
</time>
</div>
{{ end }}
</header>


+ 4
- 0
themes/so-simple/layouts/_default/list.html View File

@@ -1,3 +1,7 @@
{{ define "byline" }}
<!-- pass -->
{{ end }}

{{ define "main" }}
<div class="content">
<div class="entry-content e-content">

+ 3
- 0
themes/so-simple/layouts/partials/footer.html View File

@@ -37,3 +37,6 @@
</footer>
</div>

<script src="/js/scripts.js"></script>
</body>
</html>

+ 7
- 10
themes/so-simple/layouts/partials/head.html View File

@@ -1,14 +1,15 @@
<!doctype html>
<html class="no-js" lang="en">

<head>
<meta charset="utf-8">
<head>

<title>
{{ .Title }} | {{ .Site.Title }}
</title>
<meta charset="utf-8">

<!-- TODO: tags -->
<title>{{ .Title }} | {{ .Site.Title }}</title>

<script>
document.querySelector("html").classList.replace("no-js", "js");
</script>

<link rel="canonical" href="{{ .Permalink }}">
<link rel="self" href="{{ .Permalink }}">
@@ -40,10 +41,6 @@
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Styles -->
<link rel="stylesheet" href="/css/extlib/ol.css">
<link rel="stylesheet" href="/css/extlib/fragmentioner.css">

{{ $options := (dict "targetPath" "/css/styles.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $style := resources.Get "scss/main.scss" | toCSS $options | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

+ 42
- 0
themes/so-simple/layouts/partials/media-nav.html View File

@@ -0,0 +1,42 @@
{{/*
NextInSection uses the left-pointing arrow, because NextInSection points to
an newer item than the current item, and we want to traverse picture from
newest-to-oldest (same order as the main "gallery" page where newer pictures
show up first).

Same idea with PrevInSection using the right-pointing arrow.
*/}}

<nav>
<ul class="media__nav">
{{ if .NextInSection }}
<li>
<a href="{{ .NextInSection.Permalink }}" rel="prev" title="Previous picture"><span class="fa fa-arrow-left" aria-hidden="true"></span></a>
</li>
{{ else }}
<li class="disabled">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
</li>
{{ end }}
<li>
<a href="/pictures" title="Back to media gallery"><span class="fa fa-list" aria-hidden="true"></span></a>
</li>
<li>
<a class="js-panel-toggle" href="#metadata" title="Picture metadata"><span class="fa fa-info" aria-hidden="true"></span></a>
</li>
<li>
<a download="download" href="original.jpg" title="Download original picture">
<span class="fa fa-download" aria-hidden="true"></span>
</a>
</li>
{{ if .PrevInSection }}
<li>
<a href="{{ .PrevInSection.Permalink }}" rel="next" title="Next picture"><span class="fa fa-arrow-right" aria-hidden="true"></span></a>
</li>
{{ else }}
<li class="disabled">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</li>
{{ end }}
</ul>
</nav>

+ 101
- 0
themes/so-simple/layouts/partials/media-panel.html View File

@@ -0,0 +1,101 @@
{{ $original := $.Page.Resources.GetMatch "original.*" }}

{{/*
Use frontmatter lat/lon/date if they're defined. If not, fallback to the
image's exif data.

Note: Variables set in a `if` block aren't accessible outside of it, so store
them in Scratch. We set them as regular variables afterwards for convenience.
*/}}

{{ if isset .Params "latitude" }}
{{ .Scratch.Set "lat" .Params.latitude }}
{{ else }}
{{ with $original.Exif }}
{{ $.Scratch.Set "lat" .Lat }}
{{ end }}
{{ end }}

{{ if isset .Params "longitude" }}
{{ .Scratch.Set "lon" .Params.longitude }}
{{ else }}
{{ with $original.Exif }}
{{ $.Scratch.Set "lon" .Long }}
{{ end }}
{{ end }}

{{ if isset .Params "datetaken" }}
{{ .Scratch.Set "datetaken" .Params.datetaken }}
{{ else }}
{{ with $original.Exif }}
{{ $.Scratch.Set "datetaken" .Date }}
{{ end }}
{{ end }}

{{/* FIXME: Should we fallback to date published if undefined at this point? */}}

{{ $lat := .Scratch.Get "lat" }}
{{ $lon := .Scratch.Get "lon" }}
{{ $datetaken := .Scratch.Get "datetaken" }}

<div id="metadata" class="panel js-panel slide-out" tabindex="-1">
<h2 class="panel__title">Metadata</h2>

<dl class="metadata">
{{if $datetaken }}
<dt class="metadata__term">Date Taken</dt>
<dd class="metadata__description">
<time datetime="{{ $datetaken }}">
{{ $datetaken | dateFormat "Jan. 2, 2006 at 15:04 MST" }}
</time>
</dd>
{{ end }}

{{ if (or (isset .Params "address2") (isset .Params "address1") ($lat)) }}
<dt class="metadata__term">Location</dt>
<dd class="metadata__description">
{{ .Params.address1 }}{{ if isset .Params "address2" }},<br>
{{ .Params.address2 }}{{ end }}

{{ if and $lat $lon }}
{{ if (and (not (isset .Params "address2")) (not (isset .Params "address1"))) }}
<a href="http://www.openstreetmap.org/?mlat={{ $lat }}&mlon={{ $lon }}#map=18/{{ $lat }}/{{ $lon }}"
target="_blank" title="Show location on map">{{ $lat }}, {{ $lon }}
<span class="fa fa-map-marker" aria-hidden="true"></span></a>
{{ end }}
{{ else }}
<a href="http://www.openstreetmap.org/?mlat={{ $lat }}&mlon={{ $lon }}#map=18/{{ $lat }}/{{ $lon }}"
target="_blank" title="Show location on map"><span class="fa fa-map-marker" aria-hidden="true"></span></a>
{{ end }}
</dd>
{{ end }}

<dt class="metadata__term">Size</dt>
<dd class="metadata__description">{{ .Params.size }} <abbr title="megabytes">MB</abbr></dd>

<dt class="metadata__term">Resolution</dt>
<dd class="metadata__description">{{ .Params.resolution }}</dd>

<dt class="metadata__term">Camera</dt>
<dd class="metadata__description">{{ .Params.camera }}</dd>

<dt class="metadata__term">Taken By</dt>
<dd class="metadata__description">{{ partial "p-author.html" . }}</dd>

<!-- mf2 -->
<dt style="display: none;">Date Published</dt>
<dd style="display: none;">
<time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05-07:00" }}'>
{{ .Date.Format "2006-01-02T15:04:05-07:00" }}
</time>
</dd>
</dl>

<button class="panel__close js-panel-close">
<span class="fa fa-close" aria-hidden="true"></span>

<!-- TODO: .screenreader class -->
<span class="screenreaders" style="display: none;">Close panel</span>
</button>
</div>


+ 13
- 0
themes/so-simple/layouts/partials/media-tags.html View File

@@ -0,0 +1,13 @@
{{/*
TODO:
- Announce 'tags' section (h2? figcaption?)
- I want the media tags to have '/picture/tags/$tag' (or '/media/tags/$tag') as urls
and article to have '/articles/tags/$tag', etc.
*/}}

<ul class="tags">
{{ range .tags }}
<li class="tag"><a class="p-category" href="/tags/{{ . | urlize }}">{{ . }}</a></li>
{{ end }}
</ul>


+ 1
- 0
themes/so-simple/layouts/partials/navigation.html View File

@@ -3,6 +3,7 @@
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/pictures">Pictures</a></li>
<li><a href="http://sn.chromic.org">Micro-blog</a></li>
<li><a href="https://code.chromic.org">Code</a></li>
<li><a href="https://fm.chromic.org">FM</a></li>

+ 5
- 0
themes/so-simple/layouts/partials/p-author.html View File

@@ -0,0 +1,5 @@
<div class="p-author h-card profile">
<!-- <img class="profile__picture u-photo" src="/images/profile.jpg"> -->
<a class="profile__link p-name u-url" href="https://chromic.org">Chimo</a>
</div>


+ 28
- 0
themes/so-simple/layouts/pictures/li.html View File

@@ -0,0 +1,28 @@
{{ $original := $.Resources.GetMatch "original.*" }}
{{ $thumbnail := $.Resources.GetMatch "thumbnail.*" }}

<li class="thumbnail-list__item h-entry">
<a class="thumbnail-list__link u-url" href="{{ .Permalink }}">
<figure class="thumbnail">
{{ if $thumbnail }}
<img class="thumbnail__image u-photo"
src="{{ $thumbnail.Permalink }}" alt="">
{{ else }}
{{ $generated_thumbnail := $original.Fill "167x167" }}
<img class="thumbnail__image u-photo"
src="{{ $generated_thumbnail.Permalink }}" alt="">
{{ end }}

<figcaption class="thumbnail__title p-name">{{ .Title }}</figcaption>
</figure>
</a>

<!-- mf2 -->
<div style="display: none;">
<time class="dt-published"
datetime='{{ .Date.Format "2006-01-02T15:04:05-07:00" }}'>
{{ .Date.Format "2006-01-02T15:04:05-07:00" }}
</time>
</div>
</li>


+ 51
- 0
themes/so-simple/layouts/pictures/single.html View File

@@ -0,0 +1,51 @@
{{ define "local-nav" }}
{{ partial "media-nav.html" . }}
{{ end }}

{{ define "main" }}
<div class="media h-entry">

{{ $original := $.Page.Resources.GetMatch "original.*" }}
{{ $medium := $original.Resize "1170x" }}

<figure class="media__wrapper">
<div class="pic-wrapper">
<a class="media__link" href="{{ $original.Permalink }}">
<img class="media__content u-photo"
src="{{ $medium.Permalink }}" alt="{{ .Title }}">
</a>

<nav class="pic-nav">
<ul class="pic-nav-links-list">
{{ if .NextInSection }}
<li>
<a class="pic-nav-link pic-nav-link--prev"
href="{{ .NextInSection.Permalink }}#title" rel="prev"
title="Previous picture"></a>
</li>
{{ end }}

{{ if .PrevInSection }}
<li>
<a class="pic-nav-link pic-nav-link--next"
href="{{ .PrevInSection.Permalink }}#title" rel="next"
title="Next picture"></a>
</li>
{{ end }}
</ul>
</nav>
</div>

{{/* Only print figcaption if there is content */}}
{{ with .Content }}
<figcaption class="media__description e-content">
{{ . }}
</figcaption>
{{ end }}

</figure>

{{ partial "media-panel.html" . }}
</div>
{{ end }}


+ 18
- 0
themes/so-simple/layouts/section/pictures.html View File

@@ -0,0 +1,18 @@
{{ define "byline" }}
<!-- pass -->
{{ end }}

{{ define "main" }}
<div class="pictures media">
<ul class="thumbnail-list">
{{ range .Data.Pages.ByDate.Reverse }}
{{ .Render "li"}}
{{ end }}
</ul>
</div>
{{ end }}

{{ define "footer" }}
{{ partial "common/site-footer-with-author.html" . }}
{{ end }}


+ 281
- 0
themes/so-simple/static/css/styles.css View File

@@ -4198,6 +4198,9 @@ small {
.entry-feature-image {
margin-bottom: 15px; }

#site-nav {
display: block; }

#fragmentioner-ui {
padding-left: 5px;
padding-right: 5px; }
@@ -4503,4 +4506,282 @@ summary {
.main-content figcaption {
font-weight: bold; }

/**
* Thumbnails
*/
.thumbnail-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0; }

.thumbnail-list__item {
display: flex; }

.thumbnail {
display: flex;
margin: 0;
position: relative; }

.thumbnail--album::after {
background: #ce0000;
border-radius: 0 0 3px 3px;
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
color: #fff;
content: "\f02d";
display: block;
font-family: FontAwesome;
padding: 0 5px;
position: absolute;
right: 20px;
top: 0; }

.thumbnail__title {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
top: 0;
transition: opacity 0.5s;
width: 100%; }

.thumbnail-list__link {
color: #fff; }

.thumbnail__image {
margin: 0; }

.thumbnail-list__link:active .thumbnail__title,
.thumbnail-list__link:focus .thumbnail__title,
.thumbnail-list__link:hover .thumbnail__title {
opacity: 1; }

/**
* Gallery
*/
/* TODO: Rename to gallery__title */
.pictures__title {
margin: 0; }

.pictures__permalink {
color: #000;
text-decoration: none; }

/**
* Panel
*/
.panel {
background: #fff;
border-bottom: 1px solid #ddd;
bottom: 0;
left: 0;
margin-bottom: 40px;
overflow: auto;
padding-bottom: 40px;
top: 0; }

.panel__close:hover {
color: #ad0000; }

.panel__close {
background: none;
border: 0;
color: #ce0000;
cursor: pointer;
display: none;
padding: 0;
position: absolute;
right: 10px;
top: 10px; }

.panel .profile {
padding-bottom: 5px; }

/**
* Metadata
*/
.metadata {
font-size: 75%;
line-height: 33px;
/* TODO: remove this and fix spacing with margins instead */
margin: 0;
padding: 0; }

.metadata__term,
.metadata__description {
padding: 0 15px 0 0; }

.metadata__term {
font-weight: bold; }

.metadata__description {
border-bottom: 1px solid #ddd;
margin: 0 0 8px 0;
padding-bottom: 8px; }

.metadata__description:last-child {
border: 0;
margin-bottom: 0; }

@media (min-width: 640px) {
.js .panel {
border-bottom: 0;
border-right: 1px solid #ddd;
margin-bottom: 0;
position: fixed;
padding-bottom: 0;
transition: visibility 0s linear 0.5s, left 0.5s linear;
width: 280px; }

.js .panel__close {
display: block; }

.panel__title {
text-align: center; }

.metadata__term,
.metadata__description {
padding: 0 15px; }

/* TODO:
* - animations shouldn't be tied to panel
* - to figure out the width, use a 'grid'-type class
* - we can have a default width for panel and panel.slide-{in,out} could hold only 1 property: that width.
**/
/**
* Animations
*/
.js .panel.slide-in {
left: 0;
transition-delay: 0s;
visibility: visible; }

.js .panel.slide-out {
left: -280px;
visibility: hidden; } }
/**
* Media
*/
.media {
max-width: 1170px; }

.media__title {
margin: 0; }

.media__permalink {
color: #000;
text-decoration: none; }

.media__container {
position: relative; }

.media__wrapper {
/*border-bottom: 1px solid #ddd;*/
margin: 0 0 40px;
text-align: center; }

.media__content {
margin: 0;
max-width: 100%;
max-height: 100vh; }

.media__description {
clear: both;
margin-bottom: 20px;
padding: 0 12px;
text-align: left; }

.media__nav {
align-items: center;
display: flex;
justify-content: center;
list-style-type: none;
margin: 30px 0 0;
padding: 0; }

.media__nav li {
margin: 0 10px; }

.media__nav li > * {
display: inline-block;
min-height: 16px;
min-width: 30px;
text-align: center; }

.media .interactions {
border-bottom: 0; }

.p-skill {
display: inline-block; }

.prev-next {
display: none; }

.prev-next__nav {
list-style-type: none;
margin: 0;
padding: 0; }

.prev-next__prev-link {
position: absolute;
left: 0;
top: 50%; }

.prev-next__next-link {
position: absolute;
right: 0;
top: 50%; }

.media__content,
.media__link {
display: block; }

/* Picture-related stuff */
.pic-wrapper {
float: left;
margin-bottom: 20px;
position: relative; }

.pic-nav-link:hover,
.pic-nav-link:focus,
.pic-nav-link:hover + .pic-nav-link,
.pic-nav-link:focus + .pic-nav-link,
.media__link:hover + .pic-nav .pic-nav-link {
color: #fff;
opacity: 1; }

.pic-nav-link {
background: rgba(0, 0, 0, 0.4) no-repeat center center;
bottom: 0;
color: #fff;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.5s ease;
width: 60px; }

.pic-nav-link:visited {
color: #fff; }

.pic-nav-link--prev {
background-image: url("/images/chevron-left.png");
left: 0; }

.pic-nav-link--next {
background-image: url("/images/chevron-right.png");
right: 0; }

.pic-nav-links-list,
.pic-nav-links-list li {
list-style-type: none;
margin: 0;
padding: 0; }

/*# sourceMappingURL=styles.css.map */

+ 2
- 2
themes/so-simple/static/css/styles.css.map
File diff suppressed because it is too large
View File


BIN
themes/so-simple/static/images/chevron-left.png View File


BIN
themes/so-simple/static/images/chevron-right.png View File


+ 53
- 0
themes/so-simple/static/js/scripts.js View File

@@ -0,0 +1,53 @@
( function( document ) {
"use strict";

var Panel = class Panel {
constructor( panel ) {
this.panel = panel;
this.toggleButton = document.querySelector( "[href='#" + panel.getAttribute( "id" ) + "']" );
this.closeButton = panel.querySelector( ".js-panel-close" );

this.toggleButton.addEventListener( "click", ( e ) => {
e.preventDefault();

this.toggle()
} );

this.closeButton.addEventListener( "click", ( e ) => {
e.preventDefault();

this.close();
} );
}

toggle() {
let panel = this.panel;

this.toggleButton.classList.toggle( "active" );

panel.classList.toggle( "slide-in" );
panel.classList.toggle( "slide-out" );

if ( panel.classList.contains( "slide-in" ) ) {
panel.focus();
panel.scrollIntoView();
}
}

close() {
let panel = this.panel,
toggleButton = this.toggleButton;

panel.classList.remove( "slide-in" );
panel.classList.add( "slide-out" );

toggleButton.classList.remove( "active" );
toggleButton.focus();
}
};

document.querySelectorAll( ".js-panel" ).forEach( ( elm ) => {
new Panel( elm );
} );
}( document ) );


Loading…
Cancel
Save