offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 09:00:28 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #94 from offen/css_update

Browse Source 
Homepage update
This commit is contained in:
Hendrik Niefeld 2019-09-03 22:14:21 +02:00 committed by GitHub
commit 2db9a1ec5b
33 changed files with 2130 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.circleci/config.yml
View File

@ -378,7 +378,7 @@ jobs:
deploy_homepage: deploy_homepage:
docker: docker:
- image: circleci/python:3.6 - image: circleci/python:3.6-node
working_directory: ~/offen/homepage working_directory: ~/offen/homepage
environment: environment:
- SOURCE_BRANCH: master - SOURCE_BRANCH: master
@ -398,6 +398,11 @@ jobs:
paths: paths:
- ~/offen/homepage/venv - ~/offen/homepage/venv
key: offen-homepage-{{ checksum "requirements.txt" }} key: offen-homepage-{{ checksum "requirements.txt" }}
- run:
name: Install image optimization deps
command: |
npm install svgo -g
sudo apt-get install libjpeg-progs optipng
- run: - run:
name: Deploy name: Deploy
command: | command: |

4
homepage/content/pages/deep-dive.md
View File

@ -3,9 +3,11 @@ description: offen is a free and open source analytics software for websites and
save_as: deep-dive/index.html save_as: deep-dive/index.html
href: /deep-dive/ href: /deep-dive/
## Deep dive
### What is this thing called "my data" and why does seemingly everyone want to get hold of it? ### What is this thing called "my data" and why does seemingly everyone want to get hold of it?
It has a ring, gives a slight spine-chilling sensation and generates a whole lot of clicks: consumer magazines like German "Computer Bild" caution about "Google espionage" [^1] just like the internet has countless tutorials on turning off numerous "data leeches" [^2]. Interestingly, diving into these realms will have you accidentally catching the next toolbar, malware infection or even worse [^3]. It has a ring, gives a slight spine-chilling sensation and generates a whole lot of clicks: consumer magazines like German "Computer Bild" caution about "Google espionage" [^1] just like the internet has countless tutorials on turning off numerous "data leeches"[^2]. Interestingly, diving into these realms will have you accidentally catching the next toolbar, malware infection or even worse [^3].
[^1]: Gegen Google-Spionage wehren <https://www.computerbild.de/artikel/cb-Ratgeber-Kurse-Wissen-Was-weiss-Google-ueber-Sie-2799009.html> [^1]: Gegen Google-Spionage wehren <https://www.computerbild.de/artikel/cb-Ratgeber-Kurse-Wissen-Was-weiss-Google-ueber-Sie-2799009.html>
[^2]: Datenkrake Windows 10: So schalten Sie auff&auml;llige Funktionen ab <https://praxistipps.chip.de/datenkrake-windows-10-so-schalten-sie-auffaellige-funktionen-ab_99652> [^2]: Datenkrake Windows 10: So schalten Sie auff&auml;llige Funktionen ab <https://praxistipps.chip.de/datenkrake-windows-10-so-schalten-sie-auffaellige-funktionen-ab_99652>

11
homepage/content/pages/index.md
View File

