move button styling into configuration

homepage/content/articles/milestone-1.md

@@ -5,9 +5,9 @@ slug: laying-foundation-for-fair-web-analytics
 sitemap_priority: 0.7
 sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
 
-<div class="larger-image">
+<figure class="larger-image mb5">
-<img alt="Milestone 1 - Laying the foundation for fair web analytics" class="mb5" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
+<img alt="Milestone 1 - Laying the foundation for fair web analytics" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
-</div>
+</figure>
 
 
 ###### 12 Dec 2019, Hendrik Niefeld
@@ -20,25 +20,19 @@ Milestone 1 is completed. This is what we've achieved in the last six weeks.
 We have further refined the existing application architecture to make it more robust and accessible to both contributors and people who want to build upon Offen. As a developer, you can transparently control additional behavior by adding or removing middleware.
 
 ### Easy to test drive
-Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.
+Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.  
-<div class="mb5">
+[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="yellow"} 
-<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" target="_blank" href="https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz">Download binary</a>
-</div>
 
 ### Develop without complex setup
-Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.
+Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.  
-<div class="mb5">
+[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="yellow"}
-<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" target="_blank" href="https://github.com/offen/offen/wiki/Developing-offen#setup">Open wiki</a>
-</div>
 
 ### Lightweight and accessible interfaces
 The *Auditorium* is ready for a dry run. It's a functional prototype for accessing and managing user data. We opted for [Choo](https://choo.io/){: target="_blank"} as the application framework and [Tachyons](https://tachyons.io/){: target="_blank"} as the CSS framework.
 
 ### Ready to localize
