Browse Source

Simplify layouts, use includes more, cleanup CSS

remove unused includes, move comment form out of e-content
master
Chimo 3 years ago
parent
commit
af77f2a636

+ 0
- 11
_includes/ad-footer.html View File

@@ -1,11 +0,0 @@
1
-<div class="google-ads" style="margin:10px 0;">
2
-  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
3
-  <!-- 320x50 ad -->
4
-  <ins class="adsbygoogle"
5
-       style="display:inline-block;width:320px;height:50px"
6
-       data-ad-client="{{ site.owner.google.ad-client }}"
7
-       data-ad-slot="{{ site.owner.google.ad-slot }}"></ins>
8
-  <script>
9
-  (adsbygoogle = window.adsbygoogle || []).push({});
10
-  </script>
11
-</div><!-- /.google-ads -->

+ 0
- 11
_includes/ad-sidebar.html View File

@@ -1,11 +0,0 @@
1
-<div class="google-ads" style="margin-top:40px; text-align:center;">
2
-  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
3
-  <!-- 160x600 ad -->
4
-  <ins class="adsbygoogle"
5
-       style="display:inline-block;width:160px;height:600px"
6
-       data-ad-client="{{ site.owner.google.ad-client }}"
7
-       data-ad-slot="{{ site.owner.google.ad-slot }}"></ins>
8
-  <script>
9
-  (adsbygoogle = window.adsbygoogle || []).push({});
10
-  </script>
11
-</div><!-- /.google-ads -->

+ 0
- 1
_includes/browser-upgrade.html View File

@@ -1 +0,0 @@
1
-<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->

+ 0
- 23
_includes/disqus_comments.html View File

@@ -1,23 +0,0 @@
1
-{% if site.owner.disqus-shortname %}
2
-<script type="text/javascript">
3
-    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
4
-    var disqus_shortname = '{{ site.owner.disqus-shortname }}'; // required: replace example with your forum shortname
5
-
6
-    /* * * DON'T EDIT BELOW THIS LINE * * */
7
-    (function() {
8
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
9
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
10
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
11
-    })();
12
-
13
-    /* * * DON'T EDIT BELOW THIS LINE * * */
14
-    (function () {
15
-        var s = document.createElement('script'); s.async = true;
16
-        s.type = 'text/javascript';
17
-        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
18
-        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
19
-    }());
20
-</script>
21
-<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
22
-<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
23
-{% endif %}

+ 4
- 0
_includes/footer.html View File

@@ -1,3 +1,5 @@
1
+<div class="footer-wrapper">
2
+  <footer role="contentinfo" class="entry-wrapper">
1 3
 {% if site.owner.google.ad-client and site.owner.google.ad-slot %}{% include ad-footer.html %}{% endif %}
2 4
 
3 5
 <div>
@@ -24,3 +26,5 @@
24 26
 </div><!-- /.social-icons -->
25 27
 
26 28
 <div id="fragmentioner-ui"><a href="">Link</a></div>
29
+</footer>
30
+</div><!-- /.footer-wrapper -->

+ 22
- 1
_includes/head.html View File

@@ -1,5 +1,18 @@
1
+<!doctype html>
2
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
+<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
+<head>
1 7
 <meta charset="utf-8">
2
-<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
8
+<title>
9
+    {% if page.categories contains 'likes' %}
10
+      Chimo liked {{ page.target.type }} by {{ page.target.by }}
11
+    {% else %}
12
+      {% if page.title %}{{ page.title }} &#8211; {% endif %}
13
+    {% endif %}
14
+    {{ site.title }}
15
+</title>
3 16
 {% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
4 17
 {% if page.author %}
5 18
   {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
@@ -18,6 +31,10 @@
18 31
 <!-- IndieAuth -->
19 32
 <link rel="authorization_endpoint" href="https://auth.chromic.org/auth">
20 33
 
34
+<!-- OpenID -->
35
+<link rel="openid.delegate" href="https://chromic.org" />
36
+<link rel="openid.server" href="https://auth.chromic.org/openid" />
37
+
21 38
 <!-- http://t.co/dKP3o1e -->
22 39
 <meta name="HandheldFriendly" content="True">
23 40
 <meta name="MobileOptimized" content="320">
@@ -50,3 +67,7 @@
50 67
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.url }}/images/apple-touch-icon-114x114-precomposed.png">
51 68
 <!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
52 69
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.url }}/images/apple-touch-icon-144x144-precomposed.png">
70
+</head>
71
+
72
+<body class="{{ page.layout }}">
73
+

+ 11
- 0
_includes/image-feature.html View File

@@ -0,0 +1,11 @@
1
+{% if page.image.feature %}
2
+  <img src="{{ site.url }}/images/{{ page.image.feature }}"
3
+       class="entry-feature-image" alt="{{ page.title }}">
4
+
5
+  {% if page.image.credit %}
6
+    <p class="image-credit">Photo Credit: 
7
+      <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>
8
+    </p>
9
+  {% endif %}
10
+{% endif %}
11
+

+ 26
- 0
_includes/interaction-form.html View File