@ -2,11 +2,18 @@ Title: Transparent web analytics | offen
description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
save_as: index.html save_as: index.html
href: / href: /
template: index
## Summary
__offen__ is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also *the users themselves are granted access to and ownership of their data*. __offen__ is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also *the users themselves are granted access to and ownership of their data*.
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. __offen__ also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether. Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. __offen__ also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
__offen__ treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and their data. __offen__ treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and data.
__offen__ is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can visit the [auditorium](https://auditorium-alpha.offen.dev) to access your data. __offen__ is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can *visit the [auditorium](https://auditorium-alpha.offen.dev){: target="_blank"}* to access your data.
<div class="btn-wrapper">
<a class="btn btn-color-yellow" href="/deep-dive/">Deep dive</a>
</div>

2
homepage/content/pages/opt-out.md
View File

@ -2,7 +2,7 @@ Title: Opt-out | offen
description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
save_as: opt-out/index.html save_as: opt-out/index.html
### You are opted out ## You are opted out
This will prevent __offen__ from aggregating the actions you have taken on participating websites. This will prevent __offen__ from aggregating the actions you have taken on participating websites.

9
homepage/content/pages/status.md
View File

@ -3,10 +3,11 @@ description: offen is a free and open source analytics software for websites and
save_as: status/index.html save_as: status/index.html
href: /status/ href: /status/
### Current status ## Project status
#### July 2019 ### September 2019
We have deployed an alpha version of __offen__ that we are currently testing on a few select sites. Usage data is collected and can be accessed by both users and site operators. Users can opt out and delete their data at any time. You can *follow the development at [github.com/offen/offen](https://github.com/offen/offen)*
We have deployed an alpha version of __offen__ that we are currently testing on a few select sites. Usage data is collected and can be accessed by both users and site operators. Users can opt out and delete their data at any time. You can *follow the development at [github.com/offen/offen](https://github.com/offen/offen){: target="_blank"}*
--- ---
@ -29,4 +30,4 @@ Our product story is based on three key questions. What makes __offen__ stand ou
#### Publicity #### Publicity
This product story is the starting point for publicty efforts that will start as soon as a beta version is available. They include own blog posts, forum marketing as well as SEO measures. This product story is the starting point for publicity efforts that will start as soon as a beta version is available. They include own blog posts, forum marketing as well as SEO measures.

2
homepage/docker-compose.yml
View File

@ -12,6 +12,8 @@ services:
command: make devserver command: make devserver
ports: ports:
- 8000:8000 - 8000:8000
environment:
DEBUG: '1'
volumes: volumes:
homepagedeps: homepagedeps:

5
homepage/pelicanconf.py
View File

@ -4,12 +4,10 @@ from __future__ import unicode_literals
import logging import logging
# If your site is available via HTTPS, make sure SITEURL begins with https:// # If your site is available via HTTPS, make sure SITEURL begins with https://
#SITEURL = 'https://www.offen.dev'
RELATIVE_URLS = False RELATIVE_URLS = False
AUTHOR = 'offen' AUTHOR = 'offen'
SITENAME = 'offen' SITENAME = 'offen'
SITEURL = 'https://www.offen.dev'
PATH = 'content' PATH = 'content'
TIMEZONE = 'Europe/Berlin' TIMEZONE = 'Europe/Berlin'
DEFAULT_LANG = 'en' DEFAULT_LANG = 'en'
@ -30,6 +28,9 @@ THEME = './theme'
# Delete the output directory before generating new files. # Delete the output directory before generating new files.
DELETE_OUTPUT_DIRECTORY = True DELETE_OUTPUT_DIRECTORY = True
PLUGIN_PATHS = ['./plugins']
PLUGINS = ['assets']
# dont create following standard pages # dont create following standard pages
AUTHORS_SAVE_AS = None AUTHORS_SAVE_AS = None
ARCHIVES_SAVE_AS = None ARCHIVES_SAVE_AS = None

106
homepage/plugins/assets/Readme.rst Normal file
View File

@ -0,0 +1,106 @@
Asset management
----------------
This plugin allows you to use the `Webassets`_ module to manage assets such as
CSS and JS files. The module must first be installed::
pip install webassets
The Webassets module allows you to perform a number of useful asset management
functions, including:
* CSS minifier (``cssmin``, ``yui_css``, ...)
* CSS compiler (``less``, ``sass``, ...)
* JS minifier (``uglifyjs``, ``yui_js``, ``closure``, ...)
Others filters include CSS URL rewriting, integration of images in CSS via data
URIs, and more. Webassets can also append a version identifier to your asset
URL to convince browsers to download new versions of your assets when you use
far-future expires headers. Please refer to the `Webassets documentation`_ for
more information.
When used with Pelican, Webassets is configured to process assets in the
``OUTPUT_PATH/theme`` directory. You can use Webassets in your templates by
including one or more template tags. The Jinja variable ``{{ ASSET_URL }}`` can
be used in templates and is relative to the ``theme/`` url. The
``{{ ASSET_URL }}`` variable should be used in conjunction with the
``{{ SITEURL }}`` variable in order to generate URLs properly. For example:
.. code-block:: jinja
{% assets filters="cssmin", output="css/style.min.css", "css/inuit.css", "css/pygment-monokai.css", "css/main.css" %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %}
... will produce a minified css file with a version identifier that looks like:
.. code-block:: html
<link href="http://{SITEURL}/theme/css/style.min.css?b3a7c807" rel="stylesheet">
These filters can be combined. Here is an example that uses the SASS compiler
and minifies the output:
.. code-block:: jinja
{% assets filters="sass,cssmin", output="css/style.min.css", "css/style.scss" %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %}
Another example for Javascript:
.. code-block:: jinja
{% assets filters="uglifyjs", output="js/packed.js", "js/jquery.js", "js/base.js", "js/widgets.js" %}
<script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
{% endassets %}
The above will produce a minified JS file:
.. code-block:: html
<script src="http://{SITEURL}/theme/js/packed.js?00703b9d"></script>
Pelican's debug mode is propagated to Webassets to disable asset packaging
and instead work with the uncompressed assets.
If you need to create named bundles (for example, if you need to compile SASS
files before minifying with other CSS files), you can use the ``ASSET_BUNDLES``
variable in your settings file. This is an ordered sequence of 3-tuples, where
the 3-tuple is defined as ``(name, args, kwargs)``. This tuple is passed to the
`environment's register() method`_. The following will compile two SCSS files
into a named bundle, using the ``pyscss`` filter:
.. code-block:: python
ASSET_BUNDLES = (
('scss', ['colors.scss', 'main.scss'], {'filters': 'pyscss'}),
)
Many of Webasset's available compilers have additional configuration options
(i.e. 'Less', 'Sass', 'Stylus', 'Closure_js'). You can pass these options to
Webassets using the ``ASSET_CONFIG`` in your settings file.
The following will handle Google Closure's compilation level and locate
LessCSS's binary:
.. code-block:: python
ASSET_CONFIG = (('closure_compressor_optimization', 'WHITESPACE_ONLY'),
('less_bin', 'lessc.cmd'), )
If you wish to place your assets in locations other than the theme output
directory, you can use ``ASSET_SOURCE_PATHS`` in your settings file to provide
webassets with a list of additional directories to search, relative to the
theme's top-level directory:
.. code-block:: python
ASSET_SOURCE_PATHS = [
'vendor/css',
'scss',
]
.. _Webassets: https://github.com/miracle2k/webassets
.. _Webassets documentation: http://webassets.readthedocs.org/en/latest/builtin_filters.html
.. _environment's register() method: http://webassets.readthedocs.org/en/latest/environment.html#registering-bundles

1
homepage/plugins/assets/__init__.py Normal file
View File

@ -0,0 +1 @@
from .assets import *

75
homepage/plugins/assets/assets.py Normal file
View File

@ -0,0 +1,75 @@
# -*- coding: utf-8 -*-
"""
Asset management plugin for Pelican
===================================
This plugin allows you to use the `webassets`_ module to manage assets such as
CSS and JS files.
The ASSET_URL is set to a relative url to honor Pelican's RELATIVE_URLS
setting. This requires the use of SITEURL in the templates::
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
.. _webassets: https://webassets.readthedocs.org/
"""
from __future__ import unicode_literals
import os
import logging
from pelican import signals
logger = logging.getLogger(__name__)
try:
import webassets
from webassets import Environment
from webassets.ext.jinja2 import AssetsExtension
except ImportError:
webassets = None
def add_jinja2_ext(pelican):
"""Add Webassets to Jinja2 extensions in Pelican settings."""
if 'JINJA_ENVIRONMENT' in pelican.settings: # pelican 3.7+
pelican.settings['JINJA_ENVIRONMENT']['extensions'].append(AssetsExtension)
else:
pelican.settings['JINJA_EXTENSIONS'].append(AssetsExtension)
def create_assets_env(generator):
"""Define the assets environment and pass it to the generator."""
theme_static_dir = generator.settings['THEME_STATIC_DIR']
assets_destination = os.path.join(generator.output_path, theme_static_dir)
generator.env.assets_environment = Environment(
assets_destination, theme_static_dir)
if 'ASSET_CONFIG' in generator.settings:
for item in generator.settings['ASSET_CONFIG']:
generator.env.assets_environment.config[item[0]] = item[1]
if 'ASSET_BUNDLES' in generator.settings:
for name, args, kwargs in generator.settings['ASSET_BUNDLES']:
generator.env.assets_environment.register(name, *args, **kwargs)
if 'ASSET_DEBUG' in generator.settings:
generator.env.assets_environment.debug = generator.settings['ASSET_DEBUG']
elif logging.getLevelName(logger.getEffectiveLevel()) == "DEBUG":
generator.env.assets_environment.debug = True
for path in (generator.settings['THEME_STATIC_PATHS'] +
generator.settings.get('ASSET_SOURCE_PATHS', [])):
full_path = os.path.join(generator.theme, path)
generator.env.assets_environment.append_path(full_path)
def register():
"""Plugin registration."""
if webassets:
signals.initialized.connect(add_jinja2_ext)
signals.generator_init.connect(create_assets_env)
else:
logger.warning('`assets` failed to load dependency `webassets`.'
'`assets` plugin not loaded.')

28
homepage/plugins/optimize_images/Readme.md Normal file
View File

@ -0,0 +1,28 @@
Optimize Images Plugin For Pelican
==================================
This plugin applies lossless compression on JPEG, PNG and SVG images, with no
effect on image quality via [jpegtran][], [OptiPNG][] and [svgo][] respectively.
The plugin assumes that all of these tools are installed, with associated
executables available on the system path.
[jpegtran]: http://jpegclub.org/jpegtran/
[OptiPNG]: http://optipng.sourceforge.net/
[SVGO]: https://github.com/svg/svgo
Installation
------------
To enable, ensure that `optimize_images.py` is put somewhere that is accessible.
Then use as follows by adding the following to your settings.py:
PLUGIN_PATH = 'path/to/pelican-plugins'
PLUGINS = ["optimize_images"]
`PLUGIN_PATH` can be a path relative to your settings file or an absolute path.
Usage
-----
The plugin will activate and optimize images upon `finalized` signal of
Pelican.

1
homepage/plugins/optimize_images/__init__.py Normal file
View File

@ -0,0 +1 @@
from .optimize_images import *

61
homepage/plugins/optimize_images/optimize_images.py Normal file
View File

@ -0,0 +1,61 @@
# -*- coding: utf-8 -*-
"""
Optimized images (jpg and png)
Assumes that jpegtran and optipng are isntalled on path.
http://jpegclub.org/jpegtran/
http://optipng.sourceforge.net/
Copyright (c) 2012 Irfan Ahmad (http://i.com.pk)
"""
import logging
import os
from subprocess import call
from pelican import signals
logger = logging.getLogger(__name__)
# Display command output on DEBUG and TRACE
SHOW_OUTPUT = logger.getEffectiveLevel() <= logging.DEBUG
# A list of file types with their respective commands
COMMANDS = {
# '.ext': ('command {flags} {filename', 'silent_flag', 'verbose_flag')
'.svg': ('svgo {flags} --input="{filename}" --output="{filename}"', '--quiet', ''),
'.jpg': ('jpegtran {flags} -copy none -optimize -outfile "{filename}" "{filename}"', '', '-v'),
'.png': ('optipng {flags} "{filename}"', '--quiet', ''),
}
def optimize_images(pelican):
"""
Optimized jpg and png images
:param pelican: The Pelican instance
"""
for dirpath, _, filenames in os.walk(pelican.settings['OUTPUT_PATH']):
for name in filenames:
if os.path.splitext(name)[1] in COMMANDS.keys():
optimize(dirpath, name)
def optimize(dirpath, filename):
"""
Check if the name is a type of file that should be optimized.
And optimizes it if required.
:param dirpath: Path of the file to be optimzed
:param name: A file name to be optimized
"""
filepath = os.path.join(dirpath, filename)
logger.info('optimizing %s', filepath)
ext = os.path.splitext(filename)[1]
command, silent, verbose = COMMANDS[ext]
flags = verbose if SHOW_OUTPUT else silent
command = command.format(filename=filepath, flags=flags)
call(command, shell=True)
def register():
signals.finalized.connect(optimize_images)

5
homepage/publishconf.py
View File

@ -19,9 +19,6 @@ CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml'
DELETE_OUTPUT_DIRECTORY = True DELETE_OUTPUT_DIRECTORY = True
# Following items are often useful when publishing PLUGINS += ['optimize_images']
#DISQUS_SITENAME = ""
#GOOGLE_ANALYTICS = ""
OFFEN_ACCOUNT_ID = "5ec8345a-2a45-4eb9-92e5-8d9e5684db58" OFFEN_ACCOUNT_ID = "5ec8345a-2a45-4eb9-92e5-8d9e5684db58"

2
homepage/requirements.txt
View File

@ -1,2 +1,4 @@
pelican==4.0.1 pelican==4.0.1
markdown==3.1.1 markdown==3.1.1
webassets==0.12.1
cssmin==0.2.0

349
homepage/theme/static/css/normalize.css vendored Normal file
View File

@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

582
homepage/theme/static/css/style.css
View File

@ -1,9 +1,579 @@
section {
display: flex;
flex-flow: column; /* ---------------------------------------------------
ROOTS
----------------------------------------------------*/
:root {
--yellow-mid: #F7BF08;
--yellow-bright: #fde28c;
--mint-mid: #BBD9D3;
--black-mid: #39352A;
--grey-mid: #898989;
--grey-bright: #D5D5D5;
--white: #FFF;
} }
section .footnote {
padding-top: 30px; /* ---------------------------------------------------
order: 100; BASICS
----------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ---------------------------------------------------
LAYOUT & SPACER
----------------------------------------------------*/
.menu {
width: 100%;
height: 70px;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: var(--yellow-mid);
}
.intro {
width: 100%;
margin: 70px 0 0 0;
background-color: var(--yellow-mid);
}
.feature {
width: 100%;
}
.cta-top {
width: 100%;
color: var(--yellow-mid);
}
.content {
width: 100%;
margin: 70px 0 0 0;
background-color: var(--white);
}
.content-index {
width: 100%;
background-color: var(--white);
}
.cta-bottom,
.outro {
width: 100%;
}
.footer {
width: 100%;
min-height: 300px;
color: var(--grey-mid);
background-color: var(--black-mid);
}
.spacer-intro {
width: 430px;
}
.spacer-right {
width: 400px;
margin: 0 0 0 auto;
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.container-reader {
width: 600px;
margin: 0 auto;
padding: 60px 20px 120px 20px;
}
.container-full {
padding: 60px 80px 120px 80px;
}
.footer {
padding: 40px 40px 0 40px;
}
}
/* Mobile Styles */
@media only screen and (min-width: 600px) and (max-width: 960px) {
.container-reader,
.container-full {
width: 600px;
margin: 0 auto;
padding: 60px 20px 120px 20px;
}
}
@media only screen and (max-width: 960px) {
.container-reader,
.container-full,
.footer {
padding: 60px 20px 120px 20px;
}
}
/* Mobile Styles*/
@media only screen and (max-width: 480px) {
.menu {
position: static;
}
.intro {
margin: 0;
}
.content {
margin: 0;
}
.spacer-intro {
width: 300px;
}
.spacer-right {
width: 100%;
margin: 0;
}
}
/* ---------------------------------------------------
CARDS
----------------------------------------------------*/
.card-deck,
.card,
.footer-card-deck {
display: flex;
}
.card {
max-width: 300px;
color: var(--black-mid);
}
.card h2,
.card p {
text-align: center;
}
.footer-card p {
margin: 0 0 2px 0;
}
.footer-card:nth-child(1),
.footer-card:nth-child(2) {
margin: 0 0 20px 0;
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
.card-deck,
.card,
.footer-card-deck {
flex-direction: column;
}
.card {
align-self: center;
}
.card:nth-child(2) {
margin: 100px 0 100px 0;
}
.footer-card {
text-align: center;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.card-deck,
.footer-card-deck {
flex-direction: row;
}
.card {
flex-direction: column;
}
.card-deck {
justify-content: space-evenly;
}
.card:nth-child(2) {
margin: 0 40px 0 40px;
}
.footer-card-deck {
justify-content: space-between;
}
.footer-card:nth-child(1),
.footer-card:nth-child(2) {
flex-grow: 1;
}
.footer-card:nth-child(3) {
text-align: right;
flex-grow: 10;
}
}
/* ---------------------------------------------------
TYPO
----------------------------------------------------*/
body {
background-color: var(--white);
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
word-wrap: break-word;
color: var(--grey-mid);
}
h1,
h2 {
font-weight: 700;
line-height: 1.3;
color: var(--black-mid);
}
h3,
h4 {
font-size: 14px;
font-weight: 400;
color: var(--black-mid);
}
h3 {
margin: 0 0 20px 0;
}
p + h3 {
margin: 60px 0 20px 0;
}
h4 {
color: var(--grey-mid);
}
/* Desktop Styles */
@media only screen and (min-width: 481px) {
h1,
h2{
font-size: 30px;
}
h1 {
margin: 20px 0 10px 0;
}
}
/* Mobile Styles */
@media only screen and (max-width: 480px) {
h1,
h2 {
font-size: 22px;
}
}
/* ---------------------------------------------------
LINKS
----------------------------------------------------*/
a,
a:hover,
a:focus {
color: var(--grey-mid);
text-decoration: none;
}
p a,
p a:hover,
p a:focus {
font-weight: 700;
}
ol li p a,
ol li p a:hover,
ol li p a:focus {
color: var(--grey-bright);
}
.footer a,
.footer a:hover,
.footer a:focus {
font-weight: 400;
}
/* ---------------------------------------------------
TYPO ELEMENTS
----------------------------------------------------*/
h1 + p {
color: var(--black-mid);
}
.bg h2 {
margin: 0 0 10px 0;
}
#bg-cta-top h2,
#bg-cta-top p,
#bg-cta-top .btn-wrapper,
#bg-outro h2,
#bg-outro p,
#bg-outro .btn-wrapper {
text-align: right;
}
#bg-cta-bottom .btn-wrapper {
text-align: center;
}
#bg-cta-top h2,
#bg-cta-top p {
color: var(--white);
}
#bg-outro h2,
#bg-outro p {
color: var(--black-mid);
}
strong,
h1 + p strong,
.bg strong {
font-weight: 700;
}
.container-reader h2 {
margin: 0 0 20px 0;
color: var(--grey-bright);
}
strong,
h3 strong {
text-decoration: none;
font-weight: 400;
color: var(--black-mid);
}
.cta-top strong {
color: var(--white);
}
.content-index p,
.content p {
margin: 0 0 20px 0;
}
hr {
height: 0;
margin: 80px 0 20px 0;
border-top: 1px solid var(--grey-bright);
}
blockquote {
margin: 0;
padding: 0 0 0 20px;
font-style: italic;
border-left: 1px solid var(--grey-bright);
}
ol {
padding-inline-start: 20px;
}
em {
background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
font-style: normal;
}
.footer-card h3 strong {
font-weight: 700;
color: var(--yellow-mid);
}
.footer h3,
.footer h4 {
color: var(--yellow-mid);
margin: 0 0 2px 0;
}
.footnote {
color: var(--grey-bright);
}
/* reposition for fixed menu */
.footnote li {
margin-top: -75px;
padding-top: 75px;
}
/* ---------------------------------------------------
BUTTONS
----------------------------------------------------*/
.btn-wrapper {
margin: 40px 0 0 0;
}
.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
padding: 8px 30px;
text-align: center;
text-decoration: none;
}
.btn-color-yellow,
.btn-color-yellow:visited,
.btn-color-yellow:link,
.btn-color-yellow:hover,
.btn-color-yellow:active {
font-weight: 700;
color: var(--yellow-mid);
border: solid var(--yellow-mid) 5px;
}
.btn-color-black,
.btn-color-black:visited,
.btn-color-black:link,
.btn-color-black:hover,
.btn-color-black:active {
font-weight: 700;
color: var(--black-mid);
border: solid var(--black-mid) 5px;
}
.btn-color-white,
.btn-color-white:visited,
.btn-color-white:link,
.btn-color-white:hover,
.btn-color-white:active {
font-weight: 700;
color: var(--white);
border: solid var(--white) 5px;
}
/* ---------------------------------------------------
MENU
----------------------------------------------------*/
.nav-list {
margin: 0 0 40px 0;
}
.nav-bar {
height: 70px;
}
.brand {
position: absolute;
padding: 12px 0 0 20px;
float: left;
line-height: 70px;
}
body.index .brand {
opacity: 0;
}
.nav-container {
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: var(--yellow-mid);
color: var(--black-mid);
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: var(--black-mid);
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 150px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: var(--yellow-mid);
height: 70px;
width: 70px;
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
nav ul li:last-child a {
padding-bottom: 60px;
}
nav ul li:last-child a {
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
}
.nav-dropdown {
position: static;
}
}
/* Desktop Styles */
@media screen and (min-width: 961px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 12px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 2px;
width: 35px;
background: var(--black-mid);
position: absolute;
display: block;
content: '';
/*
transition: all 300ms ease-in-out;
*/
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
/* ---------------------------------------------------
GRAPHICS
----------------------------------------------------*/
#bg-intro {
background: url(/theme/images/gfx-intro.svg) no-repeat center;
}
/*-------------------------*/
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
}
/*-------------------------*/
#bg-cta-top {
background: url(/theme/images/gfx-object-white.svg) center;
}
/*-------------------------*/
#bg-outro {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
/*-------------------------*/
#bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
} }

