2
0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00

Merge pull request #97 from offen/content-structure

Use template inheritance for defining conditional layouts
This commit is contained in:
Frederik Ring 2019-09-03 11:40:53 +02:00 committed by GitHub
commit 1f78b416c4
7 changed files with 150 additions and 152 deletions

View File

@ -2,6 +2,7 @@ Title: Transparent web analytics | offen
description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
save_as: index.html save_as: index.html
href: / href: /
template: index
## Summary ## Summary

View File

@ -406,14 +406,13 @@ MENU
.nav-bar { .nav-bar {
height: 70px; height: 70px;
} }
.brand, .brand {
.brand-index {
position: absolute; position: absolute;
padding: 12px 0 0 20px; padding: 12px 0 0 20px;
float: left; float: left;
line-height: 70px; line-height: 70px;
} }
.brand-index { body.index .brand {
opacity: 0; opacity: 0;
} }
.nav-container { .nav-container {

View File

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

View File

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

View File

@ -1,7 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %}{% endblock %}</title> <title>
{% block title %}{{ page.title }}{% endblock %}
</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@ -18,22 +20,17 @@
<link rel="canonical" href="{{ SITEURL }}/{{ page.save_as }}"> <link rel="canonical" href="{{ SITEURL }}/{{ page.save_as }}">
<link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
{% assets filters="cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.css" %} {% assets filters="cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.css" %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}"> <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %} {% endassets %}
{% if OFFEN_ACCOUNT_ID %} {% if OFFEN_ACCOUNT_ID %}
<script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script> <script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
{% endif %} {% endif %}
</head> </head>
<body> <body class="{{page.template}}">
<div class="menu"> <div class="menu">
<section class="nav-bar"> <section class="nav-bar">
<div class="nav-container"> <div class="nav-container">
{% if page.href == "/" %}
<div class="brand-index">
{% else %}
<div class="brand"> <div class="brand">
{% endif %}
<a href="/"><img src="/theme/images/offen-brand-white.svg" alt="offen logo" width="42" height="46" class="logo"></a> <a href="/"><img src="/theme/images/offen-brand-white.svg" alt="offen logo" width="42" height="46" class="logo"></a>
</div> </div>
<nav> <nav>
@ -58,161 +55,62 @@
<a href="{{PATREON_URL}}" target="_blank">Support Us</a> <a href="{{PATREON_URL}}" target="_blank">Support Us</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</section> </section>
</div> </div>
{% if page.href == "/" %} {% block content %}
<div class="intro"> <div class="content">
<div class="bg" id="bg-intro"> <div class="container-reader">
<div class="container-reader"> {{ page.content }}
<div class="spacer-intro">
<div class="sign">
<img src="/theme/images/offen-sign-brand-white.svg" alt="offen logo" width="152" height="94">
</div>
<h1>
<em>Transparent web analytics for operators and users</em>
</h1>
<p>
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
{% endblock %}
<div class="feature"> {% block outro %}
<div class="bg" id="bg-feature"> <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">
<h2> <h2>
<em>Free & Open</em> Participate
</h2> </h2>
<p> <p>
Anyone can audit our open source code to verify it works as intended. <strong>offen</strong> will always be available free of charge. 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">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}">Get involved</a>
</div>
</div> </div>
<div class="card"> <div class="card">
<h2> <h2>
<em>Fair & Secure</em> In the making
</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. 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">
<a class="btn btn-color-black" href="/status/">Project status</a>
</div>
</div> </div>
<div class="card"> <div class="card">
<h2> <h2>
<em>Easy to use</em> Good cause
</h2> </h2>
<p> <p>
Simply paste our code into the source of your website. Users can visit the auditorium to access their data. We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
</p> </p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endblock %}
<div class="cta-top">
<div class="bg" id="bg-cta-top">
<div class="container-reader">
<div class="spacer-right">
<h2>
In the making
</h2>
<p>
<strong>offen</strong> is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-white" href="/status/">Project status</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if page.href == "/" %}
<div class="content-index">
{% else %}
<div class="content">
{% endif %}
{% if page.href == "/auditorium/operator/" or page.href == "/auditorium/user/" %}
<div class="container-full">
{% else %}
<div class="container-reader">
{% endif %}
{% block content %}{% endblock %}
</div>
</div>
{% if page.href != "/" %}
<div class="cta-bottom">
<div class="bg" id="bg-cta-bottom">
<div class="container-full">
<div class="card-deck">
<div class="card">
<h2>
Participate
</h2>
<p>
Development of <strong>offen</strong> has just started. Do not hesitate to make a contribution and help us handle data with respect.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}">Get involved</a>
</div>
</div>
<div class="card">
<h2>
In the making
</h2>
<p>
This project is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="/status/">Project status</a>
</div>
</div>
<div class="card">
<h2>
Good cause
</h2>
<p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% else %}
<div class="outro">
<div class="bg" id="bg-outro">
<div class="container-reader">
<div class="spacer-right">
<h2>
Good cause
</h2>
<p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="footer"> <div class="footer">
<div class="footer-card-deck"> <div class="footer-card-deck">
@ -237,8 +135,9 @@
</div> </div>
</div> </div>
</div> </div>
{% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js" %} {% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js" %}
<script src="{{ SITEURL }}/{{ ASSET_URL }}"></script> <script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
{% endassets %} {% endassets %}
</body> </body>
</html> </html>

View File

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

View File

@ -1,13 +1 @@
{% extends "base.html" %} {% extends "base.html" %}
<!--
{% block title %}
{{ page.title }}
{% endblock %}
-->
{% block content %}
{% block page_content %}
{{ page.content }}
{% endblock %}
{% endblock %}