@@ -0,0 +1,26 @@
1
+<div class="">
2
+  <h3>Participate</h3>
3
+
4
+  <h4><label for="webmention-url">Webmention/pingback URL:</label></h4>
5
+  <input id="webmention-url" readonly value="https:{{ site.url }}{{ page.url }}" style="cursor: text;">
6
+
7
+  <div class="comment-form isso">
8
+    <h4>Comment form:</h4>
9
+
10
+    <form class="isso-form" action="/php/isso.php" method="post">
11
+        <textarea id="isso-text" name="text" required></textarea>
12
+
13
+        <label for="isso-author">Name (optional):</label>
14
+        <input id="isso-author" name="author">
15
+
16
+        <label for="isso-email">Email (optional, not published)</label>
17
+        <input id="isso-email" name="email" type="email">
18
+
19
+        <label for="isso-website">Website (optional)</label>
20
+        <input id="isso-website" name="website" type="url">
21
+
22
+        <input type="hidden" name="target" value="{{page.url}}">
23
+        <input type="submit" value="Submit Comment">
24
+    </form>
25
+  </div>
26
+</div>

+ 0
- 25
_includes/interactions.html View File

@@ -5,30 +5,5 @@
5 5
 
6 6
     <!--# include virtual="/php/listcomments.php?target={{ page.url }}" -->
7 7
   </div>
8
-
9
-  <h3>Participate</h3>
10
-
11
-  <h4><label for="webmention-url">Webmention/pingback URL:</label></h4>
12
-  <input id="webmention-url" readonly value="https:{{ site.url }}{{ page.url }}" style="cursor: text;">
13
-
14
-  <div class="isso">
15
-    <h4>Comment form:</h4>
16
-
17
-    <form class="isso-form" action="/php/isso.php" method="post">
18
-        <textarea id="isso-text" name="text" required></textarea>
19
-
20
-        <label for="isso-author">Name (optional):</label>
21
-        <input id="isso-author" name="author">
22
-
23
-        <label for="isso-email">Email (optional, not published)</label>
24
-        <input id="isso-email" name="email" type="email">
25
-
26
-        <label for="isso-website">Website (optional)</label>
27
-        <input id="isso-website" name="website" type="url">
28
-
29
-        <input type="hidden" name="target" value="{{page.url}}">
30
-        <input type="submit" value="Submit Comment">
31
-    </form>
32
-  </div>
33 8
 </div>
34 9
 

+ 37
- 0
_includes/meta.html View File