56
homepage/theme/static/images/gfx-intro.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

493
homepage/theme/static/images/gfx-object-white.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

12
homepage/theme/static/images/gfx-pattern-mint-bright.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

12
homepage/theme/static/images/gfx-pattern-yellow-bright.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

111
homepage/theme/static/images/logo.svg
View File

@ -1,111 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="165"
height="102"
viewBox="0 0 43.656248 26.9875"
version="1.1"
id="svg876"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="logo.svg">
<defs
id="defs870" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284271"
inkscape:cx="17.025315"
inkscape:cy="35.503545"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showguides="false"
units="px"
inkscape:window-width="1957"
inkscape:window-height="829"
inkscape:window-x="42"
inkscape:window-y="72"
inkscape:window-maximized="0" />
<metadata
id="metadata873">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-270.01246)">
<g
transform="matrix(0.93794678,0,0,0.93794678,0.15285618,18.564905)"
id="g1419"
inkscape:label="Layer 1"
style="fill:#f7bf08;fill-opacity:1">
<g
id="g1417"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24.30451775px;line-height:1.25;font-family:'Caveat Brush';-inkscape-font-specification:'Caveat Brush, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f7bf08;fill-opacity:1;stroke:none;stroke-width:0.60761291"
aria-label="offen">
<path
id="path1409"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24.30451775px;font-family:'Caveat Brush';-inkscape-font-specification:'Caveat Brush, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f7bf08;fill-opacity:1;stroke-width:0.60761291"
d="m 5.0254636,287.97574 q -0.1701317,-0.97218 -0.9478762,-0.89927 -0.4374813,0.0243 -0.7534401,0.58331 -0.4374813,0.85066 -0.3888723,2.21171 0.072914,1.33675 0.1944362,1.94436 0.1458271,0.58331 0.4860903,1.02079 0.1944362,0.34026 0.5833085,0.31596 0.6805265,0 0.9964852,-1.14231 l 0.1944361,-0.58331 q 0.1215226,-0.12152 0.048609,-0.24305 0.2430452,-0.60761 0.2673497,-1.43396 -0.2430452,-0.17014 -0.2916542,-0.31596 -0.1458272,-0.41318 -0.1458272,-0.55901 -0.1701316,-0.12152 -0.1944361,-0.46178 -0.024305,-0.34027 -0.048609,-0.43748 z m -4.44772678,2.28462 0.0972181,-1.23953 q 0.17013163,-1.67701 1.02078968,-2.86793 0.8263536,-0.99649 2.3332337,-1.02079 h 0.1458271 q 1.4096621,0 2.0415795,0.60761 0.6805265,0.5347 0.9964853,1.16662 0.3402632,0.63191 0.4374813,0.92357 0.097218,0.29165 0.1215226,0.85066 0.048609,1.04509 -0.4131768,1.19092 0.3402632,2.30893 -0.4131768,3.66998 -0.2430452,0.559 -0.704831,1.21523 -0.3402633,0.43748 -1.2152259,0.48609 -0.8749627,0 -1.5311846,-0.0972 -0.6319175,-0.0972 -1.4096621,-0.60761 -0.7777445,-0.5347 -1.09370324,-1.72562 -0.34026325,-1.14232 -0.41317681,-2.55198 z"
inkscape:connector-curvature="0" />
<path
id="path1411"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24.30451775px;font-family:'Caveat Brush';-inkscape-font-specification:'Caveat Brush, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f7bf08;fill-opacity:1;stroke-width:0.60761291"
d="m 15.447545,285.52098 0.48609,-0.0243 q 0.704831,0 2.284625,-0.31596 0.04861,-0.19444 0.04861,-0.43748 l 0.121522,-0.60762 q 0,-0.24304 0.145827,-0.87496 0,-0.31596 0.09722,-0.60761 0,-0.24305 0.07291,-0.63192 0.07291,-0.41318 0.121523,-0.89927 0.07291,-0.0972 0.07291,-0.29165 0.0243,-0.21874 0.09722,-0.46179 -0.656222,-0.14583 -1.482575,-0.19443 -1.118008,0.14582 -1.239531,0.26735 -0.534699,0.46178 -0.729135,0.80204 -0.218741,0.36457 -0.510395,1.19093 -0.121523,0.0486 -0.194436,0.38887 -0.04861,0.38887 -0.26735,0.97218 -0.170132,0.46178 -0.291654,1.0694 -0.121523,0.58331 -0.04861,0.70483 0.243045,0 0.388872,-0.0243 0.170132,-0.17013 0.826354,-0.0243 z m 4.909512,4.76369 q -0.07291,0.60761 -0.04861,0.72913 l -0.07291,0.5104 v 0.43748 q 0.04861,1.43396 0.09722,2.01727 0.121522,0.48609 0.121522,0.72914 0,0.43748 -0.680526,0.70483 -0.413177,0.17013 -0.923572,0.17013 -0.510395,0 -0.75344,-0.38887 l -0.170131,-0.58331 -0.09722,-0.559 -0.07291,-0.19444 q 0,-0.12152 -0.07291,-0.34026 l -0.04861,-0.68053 q 0,-0.58331 0.0243,-1.02079 v -0.17013 q 0,-0.0972 0.04861,-0.29166 0.07291,-0.19443 0.0243,-0.46178 0.145827,-1.23953 0.121523,-1.55549 0,-0.31596 0.04861,-0.65622 0.04861,-0.36457 0,-0.72914 0.121523,-0.43748 0.170132,-0.85066 -0.461786,-0.0243 -1.579794,0.0486 -1.215226,0.0729 -2.600583,0.34027 -0.09722,0.29165 -0.121523,0.68052 -0.02431,0.38887 -0.07291,0.99649 -0.04861,0.58331 -0.04861,0.87496 v 0.82635 q -0.07291,0.55901 -0.04861,0.72914 l -0.07291,0.51039 v 0.43749 q 0.04861,1.43396 0.09722,1.99297 0.121522,0.48609 0.121522,0.75344 0,0.41317 -0.680526,0.70483 -0.534699,0.14582 -0.996485,0.14582 -0.437482,0 -0.680527,-0.36456 l -0.170131,-0.58331 -0.09722,-0.58331 -0.07291,-0.19444 q 0,-0.0972 -0.07291,-0.31596 l -0.04861,-0.68052 q 0,-0.60761 0.02431,-1.02079 v -0.17013 q 0,-0.0972 0.04861,-0.29166 0.07291,-0.19443 0.0243,-0.48609 0.145828,-1.21522 0.121523,-1.55549 0,-0.34026 0.04861,-0.65622 0.04861,-0.34026 0,-0.70483 0.07291,-0.34026 0.09722,-0.38887 0.02431,-0.0729 0.07291,-0.46179 h -0.826354 q -0.5833083,0 -0.7291354,-0.0243 -0.704831,0 -0.8992672,-0.38887 -0.1458271,-0.41318 0.1944362,-0.92358 0.048609,-0.12152 0.4131768,-0.14582 0.5590036,0 1.9929706,-0.29166 0.04861,-0.19443 0.04861,-0.34026 l 0.121522,-0.85066 q 0,-0.21874 0.145828,-0.87496 0,-0.31596 0.09722,-0.60761 0,-0.21875 0.07291,-0.72914 0.194436,-0.99649 0.218741,-1.48258 0.170131,-0.31595 0.194436,-0.41317 -0.09722,-0.12153 0.07291,-0.34027 l 0.07291,-0.14582 q 0.04861,-0.29166 0.680527,-0.89927 l 0.631917,-0.36457 q 0.145827,-0.19443 1.166617,-0.51039 0.218741,-0.12153 0.923572,0.0972 0.07291,0.0243 0.413176,0 0.364568,-0.0243 0.559004,0.0486 0.194436,0.0729 0.26735,0.0729 l 0.559004,0.0729 q 1.118008,0.36457 1.604098,0.68053 0.145827,-0.24305 0.388872,-0.46179 0.243046,-0.24304 0.388873,-0.29165 l 0.437481,-0.29166 q 0.26735,-0.29165 1.093703,-0.46178 0.850658,-0.17013 1.458271,0.0243 0.315959,0 0.510395,0.0729 0.194436,0.0729 0.291654,0.0729 l 0.583309,0.0972 q 0.826353,0.34026 0.947876,0.5347 0.121523,0.17013 0.07291,0.34026 -0.291655,0.87496 -1.312444,0.72914 l -1.045095,0.0486 q -0.802049,0.29166 -1.142312,0.99649 -0.413177,0.60761 -0.559004,1.48258 -0.145827,0.85065 -0.218741,1.04509 -0.04861,0.19444 -0.121522,0.43748 -0.07291,0.17013 -0.170132,0.68053 -0.09722,0.48609 -0.0243,0.60761 0.243045,0 0.388872,-0.0243 0.170132,-0.17014 0.826354,-0.0243 l 0.48609,-0.0243 q 1.336748,0 1.628403,0.48609 0.170131,0.24304 -0.02431,0.60761 -0.170131,0.34026 -0.510395,0.46179 l -2.357538,0.29165 -0.75344,0.14583 q -0.121523,0.34026 -0.145827,0.80205 -0.02431,0.46178 -0.07291,0.97218 -0.04861,0.51039 -0.04861,0.77774 z"
inkscape:connector-curvature="0" />
<path
id="path1413"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24.30451775px;font-family:'Caveat Brush';-inkscape-font-specification:'Caveat Brush, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f7bf08;fill-opacity:1;stroke-width:0.60761291"
d="m 29.329981,286.22581 q -0.04861,-0.12152 -0.340263,-0.0972 -0.26735,0.0243 -0.413177,0.29166 -0.996485,1.57979 -1.069399,3.37832 0.826354,0.19444 1.409663,-0.72913 0.75344,-2.38184 0.413176,-2.84363 z m -1.895752,9.64889 -0.243045,-0.0486 -0.340263,-0.34027 q -0.145828,0 -0.218741,-0.12152 -0.26735,-0.31596 -0.972181,-1.26384 l -0.364568,-1.33674 q 0,-0.38888 -0.145827,-0.68053 -0.243045,-1.0937 -0.291654,-1.23953 -0.04861,-0.17013 -0.07291,-0.89927 0,-0.72913 0.07291,-1.0694 0.07291,-0.46178 0.899267,-2.28462 0.218741,-0.21874 0.26735,-0.58331 l 0.388872,-0.559 q 0.5347,-0.63192 1.142313,-0.92358 0,-0.0486 0.826353,-0.24304 0.170132,-0.0243 0.777745,0.12152 1.458271,0.34027 1.822839,0.85066 l 0.07291,0.12152 q 0.461786,0.65622 0.534699,2.01728 -0.07291,0.60761 -0.121522,1.02079 -0.04861,0.41317 -0.5347,1.50688 -0.364567,0.68052 -0.704831,1.0937 -0.534699,0.38887 -0.729135,0.38887 -0.09722,0.0486 -0.413177,0.0486 h -0.559004 q -0.07291,-0.0243 -0.315958,-0.0243 -0.243046,0 -0.704832,-0.12152 0,0.53469 0.291655,1.53118 0.315958,0.97218 0.510395,1.19092 0.510394,0.38887 0.802049,0.5104 0.291654,0.12152 0.777744,0.0486 0.486091,-0.0972 0.704831,-0.34026 l 0.631918,-0.77774 q 0.607613,-0.82636 1.23953,-0.14583 0.291654,0.31596 0.218741,0.63192 -0.04861,0.29165 -0.486091,1.19092 -0.364567,0.58331 -0.777744,0.97218 -0.75344,0.38887 -0.899267,0.38887 -0.218741,0.0243 -0.680527,-0.0729 -0.243045,0.12152 -0.826353,-0.0243 0,-0.0486 -0.145828,-0.0729 -0.121522,0 -0.340263,-0.0729 l 0.04861,-0.0243 q -0.04861,0 -0.291654,0 l -0.680526,-0.36457 z"
inkscape:connector-curvature="0" />
<path
id="path1415"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24.30451775px;font-family:'Caveat Brush';-inkscape-font-specification:'Caveat Brush, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f7bf08;fill-opacity:1;stroke-width:0.60761291"
d="m 39.755481,294.2463 -0.145827,-0.41318 -0.26735,-1.6284 q -0.121522,-0.46178 -0.121522,-0.82635 l 0.09722,-1.0694 q 0,-0.26735 0.0243,-0.29165 -0.291654,0 -0.874962,0.70483 -0.04861,0.0729 -0.145827,0.24304 -1.02079,1.6284 -1.215226,3.91303 -0.194436,0.41318 -0.510395,0.41318 -0.656222,-0.14583 -0.729136,-0.14583 l -0.170131,0.0243 h -0.315959 q -0.559004,-0.0486 -0.729136,-0.43748 -0.09722,-0.12152 -0.09722,-0.63192 v -0.34026 l -0.07291,-1.33675 v -1.99297 q 0,-0.34026 -0.04861,-0.85066 -0.04861,-0.559 -0.0243,-1.74992 0.0243,-1.21523 -0.0243,-1.28814 -0.04861,-0.0972 -0.04861,-0.24305 0,-0.14582 0.07291,-0.29165 0.07291,-0.14583 0.656222,-0.31596 0.315959,-0.19443 0.5347,-0.19443 0.340263,0.0729 0.874962,0.29165 0.364568,0.0729 0.364568,0.70483 0.04861,1.04509 0,1.50688 -0.0243,0.46179 0.0243,1.87145 1.798534,-3.45124 3.208196,-4.15607 0.121523,-0.12153 0.364568,-0.12153 0.243045,0 0.559004,0.24305 0.315958,0.24304 0.437481,0.31596 0.121523,0.0729 0.26735,0.24304 0.170131,0.17013 0.267349,0.21874 0.291655,0.48609 0.121523,2.28463 -0.0243,0.26735 -0.04861,0.48609 -0.0243,0.19443 -0.0243,0.87496 0,0.68053 0.0243,0.94788 0.07291,0.85066 0.07291,0.99648 l 0.121523,0.92357 q 0.243045,0.55901 0.243045,0.87497 0.0243,0.29165 0.437482,0.94787 0.170131,0.36457 -0.145828,0.58331 -0.48609,0.24305 -0.534699,0.19444 -0.0243,-0.0243 -0.26735,0.0486 -0.243045,0.0972 -0.874962,0.0486 -0.315959,-0.0729 -0.631918,-0.38888 l -0.364568,-0.36456 q -0.194436,-0.29166 -0.267349,-0.63192 -0.121523,-0.12152 -0.07291,-0.19444 z"
inkscape:connector-curvature="0" />
</g>
</g>
<g
id="layer1-3"
inkscape:label="Layer 1"
transform="matrix(0.11331872,0,0,0.11331872,26.188505,260.73811)"
style="fill:#f7bf08;fill-opacity:1">
<g
transform="translate(218.54583,-14.816667)"
id="g2026"
style="fill:#f7bf08;fill-opacity:1">
<path
inkscape:connector-curvature="0"
style="fill:#f7bf08;stroke:none;stroke-width:0.26458332;fill-opacity:1"
d="m -120.04445,102.97209 c -5.0673,0.66543 -10.2399,1.16046 -15.08125,2.98503 -2.31801,0.87365 -4.26772,2.46274 -6.34999,3.76872 -3.51923,2.20716 -7.21387,4.57359 -10.00549,7.69012 -2.6108,2.91412 -4.48281,6.69078 -5.88912,10.31478 -1.62676,4.19206 -3.09925,8.78682 -3.73967,13.22917 -0.28356,1.96691 -0.67048,3.79862 -0.42527,5.82083 0.81608,6.72942 5.2337,10.97518 11.06371,13.81972 3.54171,1.72826 6.56828,2.67626 10.58334,2.27462 1.42081,-0.14181 2.81384,-0.53525 4.23333,-0.70749 1.87536,-0.22728 4.01743,-0.25506 5.82083,-0.80936 1.24434,-0.38259 2.26563,-1.1483 3.43958,-1.6727 2.95858,-1.32186 5.8428,-2.55773 8.73125,-4.04416 3.32873,-1.71291 7.00353,-3.0681 10.05417,-5.28611 3.99865,-2.90724 7.14693,-7.86632 9.228667,-12.30577 0.713317,-1.52056 1.024732,-3.1533 1.46685,-4.7625 1.626129,-5.91978 2.2733,-12.1965 -0.201348,-17.99167 -1.131093,-2.64901 -2.927879,-4.60534 -4.937919,-6.61458 -1.36578,-1.36525 -2.77177,-2.72283 -4.49792,-3.63458 -1.97564,-1.04352 -4.44605,-1.36525 -6.61458,-1.74202 -2.29129,-0.39793 -4.5421,-0.6387 -6.87917,-0.33205 z"
id="path821" />
<path
inkscape:connector-curvature="0"
style="fill:#f7bf08;stroke:none;stroke-width:0.26458332;fill-opacity:1"
d="m -87.236113,107.73459 c 0.474398,1.6465 1.360752,3.16997 1.997869,4.7625 1.198033,2.99482 2.078567,6.08542 2.652448,9.26042 1.419489,7.8568 0.639498,16.54096 -2.008452,24.07708 -1.405467,4.00077 -3.471598,7.76896 -5.171811,11.64167 -2.696633,6.14283 -4.963847,12.4423 -10.699221,16.46105 -1.14141,0.79957 -2.46009,1.14618 -3.70417,1.73831 -3.53986,1.68461 -7.73456,3.34407 -11.64166,3.95579 -1.40256,0.2196 -2.8067,-0.31803 -4.23334,-0.11536 -5.20858,0.74057 -10.01156,1.84997 -15.34583,1.48431 -5.99202,-0.41063 -12.2256,-2.15688 -17.4625,-5.11545 -1.72863,-0.97658 -3.41312,-2.01745 -5.02708,-3.17606 -1.22248,-0.87762 -2.31032,-1.94257 -3.70417,-2.53259 1.00682,2.25901 3.10904,3.51393 4.71657,5.29272 3.65559,4.04522 7.32859,8.05763 11.42698,11.67501 4.2635,3.76343 8.24389,8.47804 13.75437,10.45686 3.38984,1.21735 6.7728,1.4605 10.31875,1.70339 2.95778,0.2024 6.02588,0.49265 8.99583,0.19553 5.61763,-0.56145 11.09213,-2.96202 16.139584,-5.34432 3.975629,-1.87669 7.875058,-3.67639 11.067521,-6.82731 5.699389,-5.62478 9.200091,-12.18565 12.162631,-19.53313 1.687777,-4.18544 3.258608,-8.4291 3.712104,-12.96458 0.295275,-2.9509 -0.153458,-6.31085 -0.438944,-9.26042 -0.582083,-6.01319 -1.859227,-11.61944 -4.24471,-17.19792 -1.382448,-3.23321 -3.267869,-6.14389 -4.823354,-9.26042 -1.415786,-2.83686 -3.098007,-5.42687 -5.031317,-7.9375 -0.985044,-1.27926 -1.917435,-2.72812 -3.408098,-3.43958 z"
id="path853" />
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

