summaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/sass/_content.scss41
-rw-r--r--design/templates/admin/insert_images.html130
-rw-r--r--design/templates/blog/entry_list.html5
-rw-r--r--design/templates/tutorials/topic_list.html35
-rw-r--r--design/templates/tutorials/tutorial_detail.html85
-rw-r--r--design/templates/tutorials/tutorial_list.html22
6 files changed, 317 insertions, 1 deletions
diff --git a/design/sass/_content.scss b/design/sass/_content.scss
index e4cfb0e..2c624ee 100644
--- a/design/sass/_content.scss
+++ b/design/sass/_content.scss
@@ -45,6 +45,9 @@ article ul {
padding: 0;
list-style-type: none;
}
+ li {
+ margin-bottom: 2rem;
+ }
a {
text-decoration: none;
color: lighten($body_font_color, 20);
@@ -77,3 +80,41 @@ article ul {
background: darken(#fff, 10);
}
}
+#breadcrumbs {
+ @include fontsize(13);
+ @include fancy_sans;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: lighten($body_font_color, 50);
+ a {
+ color: lighten($body_font_color, 50);
+ }
+}
+.footnote p {
+ @include fontsize(20);
+}
+pre{
+ white-space: pre-wrap;
+}
+.highlight {
+ padding: 1rem;
+ margin-bottom: 1em;
+ // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
+ // I tweaked it slightly to add a bit of margin
+ width: 50vw;
+ position: relative;
+ left: 33%;
+ right: 33%;
+ margin-left: -20vw;
+ margin-right: -20vw;
+ pre {
+ }
+}
+.go:before {
+ content: "$ ";
+}
+code > .comment::after {
+ display:none;
+}
+
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
new file mode 100644
index 0000000..2db82e6
--- /dev/null
+++ b/design/templates/admin/insert_images.html
@@ -0,0 +1,130 @@
+{% load get_image_by_size %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<head>
+<style>
+.item-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 6px;
+ font-family: sans-serif;
+ font-size: 11px;
+ padding: 6px 0 4px;
+ border-top: #ccc 1px solid;
+}
+.item { margin: 0;}
+.item img { margin: 0 0 4px 0;}
+figure {
+ max-width: 180px;
+}
+.actions {
+ list-style-type: none;
+ margin: 0 0 0 10px;
+ padding: 0;
+}
+.actions li {
+ margin: 3px 0;
+}
+.actions a {
+ color: #666;
+}
+</style>
+<script>
+function buildVideo(video_mp4, video_webm, id, c, poster) {
+ console.log(poster);
+ html = '<div class="self-embed-container">\n\t<video poster="'+poster+'" controls="true" loop="false" preload="auto" id="'+id+'" class="vidauto';
+ if (c) {
+ html += c+'"';
+ } else {
+ html += '"';
+ }
+ html += '>\n\t\t<source src="'+video_webm+'" type="video/webm">\n';
+ html += '\t\t<source src="'+video_mp4+'" type="video/mp4">\n';
+ html += '\t\tYour browser does not support video playback via HTML5.\n\t</video>\n</div>';
+ return html;
+}
+function buildImage(image_url, id, c, caption) {
+ html = '<img src="'+image_url+'" id="image-'+id+'" class="';
+ if (c) {
+ html += c;
+ }
+ if (caption) {
+ html += ' caption" />';
+ }
+ else {
+ html += '" />';
+ }
+ return html;
+}
+function buildAudio(audio_mp3, audio_ogg) {
+ html = '<audio controls="" preload="auto">\n\t<source src="'+audio_mp3+'">\n\t'
+ html += '<source src="'+audio_ogg+'">\n\t'
+ html += 'Sorry, your browser does not support audio in HTML\n</audio>'
+ return html;
+}
+function openInNewTab(url) {
+ var win = window.open(url, '_blank');
+ win.focus();
+ return false;
+}
+</script>
+</head>
+<body>
+ <input type="button" value="Refresh" onClick="window.location.reload()">
+ <button id="add_id_image" onClick="window.parent.open('/admin/photos/luximage/add/?_to_field=id&amp;_popup=1')">Upload Image
+ <img src="/static/admin/img/icon-addlink.svg" alt="Add">
+ </button>
+ <div class="up-wrapper">{% for object in object_list %}
+ <div class="item-wrapper images">
+ {% if object.get_type != "Audio" %}
+ <figure class="item" >
+ <img src="{% if object.get_type == "LuxImage" %}{% get_image_by_size object 'tn' %}{%else%}{{object.video_poster.url}}" style="max-width: 150px{%endif%}" />
+ <figcaption>{{object.id}} {% if object.caption %}&ndash; {{object.caption}}{%endif%}</figcaption>
+ </figure>
+ <ul class="actions">{%if object.get_type == "LuxVideo" %}
+ <li><a data-is-video="true" data-video-mp4="{{object.video_mp4.url}}" data-video-webm="{{object.video_webm.url}}" data-id="{{object.id}}" data-class="vid" data-poster="{{object.video_poster.url}}" onclick="insertImage(this);return false;" class="insert" href="#">Insert video</a>{%else%}
+ <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picwide" onclick="insertImage(this);return false;" href="#" >full width</a></li>
+ <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picwide" data-caption="true" onclick="insertImage(this);return false;" href="#">full width cap</a></li>
+ <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="cluster pic5" onclick="insertImage(this);return false;" href="#">cluster</a></li>
+ <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" onclick="insertImage(this);return false;" href="#">column width</a></li>
+ <li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" data-caption="true" onclick="insertImage(this);return false;" href="#">column width cap</a></li>
+ <li><a onclick='openInNewTab("/admin/photos/luximage/{{object.pk}}/change/");' href="#">Edit Image</a></li>{%endif%}
+ </ul>
+ {% else %}
+ <figure class="item" >
+ <img src="/media/img/audio_icon.png" style="max-width: 50px" />
+ </figure>
+ <ul class="actions">
+ <li><a data-is-audio="true" data-mp3="{{object.mp3.url}}" data-ogg="{{object.ogg.url}}" data-id="{{object.id}}" data-class="audio" onclick="insertImage(this);return false;" class="insert" href="#">Insert audio</a>
+ <li><a onclick='openInNewTab("/admin/recordings/audio/{{object.pk}}/change/");' href="#">Edit Recording</a></li>
+ </ul>
+ {% endif %}
+ </div>
+{% endfor %}
+</div>
+
+<!-- "next page" action -->
+<a class="nextPage browse right"></a>
+<script>
+function insertImage(item) {
+ if (item.dataset.isVideo) {
+ console.log(item.dataset.poster);
+ var code = buildVideo(item.dataset.videoMp4, item.dataset.videoWebm, item.dataset.id, item.dataset.class, item.dataset.poster);
+ } else if (item.dataset.isAudio) {
+ var code = buildAudio(item.dataset.mp3, item.dataset.ogg);
+ } else {
+ var code = buildImage(item.dataset.src, item.dataset.id, item.dataset.class, item.dataset.caption);
+ }
+ var el = parent.document.getElementById('{{textarea_id}}');
+ var start = el.selectionStart;
+ var end = el.selectionEnd;
+ var text = el.value;
+ var before = text.substring(0, start);
+ var after = text.substring(end, text.length);
+ el.value = (before + code + after);
+ el.selectionStart = el.selectionEnd = start + code.length;
+ el.focus();
+}
+</script>
+</body>
+</html>
diff --git a/design/templates/blog/entry_list.html b/design/templates/blog/entry_list.html
index 0931ac4..9198b39 100644
--- a/design/templates/blog/entry_list.html
+++ b/design/templates/blog/entry_list.html
@@ -2,7 +2,10 @@
{% load typogrify_tags %}
{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
-{% block content %}
+{% block content %}<ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+ <li><a href="/" title="libregraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+ <li><span itemprop="title">Essays</span></li>
+ </ul>
<main role="main" id="essay-archive" class="essay-archive archive-list">
<h1 class="topic-hed">Essays</h1>
<ul>{% for object in object_list %}
diff --git a/design/templates/tutorials/topic_list.html b/design/templates/tutorials/topic_list.html
new file mode 100644
index 0000000..7149823
--- /dev/null
+++ b/design/templates/tutorials/topic_list.html
@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% load comments %}
+
+{% block pagetitle %}Tutorials and tools for building great things{% endblock %}
+
+{% block metadescription %}Tutorials about {{topic}} - by Scott Gilbertson.{% endblock %}
+{%block sitesubtitle %}Code Slowly{% endblock%}
+{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+ <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>{% if topic %}
+ <li><a href="/src/" title="luxagraf:src homepage" itemprop="url"><span itemprop="title"><code>src</code></span></a> &rarr; </li>
+ <li>{{topic}}</li>{%else%}
+ <li><code>src</code></li>{%endif%}
+ </ul>
+ <main role="main" id="essay-archive" class="essay-archive archive-list">
+ <div class="essay-intro">
+ <h2>Tutorials and tools for building great things on the web.</h2>
+ <p>The indie web is an amazing democratic publishing platform unlike anything in history. The catch is, to avoid serving at the pleasure of the corporate king, you need to know <em>how</em> to publish. That's what these articles are here for, to help you learn how to use independent, community supported open source tools. The web won't last forever, let's build something cool while we can.</p>
+ <p>A few of the articles below were previously published in: <em><a href="https://arstechnica.com/">Ars Technica</a></em>, <em><a href="https://www.wired.com/author/scott-gilbertson/">Wired</a></em>, and <em><a href="https://www.theregister.co.uk/Author/Scott-Gilbertson/">The Register</a></em></p>
+ </div>
+ <h1 class="topic-hed">Tutorials about {{topic}}</h1>
+ <ul class="fancy-archive-list">{% for object in object_list %}{% if object.slug != 'about' %}
+ <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+ <span class="date dt-published">{{object.pub_date|date:"F Y"}}</span>
+ <a href="{{object.get_absolute_url}}">
+ <h2>{{object.title|safe|smartypants|widont}}</h2>
+ <p class="p-summary">{{object.meta_description|safe|smartypants|widont}}</p>
+ </a>
+ </li>
+ {%endif%}{%endfor%}</ul>
+
+
+
+ </main>
+{%endblock%}
diff --git a/design/templates/tutorials/tutorial_detail.html b/design/templates/tutorials/tutorial_detail.html
new file mode 100644
index 0000000..df2f434
--- /dev/null
+++ b/design/templates/tutorials/tutorial_detail.html
@@ -0,0 +1,85 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% load comments %}
+{% block pagetitle %}{{object.title|striptags}} - by Scott Gilbertson{% endblock %}
+{% block metadescription %}{% autoescape on %}{{object.meta_description|striptags|safe}}{% endautoescape %}{% endblock %}
+{%block extrahead%}
+ <meta property="og:type" content="article" />
+ <meta property="og:site_name" content="Libregraf"/>
+ <meta property="og:title" content="{{object.title|safe}}" />
+ <meta property="og:url" content="https://libregraf.net{{object.get_absolute_url}}" />
+ <meta property="og:image" content="">
+ <meta property="og:description" content="{{object.meta_description}}" />
+ <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" />
+ <meta property="article:author" content="Scott Gilbertson" />
+ <meta property="og:site_name" content="Libregraf" />
+ <meta property="og:locale" content="en_US" />
+ <meta name="twitter:card" content="summary_large_image"/>
+ <meta name="twitter:site" content="@libregraf"/>
+ <meta name="twitter:creator" content="@libregraf"/>
+
+<link rel="stylesheet" href="/media/solarized.css" type="text/css" media="screen"/>
+{%endblock%}
+
+{% block bodyid %}class="src detail single"{% endblock %}
+
+{% block content %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+ <li><a href="/" title="libregraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+ <li><a href="/tutorials/">Tutorials</a></li>
+ </ul>
+ <main class="content-narrow">
+ <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting">
+ <header id="header" class="post-header">
+ <h1 class="p-name hed-primary" itemprop="headline">{{object.title|smartypants|safe}}</h1>
+ {% if object.sub_title %}<h2 class="p-summary hed-secondary">{{object.sub_title|smartypants|safe}}</h2>{%endif%}
+ <div class="post-linewrapper">
+ <h5 class="hed-tertiary">Filed Under: {% for tag in object.tags.all %}<a rel="tag" class="p-category" href="/essays/tags/{{tag.slug}}" title="View all essays about {{tag}}">{{tag}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</h5>
+ <time class="dt-published published dt-updated hed-tertiary" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+ <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span>
+ </div>
+ </header>
+ <div id="article" class="e-content entry-content" itemprop="articleBody">
+ {{object.body_html|safe|smartypants}}
+ </div>
+ </article>
+ {% if object.enable_comments %}
+ <hr />
+ <div class="comment-wrapper">
+{% get_comment_count for object as comment_count %}
+{%if comment_count > 0 %}
+<p class="comments-header">{{comment_count}} Comment{{ comment_count|pluralize }}</p>
+{% render_comment_list for object %}
+{%endif%}
+{% render_comment_form for object %}
+{% else %}
+<p class="comments--header" style="text-align: center">Sorry, comments have been disabled for this post.</p>
+{%endif%}
+ </div>
+ </main>
+{% endblock %}
+{% block js %}
+<script type="text/javascript">
+window.onload = function() {
+ {% if object.enable_comments %}
+{% get_comment_count for object as comment_count %}
+{%if comment_count > 0 %}
+ //delay loading of gravatar images using noscript data-hash attribute
+ dataattr = document.getElementsByClassName("datahashloader");
+ for(var i=0; i<dataattr.length; i++) {
+ var c = dataattr[i].parentNode;
+ var img = document.createElement("img");
+ img.src = 'https://libregraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg';
+ img.className += "gravatar";
+ c.insertBefore(img, c.childNodes[3]);
+ }
+{%endif%}
+{%endif%}
+ {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
+ createMap();
+ var open = false;
+ {%endif%}{%endwith%}
+}
+</script>
+{% if object.has_code %}
+{%endif %}
+{% endblock %}
diff --git a/design/templates/tutorials/tutorial_list.html b/design/templates/tutorials/tutorial_list.html
new file mode 100644
index 0000000..0b17df2
--- /dev/null
+++ b/design/templates/tutorials/tutorial_list.html
@@ -0,0 +1,22 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% block pagetitle %}Tutorials and tools for building great things{% endblock %}
+{% block metadescription %}Tutorials and tools for building great things on the web - by Scott Gilbertson.{% endblock %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+{% block content %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+ <li><a href="/" title="libregraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+ <li><span itemprop="title">Tutorials</span></li>
+ </ul>
+ <main role="main" id="essay-archive" class="essay-archive archive-list">
+ <h1 class="topic-hed">Tutorials</h1>
+ <ul>{% for object in object_list %}
+ <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+ <span class="date dt-published hed-tertiary">{{object.pub_date|date:"F Y"}}</span>
+ <a class="u-url" href="{{object.get_absolute_url}}">
+ <h2 class="p-name hed-primary">{{object.title|safe|smartypants|widont}}</h2>
+ <p class="p-summary hed-secondary">{% if object.sub_title %}{{object.sub_title|safe|smartypants}}{%else%}{{object.meta_description}}{%endif%}</p>
+ </a>
+ </li>
+ {%endfor%}</ul>
+ </main>
+{%endblock%}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-09 01:57:29 +0000