From 822007340ee93004841fc69795b4b2b9d15f26a9 Mon Sep 17 00:00:00 2001 From: hendr-ik Date: Thu, 29 Aug 2019 22:21:00 +0200 Subject: [PATCH] update svg and layout --- homepage/content/pages/auditorium-operator.md | 6 - homepage/content/pages/auditorium-user.md | 6 - homepage/content/pages/deep-dive.md | 2 + homepage/content/pages/index.md | 2 + homepage/content/pages/opt-out.md | 2 +- homepage/content/pages/status.md | 2 +- homepage/pelicanconf.py | 2 +- homepage/theme/static/css/style.css | 175 +++---- homepage/theme/static/images/gfx-cta-top.svg | 61 --- .../theme/static/images/gfx-feature-a.svg | 61 --- homepage/theme/static/images/gfx-intro.svg | 43 +- .../theme/static/images/gfx-object-white.svg | 493 ++++++++++++++++++ homepage/theme/static/images/gfx-outro.svg | 61 --- .../static/images/gfx-pattern-mint-bright.svg | 12 + .../images/gfx-pattern-yellow-bright.svg | 12 + homepage/theme/static/images/illustration.svg | 3 - .../static/images/offen-sign-brand-grey.svg | 8 - homepage/theme/templates/base.html | 160 +++--- homepage/theme/templates/temp.html | 76 --- homepage/theme/templates/temp_safe.html | 79 --- 20 files changed, 692 insertions(+), 574 deletions(-) delete mode 100644 homepage/content/pages/auditorium-operator.md delete mode 100644 homepage/content/pages/auditorium-user.md delete mode 100644 homepage/theme/static/images/gfx-cta-top.svg delete mode 100644 homepage/theme/static/images/gfx-feature-a.svg create mode 100644 homepage/theme/static/images/gfx-object-white.svg delete mode 100644 homepage/theme/static/images/gfx-outro.svg create mode 100644 homepage/theme/static/images/gfx-pattern-mint-bright.svg create mode 100644 homepage/theme/static/images/gfx-pattern-yellow-bright.svg delete mode 100644 homepage/theme/static/images/illustration.svg delete mode 100644 homepage/theme/static/images/offen-sign-brand-grey.svg delete mode 100644 homepage/theme/templates/temp.html delete mode 100644 homepage/theme/templates/temp_safe.html diff --git a/homepage/content/pages/auditorium-operator.md b/homepage/content/pages/auditorium-operator.md deleted file mode 100644 index b956811..0000000 --- a/homepage/content/pages/auditorium-operator.md +++ /dev/null @@ -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 diff --git a/homepage/content/pages/auditorium-user.md b/homepage/content/pages/auditorium-user.md deleted file mode 100644 index 0575914..0000000 --- a/homepage/content/pages/auditorium-user.md +++ /dev/null @@ -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 diff --git a/homepage/content/pages/deep-dive.md b/homepage/content/pages/deep-dive.md index e433c64..99025de 100644 --- a/homepage/content/pages/deep-dive.md +++ b/homepage/content/pages/deep-dive.md @@ -3,6 +3,8 @@ description: offen is a free and open source analytics software for websites and save_as: deep-dive/index.html href: /deep-dive/ +## Deep dive + ### 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]. diff --git a/homepage/content/pages/index.md b/homepage/content/pages/index.md index dcec6fe..956b887 100644 --- a/homepage/content/pages/index.md +++ b/homepage/content/pages/index.md @@ -3,6 +3,8 @@ description: offen is a free and open source analytics software for websites and save_as: index.html 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*. 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. diff --git a/homepage/content/pages/opt-out.md b/homepage/content/pages/opt-out.md index 9f40621..80af01c 100644 --- a/homepage/content/pages/opt-out.md +++ b/homepage/content/pages/opt-out.md @@ -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. 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. diff --git a/homepage/content/pages/status.md b/homepage/content/pages/status.md index 07184df..b6e5fce 100644 --- a/homepage/content/pages/status.md +++ b/homepage/content/pages/status.md @@ -3,7 +3,7 @@ description: offen is a free and open source analytics software for websites and save_as: status/index.html href: /status/ -### Current status +## Project status #### 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)* diff --git a/homepage/pelicanconf.py b/homepage/pelicanconf.py index e8ac795..8a546fb 100644 --- a/homepage/pelicanconf.py +++ b/homepage/pelicanconf.py @@ -37,7 +37,7 @@ CATEGORIES_SAVE_AS = None TAGS_SAVE_AS = None # keep this for access to page variable -DIRECT_TEMPLATES = ['temp'] +DIRECT_TEMPLATES = [] GITHUB_ORG = 'https://github.com/offen' CONTACT_EMAIL = 'mail@offen.dev' diff --git a/homepage/theme/static/css/style.css b/homepage/theme/static/css/style.css index 58460e0..49442d9 100644 --- a/homepage/theme/static/css/style.css +++ b/homepage/theme/static/css/style.css @@ -6,10 +6,10 @@ ROOTS :root { --yellow-mid: #F7BF08; --yellow-bright: #fde28c; +--mint-mid: #BBD9D3; --black-mid: #39352A; --grey-mid: #898989; --grey-bright: #D5D5D5; ---turquoise-bright: #BBD9D3; --white: #FFF; } @@ -25,12 +25,13 @@ BASICS /* --------------------------------------------------- -LAYOUT +LAYOUT & SPACER ----------------------------------------------------*/ .menu { width: 100%; height: 70px; position: fixed; + z-index: 1; top: 0; right: 0; background-color: var(--yellow-mid); @@ -42,12 +43,10 @@ LAYOUT } .feature { width: 100%; - background-color: var(--turquoise-bright); } .cta-top { width: 100%; color: var(--yellow-mid); - background-color: var(--black-mid); } .content { width: 100%; @@ -61,7 +60,6 @@ LAYOUT .cta-bottom, .outro { width: 100%; - background-color: var(--yellow-mid); } .footer { width: 100%; @@ -69,6 +67,13 @@ LAYOUT color: var(--grey-mid); background-color: var(--black-mid); } +.spacer-intro { + width: 430px; +} +.spacer-right { + width: 400px; + margin: 0 0 0 auto; +} /* Desktop Styles */ @media only screen and (min-width: 961px) { .container-reader { @@ -110,8 +115,16 @@ LAYOUT .content { margin: 0; } + .spacer-intro { + width: 300px; + } + .spacer-right { + width: 100%; + margin: 0; + } } + /* --------------------------------------------------- CARDS ----------------------------------------------------*/ @@ -121,14 +134,11 @@ CARDS display: flex; } .card { - max-width: 400px; + max-width: 300px; color: var(--black-mid); } -.cta-top .card { - color: var(--yellow-mid); -} .card h2, -.card p { +.card p { text-align: center; } .footer-card p { @@ -149,7 +159,7 @@ CARDS align-self: center; } .card:nth-child(2) { - margin: 80px 0 80px 0; + margin: 100px 0 100px 0; } .footer-card { text-align: center; @@ -158,9 +168,7 @@ CARDS /* Desktop Styles */ @media only screen and (min-width: 961px) { .card-deck, - .footer-card-deck, - .cta-top .card, - .outro .card { + .footer-card-deck { flex-direction: row; } .card { @@ -206,6 +214,7 @@ h2 { } h3, h4 { + font-size: 14px; font-weight: 400; color: var(--black-mid); } @@ -227,10 +236,6 @@ h4 { h1 { margin: 20px 0 10px 0; } - h3, - h4 { - font-size: 14px; - } } /* Mobile Styles */ @media only screen and (max-width: 480px) { @@ -239,6 +244,8 @@ h4 { font-size: 22px; } } + + /* --------------------------------------------------- LINKS ----------------------------------------------------*/ @@ -264,15 +271,57 @@ color: var(--grey-bright); font-weight: 400; } + /* --------------------------------------------------- TYPO ELEMENTS ----------------------------------------------------*/ -p { - margin: 0 0 20px 0; -} h1 + p { color: var(--black-mid); } +.bg h2 { + margin: 0 0 10px 0; +} +#bg-cta-top h2, +#bg-cta-top p, +#bg-cta-top .btn-wrapper, +#bg-outro h2, +#bg-outro p, +#bg-outro .btn-wrapper { + text-align: right; +} +#bg-cta-bottom .btn-wrapper { + text-align: center; +} +#bg-cta-top h2, +#bg-cta-top p { + color: var(--white); +} +#bg-outro h2, +#bg-outro p { + color: var(--black-mid); +} +strong, +h1 + p strong, +.bg strong { + font-weight: 700; +} +.container-reader h2 { + margin: 0 0 20px 0; + color: var(--grey-bright); +} +strong, +h3 strong { + text-decoration: none; + font-weight: 400; + color: var(--black-mid); +} +.cta-top strong { + color: var(--white); +} +.content-index p, +.content p { + margin: 0 0 20px 0; +} hr { height: 0; margin: 80px 0 20px 0; @@ -284,40 +333,25 @@ blockquote { font-style: italic; border-left: 1px solid var(--grey-bright); } -strong, -h1 + p strong, -.bg strong { - font-weight: 700; +ol { + padding-inline-start: 20px; +} +em { + background: linear-gradient(transparent 66%, var(--yellow-bright) 66%); + font-style: normal; } .footer-card h3 strong { font-weight: 700; color: var(--yellow-mid); } -strong, -h3 strong { - text-decoration: none; - font-weight: 400; - color: var(--black-mid); -} .footer h3, .footer h4 { color: var(--yellow-mid); 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 { color: var(--grey-bright); } -ol { - padding-inline-start: 20px; -} /* --------------------------------------------------- @@ -362,6 +396,7 @@ BUTTONS border: solid var(--white) 5px; } + /* --------------------------------------------------- MENU ----------------------------------------------------*/ @@ -464,7 +499,6 @@ nav ul li ul li a { nav ul li:last-child a { box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2); } - .nav-dropdown { position: static; } @@ -520,67 +554,22 @@ nav ul li ul li a { /* --------------------------------------------------- GRAPHICS ----------------------------------------------------*/ -.bg h2 { - margin: 0 0 10px 0; -} #bg-intro { - width: 75%; background: url(/theme/images/gfx-intro.svg) no-repeat center; - background-size: cover; } /*-------------------------*/ -#bg-feature-a, -#bg-feature-b, -#bg-feature-c { - background: url(/theme/images/gfx-feature-a.svg) no-repeat center; - background-size: cover; +#bg-feature { + background: url(/theme/images/gfx-pattern-mint-bright.svg) center; } /*-------------------------*/ #bg-cta-top { - width: 75%; -} -#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; + background: url(/theme/images/gfx-object-white.svg) center; } /*-------------------------*/ #bg-outro { - width: 75%; -} -#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; + background: url(/theme/images/gfx-pattern-yellow-bright.svg) center; } /*-------------------------*/ #bg-cta-bottom { - width: 75%; -} -#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; - } + background: url(/theme/images/gfx-pattern-yellow-bright.svg) center; } diff --git a/homepage/theme/static/images/gfx-cta-top.svg b/homepage/theme/static/images/gfx-cta-top.svg deleted file mode 100644 index 25a7819..0000000 --- a/homepage/theme/static/images/gfx-cta-top.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - diff --git a/homepage/theme/static/images/gfx-feature-a.svg b/homepage/theme/static/images/gfx-feature-a.svg deleted file mode 100644 index 3706772..0000000 --- a/homepage/theme/static/images/gfx-feature-a.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - diff --git a/homepage/theme/static/images/gfx-intro.svg b/homepage/theme/static/images/gfx-intro.svg index 054ea4b..3df8296 100644 --- a/homepage/theme/static/images/gfx-intro.svg +++ b/homepage/theme/static/images/gfx-intro.svg @@ -7,28 +7,27 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="560" - height="350" - viewBox="0 0 560 350" + width="362" + height="351" + viewBox="0 0 362 351" + fill="none" version="1.1" - id="svg1802" - sodipodi:docname="temp.svg" - inkscape:version="0.92.4 (5da689c313, 2019-01-14)" - style="fill:none"> + id="svg4" + sodipodi:docname="path2.svg" + inkscape:version="0.92.4 (5da689c313, 2019-01-14)"> + id="metadata10"> image/svg+xml - + id="defs8" /> + inkscape:current-layer="svg4" /> + inkscape:connector-curvature="0" + style="fill:#bbd9d3" /> diff --git a/homepage/theme/static/images/gfx-object-white.svg b/homepage/theme/static/images/gfx-object-white.svg new file mode 100644 index 0000000..21859e9 --- /dev/null +++ b/homepage/theme/static/images/gfx-object-white.svg @@ -0,0 +1,493 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-outro.svg b/homepage/theme/static/images/gfx-outro.svg deleted file mode 100644 index 243619b..0000000 --- a/homepage/theme/static/images/gfx-outro.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - diff --git a/homepage/theme/static/images/gfx-pattern-mint-bright.svg b/homepage/theme/static/images/gfx-pattern-mint-bright.svg new file mode 100644 index 0000000..fc966b1 --- /dev/null +++ b/homepage/theme/static/images/gfx-pattern-mint-bright.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-pattern-yellow-bright.svg b/homepage/theme/static/images/gfx-pattern-yellow-bright.svg new file mode 100644 index 0000000..9246954 --- /dev/null +++ b/homepage/theme/static/images/gfx-pattern-yellow-bright.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/homepage/theme/static/images/illustration.svg b/homepage/theme/static/images/illustration.svg deleted file mode 100644 index 4614354..0000000 --- a/homepage/theme/static/images/illustration.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/homepage/theme/static/images/offen-sign-brand-grey.svg b/homepage/theme/static/images/offen-sign-brand-grey.svg deleted file mode 100644 index a661095..0000000 --- a/homepage/theme/static/images/offen-sign-brand-grey.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html index 7c40f42..d8a3e61 100644 --- a/homepage/theme/templates/base.html +++ b/homepage/theme/templates/base.html @@ -51,17 +51,6 @@
  • Status
    • -
  • - Auditorium - -
  • Contact
    • @@ -72,58 +61,56 @@ Support Us - - - - + + + + {% if page.href == "/" %}
    -
    -
    -
    - offen logo -
    -

    - Transparent web analytics for operators and users -

    -

    - offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. -

    -
    - Get involved +
    +
    +
    +
    + offen logo +
    +

    + Transparent web analytics for operators and users +

    +

    + offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. +

    +
    + Get involved +
    -
    -
    -
    -
    +
    +
    +
    +

    - Free & Open Source + Free & Open

    - Anyone can audit our code to verify it works as intended. offen will always be available free of charge. + Anyone can audit our open source code to verify it works as intended. offen will always be available free of charge.

    -
    -
    -
    +

    - Fair & Secure + Fair & Secure

    Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.

    -
    -
    -
    +

    - Easy to use + Easy to use

    Simply paste our code into the source of your website. Users can visit the auditorium to access their data. @@ -134,20 +121,19 @@

    +
    -
    -
    -
    -
    -

    - Build in progress -

    -

    - What is already up and running and where we want to go. -

    -
    - Project status -
    +
    +
    +
    +

    + In the making +

    +

    + offen is still in alpha. Discover what is already up and running and where we want to go in the coming months. +

    +
    + Project status
    @@ -171,41 +157,34 @@ {% if page.href != "/" %}
    -
    -
    - -
    -
    +
    +
    +
    +

    - Transparent web analytics + Participate

    - offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. + Development of offen has just started. Do not hesitate to make a contribution and help us handle data with respect.

    Get involved
    -
    - -
    -
    +

    - Build in progress + In the making

    - 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.

    Project status
    -
    - -
    -
    +

    - Charitable purpose + Good cause

    We're working hard to ensure that offen is independent, cutting-edge and can be sustained for years to come. @@ -215,27 +194,22 @@

    - - -
    {% else %}
    -
    -
    -
    -
    -

    - Charitable purpose -

    -

    - We're working hard to ensure that offen is independent, cutting-edge and can be sustained for years to come. -

    -
    - Support us -
    +
    +
    +
    +

    + Good cause +

    +

    + We're working hard to ensure that offen is independent, cutting-edge and can be sustained for years to come. +

    +
    + Support us
    @@ -252,17 +226,17 @@

    - Contact + Contact

    - Our data policy + GitHub

    - Privacy + Support Us

    - August 2019 + September 2019
    diff --git a/homepage/theme/templates/temp.html b/homepage/theme/templates/temp.html deleted file mode 100644 index 5eef02c..0000000 --- a/homepage/theme/templates/temp.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - Temp - - - - - - -
    -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    - INTRO -
    -
    - -
    -
    - CONTENT -
    -
    - -
    -
    - FOOTER -
    -
    - - - - diff --git a/homepage/theme/templates/temp_safe.html b/homepage/theme/templates/temp_safe.html deleted file mode 100644 index 1e69075..0000000 --- a/homepage/theme/templates/temp_safe.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Temp - - - - - - -
    -
    -
    -
    - -
    - -
    -
    -
    - - -
    -
    - INTRO -
    -
    - -
    -
    - CONTENT -
    -
    - -
    -
    - FOOTER -
    -
    - - - - - -