Customize the theme layout, CSS, fonts and JavaScript.

2022-06-24 17:59:13 +10:00 · 2022-06-24 17:59:13 +10:00 · ab49894281
commit ab49894281
parent b23276291f
8 changed files with 360 additions and 58 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,19 @@
+# Building in development
+
+To start the development server with automatic reloading:
+
+    pelican --autoreload --listen
+
+
+# Deployment
+
+To build the site and deploy for production:
+
+    make rsync_upload
+
+
+# Customizations
+
+The theme is based on Pelican's "simple" theme, with significant changes to
+"base.html" including HTML, CSS, fonts and JavaScript, and minor changes to
+"page.html".
--- a/themes/next.copyleft.org/static/css/tachyons.min.css
+++ b/themes/next.copyleft.org/static/css/tachyons.min.css
--- a/themes/next.copyleft.org/static/fonts/Jost-Regular.woff2
+++ b/themes/next.copyleft.org/static/fonts/Jost-Regular.woff2
--- a/themes/next.copyleft.org/static/fonts/Jost-SemiBold.woff2
+++ b/themes/next.copyleft.org/static/fonts/Jost-SemiBold.woff2
--- a/themes/next.copyleft.org/static/images/conservancy-header.svg
+++ b/themes/next.copyleft.org/static/images/conservancy-header.svg
--- a/themes/next.copyleft.org/static/js/velocity.min.js
+++ b/themes/next.copyleft.org/static/js/velocity.min.js
--- a/themes/next.copyleft.org/templates/base.html
+++ b/themes/next.copyleft.org/templates/base.html
@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
-<head>
+    <head>
        {% block head %}
            <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="generator" content="Pelican" />
            {% if FEED_ALL_ATOM %}
                <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
@ -29,20 +30,67 @@
            {% if TAG_FEED_RSS and tag %}
                <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
            {% endif %}