@@ -0,0 +1,37 @@
1
+      <footer class="entry-meta">
2
+        {% if page.author %}
3
+          {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
4
+        {% endif %}
5
+        {% if author.avatar contains 'http' %}
6
+        <img src="{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo">
7
+        {% else %}
8
+        <img src="{{ site.url }}/images/{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo">
9
+        {% endif %}
10
+        <span>By <a class="h-card p-author" href="http://chromic.org">{{ author.name }}</a></span>
11
+        <span class="entry-date date published dt-published"><time datetime="{{ page.date | date_to_xmlschema }}"><i class="fa fa-calendar-o"></i> {{ page.date | date: "%B %d, %Y" }}</time></span>
12
+        {% if page.modified %}<span class="entry-date date modified dt-updated"><time datetime="{{ page.modified }}"><i class="fa fa-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %}
13
+        <span>
14
+          <a class="interactions-link" href="#interactions">
15
+            <ul style="float: none;" class="interaction-icons" data-webmention-count data-url="{{ site.url }}{{ page.url }}">
16
+              <li class="interaction-icon comments">
17
+                <span class="num">0</span>
18
+                <span class="fa fa-comments"></span>
19
+                <span class="sr-only">mentions</span>
20
+              </li>
21
+              <li class="interaction-icon likes">
22
+                <span class="num">0</span>
23
+                <span class="fa fa-heart"></span>
24
+                <span class="sr-only">likes</span>
25
+              </li>
26
+              <li class="interaction-icon repeats">
27
+                <span class="num">0</span>
28
+                <span class="fa fa-recycle"></span>
29
+                <span class="sr-only">repeats</span>
30
+              </li>
31
+            </ul>
32
+          </a>
33
+        </span>
34
+        {% if page.share %}
35
+        <span class="gs-share" id="gs-share"><button class="js-gs-share">Share on GNU social</button></span>
36
+        {% endif %}
37
+      </footer>

+ 0
- 1
_includes/navigation.html View File

@@ -8,4 +8,3 @@
8 8
 	</nav>
9 9
 </div><!-- /.navigation-wrapper -->
10 10
 
11
-{% include browser-upgrade.html %}

+ 4
- 1
_includes/scripts.html View File

@@ -1,4 +1,4 @@
1
-<script type="text/javascript">
1
+<script>
2 2
   var BASE_URL = '{{ site.url }}';
3 3
 </script>
4 4
 
@@ -26,3 +26,6 @@
26 26
 </script>
27 27
 {% endif %}
28 28
 
29
+</body>
30
+</html>
31
+

+ 0
- 10
_includes/social-share.html View File

@@ -1,10 +0,0 @@
1
-<span class="social-share-twitter">
2
-  <a href="https://twitter.com/intent/tweet?hashtags={{ page.tags | join: ',' | remove: ' ' }}&amp;text={{ page.title | escape | replace:' ','%20' }}&amp;url={{ site.url }}{{ page.url }}{% if author.twitter %}&amp;via={{ author.twitter }}{% endif %}" title="Share on Twitter" itemprop="Twitter"><i class="fa fa-twitter-square"></i> Tweet</a>
3
-</span>
4
-<span class="social-share-facebook">
5
-  <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook" itemprop="Facebook"><i class="fa fa-facebook-square"></i> Like</a>
6
-</span>
7
-<span class="social-share-googleplus">
8
-  <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus" itemprop="GooglePlus"><i class="fa fa-google-plus-square"></i> +1</a>
9
-</span>
10
-<!-- /.social-share -->

+ 9
- 0
_includes/tags.html View File

@@ -0,0 +1,9 @@
1
+<ul class="entry-tags">
2
+  {% for tag in page.tags %}
3
+    <li>
4
+      <a class="p-category" href="{{ site.url }}/tags/#{{ tag }}"
5
+          title="Pages tagged {{ tag }}">{{ tag }}</a>
6
+    </li>
7
+  {% endfor %}
8
+</ul>
9
+

+ 0
- 38
_layouts/article.html View File

@@ -1,38 +0,0 @@
1
-<!doctype html>
2
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
-<head>
7
-{% include head.html %}
8
-</head>
9
-
10
-<body id="article">
11
-
12
-{% include navigation.html %}
13
-{% include masthead.html %}
14
-
15
-<div id="main" role="main">
16
-  <article class="entry">
17
-    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>{% endif %}{% endif %}
18
-    <div class="entry-wrapper">
19
-      <header class="entry-header">
20
-        <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</h1>{% endif %}
21
-      </header>
22
-      <div class="entry-content">
23
-        {{ content }}
24
-      </div><!-- /.entry-content -->
25
-    </div><!-- /.entry-wrapper -->
26
-  </article>
27
-</div><!-- /#main -->
28
-
29
-<div class="footer-wrapper">
30
-  <footer role="contentinfo" class="entry-wrapper">
31
-    {% include footer.html %}
32
-  </footer>
33
-</div><!-- /.footer-wrapper -->
34
-
35
-{% include scripts.html %}          
36
-
37
-</body>
38
-</html>

+ 5
- 10
_layouts/comment.html View File

@@ -1,11 +1,4 @@
1
-<!doctype html>
2
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
-<head>
7 1
 {% include head.html %}
8
-</head>
9 2
 
10 3
 <body id="comment">
11 4
 
@@ -14,9 +7,11 @@
14 7
 <div id="main" role="main">
15 8
   <div class="entry">
16 9
     <div class="entry-wrapper">
17
-      <div class="entry-content">
18
-        {{ content }}
19
-      </div><!-- /.entry-content -->
10
+      <div class="content">
11
+        <div class="entry-content">
12
+          {{ content }}
13
+        </div><!-- /.entry-content -->
14
+      </div>
20 15
     </div><!-- /.entry-wrapper -->
21 16
   </div>
22 17
 </div><!-- /#main -->

+ 37
- 49
_layouts/homepage.html View File

@@ -1,60 +1,48 @@
1
-<!doctype html>
2
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
-<head>
7 1
 {% include head.html %}
8 2
 
9
-<!-- Indieauth/OpenID -->
10
-<link rel="openid.delegate" href="https://chromic.org" />
11
-<link rel="openid.server" href="https://auth.chromic.org/openid" />
12
-
13
-</head>
14
-
15
-<body id="homepage">
16
-
17 3
 {% include navigation.html %}
18 4
 
19 5
 <div id="main" role="main">
20
-  <article>
21
-    <div class="entry-wrapper">
22
-      <footer class="entry-meta">
23
-        <h2>Blog<br>Posts&nbsp;<a href="/feed.xml"><span class="fa fa-rss"></span></a></h2>
24
-        <ul class="post-list">
25
-        {% for post in site.categories.blog limit:10 %}
26
-          <li>
27
-            <article class="h-entry">
28
-              <a class="u-url" href="{{ site.url }}{{ post.url }}">
29
-                <span class="p-name" style="margin-top: 0;">{{ post.title }}</span>
30
-                <span class="entry-date">
31
-                  <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time>
32
-                </span>
33
-              </a>
34
-            </article>
35
-          </li>
36
-        {% endfor %}
37
-        </ul>
38
-      </footer>
39
-      <div class="entry-content">
40
-        <div class="ls-wrap">
41
-            <h2>Realtime<br>Updates&nbsp;<a href="/updates.atom"><span class="fa fa-rss"></span></a></h2>
42
-          {{ content }}
43
-        </div>
44
-      </div><!-- /.entry-content -->
45
-    </div><!-- /.entry-wrapper -->
46
-  </article>
6
+  <div class="entry-wrapper">
7
+    <div class="sidebar">
8
+      <h2>
9
+          Blog<br>
10
+          Posts&nbsp;<a href="/feed.xml"><span class="fa fa-rss"></span></a>
11
+      </h2>
12
+
13
+      <ul class="post-list">
14
+      {% for post in site.categories.blog limit:10 %}
15
+        <li>
16
+          <article class="h-entry">
17
+            <a class="u-url" href="{{ site.url }}{{ post.url }}">
18
+              <span class="p-name" style="margin-top: 0;">{{ post.title }}</span>
19
+              <span class="entry-date">
20
+                <time class="dt-published"
21
+                    datetime="{{ post.date | date_to_xmlschema }}">
22
+                      {{ post.date | date: "%B %d, %Y" }}
23
+                </time>
24
+              </span>
25
+            </a>
26
+          </article>
27
+        </li>
28
+      {% endfor %}
29
+      </ul>
30
+    </div>
31
+
32
+    <div class="content">
33
+      <div class="stream">
34
+        <h2>
35
+            Realtime<br>
36
+            Updates&nbsp;<a href="/updates.atom"><span class="fa fa-rss"></span></a>
37
+        </h2>
38
+        {{ content }}
39
+      </div>
40
+    </div>
41
+  </div><!-- /.entry-wrapper -->
47 42
 
48 43
 </div><!-- /#main -->
49 44
 
50
-<div class="footer-wrapper">
51
-  <footer role="contentinfo" class="entry-wrapper">
52
-    {% include footer.html %}
53
-  </footer>
54
-</div><!-- /.footer-wrapper -->
45
+{% include footer.html %}
55 46
 
56 47
 {% include scripts.html %}
57 48
 
58
-</body>
59
-</html>
60
-

+ 50
- 0
_layouts/like.html View File

@@ -0,0 +1,50 @@
1
+{% include head.html %}
2
+
3
+{% include navigation.html %}
4
+{% include masthead.html %}
5
+
6
+<div id="main" role="main">
7
+  <article class="hentry h-entry">
8
+    <div class="entry-wrapper">
9
+      <header class="entry-header">
10
+        {% include tags.html %}
11
+        <h1 class="entry-title p-name">
12
+          <a class="u-url" href="{{ page.url }}">
13
+            Chimo liked {{ page.target.type }} by {{ page.target.by }}
14
+            <span class="link-arrow fa fa-link"></span>
15
+          </a>
16
+        </h1>
17
+      </header>
18
+
19
+      {% include meta.html %}
20
+
21
+      <div class="content">
22
+        <div class="entry-content e-content">
23
+          <figure class="chr-card">
24
+            <figcaption>
25
+              Chimo liked {{ page.target.type }} by {{ page.target.by }}
26
+            </figcaption>
27
+
28
+            <blockquote>
29
+              {{ content }}
30
+            </blockquote>
31
+
32
+            <footer class="chr-card__meta">
33
+              via <a class="u-like-of" href="{{ page.target.url }}"><img src="{{ page.target.icon }}"></a>
34
+            </footer>
35
+          </figure>
36
+
37
+          <hr>
38
+
39
+          {% include interactions.html %}
40
+        </div>
41
+        {% include interaction-form.html %}
42
+      </div>
43
+    </div>
44
+  </article>
45
+</div>
46
+
47
+{% include footer.html %}
48
+
49
+{% include scripts.html %}
50
+

+ 18
- 22
_layouts/page.html View File

@@ -1,38 +1,34 @@
1
-<!doctype html>
2
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
-<head>
7 1
 {% include head.html %}
8
-</head>
9
-
10
-<body id="page">
11 2
 
12 3
 {% include navigation.html %}
13 4
 {% include masthead.html %}
14 5
 
15 6
 <div id="main" role="main">
16
-  <article class="entry">
17
-    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>{% endif %}{% endif %}
7
+  <article class="hentry h-entry">
8
+    {% include image-feature.html %}
18 9
     <div class="entry-wrapper">
10
+
19 11
       <header class="entry-header">
20
-        <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</h1>{% endif %}
12
+        {% include tags.html %}
13
+
14
+        <h1 class="entry-title p-name">
15
+          <a class="u-url" href="{{ page.url }}">
16
+            {{ page.title }}
17
+            <span class="link-arrow fa fa-link"></span>
18
+          </a>
19
+        </h1>
21 20
       </header>
22
-      <div class="entry-content">
23
-        {{ content }}
24
-      </div><!-- /.entry-content -->
21
+
22
+      <div class="content">
23
+        <div class="entry-content e-content">
24
+          {{ content }}
25
+        </div><!-- /.entry-content -->
26
+      </div>
25 27
     </div><!-- /.entry-wrapper -->
26 28
   </article>
27 29
 </div><!-- /#main -->
28 30
 
29
-<div class="footer-wrapper">
30
-  <footer role="contentinfo" class="entry-wrapper">
31
-    {% include footer.html %}
32
-  </footer>
33
-</div><!-- /.footer-wrapper -->
31
+{% include footer.html %}
34 32
 
35 33
 {% include scripts.html %}          
36 34
 
37
-</body>
38
-</html>

+ 20
- 61
_layouts/post.html View File

@@ -1,82 +1,41 @@
1
-<!doctype html>
2
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
-<head>
7 1
 {% include head.html %}
8
-</head>
9
-
10
-<body id="post">
11 2
 
12 3
 {% include navigation.html %}
13 4
 {% include masthead.html %}
14 5
 
15 6
 <div id="main" role="main">
16 7
   <article class="hentry h-entry">
17
-    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>{% endif %}{% endif %}
8
+    {% include image-feature.html %}
18 9
     <div class="entry-wrapper">
10
+
19 11
       <header class="entry-header">
20
-        <ul class="entry-tags">{% for tag in page.tags %}<li> <a class="p-category" href="{{ site.url }}/tags/#{{ tag }}" title="Pages tagged {{ tag }}">{{ tag }}</a></li>{% endfor %}</ul>
21
-        <h1 class="entry-title p-name"><a class="u-url" href="{{ page.url }}">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %} <span class="link-arrow fa fa-link"></span></a></h1>
22
-      </header>
23
-      <footer class="entry-meta">
24
-        {% if page.author %}
25
-          {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
26
-        {% endif %}
27
-        {% if author.avatar contains 'http' %}
28
-        <img src="{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo">
29
-        {% else %}
30
-        <img src="{{ site.url }}/images/{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo">
31
-        {% endif %}
32
-        <span>By <a class="h-card p-author" href="http://chromic.org">{{ author.name }}</a></span>
33
-        <span class="entry-date date published dt-published"><time datetime="{{ page.date | date_to_xmlschema }}"><i class="fa fa-calendar-o"></i> {{ page.date | date: "%B %d, %Y" }}</time></span>
34
-        {% if page.modified %}<span class="entry-date date modified dt-updated"><time datetime="{{ page.modified }}"><i class="fa fa-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %}
35
-        <span>
36
-          <a class="interactions-link" href="#interactions">
37
-            <ul style="float: none;" class="interaction-icons" data-webmention-count data-url="{{ site.url }}{{ page.url }}">
38
-              <li class="interaction-icon comments">
39
-                <span class="num">0</span>
40
-                <span class="fa fa-comments"></span>
41
-                <span class="sr-only">mentions</span>
42
-              </li>
43
-              <li class="interaction-icon likes">
44
-                <span class="num">0</span>
45
-                <span class="fa fa-heart"></span>
46
-                <span class="sr-only">likes</span>
47
-              </li>
48
-              <li class="interaction-icon repeats">
49
-                <span class="num">0</span>
50
-                <span class="fa fa-recycle"></span>
51
-                <span class="sr-only">repeats</span>
52
-              </li>
53
-            </ul>
12
+        {% include tags.html %}
13
+
14
+        <h1 class="entry-title p-name">
15
+          <a class="u-url" href="{{ page.url }}">
16
+            {{ page.title }}
17
+            <span class="link-arrow fa fa-link"></span>
54 18
           </a>
55
-        </span>
56
-        {% if page.share %}
57
-        <span class="gs-share" id="gs-share"><button class="js-gs-share">Share on GNU social</button></span>
58
-        {% endif %}
59
-      </footer>
19
+        </h1>
20
+      </header>
21
+
22
+      {% include meta.html %}
60 23
 
61
-      <div class="entry-content e-content">
62
-        {{ content }}
24
+      <div class="content">
25
+        <div class="entry-content e-content">
26
+          {{ content }}
63 27
 
64
-        <hr>
28
+          <hr>
65 29
 
66
-        {% include interactions.html %}
30
+          {% include interactions.html %}
31
+        </div>
32
+        {% include interaction-form.html %}
67 33
       </div>
68 34
     </div>
69 35
   </article>
70 36
 </div>
71 37
 
72
-<div class="footer-wrapper">
73
-  <footer role="contentinfo" class="entry-wrapper">
74
-    {% include footer.html %}
75
-  </footer>
76
-</div><!-- /.footer-wrapper -->
38
+{% include footer.html %}
77 39
 
78 40
 {% include scripts.html %}
79 41
 
80
-</body>
81
-</html>
82
-

+ 20
- 0
_layouts/stream.html View File

@@ -0,0 +1,20 @@
1
+{% include head.html %}
2
+
3
+{% include navigation.html %}
4
+{% include masthead.html %}
5
+
6
+<div id="main" role="main">
7
+  <div class="entry-wrapper">
8
+    <div class="content">
9
+      <div class="stream">
10
+        <h2>Notes</h2>
11
+        {{ content }}
12
+      </div>
13
+    </div>
14
+  </div><!-- /.entry-wrapper -->
15
+</div><!-- /#main -->
16
+
17
+{% include footer.html %}
18
+
19
+{% include scripts.html %}
20
+

+ 168
- 25
_layouts/update.html View File

@@ -1,45 +1,188 @@
1
-<!doctype html>
2
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6
-<head>
7 1
 {% include head.html %}
8
-</head>
9
-
10
-<body id="page">
11 2
 
12 3
 {% include navigation.html %}
13 4
 
14 5
 <div id="main" role="main">
15 6
   <article class="entry">
16 7
     <div class="entry-wrapper">
17
-      <div class="entry-content">
18
-        {{ content }}
8
+      <div class="content">
9
+        <div class="entry-content">
10
+          {{ content }}
19 11
 
12
+          {% comment %}
13
+              FIXME: re-use "_includes/interactions.html"
14
+                     The problem is the page.url is different than other
15
+                     pages since the "id" comes from a PHP variable at runtime.
16
+          {% endcomment %}
20 17
         <div class="interactions-section">
21
-          {% include interactions.html %}
18
+          <div class="marginalia" id="response-list">
19
+            <h2 id="interactions">Interactions</h2>
20
+
21
+            {% comment %}
22
+                FIXME: This doesn't work; PHP is executed after the include's here.
23
+
24
+                <!--# include virtual="/php/listcomments.php?target=/update/<?php echo $id ?>" -->
25
+            {% endcomment %}
26
+
27
+            {% comment %}
28
+                FIXME: Dupe.
29
+            {% endcomment %}
30
+            <?php
31
+            $path = '/update/' . $_GET['id']; // TODO: make sure this is an int
32
+
33
+            // Get, print webmentions
34
+            $webmentions = get_webmentions($path);
35
+            echo $webmentions;
36
+
37
+            // Get, print Isso comments
38
+            $comments = get_isso_comments($path);
39
+            echo $comments;
40
+
41
+            function get_webmentions($path) {
42
+                $webmention_server = 'https://webmention.chromic.org/api/mentions?target=';
43
+                $url = $webmention_server . urlencode('https://chromic.org' . $path);
44
+
45
+                $ch = curl_init($url);
46
+                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
47
+                $response = curl_exec($ch);
48
+
49
+                // Check for errors
50
+                if ($response === false) {
51
+                    return curl_error($ch);
52
+                }
53
+
54
+                $json = json_decode($response);
55
+
56
+                if ($json === null || count($json->links) === 0) {
57
+                    return '';
58
+                }
59
+
60
+                $html = '<ul class="interactions">';
61
+                foreach($json->links as $mention) {
62
+                    // TMP: ignore manually entered pingbacks; empty content
63
+                    if ($mention->data->content === null) {
64
+                        continue;
65
+                    }
66
+
67
+                    $html .= '<li class="interaction">' .
68
+                                '<div class="indent">' .
69
+                                    '<div class="u-comment h-cite">';
70
+
71
+                    $author = ($mention->data->author->name) ? $mention->data->author->name : 'Somebody';
72
+                    $author = '<span class="p-name">' . $author . '</span>';
73
+
74
+                    if ($mention->data->author->url) {
75
+                        $html .= '<a rel="nofollow" class="u-author h-card" href="' . $mention->data->author->url . '">' . $author . "</a>";
76
+                    } else {
77
+                        $html .= $author;
78
+                    }
79
+
80
+                    $html .= '<div class="p-content p-name">' . $mention->data->content . '</div>';
81
+
82
+                    $date = ($mention->data->published) ? $mention->data->published : $mention->verified_date;
83
+
84
+                    $time = '<time class="dt-published timeago" datetime="' . $date . '">' . $date . '</time>';
85
+
86
+                    if ($mention->data->url) {
87
+                        $time = '<a rel="nofollow" href="' . $mention->data->url . '" class="meta">' . $time . '</a>';
88
+                    } else {
89
+                        $time = '<span class="meta">' . $time . '</span>';
90
+                    }
91
+
92
+                    $html .= $time;
93
+
94
+                    $html .= '</div></div></li>';
95
+                }
96
+                $html .= '</ul>';
97
+
98
+                return $html;
99
+            }
100
+
101
+            function get_isso_comments($path) {
102
+                $comment_server = 'https://comments.chromic.org/chromic/?uri=';
103
+
104
+                $url = $comment_server . urlencode($path);
105
+
106
+                $ch = curl_init($url);
107
+                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
108
+                $response = curl_exec($ch);
109
+
110
+                // Check for errors
111
+                if ($response === false) {
112
+                    return curl_error($ch);
113
+                }
114
+
115
+                $json = json_decode($response);
116
+
117
+                if ($json === null || $json->total_replies === 0) {
118
+                    return '';
119
+                }
120
+
121
+                $html = '<ul class="interactions">';
122
+                foreach($json->replies as $reply) {
123
+                    $html .= '<li class="interaction">' .
124
+                                '<div class="indent">' .
125
+                                    '<div class="u-comment h-cite">';
126
+
127
+                    $author = ($reply->author) ? $reply->author : 'Somebody';
128
+                    $author = '<span class="p-name">' . $author . '</span>';
129
+
130
+                    if ($reply->website) {
131
+                        $html .= '<a rel="nofollow" class="u-author h-card" href="' . $reply->website . '">' . $author . "</a>";
132
+                    } else {
133
+                        $html .= $author;
134
+                    }
135
+
136
+                    $html .= '<div class="p-content p-name">' . $reply->text . '</div>';
137
+
138
+                    $datetime = date('Y-m-d\TH:i:sP', $reply->created);
139
+                    $humandate = date('Y-m-d H:i:s (T)', $reply->created);
140
+
141
+                    $html .= '<span class="meta">' .
142
+                                '<time class="dt-published timeago" datetime="' . $datetime . '">' . $humandate . '</time>' .
143
+                             '</span>';
144
+
145
+                    $html .= '</div></div></li>';
146
+                }
147
+                $html .= '</ul>';
148
+
149
+                return $html;
150
+            }
151
+            ?>
152
+          </div>
153
+        </div>
154
+
155
+          <h3>Participate</h3>
156
+
157
+          <h4><label for="webmention-url">Webmention/pingback URL:</label></h4>
158
+          <input id="webmention-url" readonly value="https:{{ site.url }}/update/<?php echo $id ?>" style="cursor: text;">
159
+
160
+          <div class="isso">
161
+            <h4>Comment form:</h4>
162
+
163
+            <form class="isso-form" action="/php/isso.php" method="post">
164
+                <textarea id="isso-text" name="text" required></textarea>
165
+
166
+                <label for="isso-author">Name (optional):</label>
167
+                <input id="isso-author" name="author">
168
+
169
+                <label for="isso-email">Email (optional, not published)</label>
170
+                <input id="isso-email" name="email" type="email">
22 171
 
23
-          <label>Webmention/pingback URL:
24
-            <input readonly value="{{ site.url }}/update/<?php echo $id ?>" style="cursor: text;">
25
-          </label>
172
+                <label for="isso-website">Website (optional)</label>
173
+                <input id="isso-website" name="website" type="url">
26 174
 
27
-          <h4>Comment form:</h4>
28
-          <div id="isso-thread" class="isso-thread"></div>
29
-          <script data-isso-max-comments-top="0" data-isso="//comments.chromic.org/chromic/" src="//comments.chromic.org/chromic/js/embed.min.js"></script>
175
+                <input type="hidden" name="target" value="/update/<?php echo $id ?>">
176
+                <input type="submit" value="Submit Comment">
177
+            </form>
178
+          </div>
30 179
         </div>
31 180
       </div><!-- /.entry-content -->
32 181
     </div><!-- /.entry-wrapper -->
33 182
   </article>
34 183
 </div><!-- /#main -->
35 184
 
36
-<div class="footer-wrapper">
37
-  <footer role="contentinfo" class="entry-wrapper">
38
-    {% include footer.html %}
39
-  </footer>
40
-</div><!-- /.footer-wrapper -->
185
+{% include footer.html %}
41 186
 
42 187
 {% include scripts.html %}
43 188
 
44
-</body>
45
-</html>

+ 3
- 2
_sass/_layout.scss View File

@@ -245,6 +245,7 @@ span + .entry-title {
245 245
 	padding-right: $gutter;
246 246
 	padding-left: $gutter;
247 247
 }
248
+.sidebar,
248 249
 .entry-meta {
249 250
 	@include span-columns(12);
250 251
 	text-transform: uppercase;
@@ -277,7 +278,7 @@ span + .entry-title {
277 278
 		@include clearfix;
278 279
 	}
279 280
 }
280
-.entry-content {
281
+.content {
281 282
 	@include span-columns(12);
282 283
 	p:first-child {
283 284
 		margin-top: 0;
@@ -317,7 +318,7 @@ span + .entry-title {
317 318
 		text-align: center;
318 319
 		max-width: 100%;
319 320
 	}
320
-	.entry-content {
321
+	.content {
321 322
 		@include span-columns(12);
322 323
 	}
323 324
 }

+ 1
- 0
_sass/chimo/_interactions.scss View File

@@ -47,3 +47,4 @@
47 47
     top: 0;
48 48
     width: 48px;
49 49
 }
50
+

+ 64
- 56
_sass/chimo/_lifestream.scss View File

@@ -1,14 +1,51 @@
1
-/**
2
- * TODO: Remove styles from IDs
3
- */
1
+.stream > h2 {
2
+    text-transform: uppercase;
3
+}
4
+
5
+.stream__activities {
6
+    list-style-type: none;
7
+    padding-left: 0;
8
+
9
+    li {
10
+        background-position: left 20px;
11
+        background-repeat: no-repeat;
12
+        margin-bottom: 12px;
13
+        padding-left: 0;
14
+    }
15
+
16
+    footer {
17
+        font-size: 0.875rem;
18
+        text-align: right;
19
+
20
+        img {
21
+            margin-bottom: 2px;
22
+        }
23
+    }
24
+}
25
+
26
+.pagination {
27
+    a {
28
+        border: 2px solid #000 !important;
29
+        color: #fff;
30
+        transition: all 0.2s ease;
31
+
32
+        &:first-child {
33
+            margin-right: 5px;
34
+        }
35
+
36
+        &:hover {
37
+            color: #000;
38
+        }
39
+    }
40
+}
4 41
 
5
-#homepage {
42
+.homepage {
6 43
     @include media($large) {
7
-        .ls-wrap {
44
+        .stream {
8 45
             margin-left: 40px;
9 46
         }
10 47
 
11
-        #ls {
48
+        .stream__activities {
12 49
             padding-left: 0;
13 50
         }
14 51
     }
@@ -17,72 +54,43 @@
17 54
         font-size: 1.5rem;
18 55
     }
19 56
 
57
+    .sidebar a,
20 58
     .entry-meta a,
21
-    .entry-content a time {
59
+    .stream a {
22 60
         color: #0097bb;
23 61
     }
24 62
 
25
-    .ls-wrap > h2 {
26
-        text-transform: uppercase;
27
-    }
28
-
29
-    #ls {
30
-        list-style-type: none;
31
-        padding-left: 0;
32
-
63
+    .post-list {
33 64
         li {
34
-            background-position: left 20px;
35
-            background-repeat: no-repeat;
36
-            margin-bottom: 12px;
65
+            font-size: 1rem;
37 66
             padding-left: 0;
38 67
         }
39 68
 
40
-        footer {
41
-            font-size: 0.875rem;
42
-            text-align: right;
43
-
44
-            img {
45
-                margin-bottom: 2px;
46
-            }
69
+        a > span {
70
+            display: block;
71
+            float: none;
72
+            margin-top: 12px;
47 73
         }
48 74
     }
49 75
 
50
-    .post-list li {
51
-        font-size: 1rem;
52
-        padding-left: 0;
53
-    }
54
-
55
-    .post-list a > span {
56
-        display: block;
57
-        float: none;
58
-        margin-top: 12px;
59
-    }
60
-
61
-    .pagination a {
62
-        border: 2px solid #000 !important;
63
-        color: #fff;
64
-        transition: all 0.2s ease;
65
-    }
66
-
67
-    .pagination a:first-child {
68
-        margin-right: 5px;
69
-    }
70
-
71
-    .pagination a:hover {
72
-        color: #000;
73
-    }
74 76
 }
75 77
 
76 78
 .chr-card {
77 79
     box-shadow: -8px 8px 10px 0 rgba(204, 204, 204, 0.47);
78 80
     padding: 10px;
81
+}
79 82
 
80
-    figcaption {
81
-        font-weight: bold;
82
-    }
83
+.chr-card__title {
84
+    font-weight: bold;
85
+}
83 86
 
84
-    blockquote {
85
-        font-style: normal;
86
-        margin-bottom: 12px;
87
-    }
87
+.chr-card__content {
88
+    font-style: normal;
89
+    margin-bottom: 12px;
88 90
 }
91
+
92
+.chr-card__meta {
93
+    font-size: 0.875rem;
94
+    text-align: right;
95
+}
96
+

+ 11
- 0
_sass/chimo/_stream.scss View File

@@ -47,3 +47,14 @@ figure a img {
47 47
 #ls .e-content canvas {
48 48
     max-width: 655px;
49 49
 }
50
+
51
+/* tmp */
52
+.chr-card li {
53
+    font-size: 1rem;
54
+}
55
+
56
+.pullet-coords,
57
+.pullet-address {
58
+    display: none;
59
+}
60
+

+ 3
- 3
index.php View File

@@ -16,8 +16,8 @@ $password = $config['db']['password'];
16 16
 $html_template = <<<EOT
17 17
 <li class="%s">
18 18
     <figure class="h-entry chr-card">
19
-        <figcaption class="p-name">%s</figcaption>
20
-        <blockquote class="e-content" cite="%s">
19
+        <figcaption class="p-name chr-card__title">%s</figcaption>
20
+        <blockquote class="e-content chr-card__content" cite="%s">
21 21
             %s
22 22
         </blockquote>
23 23
         <footer>
@@ -75,7 +75,7 @@ $sql = 'SELECT event.id, title, content, published, foreign_url, object_type, ob
75 75
         'ORDER BY published DESC LIMIT ' . $limit;
76 76
 
77 77
 $res = $dbh->query($sql);
78
-$html = '<ol id="ls">';
78
+$html = '<ol class="stream__activities">';
79 79
 $nbRows = 0;
80 80
 
81 81
 $datePublished = new DateTime();

+ 13
- 5
update/index.php View File

@@ -49,17 +49,25 @@ if ($row) {
49 49
     $datePublished->modify(str_replace(' ', 'T', $row['published']) . '+00:00');
50 50
     $datePublished->setTimeZone($tz);
51 51
 
52
-    // FIXME: Don't triple-wrap the update... don't use ID selectors for styling (CSS)
53
-    $html = '<div id="homepage"><div id="ls"><div class="' . implode(' ', array($row['type'], $row['object_type'], $row['object_verb'])) . '"><figure class="h-entry chr-card"><figcaption class="p-name">';
52
+    $html = '<div class="stream">' .
53
+              '<div class="stream__activities ' . implode(' ', array($row['type'], $row['object_type'], $row['object_verb'])) . '">' .
54
+                '<figure class="h-entry chr-card">' .
55
+                  '<figcaption class="p-name chr-card__title">';
56
+
54 57
     $html .= $row['title'];
58
+
55 59
     $html .= '</figcaption>';
56
-    $html .= '<blockquote class="e-content" cite="' . $row['foreign_url'] . '">' . $row['content'] . '</blockquote>';
60
+
61
+    $html .= '<blockquote class="e-content chr-card__content" cite="' . $row['foreign_url'] . '">' . $row['content'] . '</blockquote>';
62
+
57 63
     $html .= '<footer><a class="u-url" href="/update/' . $row['id'] . '">' .
58
-                '<time class="dt-published timeago" datetime="' . $datePublished->format('c') . '">' . $datePublished->format('Y-m-d H:i:s (T)') . '</time>' .
64
+               '<time class="dt-published timeago" datetime="' . $datePublished->format('c') . '">' . $datePublished->format('Y-m-d H:i:s (T)') . '</time>' .
59 65
              '</a> via <a href="' . $row['foreign_url'] . '"><img src="/images/homepage/' . $row['type'] . '.png" alt="' . $row['type'] . '"></a></footer>';
60
-    $html .= '</figure></div></div></div>';
66
+
67
+    $html .= '</figure></div></div>';
61 68
 }
62 69
 
63 70
 echo $html;
64 71
 
65 72
 ?>
73
+

Loading…
Cancel
Save