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

update svg and layout

Browse Source
This commit is contained in:
Hendrik Niefeld 2019-08-29 22:21:00 +02:00
parent 794847d48b
commit 822007340e
20 changed files with 692 additions and 574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
homepage/content/pages/auditorium-operator.md
View File

@ -1,6 +0,0 @@
Title: Auditorium Operator | offen
description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
save_as: auditorium/operator/index.html
href: /auditorium/operator/
Auditorium Operator

6
homepage/content/pages/auditorium-user.md
View File

@ -1,6 +0,0 @@
Title: Auditorium User | offen
description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
save_as: auditorium/user/index.html
href: /auditorium/user/
Auditorium User

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

@ -3,6 +3,8 @@ 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].

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

@ -3,6 +3,8 @@ description: offen is a free and open source analytics software for websites and
save_as: index.html save_as: index.html
href: / href: /
## 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.

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.

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

@ -3,7 +3,7 @@ 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 #### July 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)*

2
homepage/pelicanconf.py
View File

@ -37,7 +37,7 @@ CATEGORIES_SAVE_AS = None
TAGS_SAVE_AS = None TAGS_SAVE_AS = None
# keep this for access to page variable # keep this for access to page variable
DIRECT_TEMPLATES = ['temp'] DIRECT_TEMPLATES = []
GITHUB_ORG = 'https://github.com/offen' GITHUB_ORG = 'https://github.com/offen'
CONTACT_EMAIL = 'mail@offen.dev' CONTACT_EMAIL = 'mail@offen.dev'

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

