mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
pelican update
This commit is contained in:
parent
412951e43c
commit
15245aa87e
@ -1,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<meta charset="UTF-8">
|
||||
@ -25,16 +24,80 @@
|
||||
<script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
|
||||
{% endif %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<a href="/" title="offen home page" alt="offen home page">
|
||||
<img src="/theme/images/logo.svg" alt="offen logo" width="165" height="102" class="logo">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!--- 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/">Deep dive</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/status/">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Auditorium</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li>
|
||||
<a href="#">for Operators</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">for Users</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:{{CONTACT_EMAIL}}">Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{PATREON_URL}}" target="_blank">Support Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!--- MENU end -->
|
||||
|
||||
<!--- INDEX SETUP start -->
|
||||
{% if page.href == "/" %}
|
||||
<div class='intro'>
|
||||
<div class='container-reader'>
|
||||
INTRO
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!--- INDEX SETUP end -->
|
||||
|
||||
{% if page.href == "/" %}
|
||||
<div class='content-index'>
|
||||
{% endif %}
|
||||
{% if page.href != "/" %}
|
||||
<div class='content'>
|
||||
{% endif %}
|
||||
<div class='container-reader'>
|
||||
{% block content %}{% endblock %}
|
||||
</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>
|
||||
|
||||
@ -1,50 +1,13 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
<!--
|
||||
{% block title %}
|
||||
{{ page.title }}
|
||||
{% endblock %}
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
<section>
|
||||
{% block before_content %}
|
||||
<h1>
|
||||
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
|
||||
</h1>
|
||||
{% endblock %}
|
||||
{% block page_content %}
|
||||
{{ page.content }}
|
||||
{% endblock %}
|
||||
{% block after_content %}
|
||||
<nav class="navigation-wrapper">
|
||||
<div class="button-wrapper btn-fill-space">
|
||||
{% if page.href != "/deep-dive/" %}
|
||||
<a class="btn btn-color-grey" href="/deep-dive/">
|
||||
Deep dive
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if page.href != "/" %}
|
||||
<a class="btn btn-color-grey" href="/">
|
||||
Summary
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if page.href != "/status/" %}
|
||||
<a class="btn btn-color-grey" href="/status/">
|
||||
Status
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="btn btn-color-orange" href="mailto:{{CONTACT_EMAIL}}">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
<div class="button-wrapper btn-fill-space">
|
||||
<a class="btn btn-color-orange" href="{{GITHUB_ORG}}" target="_blank">
|
||||
Get involved
|
||||
</a>
|
||||
<a class="btn btn-color-orange" href="{{PATREON_URL}}" target="_blank">
|
||||
Support us
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@ -6,13 +6,11 @@
|
||||
<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'>
|
||||
|
||||
<!--- MENU start -->
|
||||
<div class='desktop_width'>
|
||||
<section class="nav-bar">
|
||||
<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>
|
||||
@ -53,42 +51,26 @@
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
<!--- MENU end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--- MENU end -->
|
||||
<div class='intro'>
|
||||
<div class='desktop_width'>
|
||||
<div class='container-reader'>
|
||||
INTRO
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='page'>
|
||||
<div class='content'>
|
||||
<!--- CONTENT start -->
|
||||
<div class='content-index'>
|
||||
<div class='container-reader'>
|
||||
CONTENT
|
||||
</div>
|
||||
<div class='feature-1'>
|
||||
FEATURE-1
|
||||
</div>
|
||||
<div class='feature-2'>
|
||||
FEATURE-2
|
||||
</div>
|
||||
<div class='feature-3'>
|
||||
FEATURE-3
|
||||
</div>
|
||||
<div class='feature-4'>
|
||||
FEATURE-4
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--- CONTENT end -->
|
||||
<div class='footer'>
|
||||
<div class='desktop_width'>
|
||||
<div class='container-full'>
|
||||
FOOTER
|
||||
</div>
|
||||
</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
Normal file
79
homepage/theme/templates/temp_safe.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!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>
|
||||
172
styles/index.css
172
styles/index.css
@ -1,47 +1,60 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
color: #898989;
|
||||
font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
/* ---------------------------------------------------
|
||||
ROOTS
|
||||
----------------------------------------------------*/
|
||||
:root {
|
||||
--yellow-mid: #F7BF08;
|
||||
--yellow-bright: #F7BF08;
|
||||
--black-mid: #39352A;
|
||||
--grey-mid: #898989;
|
||||
--grey-bright: #D5D5D5;
|
||||
--white: #FFF;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
BASICS
|
||||
----------------------------------------------------*/
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
color: var(--black-mid);;
|
||||
font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MENU
|
||||
----------------------------------------------------*/
|
||||
|
||||
.nav-bar {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: absolute;
|
||||
padding: 12px 0 0 20px;
|
||||
float: left;
|
||||
line-height: 70px;
|
||||
}
|
||||
/*
|
||||
.brand a img {
|
||||
max-height: 70px;
|
||||
}
|
||||
*/
|
||||
.brand a,
|
||||
.brand a:visited {
|
||||
color: #39352A;
|
||||
color: var(--black-mid);;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
float: right;
|
||||
}
|
||||
@ -59,16 +72,13 @@ nav ul li a:visited {
|
||||
display: block;
|
||||
padding: 0 20px;
|
||||
line-height: 70px;
|
||||
background: #F7BF08;
|
||||
color: #39352A;
|
||||
background: var(--yellow-mid);
|
||||
color: var(--black-mid);;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav ul li a:hover,
|
||||
nav ul li a:visited:hover {
|
||||
/*
|
||||
background: #FDE28C;
|
||||
*/
|
||||
color: #39352A;
|
||||
color: var(--black-mid);;
|
||||
}
|
||||
nav ul li a:not(:only-child):after,
|
||||
nav ul li a:visited:not(:only-child):after {
|
||||
@ -76,13 +86,12 @@ nav ul li a:visited:not(:only-child):after {
|
||||
content: ' ▾';
|
||||
}
|
||||
nav ul li ul li {
|
||||
min-width: 140px;
|
||||
min-width: 150px;
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
display: none;
|
||||
@ -93,7 +102,7 @@ nav ul li ul li a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #F7BF08;
|
||||
background: var(--yellow-mid);
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
@ -102,7 +111,6 @@ nav ul li ul li a {
|
||||
.nav-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
padding: 70px 0 15px;
|
||||
@ -116,13 +124,12 @@ nav ul li ul li a {
|
||||
nav ul li a {
|
||||
padding: 15px;
|
||||
line-height: 20px;
|
||||
padding-left: 25%;
|
||||
padding-left: 25%;
|
||||
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding-left: 30%;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: static;
|
||||
}
|
||||
@ -133,6 +140,7 @@ nav ul li ul li a {
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.nav-list {
|
||||
display: block !important;
|
||||
@ -152,7 +160,7 @@ nav ul li ul li a {
|
||||
border-radius: 1px;
|
||||
height: 3px;
|
||||
width: 35px;
|
||||
background: #39352A;
|
||||
background: var(--black-mid);;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
@ -177,117 +185,59 @@ nav ul li ul li a {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
LAYOUT
|
||||
----------------------------------------------------*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #F7BF08;
|
||||
background-color: var(--yellow-mid);
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-top: 70px;
|
||||
background-color: #F7BF08;
|
||||
margin: 70px 0 0 0;
|
||||
background-color: var(--yellow-mid);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #000;
|
||||
margin: 70px 0 0 0;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.feature-1,
|
||||
.feature-2,
|
||||
.feature-3,
|
||||
.feature-4 {
|
||||
.content-index {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #000;
|
||||
/*
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
*/
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-color: #39352A;
|
||||
height: 240px;
|
||||
color: var(--grey-mid);
|
||||
background-color: var(--black-mid);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Mobile Styles */
|
||||
@media only screen and (max-width: 400px) {
|
||||
}
|
||||
|
||||
/* Tablet Styles */
|
||||
@media only screen and (min-width: 401px) and (max-width: 960px) {
|
||||
.feature-1,
|
||||
.feature-2,
|
||||
.feature-3,
|
||||
.feature-4 {
|
||||
width: 50%;
|
||||
@media only screen and (max-width: 960px) {
|
||||
.container-reader {
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
.container-full {
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Styles */
|
||||
@media only screen and (min-width: 961px) {
|
||||
.page {
|
||||
width: 960px;
|
||||
.container-reader {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.desktop_width {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
.container-full {
|
||||
margin: 0 80px 0 80px;
|
||||
}
|
||||
.feature-1,
|
||||
.feature-2,
|
||||
.feature-3 {
|
||||
width: 33.3%;
|
||||
}
|
||||
.intro {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
/* reorder
|
||||
.feature-1 {
|
||||
height: 200px;
|
||||
order: 1;
|
||||
}
|
||||
.content {
|
||||
order: 2;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user