66
homepage/theme/static/images/offen-brand-white.svg Normal file
View File

@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="42"
height="46"
viewBox="0 0 42 46"
version="1.1"
id="svg6"
sodipodi:docname="logo_circle_only.svg"
style="fill:none"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs10" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1172"
inkscape:window-height="801"
id="namedview8"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="3.6410256"
inkscape:cx="-8.2881522"
inkscape:cy="22.326311"
inkscape:window-x="26"
inkscape:window-y="46"
inkscape:window-maximized="0"
inkscape:current-layer="svg6" />
<path
d="m 19.276441,1.3473483 c -2.2159,0.30175 -4.4779,0.52622 -6.595,1.35358 -1.0136,0.39617 -1.866201,1.11675 -2.7768009,1.70895 -1.5390006,1.00085 -3.1546006,2.07393 -4.3754006,3.487139 -1.1417,1.32142 -1.9603,3.0340197 -2.5753,4.6773207 -0.7114,1.9009 -1.3553,3.9844 -1.6353,5.9988 -0.124,0.8919 -0.2932,1.7225 -0.186,2.6395 0.3569,3.0515 2.2887,4.9768 4.8381,6.2667 1.5488,0.7837 2.8722996,1.2135 4.6281005,1.0314 0.621301,-0.0643 1.230501,-0.2427 1.851201,-0.3208 0.8201,-0.1031 1.7568,-0.1157 2.5454,-0.367 0.5442,-0.1735 0.9908,-0.5207 1.5042,-0.7585 1.2937,-0.5994 2.555,-1.1598 3.8181,-1.8339 1.4557,-0.7767 3.0626,-1.3912 4.3967,-2.397 1.7486,-1.3183 3.1253,-3.567 4.0356,-5.5801 0.312,-0.6895 0.4481,-1.4299 0.6415,-2.1596 0.7111,-2.6844 0.9941,-5.5306008 -0.0881,-8.1584397 -0.4946,-1.20121 -1.2803,-2.08832 -2.1593,-2.99943 -0.5973,-0.61908 -1.2121,-1.23468 -1.9669,-1.64812 -0.864,-0.47319 -1.9443,-0.61908 -2.8926,-0.78993 -1.0019,-0.18044 -1.9862,-0.28962 -3.0082,-0.15057 z"
id="path2"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="m 33.623441,3.5069283 c 0.2075,0.74662 0.5951,1.43745 0.8737,2.15959 0.5239,1.35802 0.9089,2.7594693 1.1599,4.1992188 0.6207,3.5627009 0.2796,7.5006009 -0.8783,10.9179009 -0.6146,1.8142 -1.5181,3.5229 -2.2616,5.279 -1.1793,2.7855 -2.1707,5.642 -4.6788,7.4643 -0.4991,0.3626 -1.0758,0.5198 -1.6198,0.7883 -1.548,0.7639 -3.3823,1.5164 -5.0909,1.7938 -0.6133,0.0995 -1.2273,-0.1443 -1.8512,-0.0523 -2.2777,0.3358 -4.378,0.8388 -6.7107,0.673 -2.6202009,-0.1862 -5.3462015,-0.978 -7.6363015,-2.3196 -0.7559,-0.4429 -1.4925,-0.9148 -2.1983,-1.4402 -0.5346,-0.398 -1.0103,-0.8809 -1.6198,-1.1484 0.4403,1.0243 1.3596,1.5934 2.0625,2.4 1.5986,1.8343 3.2048,3.6538 4.997,5.2941 1.8644005,1.7065 3.6050015,3.8444 6.0148015,4.7417 1.4823,0.552 2.9617,0.6623 4.5123,0.7724 1.2934,0.0918 2.6351,0.2234 3.9339,0.0887 2.4565,-0.2546 4.8505,-1.3431 7.0578,-2.4234 1.7385,-0.851 3.4437,-1.6671 4.8397,-3.0959 2.4924,-2.5506 4.0232,-5.5257 5.3187,-8.8574 0.7381,-1.8979 1.425,-3.8223 1.6233,-5.8789 0.1291,-1.3381 -0.0671,-2.8617 -0.1919,-4.1992 -0.2546,-2.7267 -0.8131,-5.2689 -1.8562,-7.7985 -0.6046,-1.4661 -1.4291,-2.786001 -2.1093,-4.1992005 -0.6191,-1.2863892 -1.3547,-2.4608392 -2.2002,-3.5993092 -0.4307,-0.58008 -0.8384,-1.23708 -1.4903,-1.5597 z"
id="path4"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