@ -6,10 +6,10 @@ ROOTS
:root { :root {
--yellow-mid: #F7BF08; --yellow-mid: #F7BF08;
--yellow-bright: #fde28c; --yellow-bright: #fde28c;
--mint-mid: #BBD9D3;
--black-mid: #39352A; --black-mid: #39352A;
--grey-mid: #898989; --grey-mid: #898989;
--grey-bright: #D5D5D5; --grey-bright: #D5D5D5;
--turquoise-bright: #BBD9D3;
--white: #FFF; --white: #FFF;
} }
@ -25,12 +25,13 @@ BASICS
/* --------------------------------------------------- /* ---------------------------------------------------
LAYOUT LAYOUT & SPACER
----------------------------------------------------*/ ----------------------------------------------------*/
.menu { .menu {
width: 100%; width: 100%;
height: 70px; height: 70px;
position: fixed; position: fixed;
z-index: 1;
top: 0; top: 0;
right: 0; right: 0;
background-color: var(--yellow-mid); background-color: var(--yellow-mid);
@ -42,12 +43,10 @@ LAYOUT
} }
.feature { .feature {
width: 100%; width: 100%;
background-color: var(--turquoise-bright);
} }
.cta-top { .cta-top {
width: 100%; width: 100%;
color: var(--yellow-mid); color: var(--yellow-mid);
background-color: var(--black-mid);
} }
.content { .content {
width: 100%; width: 100%;
@ -61,7 +60,6 @@ LAYOUT
.cta-bottom, .cta-bottom,
.outro { .outro {
width: 100%; width: 100%;
background-color: var(--yellow-mid);
} }
.footer { .footer {
width: 100%; width: 100%;
@ -69,6 +67,13 @@ LAYOUT
color: var(--grey-mid); color: var(--grey-mid);
background-color: var(--black-mid); background-color: var(--black-mid);
} }
.spacer-intro {
width: 430px;
}
.spacer-right {
width: 400px;
margin: 0 0 0 auto;
}
/* Desktop Styles */ /* Desktop Styles */
@media only screen and (min-width: 961px) { @media only screen and (min-width: 961px) {
.container-reader { .container-reader {
@ -110,7 +115,15 @@ LAYOUT
.content { .content {
margin: 0; margin: 0;
} }
.spacer-intro {
width: 300px;
} }
.spacer-right {
width: 100%;
margin: 0;
}
}
/* --------------------------------------------------- /* ---------------------------------------------------
CARDS CARDS
@ -121,12 +134,9 @@ CARDS
display: flex; display: flex;
} }
.card { .card {
max-width: 400px; max-width: 300px;
color: var(--black-mid); color: var(--black-mid);
} }
.cta-top .card {
color: var(--yellow-mid);
}
.card h2, .card h2,
.card p { .card p {
text-align: center; text-align: center;
@ -149,7 +159,7 @@ CARDS
align-self: center; align-self: center;
} }
.card:nth-child(2) { .card:nth-child(2) {
margin: 80px 0 80px 0; margin: 100px 0 100px 0;
} }
.footer-card { .footer-card {
text-align: center; text-align: center;
@ -158,9 +168,7 @@ CARDS
/* Desktop Styles */ /* Desktop Styles */
@media only screen and (min-width: 961px) { @media only screen and (min-width: 961px) {
.card-deck, .card-deck,
.footer-card-deck, .footer-card-deck {
.cta-top .card,
.outro .card {
flex-direction: row; flex-direction: row;
} }
.card { .card {
@ -206,6 +214,7 @@ h2 {
} }
h3, h3,
h4 { h4 {
font-size: 14px;
font-weight: 400; font-weight: 400;
color: var(--black-mid); color: var(--black-mid);
} }
@ -227,10 +236,6 @@ h4 {
h1 { h1 {
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
} }
h3,
h4 {
font-size: 14px;
}
} }
/* Mobile Styles */ /* Mobile Styles */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
@ -239,6 +244,8 @@ h4 {
font-size: 22px; font-size: 22px;
} }
} }
/* --------------------------------------------------- /* ---------------------------------------------------
LINKS LINKS
----------------------------------------------------*/ ----------------------------------------------------*/
@ -264,15 +271,57 @@ color: var(--grey-bright);
font-weight: 400; font-weight: 400;
} }
/* --------------------------------------------------- /* ---------------------------------------------------
TYPO ELEMENTS TYPO ELEMENTS
----------------------------------------------------*/ ----------------------------------------------------*/
p {
margin: 0 0 20px 0;
}
h1 + p { h1 + p {
color: var(--black-mid); 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 { hr {
height: 0; height: 0;
margin: 80px 0 20px 0; margin: 80px 0 20px 0;
@ -284,40 +333,25 @@ blockquote {
font-style: italic; font-style: italic;
border-left: 1px solid var(--grey-bright); border-left: 1px solid var(--grey-bright);
} }
strong, ol {
h1 + p strong, padding-inline-start: 20px;
.bg strong { }
font-weight: 700; em {
background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
font-style: normal;
} }
.footer-card h3 strong { .footer-card h3 strong {
font-weight: 700; font-weight: 700;
color: var(--yellow-mid); color: var(--yellow-mid);
} }
strong,
h3 strong {
text-decoration: none;
font-weight: 400;
color: var(--black-mid);
}
.footer h3, .footer h3,
.footer h4 { .footer h4 {
color: var(--yellow-mid); color: var(--yellow-mid);
margin: 0 0 2px 0; margin: 0 0 2px 0;
} }
em {
background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
font-style: normal;
}
.intro em {
background: linear-gradient(transparent 66%, var(--turquoise-bright) 66%);
font-style: normal;
}
.footnote { .footnote {
color: var(--grey-bright); color: var(--grey-bright);
} }
ol {
padding-inline-start: 20px;
}
/* --------------------------------------------------- /* ---------------------------------------------------
@ -362,6 +396,7 @@ BUTTONS
border: solid var(--white) 5px; border: solid var(--white) 5px;
} }
/* --------------------------------------------------- /* ---------------------------------------------------
MENU MENU
----------------------------------------------------*/ ----------------------------------------------------*/
@ -464,7 +499,6 @@ nav ul li ul li a {
nav ul li:last-child a { nav ul li:last-child a {
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2); box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
} }
.nav-dropdown { .nav-dropdown {
position: static; position: static;
} }
@ -520,67 +554,22 @@ nav ul li ul li a {
/* --------------------------------------------------- /* ---------------------------------------------------
GRAPHICS GRAPHICS
----------------------------------------------------*/ ----------------------------------------------------*/
.bg h2 {
margin: 0 0 10px 0;
}
#bg-intro { #bg-intro {
width: 75%;
background: url(/theme/images/gfx-intro.svg) no-repeat center; background: url(/theme/images/gfx-intro.svg) no-repeat center;
background-size: cover;
} }
/*-------------------------*/ /*-------------------------*/
#bg-feature-a, #bg-feature {
#bg-feature-b, background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
#bg-feature-c {
background: url(/theme/images/gfx-feature-a.svg) no-repeat center;
background-size: cover;
} }
/*-------------------------*/ /*-------------------------*/
#bg-cta-top { #bg-cta-top {
width: 75%; background: url(/theme/images/gfx-object-white.svg) center;
}
#bg-cta-top h2,
#bg-cta-top p {
color: var(--white);
}
#bg-cta-top h2,
#bg-cta-top p,
#bg-cta-top .btn-wrapper {
text-align: right;
}
#bg-cta-top {
background: url(/theme/images/gfx-cta-top.svg) no-repeat center;
background-size: cover;
} }
/*-------------------------*/ /*-------------------------*/
#bg-outro { #bg-outro {
width: 75%; background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
#bg-outro h2,
#bg-outro p,
#bg-outro .btn-wrapper {
text-align: right;
}
#bg-outro {
background: url(/theme/images/gfx-outro.svg) no-repeat center;
background-size: cover;
} }
/*-------------------------*/ /*-------------------------*/
#bg-cta-bottom { #bg-cta-bottom {
width: 75%; background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
#bg-cta-bottom h2,
#bg-cta-bottom p,
#bg-cta-bottom .btn-wrapper {
text-align: right;
}
#bg-cta-bottom {
background: url(/theme/images/gfx-outro.svg) no-repeat center;
background-size: cover;
}
@media only screen and (max-width: 480px) {
#bg-intro {
width: 100%;
background-size: 440px;
}
} }

