mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
move button styling into configuration
This commit is contained in:
parent
0048419e33
commit
d555358584
@ -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">
|
||||
<img alt="Milestone 1 - Laying the foundation for fair web analytics" class="mb5" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
|
||||
</div>
|
||||
<figure class="larger-image mb5">
|
||||
<img alt="Milestone 1 - Laying the foundation for fair web analytics" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
|
||||
</figure>
|
||||
|
||||
|
||||
###### 12 Dec 2019, Hendrik Niefeld
|
||||
@ -21,24 +21,18 @@ We have further refined the existing application architecture to make it more ro
|
||||
|
||||
### 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.
|
||||
<div class="mb5">
|
||||
<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>
|
||||
[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="yellow"}
|
||||
|
||||
### 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.
|
||||
<div class="mb5">
|
||||
<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>
|
||||
[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="yellow"}
|
||||
|
||||
### 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.
|
||||
<div class="mb5">
|
||||
<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>
|
||||
[Get in touch](mailto:hioffen@posteo.de){: data-button="yellow"}
|
||||
|
||||
### 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.
|
||||
@ -53,6 +47,4 @@ 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.
|
||||
<div class="mb5">
|
||||
<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>
|
||||
[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="black"}
|
||||
|
||||
@ -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'],
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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-500.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">
|
||||
{% 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"> <!-- menu -->
|
||||
<div class="menu w-100 cclr-mid-yellow">
|
||||
<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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user