8
homepage/theme/static/images/offen-sign-brand-white.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="152" height="94" viewBox="0 0 152 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.9439 64.9889C16.5735 62.8715 15.5416 61.8922 13.8484 62.051C12.8959 62.1039 12.0758 62.7392 11.3879 63.9567C10.4354 65.8094 10.0121 68.2179 10.1179 71.1822C10.2767 74.0936 10.4883 76.211 10.7529 77.5344C11.0704 78.8048 11.5995 79.9164 12.3403 80.8692C12.7636 81.6103 13.3986 81.9543 14.2452 81.9014C15.7268 81.9014 16.8116 80.6575 17.4995 78.1696L18.1344 76.2639C18.399 75.9992 18.4519 75.7346 18.2932 75.4699C18.8223 74.1465 19.1133 72.585 19.1662 70.7852C18.6371 70.4146 18.3196 70.0706 18.2138 69.753C17.8963 68.8531 17.7376 68.2443 17.7376 67.9267C17.3672 67.662 17.1555 67.1591 17.1026 66.4181C17.0497 65.677 16.9968 65.2006 16.9439 64.9889V64.9889ZM2.41895 72.4526L2.73643 68.4032C3.10683 64.7507 4.21802 61.6275 6.07002 59.0337C7.86909 56.8634 10.409 55.7518 13.6896 55.6989H14.1659C17.2349 55.6989 19.4573 56.3605 20.833 57.6839C22.3146 58.8484 23.3994 60.1189 24.0873 61.4952C24.828 62.8715 25.3043 63.8772 25.5159 64.5124C25.7276 65.1476 25.8599 66.074 25.9128 67.2915C26.0186 69.5677 25.5688 70.8646 24.5635 71.1822C25.3043 76.211 24.8545 80.2076 23.2142 83.1719C22.685 84.3894 21.9178 85.7128 20.9124 87.142C20.1716 88.0948 18.8488 88.6242 16.9439 88.73C15.0389 88.73 13.3722 88.6242 11.9435 88.4125C10.5677 88.2008 9.0332 87.5391 7.33995 86.4275C5.6467 85.2629 4.45614 83.3836 3.76825 80.7899C3.02746 78.3019 2.57769 75.5229 2.41895 72.4527L2.41895 72.4526Z" fill="white"/>
<path d="M50.9791 56.9692L52.5665 56.8899C54.101 56.8899 56.588 56.5458 60.0274 55.8577C60.1333 55.4342 60.1862 54.9577 60.1862 54.4284L60.583 52.4434C60.583 51.914 60.7418 50.9612 61.0593 49.5849C61.0593 48.8967 61.1651 48.2351 61.3767 47.5998C61.3767 47.0705 61.4561 46.3823 61.6148 45.5354C61.7736 44.6355 61.9059 43.6562 62.0117 42.5975C62.1704 42.3858 62.2498 42.0682 62.2498 41.6447C62.3027 41.1683 62.4085 40.6654 62.5673 40.136C61.1386 39.8184 59.5247 39.6067 57.7257 39.5008C55.2916 39.8184 53.9423 40.1096 53.6777 40.3743C52.5136 41.3801 51.7199 42.2534 51.2966 42.9945C50.8204 43.7885 50.2648 45.0854 49.6298 46.8852C49.3652 46.991 49.1536 47.4146 48.9948 48.1557C48.889 49.0026 48.598 50.0613 48.1218 51.3317C47.7514 52.3374 47.4339 53.502 47.1693 54.8254C46.9047 56.0958 46.8518 56.8634 47.0106 57.128C47.5397 57.128 47.963 57.1016 48.2805 57.0487C48.6509 56.6781 49.5504 56.6517 50.9791 56.9693L50.9791 56.9692ZM67.0121 72.532C66.8533 73.8554 66.8004 74.6494 66.8533 74.9141L66.6152 76.5815V78.0107C66.7211 81.1338 66.8269 83.3306 66.9327 84.6011C67.1973 85.6598 67.3296 86.4538 67.3296 86.9832C67.3296 87.936 66.5888 88.7036 65.1072 89.2859C64.2076 89.6564 63.2023 89.8416 62.0911 89.8416C60.9799 89.8416 60.1597 89.4182 59.6306 88.5712L59.075 86.6655L58.7575 84.8394L58.5194 84.2041C58.5194 83.9394 58.44 83.5689 58.2813 83.0925L58.1225 80.8692C58.1225 79.5988 58.149 78.4872 58.2019 77.5344V76.9785C58.2019 76.7668 58.2548 76.4492 58.3606 76.0257C58.5194 75.6022 58.5458 75.0993 58.44 74.517C58.7575 71.8174 58.8898 70.1235 58.8369 69.4354C58.8369 68.7472 58.8898 68.0326 58.9956 67.2915C59.1014 66.4975 59.1014 65.7034 58.9956 64.9094C59.2602 63.9566 59.4454 63.0303 59.5512 62.1304C58.5458 62.0774 56.8261 62.1304 54.3921 62.2892C51.7464 62.448 48.9155 62.8185 45.8994 63.4008C45.6877 64.036 45.5554 64.7771 45.5025 65.624C45.4496 66.471 45.3702 67.5562 45.2644 68.8795C45.1586 70.15 45.1057 71.1027 45.1057 71.7379V74.4376C44.9469 75.6551 44.894 76.4492 44.9469 76.8197L44.7088 78.4871V79.9164C44.8147 83.0395 44.9205 85.2099 45.0263 86.4274C45.2909 87.4861 45.4232 88.3065 45.4232 88.8888C45.4232 89.7886 44.6824 90.5562 43.2008 91.1914C42.0367 91.509 40.9519 91.6678 39.9466 91.6678C38.9941 91.6678 38.2533 91.2708 37.7242 90.4768L37.1686 88.5712L36.8511 86.6655L36.613 86.0303C36.613 85.8186 36.5336 85.4745 36.3749 84.9981L36.2161 82.7749C36.2161 81.4515 36.2426 80.3398 36.2955 79.4399V78.8842C36.2955 78.6725 36.3484 78.3548 36.4543 77.9313C36.613 77.5078 36.6395 76.9785 36.5336 76.3432C36.8511 73.6965 36.9834 72.0027 36.9305 71.2616C36.9305 70.5205 36.9834 69.8059 37.0892 69.1177C37.1951 68.3766 37.1951 67.6091 37.0892 66.8151C37.248 66.074 37.3538 65.6506 37.4067 65.5447C37.4596 65.3859 37.539 64.883 37.6448 64.036H34.9462C33.6763 64.036 32.8826 64.0095 32.5651 63.9566C31.0306 63.9566 30.0517 63.5331 29.6283 62.6862C29.3109 61.7863 29.5225 60.7805 30.2633 59.6689C30.3691 59.4042 30.8189 59.2454 31.6126 59.1925C32.8296 59.1925 34.9991 58.8749 38.1211 58.2397C38.2269 57.8162 38.2798 57.4457 38.2798 57.128L38.6766 54.349C38.6766 53.8726 38.8354 52.9198 39.1529 51.4905C39.1529 50.8024 39.2587 50.1407 39.4704 49.5055C39.4704 49.0291 39.5497 48.235 39.7085 47.1234C40.1318 44.9531 40.3699 43.3386 40.4228 42.2799C40.7932 41.5917 41.0049 41.1418 41.0578 40.93C40.8461 40.6654 40.9255 40.2948 41.2959 39.8184L41.534 39.342C41.6398 38.7068 42.3806 37.7275 43.7564 36.4042L45.82 35.2132C46.1375 34.7897 47.4074 34.2338 49.6298 33.5457C50.1061 33.281 51.1114 33.3868 52.6459 33.8632C52.8047 33.9162 53.2544 33.9162 53.9952 33.8632C54.789 33.8103 55.3975 33.8633 55.8208 34.0221C56.2441 34.1808 56.5351 34.2602 56.6939 34.2602L58.5194 34.4983C60.9534 35.2923 62.6996 36.0335 63.7579 36.7216C64.0754 36.1923 64.4987 35.6894 65.0278 35.213C65.557 34.6836 65.9803 34.366 66.2978 34.2601L67.7264 33.3073C68.3085 32.6721 69.4991 32.1692 71.2981 31.7987C73.1501 31.4281 74.7376 31.4547 76.0604 31.8781C76.7483 31.8781 77.3039 31.9575 77.7272 32.1163C78.1505 32.2751 78.468 32.3544 78.6797 32.3544L80.5846 32.6719C82.3836 33.413 83.4155 33.9953 83.68 34.4188C83.9446 34.7893 84.024 35.1599 83.9181 35.5304C83.2832 37.436 81.8545 38.2301 79.6321 37.9125L76.2191 38.0713C74.473 38.7065 73.2295 39.7916 72.4887 41.3267C71.5892 42.6501 70.9806 44.2646 70.6632 46.1703C70.3457 48.0229 70.1076 49.1611 69.9488 49.5846C69.843 50.0081 69.7107 50.4844 69.552 51.0138C69.3932 51.3843 69.208 52.1254 68.9964 53.2371C68.7847 54.2958 68.7583 54.9574 68.917 55.2221C69.4462 55.2221 69.8695 55.1956 70.187 55.1427C70.5574 54.7722 71.4569 54.7456 72.8856 55.0633L74.473 54.9839C77.3833 54.9839 79.1559 55.5132 79.7909 56.5719C80.1613 57.1012 80.1348 57.7629 79.7115 58.5569C79.3411 59.298 78.7855 59.8009 78.0447 60.0656L70.3457 61.0184L67.8852 61.4949C67.6206 62.236 67.4619 63.1093 67.4089 64.1151C67.356 65.1208 67.2766 66.1796 67.1708 67.2912C67.065 68.4028 67.0121 69.2498 67.0121 69.8321L67.0121 72.532Z" fill="white"/>
<path d="M96.3149 59.2719C96.2091 59.0072 95.8387 58.9014 95.2037 58.9544C94.6217 59.0073 94.1719 59.3249 93.8544 59.9072C91.6849 63.3479 90.5208 67.0269 90.3621 70.944C92.1612 71.3675 93.6957 70.5735 94.9656 68.562C96.6059 63.3744 97.0557 60.2778 96.3149 59.272V59.2719ZM90.124 90.7944L89.3303 90.6357L88.2191 89.5241C87.9016 89.5241 87.6635 89.3917 87.5047 89.1271C86.9227 88.4389 85.8644 87.0626 84.3299 84.9981L83.1393 80.6311C83.1393 79.7841 82.9806 79.043 82.6631 78.4078C82.134 76.0257 81.8165 74.6759 81.7106 74.3583C81.6048 73.9877 81.5254 73.0085 81.4725 71.4204C81.4725 69.8324 81.5519 68.6678 81.7106 67.9267C81.8694 66.921 82.8483 64.4331 84.6474 60.463C85.1236 59.9866 85.4146 59.3514 85.5204 58.5574L86.7904 56.7311C87.9545 55.3548 89.198 54.349 90.5208 53.7138C90.5208 53.6079 91.4204 53.3433 93.2194 52.9198C93.5898 52.8669 94.4365 52.9993 95.7593 53.3169C98.9342 54.0579 100.918 54.9843 101.712 56.0959L101.95 56.4929C102.956 57.9221 103.538 60.1189 103.696 63.0832C103.538 64.4066 103.405 65.5182 103.3 66.4181C103.194 67.318 102.612 68.959 101.553 71.341C100.76 72.8232 99.9924 74.0142 99.2516 74.9141C98.0875 75.761 97.2938 76.1846 96.8705 76.1846C96.6588 76.2904 96.2091 76.3433 95.5212 76.3433H93.6957C93.5369 76.2904 93.193 76.2639 92.6638 76.2639C92.1347 76.2639 91.3674 76.1316 90.3621 75.8669C90.3621 77.0315 90.6796 78.6989 91.3145 80.8692C92.0024 82.9866 92.558 84.2835 92.9813 84.7599C94.0925 85.6069 94.9656 86.1627 95.6006 86.4274C96.2355 86.6921 97.0822 86.7449 98.1404 86.5861C99.1987 86.3744 99.966 86.0038 100.442 85.4745L102.506 82.9336C103.829 81.1338 105.178 80.9751 106.554 82.4573C107.189 83.1454 107.427 83.8336 107.268 84.5217C107.162 85.1569 106.633 86.4538 105.681 88.4124C104.887 89.6828 104.04 90.7415 103.141 91.5884C101.5 92.4354 100.522 92.8589 100.204 92.8589C99.7279 92.9118 98.9871 92.8324 97.9817 92.6207C97.4526 92.8854 96.553 92.859 95.2831 92.5414C95.2831 92.4355 95.1243 92.3561 94.8069 92.3032C94.5423 92.3032 94.1719 92.2238 93.6957 92.065L93.8544 91.9856C93.7486 91.9856 93.4311 91.9856 92.902 91.9856L90.6796 90.7945L90.124 90.7944Z" fill="white"/>
<path d="M130.361 85.4746L129.885 84.1248L129.012 78.8048C128.748 77.7991 128.615 76.8992 128.615 76.1051L128.933 72.6115C128.933 72.0292 128.959 71.7117 129.012 71.6587C128.377 71.6587 127.425 72.4262 126.155 73.9613C126.049 74.1201 125.89 74.3847 125.679 74.7553C123.456 78.3019 122.133 82.5632 121.71 87.5391C121.287 88.439 120.731 88.8889 120.043 88.8889C118.615 88.5713 117.821 88.4125 117.662 88.4125L117.107 88.4918H116.075C114.858 88.386 114.064 87.9096 113.694 87.0626C113.482 86.798 113.376 86.1098 113.376 84.9981V83.8866L113.138 79.5194V73.0085C113.138 72.2674 113.085 71.3411 112.979 70.2294C112.873 69.0119 112.847 67.1062 112.9 64.5125C112.953 61.8657 112.926 60.463 112.82 60.3042C112.715 60.0925 112.662 59.8278 112.662 59.5101C112.662 59.1925 112.741 58.875 112.9 58.5574C113.059 58.2398 113.773 57.8956 115.043 57.5251C115.731 57.1016 116.313 56.8899 116.789 56.8899C117.53 57.0487 118.482 57.3663 119.646 57.8428C120.44 58.0015 120.837 58.7691 120.837 60.1454C120.943 62.4216 120.943 64.0625 120.837 65.0683C120.784 66.074 120.811 68.1121 120.916 71.1823C124.832 63.6656 128.324 59.1397 131.393 57.6046C131.658 57.3399 132.055 57.2076 132.584 57.2076C133.113 57.2076 133.722 57.4722 134.409 58.0016C135.097 58.5309 135.574 58.8749 135.838 59.0338C136.103 59.1925 136.394 59.4572 136.711 59.8278C137.082 60.1983 137.373 60.4365 137.584 60.5424C138.219 61.6011 138.352 64.0891 137.981 68.0062C137.928 68.5885 137.875 69.1178 137.822 69.5942C137.769 70.0177 137.743 70.9705 137.743 72.4526C137.743 73.9348 137.769 74.9671 137.822 75.5494C137.981 77.4021 138.06 78.4872 138.06 78.8048L138.457 81.8221C138.986 83.0396 139.251 83.9924 139.251 84.6806C139.304 85.3158 139.78 86.348 140.68 87.7773C141.05 88.5713 140.891 89.2065 140.203 89.6829C139.145 90.2123 138.563 90.424 138.457 90.3181C138.404 90.2652 138.113 90.3181 137.584 90.4768C137.055 90.6885 136.103 90.7415 134.727 90.6357C134.039 90.4769 133.351 90.0534 132.663 89.3652L131.473 88.1742C131.049 87.5389 130.758 86.8509 130.6 86.1098C130.335 85.8451 130.256 85.6333 130.361 85.4745L130.361 85.4746Z" fill="white"/>
<path d="M130.045 2.49149C128.046 2.75414 126.005 2.94952 124.095 3.66968C123.18 4.01451 122.411 4.64172 121.59 5.15719C120.201 6.02836 118.743 6.96239 117.642 8.19248C116.612 9.34269 115.873 10.8333 115.318 12.2637C114.677 13.9183 114.096 15.7319 113.843 17.4853C113.731 18.2616 113.578 18.9846 113.675 19.7828C113.997 22.4389 115.74 24.1147 118.04 25.2374C119.438 25.9195 120.632 26.2937 122.216 26.1352C122.776 26.0792 123.326 25.9239 123.886 25.8559C124.626 25.7662 125.471 25.7553 126.183 25.5365C126.674 25.3855 127.077 25.0833 127.54 24.8763C128.707 24.3545 129.845 23.8667 130.985 23.28C132.298 22.604 133.748 22.0691 134.952 21.1936C136.529 20.0461 137.771 18.0888 138.593 16.3365C138.874 15.7364 138.997 15.0919 139.171 14.4568C139.813 12.1202 140.068 9.64282 139.092 7.35547C138.646 6.3099 137.937 5.53774 137.144 4.74469C136.605 4.20583 136.05 3.66999 135.369 3.31012C134.59 2.89825 133.615 2.77126 132.759 2.62255C131.855 2.46549 130.967 2.37046 130.045 2.49149V2.49149Z" fill="white"/>
<path d="M142.99 4.37125C143.177 5.02112 143.527 5.62243 143.778 6.25101C144.251 7.43306 144.598 8.65292 144.824 9.90609C145.384 13.0072 145.077 16.4348 144.032 19.4093C143.477 20.9884 142.662 22.4757 141.991 24.0043C140.928 26.4288 140.033 28.9152 137.77 30.5014C137.32 30.817 136.799 30.9538 136.309 31.1875C134.912 31.8525 133.257 32.5075 131.715 32.7489C131.162 32.8356 130.608 32.6234 130.045 32.7034C127.99 32.9957 126.095 33.4336 123.991 33.2892C121.626 33.1272 119.167 32.4379 117.101 31.2702C116.419 30.8847 115.754 30.4739 115.117 30.0166C114.635 29.6702 114.206 29.2498 113.656 29.017C114.053 29.9086 114.883 30.4039 115.517 31.106C116.959 32.7026 118.408 34.2863 120.025 35.7141C121.707 37.1995 123.278 39.0604 125.452 39.8414C126.789 40.3219 128.124 40.4179 129.523 40.5138C130.69 40.5937 131.901 40.7082 133.073 40.5909C135.289 40.3693 137.449 39.4218 139.44 38.4815C141.009 37.7408 142.547 37.0305 143.807 35.7868C146.056 33.5667 147.437 30.9771 148.606 28.0771C149.272 26.4251 149.891 24.7501 150.07 22.96C150.187 21.7952 150.01 20.4691 149.897 19.3049C149.667 16.9315 149.164 14.7187 148.222 12.5169C147.677 11.2407 146.933 10.0919 146.319 8.86178C145.761 7.74207 145.097 6.71979 144.334 5.72885C143.946 5.22393 143.578 4.65206 142.99 4.37125V4.37125Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