61
homepage/theme/static/images/gfx-cta-top.svg
View File

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

Before

Width:  |  Height:  |  Size: 157 KiB

61
homepage/theme/static/images/gfx-feature-a.svg
View File

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

Before

Width:  |  Height:  |  Size: 157 KiB

43
homepage/theme/static/images/gfx-intro.svg
View File

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

Before

Width:  |  Height:  |  Size: 157 KiB

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

61
homepage/theme/static/images/gfx-outro.svg
View File

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

Before

Width:  |  Height:  |  Size: 157 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

3
homepage/theme/static/images/illustration.svg
View File

@ -1,3 +0,0 @@
<svg width="185" height="128" viewBox="0 0 185 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.4087 12.7144C58.4384 37.3772 20.4201 67.8688 4.07537 107.159C0.32521 116.174 7.02345 117.39 14.2976 114.492C31.4903 107.642 46.3982 91.8941 60.0754 80.0477C78.3068 64.2568 95.5667 47.6339 112.298 30.27C118.59 23.7393 131.488 14.0478 134.742 4.93663C137.071 -1.58385 121.784 10.1295 116.075 14.0477C95.7422 28.0042 75.8244 43.3886 57.6309 60.0477C54.9537 62.4991 37.9359 76.0815 43.6309 82.0477C49.406 88.0978 65.833 82.0447 71.742 80.1589C84.9149 75.9547 139.069 54.0287 132.186 33.3811C124.214 9.46304 61.8077 62.515 55.5198 69.3811C51.3236 73.9632 33.0469 91.9877 48.1865 95.7144C69.524 100.967 96.6782 86.2563 115.409 78.0477C124.955 73.864 139.454 69.366 147.409 62.0477C152.969 56.9322 133.554 68.319 127.409 72.7144C122.67 76.1036 100.183 93.0057 108.52 101.603C115.117 108.407 136.248 95.8091 142.52 93.1589C142.634 93.1105 159.393 86.9016 159.186 87.6033C158.147 91.1366 150.277 95.9273 147.853 98.7144C131.271 117.784 156.591 112.305 167.631 104.603C187.924 90.4452 149.677 95.8312 143.298 98.1589C132.893 101.955 123.39 107.673 113.298 112.159C111.818 112.816 109.167 113.966 107.298 114.381C106.489 114.561 108.756 113.59 109.52 113.27C129.097 105.06 150.274 100.535 171.631 103.048C188.522 105.035 181.353 115.374 175.409 124.714" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

