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:
commit
1f78b416c4
@ -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
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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)
|
||||||
|
9
homepage/theme/templates/auditorium.html
Normal file
9
homepage/theme/templates/auditorium.html
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="content">
|
||||||
|
<div class="container-full">
|
||||||
|
{{ page.content }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
@ -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>
|
||||||
|
101
homepage/theme/templates/index.html
Normal file
101
homepage/theme/templates/index.html
Normal 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 %}
|
@ -1,13 +1 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
<!--
|
|
||||||
{% block title %}
|
|
||||||
{{ page.title }}
|
|
||||||
{% endblock %}
|
|
||||||
-->
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
{% block page_content %}
|
|
||||||
{{ page.content }}
|
|
||||||
{% endblock %}
|
|
||||||
{% endblock %}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user