8
homepage/theme/static/scripts/fade.js Normal file
View File

@ -0,0 +1,8 @@
;(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
var scrollProgress = parseInt($(window).scrollTop(), 10)
$('body.index .brand').css('opacity', Math.min(scrollProgress / 100, 1))
})
})
})(window.jQuery)

2
homepage/theme/static/scripts/jquery-3.4.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

0
homepage/theme/static/scripts/jump.js Normal file
View File

16
homepage/theme/static/scripts/menu.js Normal file
View File

@ -0,0 +1,16 @@
;(function ($) {
$(function () {
$('nav ul li a:not(:only-child)').click(function (e) {
$(this).siblings('.nav-dropdown').toggle()
$('.dropdown').not($(this).siblings()).hide()
e.stopPropagation()
})
$('html').click(function () {
$('.nav-dropdown').hide()
})
$('#nav-toggle').click(function () {
$(this).closest('nav').find('ul').slideToggle()
$(this).toggleClass('active')
})
})
})(window.jQuery)

9
homepage/theme/templates/auditorium.html Normal file
View File

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block content %}
<div class="content">
<div class="container-full">
{{ page.content }}
</div>
</div>
{% endblock %}

133
homepage/theme/templates/base.html
View File

@ -1,8 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %}{% endblock %}</title> <title>
{% block title %}{{ page.title }}{% endblock %}
</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@ -18,23 +19,125 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="{{ SITEURL }}/{{ page.save_as }}"> <link rel="canonical" href="{{ SITEURL }}/{{ page.save_as }}">
<link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/theme/css/fonts.css"> {% assets filters="cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.css" %}
<link rel="stylesheet" type="text/css" href="/theme/styles/index.css"> <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
<link rel="stylesheet" type="text/css" href="/theme/css/style.css"> {% endassets %}
{% if OFFEN_ACCOUNT_ID %} {% if OFFEN_ACCOUNT_ID %}
<script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script> <script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
{% endif %} {% endif %}
</head> </head>
<body class="{{page.template}}">
<body> <div class="menu">
<div class="wrapper"> <section class="nav-bar">
<header> <div class="nav-container">
<a href="/" title="offen home page" alt="offen home page"> <div class="brand">
<img src="/theme/images/logo.svg" alt="offen logo" width="165" height="102" class="logo"> <a href="/"><img src="/theme/images/offen-brand-white.svg" alt="offen logo" width="42" height="46" class="logo"></a>
</a> </div>
</header> <nav>
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
{% block content %}{% endblock %} <ul class="nav-list">
<li>
<a href="/">Summary</a>
</li>
<li>
<a href="/deep-dive/">Deep dive</a>
</li>
<li>
<a href="/status/">Status</a>
</li>
<li>
<a href="mailto:{{CONTACT_EMAIL}}">Contact</a>
</li>
<li>
<a href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
</li>
<li>
<a href="{{PATREON_URL}}" target="_blank">Support Us</a>
</li>
</ul>
</nav>
</div>
</section>
</div> </div>
{% block content %}
<div class="content">
<div class="container-reader">
{{ page.content }}
</div>
</div>
{% endblock %}
{% block outro %}
<div class="cta-bottom">
<div class="bg" id="bg-cta-bottom">
<div class="container-full">
<div class="card-deck">
<div class="card">
<h2>
Participate
</h2>
<p>
Development of <strong>offen</strong> has just started. Do not hesitate to make a contribution and help us handle data with respect.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
</div>
</div>
<div class="card">
<h2>
In the making
</h2>
<p>
This project is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="/status/">Project status</a>
</div>
</div>
<div class="card">
<h2>
Good cause
</h2>
<p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}" target="_blank">Support us</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
<div class="footer">
<div class="footer-card-deck">
<div class="footer-card">
<h3><strong>offen</strong></h3>
<h4>Transparent web analytics</h4>
<h4>for everyone</h4>
</div>
<div class="footer-card">
<p>
<a href="mailto:{{CONTACT_EMAIL}}">Contact</a>
</p>
<p>
<a href="{{GITHUB_ORG}}" target="_blank">GitHub</a>
</p>
<p>
<a href="{{PATREON_URL}}" target="_blank">Support Us</a>
</p>
</div>
<div class="footer-card">
September 2019
</div>
</div>
</div>
{% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js" %}
<script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
{% endassets %}
</body> </body>
</html> </html>

101
homepage/theme/templates/index.html Normal file
View File

@ -0,0 +1,101 @@
{% extends "base.html" %}
{% block content %}
<div class="intro">
<div class="bg" id="bg-intro">
<div class="container-reader">
<div class="spacer-intro">
<div class="sign">
<img src="/theme/images/offen-sign-brand-white.svg" alt="offen logo" width="152" height="94">
</div>
<h1>
<em>Transparent web analytics for operators and users</em>
</h1>
<p>
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
</div>
</div>
</div>
</div>
</div>
<div class="feature">
<div class="bg" id="bg-feature">
<div class="container-full">
<div class="card-deck">
<div class="card">
<h2>
<em>Free & Open</em>
</h2>
<p>
Anyone can audit our open source code to verify it works as intended. <strong>offen</strong> will always be available free of charge.
</p>
</div>
<div class="card">
<h2>
<em>Fair & Secure</em>
</h2>
<p>
Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
</p>
</div>
<div class="card">
<h2>
<em>Easy to use</em>
</h2>
<p>
Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="cta-top">
<div class="bg" id="bg-cta-top">
<div class="container-reader">
<div class="spacer-right">
<h2>
In the making
</h2>
<p>
<strong>offen</strong> is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-white" href="/status/">Project status</a>
</div>
</div>
</div>
</div>
</div>
<div class="content-index">
<div class="container-reader">
{{ page.content }}
</div>
</div>
{% endblock %}
{% block outro %}
<div class="outro">
<div class="bg" id="bg-outro">
<div class="container-reader">
<div class="spacer-right">
<h2>
Good cause
</h2>
<p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}" target="_blank">Support us</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