8
homepage/theme/static/images/offen-sign-brand-grey.svg
View File

@ -1,8 +0,0 @@
<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="#898989"/>
<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="#898989"/>
<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="#898989"/>
<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="#898989"/>
<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="#898989"/>
<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="#898989"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

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

@ -51,17 +51,6 @@
<li> <li>
<a href="/status/">Status</a> <a href="/status/">Status</a>
</li> </li>
<li>
<a href="#">Auditorium</a>
<ul class="nav-dropdown">
<li>
<a href="/auditorium/operator/">for Operators</a>
</li>
<li>
<a href="/auditorium/user/">for Users</a>
</li>
</ul>
</li>
<li> <li>
<a href="mailto:{{CONTACT_EMAIL}}">Contact</a> <a href="mailto:{{CONTACT_EMAIL}}">Contact</a>
</li> </li>
@ -79,13 +68,14 @@
{% if page.href == "/" %} {% if page.href == "/" %}
<div class="intro"> <div class="intro">
<div class="container-reader">
<div class="bg" id="bg-intro"> <div class="bg" id="bg-intro">
<div class="container-reader">
<div class="spacer-intro">
<div class="sign"> <div class="sign">
<img src="/theme/images/offen-sign-brand-white.svg" alt="offen logo" width="152" height="94"> <img src="/theme/images/offen-sign-brand-white.svg" alt="offen logo" width="152" height="94">
</div> </div>
<h1> <h1>
Transparent web analytics for operators and users <em>Transparent web analytics for operators and users</em>
</h1> </h1>
<p> <p>
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data. <strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
@ -96,34 +86,31 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="feature"> <div class="feature">
<div class="bg" id="bg-feature">
<div class="container-full"> <div class="container-full">
<div class="card-deck"> <div class="card-deck">
<div class="card"> <div class="card">
<div class="bg" id="bg-feature-a">
<h2> <h2>
Free & Open Source <em>Free & Open</em>
</h2> </h2>
<p> <p>
Anyone can audit our code to verify it works as intended. <strong>offen</strong> will always be available free of charge. Anyone can audit our open source code to verify it works as intended. <strong>offen</strong> will always be available free of charge.
</p> </p>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="bg" id="bg-feature-b">
<h2> <h2>
Fair & Secure <em>Fair & Secure</em>
</h2> </h2>
<p> <p>
Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end. Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
</p> </p>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="bg" id="bg-feature-c">
<h2> <h2>
Easy to use <em>Easy to use</em>
</h2> </h2>
<p> <p>
Simply paste our code into the source of your website. Users can visit the auditorium to access their data. Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
@ -134,16 +121,16 @@
</div> </div>
</div> </div>
<div class="cta-top"> <div class="cta-top">
<div class="container-full">
<div class="card-deck">
<div class="card">
<div class="bg" id="bg-cta-top"> <div class="bg" id="bg-cta-top">
<div class="container-reader">
<div class="spacer-right">
<h2> <h2>
Build in progress In the making
</h2> </h2>
<p> <p>
What is already up and running and where we want to go. <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> </p>
<div class="btn-wrapper"> <div class="btn-wrapper">
<a class="btn btn-color-white" href="/status/">Project status</a> <a class="btn btn-color-white" href="/status/">Project status</a>
@ -152,7 +139,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{% endif %} {% endif %}
{% if page.href == "/" %} {% if page.href == "/" %}
@ -171,41 +157,34 @@
{% if page.href != "/" %} {% if page.href != "/" %}
<div class="cta-bottom"> <div class="cta-bottom">
<div class="bg" id="bg-cta-bottom">
<div class="container-full"> <div class="container-full">
<div class="card-deck"> <div class="card-deck">
<div class="card"> <div class="card">
<div class="bg" id="bg-cta-bottom">
<h2> <h2>
Transparent web analytics Participate
</h2> </h2>
<p> <p>
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data. Development of <strong>offen</strong> has just started. Do not hesitate to make a contribution and help us handle data with respect.
</p> </p>
<div class="btn-wrapper"> <div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}">Get involved</a> <a class="btn btn-color-black" href="{{GITHUB_ORG}}">Get involved</a>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="bg" id="bg-cta-bottom">
<h2> <h2>
Build in progress In the making
</h2> </h2>
<p> <p>
What is already up and running and where we want to go. This project is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p> </p>
<div class="btn-wrapper"> <div class="btn-wrapper">
<a class="btn btn-color-black" href="/status/">Project status</a> <a class="btn btn-color-black" href="/status/">Project status</a>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="bg" id="bg-cta-bottom">
<h2> <h2>
Charitable purpose Good cause
</h2> </h2>
<p> <p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come. We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
@ -215,20 +194,16 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="outro"> <div class="outro">
<div class="container-full">
<div class="card-deck">
<div class="card">
<div class="bg" id="bg-outro"> <div class="bg" id="bg-outro">
<div class="container-reader">
<div class="spacer-right">
<h2> <h2>
Charitable purpose Good cause
</h2> </h2>
<p> <p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come. We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
@ -240,7 +215,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{% endif %} {% endif %}
<div class="footer"> <div class="footer">
@ -252,17 +226,17 @@
</div> </div>
<div class="footer-card"> <div class="footer-card">
<p> <p>
<a href="#">Contact</a> <a href="mailto:{{CONTACT_EMAIL}}">Contact</a>
</p> </p>
<p> <p>
<a href="#">Our data policy</a> <a href="{{GITHUB_ORG}}">GitHub</a>
</p> </p>
<p> <p>
<a href="#">Privacy</a> <a href="{{PATREON_URL}}">Support Us</a>
</p> </p>
</div> </div>
<div class="footer-card"> <div class="footer-card">
August 2019 September 2019
</div> </div>
</div> </div>
</div> </div>