-You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.
+You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.  
-<div class="mb5">
+[Get in touch](mailto:hioffen@posteo.de){: data-button="yellow"}
-<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="mailto:hioffen@posteo.de">Get in touch</a>
-</div>
 
 ### Read the docs
 The work on our wiki has started. Including documentation for [developers](https://github.com/offen/offen/wiki/Developing-offen){: target="_blank"} as well as for [website operators](https://github.com/offen/offen/wiki/Running-offen){: target="_blank"} who want to deploy and run Offen.
@@ -52,7 +46,5 @@ We have further hardened and improved the HTTP server that Offen exposes. If you
 ---
 
 ### Deep dive
-Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.
+Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.  
-<div class="mb5">
+[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="black"}
-<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" target="_blank" href="https://github.com/offen/offen/pull/192">Open milestone 1 pull</a>
-</div>

homepage/pelicanconf.py

@@ -46,9 +46,12 @@ ARTICLE_SAVE_AS = 'blog/{slug}/index.html'
 PLUGIN_PATHS = ['./plugins']
 PLUGINS = ['decorate_content', 'assets']
 
-# maps any CSS selector to a list of classes to be added
 DECORATE_CONTENT = {
-    'a': ['link', 'b', 'dim', 'gray'],
+    '[data-button]': ['dib', 'mv3', 'ph4', 'pv2', 'b--solid', 'bw2'],
+    '[data-button="yellow"]': ['brd-cclr-mid-yellow', 'fnt-cclr-mid-yellow'],
+    '[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
+    'a': ['link', 'b', 'dim'],
+    'a:not([data-button])': ['gray'],
     'h2': ['f25', 'ma0', 'mb3', 'light-silver'],
     'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
     'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],

homepage/plugins/decorate_content/decorate_content.py

@@ -22,7 +22,7 @@ def content_object_init(instance):
         soup = BeautifulSoup(instance._content, "html.parser")
 
         for selector, class_names in settings.items():
-            elems = soup.find_all(selector)
+            elems = soup.select(selector)
             for elem in elems:
                 elem["class"] = elem.get("class", []) + class_names
 

homepage/theme/templates/base.html

@@ -25,16 +25,15 @@
   {% assets filters="postcss,cssmin", output="css/style.min.css", "css/tachyons.min.css", "css/fix.css", "css/fonts.css" %}
     <link rel="stylesheet" href="/{{ ASSET_URL }}">
   {% endassets %}
-  <link rel="preload" href="/theme//fonts/rubik-v9-latin-regular.woff2" as="font">
+  <link rel="preload" href="/theme/fonts/rubik-v9-latin-regular.woff2" as="font">
-  <link rel="preload" href="/theme//fonts/rubik-v9-latin-500.woff2" as="font">
+  <link rel="preload" href="/theme/fonts/rubik-v9-latin-500.woff2" as="font">
   {% if OFFEN_ACCOUNT_ID and not no_stats %}
     <script async src="/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
   {% endif %}
 </head>
 {% endblock %}
 <body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-dark-white">
-<!-- Menu ######################################################### -->
+  <div class="menu w-100 cclr-mid-yellow">
-  <div class="menu w-100 cclr-mid-yellow"> <!-- menu -->
     <section class="nav-bar">
       <div class="nav-container">
         <div class="icon">
@@ -66,9 +65,8 @@
       </div>
     </section>
   </div>
-<!-- Content ######################################################### -->
     {% block content %}
-      <div class="w-100 mt5-ns gray"> <!-- content -->
+      <div class="w-100 mt5-ns gray">
         <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
           {{ content }}
         </div>
@@ -76,7 +74,7 @@
     {% endblock %}
 
     {% block outro %}
-      <div class="w-100 cclr-mid-yellow"> <!--cta-bottom-->
+      <div class="w-100 cclr-mid-yellow">
         <div class="pt3 pb6 ph3" id="bg-cta-bottom">
           <div class="mw8 center">
             <div class="flex flex-wrap justify-center">
@@ -114,7 +112,6 @@
         </div>
       </div>
     {% endblock %}
-<!-- Footer ######################################################### -->
     <div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
       <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
         <div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
@@ -129,7 +126,7 @@
             <a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
           </p>
           <p class="ma0">
-            <a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">Email GPG Key</a>
+            <a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
           </p>
           <p class="ma0 mt2">
             <a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>

homepage/theme/templates/index.html

@@ -1,7 +1,7 @@
 {% extends "page.html" %}
 
 {% block content %}
-  <div class="w-100 mt5-ns cclr-mid-yellow"> <!-- menu -->
+  <div class="w-100 mt5-ns cclr-mid-yellow">
     <div class="mw8 center" id="bg-intro">
       <div class="flex flex-wrap pt6-ns pt-3 ph4">
         <div class="mw5 pr4 pb3">
@@ -22,7 +22,7 @@
     </div>
   </div>
 
-  <div class="w-100 cclr-mid-mint"> <!--feature-->
+  <div class="w-100 cclr-mid-mint">
     <div class="pt3 pb6 ph3" id="bg-feature">
       <div class="mw8 center">
         <div class="flex flex-wrap justify-around">
@@ -56,7 +56,7 @@
   </div>
 
 
-  <div class="w-100 cclr-mid-black white"> <!--cta-top-->
+  <div class="w-100 cclr-mid-black white">
     <div class="pt3 pb6 ph4" id="bg-cta-top">
       <div class="flex justify-end mw6 center pt5">
         <div class="w55 tr">
@@ -72,13 +72,13 @@
     </div>
   </div>
 
-  <div class="w-100 bg-white gray"> <!--content-index-->
+  <div class="w-100 bg-white gray">
     <div class="flex flex-wrap justify-center pt5 pb6">
       <div class="mw7 mw8-l center ph5-ns ph3">
         <h2>Summary</h2>
         <div class="columns mb3">
           {{ page.content }}
-          <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
+          <a class="b link dim ph4 pv2 mt3 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
         </div>
       </div>
     </div>
@@ -87,7 +87,7 @@
 
 
 {% block outro %}
-  <div class="w-100 cclr-mid-yellow"> <!--outro-->
+  <div class="w-100 cclr-mid-yellow">
     <div class="pt3 pb6 ph4" id="bg-outro">
       <div class="flex justify-end mw6 center pt5">
         <div class="w55 tr">