49
homepage/theme/templates/page.html
View File

@ -1,50 +1 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}
{{ page.title }}
{% endblock %}
{% block content %}
<section>
{% block before_content %}
<h1>
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
</h1>
{% endblock %}
{% block page_content %}
{{ page.content }}
{% endblock %}
{% block after_content %}
<nav class="navigation-wrapper">
<div class="button-wrapper btn-fill-space">
{% if page.href != "/deep-dive/" %}
<a class="btn btn-color-grey" href="/deep-dive/">
Deep dive
</a>
{% endif %}
{% if page.href != "/" %}
<a class="btn btn-color-grey" href="/">
Summary
</a>
{% endif %}
{% if page.href != "/status/" %}
<a class="btn btn-color-grey" href="/status/">
Status
</a>
{% endif %}
<a class="btn btn-color-orange" href="mailto:{{CONTACT_EMAIL}}">
Contact
</a>
</div>
<div class="button-wrapper btn-fill-space">
<a class="btn btn-color-orange" href="{{GITHUB_ORG}}" target="_blank">
Get involved
</a>
<a class="btn btn-color-orange" href="{{PATREON_URL}}" target="_blank">
Support us
</a>
</div>
</nav>
{% endblock %}
</section>
{% endblock %}

1
styles/index.css
View File

@ -423,4 +423,3 @@ td {
padding-right: 0; padding-right: 0;
} }
} }