76
homepage/theme/templates/temp.html
View File

@ -1,76 +0,0 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Temp</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel='stylesheet' href='/theme/styles/index.css'/>
</head>
<body>
<!--- MENU start -->
<div class='menu'>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
<a href="#"><img src="/theme/images/offen-logo-circle-only.svg" alt="offen logo" width="42" height="46" class="logo"></a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a href="#">Deep dive</a>
</li>
<li>
<a href="#">Status</a>
</li>
<li>
<a href="#">Auditorium</a>
<ul class="nav-dropdown">
<li>
<a href="#">for Operators</a>
</li>
<li>
<a href="#">for Users</a>
</li>
<li>
<a href="#">for Users</a>
</li>
</ul>
</li>
<li>
<a href="#!">Contact</a>
</li>
<li>
<a href="#!">Get involved</a>
</li>
<li>
<a href="#">Support Us</a>
</li>
</ul>
</nav>
</div>
</section>
</div>
<!--- MENU end -->
<div class='intro'>
<div class='container-reader'>
INTRO
</div>
</div>
<!--- CONTENT start -->
<div class='content-index'>
<div class='container-reader'>
CONTENT
</div>
</div>
<!--- CONTENT end -->
<div class='footer'>
<div class='container-full'>
FOOTER
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/theme/scripts/functions.js"></script>
</body>
</html>

79
homepage/theme/templates/temp_safe.html
View File

@ -1,79 +0,0 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Temp</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel='stylesheet' href='/theme/styles/index.css'/>
</head>
<body>
<!--- MENU start -->
<div class='menu'>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
<a href="#"><img src="/theme/images/offen-logo-circle-only.svg" alt="offen logo" width="42" height="46" class="logo"></a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a href="#">Deep dive</a>
</li>
<li>
<a href="#">Status</a>
</li>
<li>
<a href="#">Auditorium</a>
<ul class="nav-dropdown">
<li>
<a href="#">for Operators</a>
</li>
<li>
<a href="#">for Users</a>
</li>
<li>
<a href="#">for Users</a>
</li>
</ul>
</li>
<li>
<a href="#!">Contact</a>
</li>
<li>
<a href="#!">Get involved</a>
</li>
<li>
<a href="#">Support Us</a>
</li>
</ul>
</nav>
</div>
</section>
</div>
<!--- MENU end -->
<div class='intro'>
<div class='container-reader'>
INTRO
</div>
</div>
<div class='content'>
<div class='container-reader'>
CONTENT
</div>
</div>
<div class='footer'>
<div class='container-full'>
FOOTER
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/theme/scripts/functions.js"></script>
</body>
</html>