mirror of
https://github.com/offen/website.git
synced 2024-11-23 09:20:33 +01:00
Merge pull request #27 from offen/development
Use articles for blog, update visuals and CSS
This commit is contained in:
GitHub
commit
76ac244d57
@ -64,7 +64,7 @@ jobs:
|
||||
else
|
||||
export DOCKER_IMAGE_TAG="latest"
|
||||
fi
|
||||
echo "$DOCKER_PASS" | docker login --username $DOCKER_USER --password-stdin
|
||||
echo "$DOCKER_ACCESSTOKEN" | docker login --username $DOCKER_USER --password-stdin
|
||||
docker push offen/website:$DOCKER_IMAGE_TAG
|
||||
|
||||
deploy:
|
||||
|
||||
@ -2,3 +2,5 @@ User-agent: *
|
||||
Disallow: /vault/
|
||||
Disallow: /auditorium/
|
||||
Disallow: /legal-notice/
|
||||
|
||||
Sitemap: /sitemap.xml
|
||||
|
||||
@ -1,39 +1,38 @@
|
||||
Title: Laying the foundation for fair web analytics | Offen
|
||||
title: Laying the foundation for fair web analytics | Offen
|
||||
description: Our milestone 1 achievements include extensible architecture, a localization option and an improved server structure.
|
||||
save_as: blog/laying-foundation-for-fair-web-analytics/index.html
|
||||
href: /blog/laying-foundation-for-fair-web-analytics/
|
||||
date: 2019-12-12
|
||||
slug: laying-foundation-for-fair-web-analytics
|
||||
sitemap_priority: 0.7
|
||||
sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
|
||||
|
||||
{:class="image-text-600-322"}
|
||||
<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
|
||||
## Episode One — Laying the foundation for fair web analytics
|
||||
|
||||
###### 12 Dec 2019, Hendrik Niefeld
|
||||
## [Episode One — Laying the foundation for fair web analytics](/blog/laying-foundation-for-fair-web-analytics)
|
||||
Milestone 1 is completed. This is what we've achieved in the last six weeks.
|
||||
|
||||
---
|
||||
|
||||
### Extension through middleware
|
||||
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.
|
||||
<div class="btn-wrapper-article">
|
||||
<a class="btn btn-color-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="btn-wrapper-article">
|
||||
<a class="btn btn-color-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="btn-wrapper-article">
|
||||
<a class="btn btn-color-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.
|
||||
@ -48,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="btn-wrapper-article">
|
||||
<a class="btn btn-color-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"}
|
||||
@ -1,10 +1,8 @@
|
||||
Title: Page not found | Offen
|
||||
title: Page not found | Offen
|
||||
description: This link isn’t working.
|
||||
save_as: 404.html
|
||||
href: /404.html
|
||||
no_stats: true
|
||||
exclude_from_sitemap: true
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
|
||||
|
||||
{:class="image-text-600-338"}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
Title: About | Offen
|
||||
title: About | Offen
|
||||
description: Who we are, who supports us and how you can can get in touch.
|
||||
save_as: about/index.html
|
||||
href: /about/
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
slug: about
|
||||
|
||||
## About
|
||||
|
||||
@ -14,15 +12,18 @@ Offen is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendr
|
||||
[hendrik-niefeld]: http://niefeld.com/
|
||||
[frederik-ring]: https://www.frederikring.com/
|
||||
|
||||
[{:width="160px" height="60px" class="image-text-custom"}](https://nlnet.nl/){: target="_blank"}
|
||||
[{:width="160px" height="60px" class="mt4"}](https://nlnet.nl/){: target="_blank"}
|
||||
|
||||
We are happy to work with [NLnet Foundation][nlnet-foundation]{: target="_blank"} who complement our activities within their [Next Generation Internet][next-generation-internet]{: target="_blank"} initiative.
|
||||
|
||||
[nlnet-foundation]: https://nlnet.nl/
|
||||
[next-generation-internet]: https://nlnet.nl/NGI/
|
||||
|
||||
---
|
||||
|
||||
### Contact
|
||||
|
||||
*Feel free to contact us with any kind of feedback.* From criticism and praise to contributions or support, everything is welcome. Get in touch.
|
||||
|
||||
[hioffen@posteo.de](mailto:hioffen@posteo.de) [[GPG Key]](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}
|
||||
[hioffen@posteo.de](mailto:hioffen@posteo.de)
|
||||
[Email GPG Key](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
Title: Fair analytics blog | Offen
|
||||
description: Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.
|
||||
save_as: blog/index.html
|
||||
href: /blog/
|
||||
exclude_from_sitemap: true
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
|
||||
|
||||
## Fair analytics blog
|
||||
### Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.
|
||||
|
||||
---
|
||||
|
||||
12 Dec 2019
|
||||
|
||||
[{:class="image-text-600-322"}](/blog/laying-foundation-for-fair-web-analytics/)
|
||||
|
||||
## [Episode One — Laying the foundation for fair web analytics](/blog/laying-foundation-for-fair-web-analytics/)
|
||||
@ -1,9 +1,7 @@
|
||||
Title: Deep dive | Offen
|
||||
title: Deep dive | Offen
|
||||
description: What do users know about their data? How can they access it? Do operators benefit from a careful handling of user data? Does Offen work in accordance with GDPR?
|
||||
save_as: deep-dive/index.html
|
||||
href: /deep-dive/
|
||||
slug: deep-dive
|
||||
sitemap_priority: 0.7
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
|
||||
## Deep dive
|
||||
|
||||
|
||||
@ -1,21 +1,13 @@
|
||||
Title: Transparent web analytics for everyone | Offen
|
||||
title: Transparent web analytics for everyone | Offen
|
||||
description: Offen is a free and open source analytics software for websites and web applications. Users can access their data while the operators treat it with respect.
|
||||
save_as: index.html
|
||||
href: /
|
||||
template: index
|
||||
sitemap_priority: 1.0
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
|
||||
## 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 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](/auditorium/)* to access your data.
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-yellow" href="/deep-dive/">Deep dive</a>
|
||||
</div>
|
||||
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](/auditorium/)_ to access your data.
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
Title: Legal Notice | Offen
|
||||
title: Legal Notice | Offen
|
||||
description: Information in accordance with Section 5 TMG
|
||||
save_as: legal-notice/index.html
|
||||
href: /legal-notice/
|
||||
slug: legal-notice
|
||||
exclude_from_sitemap: true
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
|
||||
## Legal Notice
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
Title: Opt-out | Offen
|
||||
description: Prevent Offen from aggregating the actions you have taken on participating websites.
|
||||
save_as: opt-out/index.html
|
||||
exclude_from_sitemap: true
|
||||
sm_image_url: /theme/images/offen-logo-social-media.jpg
|
||||
|
||||
## You are opted out
|
||||
|
||||
This will prevent Offen from aggregating the actions you have taken on participating websites.
|
||||
|
||||
Operators now cannot draw any conclusions from your actions via Offen. At the same time, however, they *cannot create a better experience* for you and other users.
|
||||
|
||||
<script>
|
||||
var vault = document.createElement('iframe')
|
||||
vault.style.display = 'none'
|
||||
vault.setAttribute('width', '0')
|
||||
vault.setAttribute('height', '0')
|
||||
vault.setAttribute('frameBorder', '0')
|
||||
vault.setAttribute('scrolling', 'no')
|
||||
vault.addEventListener('load', function (e) {
|
||||
vault.contentWindow.postMessage({
|
||||
type: 'OPTOUT',
|
||||
payload: {
|
||||
status: true
|
||||
}
|
||||
}, '*')
|
||||
})
|
||||
vault.src = 'https://vault-alpha.offen.dev'
|
||||
document.body.append(vault)
|
||||
</script>
|
||||
@ -28,22 +28,38 @@ THEME = './theme'
|
||||
# Delete the output directory before generating new files.
|
||||
DELETE_OUTPUT_DIRECTORY = True
|
||||
|
||||
# dont create following standard pages
|
||||
AUTHORS_SAVE_AS = None
|
||||
ARCHIVES_SAVE_AS = None
|
||||
CATEGORIES_SAVE_AS = None
|
||||
TAGS_SAVE_AS = None
|
||||
DIRECT_TEMPLATES = ['sitemap', 'archives']
|
||||
|
||||
# keep this for access to page variable
|
||||
DIRECT_TEMPLATES = ['sitemap']
|
||||
# dont create following standard pages
|
||||
AUTHOR_SAVE_AS = ''
|
||||
AUTHORS_SAVE_AS = ''
|
||||
CATEGORY_SAVE_AS = ''
|
||||
CATEGORIES_SAVE_AS = ''
|
||||
TAG_SAVE_AS = ''
|
||||
TAGS_SAVE_AS = ''
|
||||
|
||||
ARCHIVES_SAVE_AS = 'blog/index.html'
|
||||
SITEMAP_SAVE_AS = 'sitemap.xml'
|
||||
PAGE_SAVE_AS = '{slug}/index.html'
|
||||
ARTICLE_SAVE_AS = 'blog/{slug}/index.html'
|
||||
|
||||
PLUGIN_PATHS = ['./plugins']
|
||||
PLUGINS = ['decorate_content', 'assets']
|
||||
|
||||
DECORATE_CONTENT = {
|
||||
# maps any CSS selector to a list of classes to be added
|
||||
# 'p': ['pv0', 'dim']
|
||||
'[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'],
|
||||
'h5': ['ma0'],
|
||||
'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'],
|
||||
'p': ['ma0', 'pb3'],
|
||||
'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
|
||||
'hr': ['mt5', 'mb3', 'b--black-05']
|
||||
}
|
||||
|
||||
GITHUB_ORG = 'https://github.com/offen'
|
||||
@ -54,5 +70,3 @@ LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
|
||||
TWITTER_URL = 'https://twitter.com/hioffen'
|
||||
|
||||
OFFEN_ACCOUNT_ID = '9b63c4d8-65c0-438c-9d30-cc4b01173393'
|
||||
|
||||
STATUS_URL = '/blog/laying-foundation-for-fair-web-analytics'
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@ SITEURL = os.environ.get('SITEURL', 'https://www.offen.dev')
|
||||
# RELATIVE_URLS = True
|
||||
|
||||
FEED_ALL_ATOM = 'feeds/all.atom.xml'
|
||||
CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml'
|
||||
|
||||
DELETE_OUTPUT_DIRECTORY = True
|
||||
|
||||
|
||||
305
homepage/theme/static/css/fix.css
Normal file
305
homepage/theme/static/css/fix.css
Normal file
@ -0,0 +1,305 @@
|
||||
/* ---------------------------------------------------
|
||||
COLORS
|
||||
----------------------------------------------------*/
|
||||
/* Custom Tachyons classes */
|
||||
.cclr-mid-yellow {
|
||||
background-color: #F7BF08;
|
||||
}
|
||||
.fnt-cclr-mid-yellow {
|
||||
color: #F7BF08;
|
||||
}
|
||||
.brd-cclr-mid-yellow {
|
||||
border-color: #F7BF08;
|
||||
}
|
||||
.cclr-bright-yellow {
|
||||
background-color: #fde28c;
|
||||
}
|
||||
.cclr-mid-mint {
|
||||
background-color: #BBD9D3;
|
||||
}
|
||||
.cclr-mid-black {
|
||||
background-color: #39352A;
|
||||
}
|
||||
.fnt-cclr-mid-black {
|
||||
color: #39352A;
|
||||
}
|
||||
.brd-cclr-mid-black {
|
||||
border-color: #39352A;
|
||||
}
|
||||
.cclr-dark-white {
|
||||
background-color: #f9f7f2;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
LAYOUT
|
||||
----------------------------------------------------*/
|
||||
.menu {
|
||||
width: 100%;
|
||||
height: 4rem; /* Tachyons mt5 */
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.columns {
|
||||
column-count: 1;
|
||||
}
|
||||
/* Custom media query */
|
||||
@media only screen and (min-width: 60rem) {
|
||||
.columns {
|
||||
column-count: 2;
|
||||
column-gap: 4em;
|
||||
column-rule: 0.18rem solid rgba(0,0,0,.05);
|
||||
}
|
||||
}
|
||||
/* Custom media query - extra small */
|
||||
@media only screen and (max-width: 29.99em) {
|
||||
.menu {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
/* Custom Tachyons class */
|
||||
.w55 {
|
||||
width: 18.5rem;
|
||||
}
|
||||
/* Custom media query - extra small */
|
||||
@media only screen and (max-width: 30em) {
|
||||
.w55 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
TYPO AND LAYOUT ELEMENTS
|
||||
----------------------------------------------------*/
|
||||
.link:focus {
|
||||
outline: none;
|
||||
}
|
||||
/* Break long word on mobile */
|
||||
body {
|
||||
overflow-wrap: break-word;
|
||||
overscroll-behavior: none;
|
||||
/* overscroll color */
|
||||
background-color: #39352A;
|
||||
}
|
||||
/* Custom Tachyons class */
|
||||
.f25 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
span {
|
||||
display: table;
|
||||
}
|
||||
/* Custom media query - medium small - neutralize span line braks */
|
||||
@media only screen and (max-width: 34em) {
|
||||
p span {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
em {
|
||||
background: linear-gradient(transparent 66%, #fde28c 66%);
|
||||
font-style: normal;
|
||||
}
|
||||
hr {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MENU
|
||||
----------------------------------------------------*/
|
||||
.nav-list {
|
||||
margin: 0 0.7rem 0 0;
|
||||
}
|
||||
.nav-bar {
|
||||
height: 4rem;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
padding: 0.7rem 0 0 1.2rem;
|
||||
float: left;
|
||||
}
|
||||
body.index .icon {
|
||||
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 1.4rem;
|
||||
line-height: 4rem;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
background: #F7BF08;
|
||||
color: #39352A;
|
||||
}
|
||||
nav ul li a:hover,
|
||||
nav ul li a:visited:hover {
|
||||
color: #39352A;
|
||||
}
|
||||
nav ul li a:not(:only-child):after,
|
||||
nav ul li a:visited:not(:only-child):after {
|
||||
padding-left: 0.4rem;
|
||||
content: ' ▾';
|
||||
}
|
||||
nav ul li ul li {
|
||||
min-width: 10rem;
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.nav-mobile {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #F7BF08;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
/* Custom media query */
|
||||
@media only screen and (max-width: 60rem) {
|
||||
.nav-list {
|
||||
margin: 0;
|
||||
}
|
||||
.nav-mobile {
|
||||
display: block;
|
||||
}
|
||||
nav {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
nav ul {
|
||||
display: none;
|
||||
}
|
||||
nav ul li {
|
||||
float: none;
|
||||
}
|
||||
nav ul li a {
|
||||
padding: 1rem;
|
||||
line-height: 1;
|
||||
padding-left: 20%;
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding-left: 30%;
|
||||
}
|
||||
nav ul li:last-child a {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
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: 60.1rem) {
|
||||
.nav-list {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
#nav-toggle {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
cursor: pointer;
|
||||
padding: 1rem 2rem 1rem 0;
|
||||
}
|
||||
#nav-toggle span,
|
||||
#nav-toggle span:before,
|
||||
#nav-toggle span:after {
|
||||
cursor: pointer;
|
||||
height: 0.1rem;
|
||||
width: 1.6rem;
|
||||
background: #39352A;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
/*
|
||||
transition: all 300ms ease-in-out;
|
||||
*/
|
||||
}
|
||||
#nav-toggle span:before {
|
||||
top: -0.5rem;
|
||||
}
|
||||
#nav-toggle span:after {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
#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);
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
IMAGES
|
||||
----------------------------------------------------*/
|
||||
/* Put article image outside of container margins */
|
||||
.larger-image {
|
||||
margin-top: -4rem;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
/* Custom media query - extra small */
|
||||
@media only screen and (min-width: 30em) {
|
||||
.larger-image {
|
||||
margin-top: -4rem;
|
||||
margin-left: -4rem;
|
||||
margin-right: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,31 +1,25 @@
|
||||
/* rubik-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 400;
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
src: url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot");
|
||||
src: url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot?#iefix") format("embedded-opentype"), local("Noto Sans"), local("Noto-Sans-400"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff") format("woff"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.svg#NotoSans") format("svg")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
src: url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot");
|
||||
src: url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold"), local("Noto-Sans-700"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
src: url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot");
|
||||
src: url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Italic"), local("Noto-Sans-italic"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg")
|
||||
src: local('Rubik'), local('Rubik-Regular'),
|
||||
url('../fonts/rubik-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/rubik-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/rubik-v9-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
/* rubik-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
src: url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot");
|
||||
src: url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg")
|
||||
src: local('Rubik Bold'), local('Rubik-Bold'),
|
||||
url('../fonts/rubik-v9-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/rubik-v9-latin-500.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/rubik-v9-latin-500.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
.rubik {
|
||||
font-family: Rubik, sans-serif;
|
||||
}
|
||||
349
homepage/theme/static/css/normalize.css
vendored
349
homepage/theme/static/css/normalize.css
vendored
@ -1,349 +0,0 @@
|
||||
/*! 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;
|
||||
}
|
||||
@ -1,612 +0,0 @@
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
ROOTS
|
||||
----------------------------------------------------*/
|
||||
$yellow-mid: #F7BF08;
|
||||
$yellow-bright: #fde28c;
|
||||
$mint-mid: #BBD9D3;
|
||||
$black-mid: #39352A;
|
||||
$grey-mid: #898989;
|
||||
$grey-bright: #D5D5D5;
|
||||
$white: #FFF;
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
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: $yellow-mid;
|
||||
}
|
||||
.intro {
|
||||
width: 100%;
|
||||
margin: 70px 0 0 0;
|
||||
background-color: $yellow-mid;
|
||||
}
|
||||
.feature {
|
||||
width: 100%;
|
||||
}
|
||||
.cta-top {
|
||||
width: 100%;
|
||||
color: $yellow-mid;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
margin: 70px 0 0 0;
|
||||
background-color: $white;
|
||||
}
|
||||
.content-index {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
}
|
||||
.cta-bottom,
|
||||
.outro {
|
||||
width: 100%;
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
color: $grey-mid;
|
||||
background-color: $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-full {
|
||||
padding: 60px 0 120px 0;
|
||||
}
|
||||
.container-reader {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 0 120px 0;
|
||||
}
|
||||
.footer {
|
||||
padding: 40px 40px 0 40px;
|
||||
}
|
||||
}
|
||||
/* Mobile Styles */
|
||||
@media only screen and (min-width: 600px) and (max-width: 960px) {
|
||||
.container-reader {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@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: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.card {
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
color: $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(3) {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
/* Mobile Styles */
|
||||
@media only screen and (max-width: 960px) {
|
||||
.card-deck,
|
||||
.footer-card-deck {
|
||||
flex-direction: column;
|
||||
}
|
||||
.card-deck {
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.card:nth-child(2) {
|
||||
margin: 100px auto 100px auto;
|
||||
}
|
||||
.footer-card {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* Desktop Styles */
|
||||
@media only screen and (min-width: 961px) {
|
||||
.card-deck,
|
||||
.footer-card-deck {
|
||||
flex-direction: row;
|
||||
}
|
||||
.card-deck {
|
||||
justify-content: center;
|
||||
}
|
||||
.card:nth-child(2) {
|
||||
margin: 0 50px 0 50px;
|
||||
}
|
||||
.footer-card-deck {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer-card:nth-child(1),
|
||||
.footer-card:nth-child(2),
|
||||
.footer-card:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.footer-card:nth-child(4) {
|
||||
text-align: right;
|
||||
flex-grow: 8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
TYPO
|
||||
----------------------------------------------------*/
|
||||
body {
|
||||
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: $grey-mid;
|
||||
background-color: $black-mid; // overscroll color
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: $black-mid;
|
||||
}
|
||||
h3,
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: $black-mid;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
p + h3 {
|
||||
margin: 60px 0 20px 0;
|
||||
}
|
||||
h4 {
|
||||
color: $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;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 330px) {
|
||||
.spacer-intro {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
LINKS
|
||||
----------------------------------------------------*/
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $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: $grey-bright;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
TYPO ELEMENTS
|
||||
----------------------------------------------------*/
|
||||
h1 + p {
|
||||
color: $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: $white;
|
||||
}
|
||||
#bg-outro h2,
|
||||
#bg-outro p {
|
||||
color: $black-mid;
|
||||
}
|
||||
strong,
|
||||
h1 + p strong,
|
||||
.bg strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.container-reader h2 {
|
||||
margin: 0 0 20px 0;
|
||||
color: $grey-bright;
|
||||
}
|
||||
strong,
|
||||
h3 strong {
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
color: $black-mid;
|
||||
}
|
||||
.cta-top strong {
|
||||
color: $white;
|
||||
}
|
||||
.content-index p,
|
||||
.content p {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
margin: 80px 0 20px 0;
|
||||
border-top: 1px solid $grey-bright;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-style: italic;
|
||||
border-left: 1px solid $grey-bright;
|
||||
}
|
||||
ol {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
em {
|
||||
background: linear-gradient(transparent 66%, $yellow-bright 66%);
|
||||
font-style: normal;
|
||||
}
|
||||
.footer-card h3 strong {
|
||||
font-weight: 700;
|
||||
color: $yellow-mid;
|
||||
}
|
||||
.footer h3,
|
||||
.footer h4 {
|
||||
color: $yellow-mid;
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
.footnote {
|
||||
color: $grey-bright;
|
||||
}
|
||||
/* reposition for fixed menu */
|
||||
.footnote li {
|
||||
margin-top: -75px;
|
||||
padding-top: 75px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
BUTTONS
|
||||
----------------------------------------------------*/
|
||||
.btn-wrapper {
|
||||
margin: 40px 0 0 0;
|
||||
}
|
||||
.btn-wrapper-article {
|
||||
margin: 30px 0 80px 0;
|
||||
}
|
||||
.btn {
|
||||
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: $yellow-mid;
|
||||
border: solid $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: $black-mid;
|
||||
border: solid $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: $white;
|
||||
border: solid $white 5px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MENU
|
||||
----------------------------------------------------*/
|
||||
.nav-list {
|
||||
margin: 0 10px 40px 0;
|
||||
}
|
||||
.nav-bar {
|
||||
height: 70px;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
padding: 12px 0 0 20px;
|
||||
float: left;
|
||||
line-height: 70px;
|
||||
}
|
||||
body.index .icon {
|
||||
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;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
background: $yellow-mid;
|
||||
color: $black-mid;
|
||||
}
|
||||
nav ul li a:hover,
|
||||
nav ul li a:visited:hover {
|
||||
color: $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: $yellow-mid;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
/* Mobile Styles */
|
||||
@media only screen and (max-width: 960px) {
|
||||
.nav-list {
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
.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: 25px;
|
||||
background: $black-mid;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
/*
|
||||
transition: all 300ms ease-in-out;
|
||||
*/
|
||||
}
|
||||
#nav-toggle span:before {
|
||||
top: -8px;
|
||||
}
|
||||
#nav-toggle span:after {
|
||||
bottom: -8px;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
IMAGES
|
||||
----------------------------------------------------*/
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
.image-text-custom {
|
||||
margin: 10px 0 -15px 0;
|
||||
}
|
||||
.image-text-600-338 {
|
||||
width: 600px;
|
||||
height: 338px;
|
||||
}
|
||||
.image-text-600-322 {
|
||||
width: 600px;
|
||||
height: 322px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.image-text-600-338 {
|
||||
max-width:100%;
|
||||
height: auto;
|
||||
}
|
||||
.image-text-600-322 {
|
||||
max-width:100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
3
homepage/theme/static/css/tachyons.min.css
vendored
Normal file
3
homepage/theme/static/css/tachyons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,4 +1,7 @@
|
||||
Copyright 2018 The Noto Project Authors (github.com/googlei18n/noto-fonts)
|
||||
Rubik-Regular.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
|
||||
Rubik-Italic.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
|
||||
Rubik-Medium.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
|
||||
Rubik-MediumItalic.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License,
|
||||
Version 1.1.
|
||||
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
homepage/theme/static/fonts/rubik-v9-latin-500.ttf
Normal file
BIN
homepage/theme/static/fonts/rubik-v9-latin-500.ttf
Normal file
Binary file not shown.
BIN
homepage/theme/static/fonts/rubik-v9-latin-500.woff
Normal file
BIN
homepage/theme/static/fonts/rubik-v9-latin-500.woff
Normal file
Binary file not shown.
BIN
homepage/theme/static/fonts/rubik-v9-latin-500.woff2
Normal file
BIN
homepage/theme/static/fonts/rubik-v9-latin-500.woff2
Normal file
Binary file not shown.
BIN
homepage/theme/static/fonts/rubik-v9-latin-regular.ttf
Normal file
BIN
homepage/theme/static/fonts/rubik-v9-latin-regular.ttf
Normal file
Binary file not shown.
BIN
homepage/theme/static/fonts/rubik-v9-latin-regular.woff
Normal file
BIN
homepage/theme/static/fonts/rubik-v9-latin-regular.woff
Normal file
Binary file not shown.
BIN
homepage/theme/static/fonts/rubik-v9-latin-regular.woff2
Normal file
BIN
homepage/theme/static/fonts/rubik-v9-latin-regular.woff2
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 116 KiB |
21
homepage/theme/templates/archives.html
Normal file
21
homepage/theme/templates/archives.html
Normal file
@ -0,0 +1,21 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% set title = 'Fair analytics blog | Offen' %}
|
||||
{% set description = 'Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.' %}
|
||||
{% set href = 'blog/' %}
|
||||
{% set no_stats = False %}
|
||||
{% set template = 'archives' %}
|
||||
{% set is_article = 'true' %}
|
||||
|
||||
{% block content %}
|
||||
{% for article in articles %}
|
||||
{% if loop.index != 1 %}
|
||||
<hr class="mb5 b--none">
|
||||
{% endif %}
|
||||
<div class="w-100 mt5-ns gray">
|
||||
<div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
|
||||
{{ article.content }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
10
homepage/theme/templates/article.html
Normal file
10
homepage/theme/templates/article.html
Normal file
@ -0,0 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% set title = article.title %}
|
||||
{% set description = article.description %}
|
||||
{% set href = article.save_as.replace('index.html', '') %}
|
||||
{% set sm_image_url = article.sm_image_url %}
|
||||
{% set no_stats = article.no_stats %}
|
||||
{% set template = article.template %}
|
||||
{% set content = article.content %}
|
||||
{% set is_article = 'true' %}
|
||||
@ -1,148 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% block head %}
|
||||
<head>
|
||||
<title>
|
||||
{% block title %}{{ page.title }}{% endblock %}
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="description" content="{{ page.description }}">
|
||||
<meta name="description" content="{{ description }}">
|
||||
<meta property="og:site_name" content="{{ SITENAME }}">
|
||||
<meta property="og:locale" content="{{ DEFAULT_LANG }}">
|
||||
<meta property="og:title" content="{{ page.title }}">
|
||||
<meta property="og:description" content="{{ page.description }}">
|
||||
<meta property="og:title" content="{{ title }}">
|
||||
<meta property="og:description" content="{{ description }}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ SITEURL }}{{ page.href or page.url or page.save_as }}">
|
||||
<meta property="og:image" content="{{ SITEURL }}{{ page.sm_image_url }}">
|
||||
<meta property="og:url" content="{{ SITEURL }}/{{ href }}">
|
||||
<meta property="og:image" content="{{ SITEURL }}{{ sm_image_url or '/theme/images/offen-logo-social-media.jpg' }}">
|
||||
<meta name="twitter:image:alt" content="Offen logo">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="canonical" href="{{ SITEURL }}{{ page.href or page.url or page.save_as }}">
|
||||
{% if template != 'archives' %}
|
||||
<link rel="canonical" href="{{ SITEURL }}/{{ href }}">
|
||||
{% endif %}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
|
||||
{% assets filters="libsass,postcss,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
|
||||
{% 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 %}
|
||||
{% if OFFEN_ACCOUNT_ID and not page.no_stats %}
|
||||
<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>
|
||||
<body class="{{page.template}}">
|
||||
<div class="menu">
|
||||
{% endblock %}
|
||||
<body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-dark-white">
|
||||
<div class="menu w-100 cclr-mid-yellow">
|
||||
<section class="nav-bar">
|
||||
<div class="nav-container">
|
||||
<div class="icon">
|
||||
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="42" height="46" class="logo"></a>
|
||||
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
|
||||
<ul class="nav-list">
|
||||
<li>
|
||||
<a href="/">Summary</a>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="/">Summary</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/deep-dive/">Deep dive</a>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="/deep-dive/">Deep dive</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ STATUS_URL }}">Status</a>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="/blog/">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{GITHUB_ORG}}" rel="noopener" target="_blank">GitHub</a>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{PATREON_URL}}" rel="noopener" target="_blank">Patreon</a>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<div class="container-reader">
|
||||
{{ page.content }}
|
||||
<div class="w-100 mt5-ns gray">
|
||||
<div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
|
||||
{{ 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>
|
||||
<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">
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
Participate
|
||||
</h2>
|
||||
<p>
|
||||
<p class="ma0 mb3">
|
||||
Development of Offen 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}}" rel="noopener" target="_blank">Get involved</a>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>
|
||||
{% if is_article != 'true' %}
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
In the making
|
||||
</h2>
|
||||
<p>
|
||||
<p class="ma0 mb3">
|
||||
Offen 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_URL }}">Project status</a>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>
|
||||
{% endif %}
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
Ethical internet
|
||||
</h2>
|
||||
<p>
|
||||
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
|
||||
<p class="ma0 mb3">
|
||||
We're working hard to ensure that Offen is independent and can be sustained for years to come.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
|
||||
</div>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-card-deck">
|
||||
<div class="footer-card">
|
||||
<h3>Offen</h3>
|
||||
<h4>Transparent web analytics</h4>
|
||||
<h4>for everyone</h4>
|
||||
<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">
|
||||
<p class="ma0">
|
||||
<a class="b link dim fnt-cclr-mid-yellow" href="/">Offen</a>
|
||||
</p>
|
||||
<p class="ma0">Transparent web analytics</p>
|
||||
<p class="ma0">for everyone</p>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<p>
|
||||
<a href="mailto:{{CONTACT_EMAIL}}">{{CONTACT_EMAIL}}</a>
|
||||
<a target="_blank" href="/theme/{{GPG_KEY_FILE}}">[GPG Key]</a>
|
||||
<div class="w-25-l mt3 mr3">
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{GITHUB_ORG}}" rel="noopener" target="_blank">GitHub</a>
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{PATREON_URL}}" rel="noopener" target="_blank">Patreon</a>
|
||||
<p class="ma0 mt2">
|
||||
<a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
|
||||
</p>
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<p>
|
||||
<a href="{{LINKEDIN_URL}}" rel="noopener" target="_blank">LinkedIn</a>
|
||||
<div class="w-25-l mt3 mr3">
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{TWITTER_URL}}" rel="noopener" target="_blank">Twitter</a>
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="/legal-notice/">Legal Notice</a>
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<div class="w-25-l mt3 tr-l">
|
||||
{{ BUILD_DATE }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,52 +1,52 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "page.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-logo-white.svg" alt="Offen logo" width="152" height="94">
|
||||
<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">
|
||||
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
|
||||
</div>
|
||||
<h1>
|
||||
<em>Transparent web analytics for operators and users</em>
|
||||
<div class="mw6">
|
||||
<h1 class="f1-ns f2 lh-solid ma0 mb3">
|
||||
Transparent <span>web analytics</span>
|
||||
</h1>
|
||||
<p>
|
||||
Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
|
||||
<p class="ma0 mb4">
|
||||
Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
|
||||
<div class="pb6">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" 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>
|
||||
<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">
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
<em>Free & Open</em>
|
||||
</h2>
|
||||
<p>
|
||||
Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
|
||||
<p class="ma0">
|
||||
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
<em>Fair & Secure</em>
|
||||
</h2>
|
||||
<p>
|
||||
<p class="ma0">
|
||||
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>
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
<em>Easy to use</em>
|
||||
</h2>
|
||||
<p>
|
||||
<p class="ma0">
|
||||
Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
|
||||
</p>
|
||||
</div>
|
||||
@ -56,44 +56,48 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="cta-top">
|
||||
<div class="bg" id="bg-cta-top">
|
||||
<div class="container-reader">
|
||||
<div class="spacer-right">
|
||||
<h2>
|
||||
<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">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
In the making
|
||||
</h2>
|
||||
<p>
|
||||
<p class="ma0 mb4">
|
||||
Offen 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_URL }}">Project status</a>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 b--white white" href="/blog/">Project status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-index">
|
||||
<div class="container-reader">
|
||||
|
||||
<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 mt3 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block outro %}
|
||||
<div class="outro">
|
||||
<div class="bg" id="bg-outro">
|
||||
<div class="container-reader">
|
||||
<div class="spacer-right">
|
||||
<h2>
|
||||
<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">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
Ethical internet
|
||||
</h2>
|
||||
<p>
|
||||
<p class="mb4">
|
||||
We're working hard to ensure that Offen 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}}" rel="noopener" target="_blank">Support us</a>
|
||||
</div>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,9 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% set title = page.title %}
|
||||
{% set description = page.description %}
|
||||
{% set href = page.save_as.replace('index.html', '') %}
|
||||
{% set sm_image_url = page.sm_image_url %}
|
||||
{% set no_stats = page.no_stats %}
|
||||
{% set template = page.template %}
|
||||
{% set content = page.content %}
|
||||
|
||||
@ -3,9 +3,17 @@
|
||||
{% for page in pages %}
|
||||
{% if not page.exclude_from_sitemap %}
|
||||
<url>
|
||||
<loc>{{ SITEURL }}{{ page.href }}</loc>
|
||||
<loc>{{ SITEURL }}/{{ page.save_as | replace('index.html', '') }}</loc>
|
||||
<priority>{{ page.sitemap_priority or 0.5 }}</priority>
|
||||
</url>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for article in articles %}
|
||||
{% if not article.exclude_from_sitemap %}
|
||||
<url>
|
||||
<loc>{{ SITEURL }}/{{ article.save_as | replace('index.html', '') }}</loc>
|
||||
<priority>{{ article.sitemap_priority or 0.5 }}</priority>
|
||||
</url>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</urlset>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user