+            <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
+            <style>
+             :root {
+               --washed-purple: #fbf7fc;
+               --purple: #3b1c4a;
+             }
+             /* latin */
+             @font-face {
+               font-family: 'Jost';
+               font-style: normal;
+               font-weight: 400;
+               font-display: swap;
+               src: url({{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonts/Jost-Regular.woff2) format('woff2');
+               unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+             }
+             /* latin */
+             @font-face {
+               font-family: 'Jost';
+               font-style: normal;
+               font-weight: 600;
+               font-display: swap;
+               src: url({{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonts/Jost-SemiBold.woff2) format('woff2');
+               unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+             }
+             body {
+               font-family: 'Jost', sans-serif;
+               font-weight: 400;
+             }
+             strong { font-weight: 600; }
+             .grow {
+               transition: transform 0.25s ease-out;
+             }
+             header {
+               color: var(--purple);
+               background-color: var(--washed-purple);
+             }
+             header a {
+               color: var(--purple);
+               text-decoration: none;
+             }
+             header a.active {
+               text-decoration: underline;
+             }
+            </style>
        {% endblock head %}
-</head>
+    </head>

-<body id="index" class="home">
-        <header id="banner" class="body">
-                <h1><a href="{{ SITEURL }}/">{{ SITENAME }}{% if SITESUBTITLE %} <strong>{{ SITESUBTITLE }}</strong>{% endif %}</a></h1>
-        </header><!-- /#banner -->
-        <nav id="menu"><ul>
+    <body id="index" class="bg-white">
+        <header id="banner" class="ph3 ph4-ns pt3 pb3" style="overflow: auto;">
+            <div class="flex flex-wrap">
+                {% if output_file != 'index.html' %}
+                    <div class="b code f3" style="flex-grow: 1;"><a class="dib pv2" href="/">&gt;&nbsp;copyleft-next</a></div>
+                {% endif %}
+                <nav id="menu" class="flex flex-wrap items-center justify-start justify-end-ns" style="flex-grow: 1;">
+                    <ul class="list pa0 ma0 mt2 mt0-ns">
                        {% for title, link in MENUITEMS %}
                            <li><a href="{{ link }}">{{ title }}</a></li>
                        {% endfor %}
                        {% if DISPLAY_PAGES_ON_MENU %}
                            {% for p in pages %}
-            <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
+                                <li class="dib grow"><a class="{% if p == page %}active {% endif %}pr3 ph3-ns dib pv2" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
                            {% endfor %}
                        {% endif %}
                        {% if DISPLAY_CATEGORIES_ON_MENU %}
@ -50,14 +98,44 @@
                                <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
                            {% endfor %}
                        {% endif %}
-        </ul></nav><!-- /#menu -->
-        {% block content %}
-        {% endblock %}
-        <footer id="contentinfo" class="body">
-                <address id="about" class="vcard body">
-                Proudly powered by <a href="https://getpelican.com/">Pelican</a>,
-                which takes great advantage of <a href="https://www.python.org/">Python</a>.
-                </address><!-- /#about -->
-        </footer><!-- /#contentinfo -->
-</body>
+                    </ul>
+                </nav>
+            </div>
+            {% if output_file == 'index.html' %}
+                <h1 id="title" class="f2 f1-m f-subheadline-ns lh-title mb4 mt4 code black-70 tracked-tight" style="color: #3b1c4a; opacity: 0; translate: 0 -10px; position: relative;">&gt;&nbsp;{{ SITENAME }}</h1>
+                <p class="f4 f3-ns measure lh-copy">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</p>
+            {% endif %}
+        </header>
+
+        <main class="f5 f4-ns lh-copy ph3 ph4-ns pv3 pv4-ns lh-copy" style="max-width: 40em">
+            {% block content %}{% endblock %}
+        </main>
+
+        <footer id="contentinfo" class="f6 f6-ns ph3 ph4-ns pv3 pv4-ns mt5">
+            Brought to you by:<br>
+            <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/conservancy-header.svg" class="mt3" style="width: 150px; filter: saturate(0)" alt="Software Freedom Conservancy">
+            <p class="f7 mt4">No Rights Reserved — CC0 1.0 Universal</p>
+            <p class="f7 mt2 black-60">Jost font is copyright 2020 The Jost Project Authors, SIL Open Font License v1.1<br>
+                Tachyons CSS is copyright 2020 Adam Morse & John Otander, MIT License<br>
+                Velocity JS is copyright 2014 Julian Shapiro, MIT License<br>
+                Pelican is copyright 2007 Free Software Foundation, Inc, GNU AGPL v3.0</p>
+        </footer>
+        <script src="{{ SITE_URL }}/{{ THEME_STATIC_DIR }}/js/velocity.min.js"></script>
+        {% if output_file == 'index.html' %}
+            <script>
+             'use strict';
+             document.getElementById('title').velocity(
+                 {
+                     opacity: 1,
+                     translate: '0 0',
+                 },
+                 {
+                     delay: 400,
+                     duration: 400,
+                     easing: 'ease',
+                 }
+             );
+            </script>
+        {% endif %}
+    </body>
 </html>
--- a/themes/next.copyleft.org/templates/page.html
+++ b/themes/next.copyleft.org/templates/page.html
@ -1,7 +1,13 @@
 {% extends "base.html" %}
 {% block html_lang %}{{ page.lang }}{% endblock %}

-{% block title %}{{ SITENAME }} - {{ page.title|striptags }}{%endblock%}
+{% block title %}
+    {% if output_file != 'index.html' %}
+        {{ SITENAME }} - {{ page.title|striptags }}
+    {% else %}
+        {{ SITENAME }}
+    {% endif %}
+{% endblock %}

 {% block head %}
  {{ super() }}
@ -13,7 +19,9 @@
 {% endblock %}

 {% block content %}
+    {% if output_file != 'index.html' %}
        <h1>{{ page.title }}</h1>
+    {% endif %}
    {% import 'translations.html' as translations with context %}
    {{ translations.translations_for(page) }}