basics_01 #1
@ -1,7 +1,5 @@
|
|||||||
title: offen.software
|
title: offen.software
|
||||||
description: TBD
|
description: TBD
|
||||||
save_as: index.html
|
save_as: index.html
|
||||||
template: page
|
template: index
|
||||||
sitemap_priority: 1.0
|
sitemap_priority: 1.0
|
||||||
|
|
||||||
### offen.software website
|
|
||||||
|
@ -58,5 +58,9 @@ MARKDOWN = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
DECORATE_CONTENT = {
|
DECORATE_CONTENT = {
|
||||||
'h1': ['f5', 'normal', 'ma0', 'fnt-bold-small'],
|
'h2': ['ma0'],
|
||||||
|
'h3': ['ma0'],
|
||||||
|
'h4': ['ma0'],
|
||||||
|
'h5': ['ma0'],
|
||||||
|
'h6': ['ma0']
|
||||||
}
|
}
|
||||||
|
21
website/theme/static/css/fonts.css
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
/* Poppins-400 - latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Poppins';
|
||||||
|
font-display: block;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local('Poppins Regular'), local('Poppins-Regular');
|
||||||
|
src: url('../fonts/Poppins-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||||
|
}
|
||||||
|
/* rubik-700 - latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Poppins';
|
||||||
|
font-display: block;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
src: local('Poppins Bold'), local('Poppins-Bold');
|
||||||
|
src: url('../fonts/Poppins-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||||
|
}
|
||||||
|
.poppins {
|
||||||
|
font-family: Poppins, sans-serif;
|
||||||
|
}
|
@ -1 +1,93 @@
|
|||||||
/* no css yet */
|
/* ---------------------------------------------------
|
||||||
|
COLORS
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.colorWine {
|
||||||
|
color: #4B1202;
|
||||||
|
}
|
||||||
|
.colorOrange {
|
||||||
|
color: #E9500A;
|
||||||
|
}
|
||||||
|
.colorSalmon {
|
||||||
|
color: #F5BEA7;
|
||||||
|
}
|
||||||
|
.colorWhite {
|
||||||
|
color: #FAFEFF;
|
||||||
|
}
|
||||||
|
.bgColorWine {
|
||||||
|
background-color: #4B1202;
|
||||||
|
}
|
||||||
|
.bgColorOrange {
|
||||||
|
background-color: #E9500A;
|
||||||
|
}
|
||||||
|
.bgColorSalmon {
|
||||||
|
background-color: #F5BEA7;
|
||||||
|
}
|
||||||
|
.bgColorWhite {
|
||||||
|
background-color: #FAFEFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
LAYOUT
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.splashContent {
|
||||||
|
min-height: 86vh;
|
||||||
|
}
|
||||||
|
.splashCta {
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.paddingSplash {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 48rem) {
|
||||||
|
.paddingSplash {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buttonPadding {
|
||||||
|
padding-top: 1.4rem;
|
||||||
|
}
|
||||||
|
.gapExtra {
|
||||||
|
grid-gap: 1rem;
|
||||||
|
}
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
SPACING
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.hExtra20 {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
.wExtra24 {
|
||||||
|
width: 24rem;
|
||||||
|
}
|
||||||
|
.wExtra32 {
|
||||||
|
width: 32rem;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 60rem) {
|
||||||
|
.hExtra20 {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.wExtra24,
|
||||||
|
.wExtra32 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
TYPOGRAPHY
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.trackedWide {
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
.trackedExtraWide {
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
IMAGES
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.imageCrop {
|
||||||
|
object-fit: none;
|
||||||
|
}
|
||||||
|
95
website/theme/static/fonts/LICENSE
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
Poppins-Regular: Indian Type Foundry, Jonny Pinhorn (https://github.com/itfoundry/poppins)
|
||||||
|
Poppins-Bold: Indian Type Foundry, Jonny Pinhorn (https://github.com/itfoundry/poppins)
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License,
|
||||||
|
Version 1.1.
|
||||||
|
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font
|
||||||
|
creation efforts of academic and linguistic communities, and to
|
||||||
|
provide a free and open framework in which fonts may be shared and
|
||||||
|
improved in partnership with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply to
|
||||||
|
any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software
|
||||||
|
components as distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to,
|
||||||
|
deleting, or substituting -- in part or in whole -- any of the
|
||||||
|
components of the Original Version, by changing formats or by porting
|
||||||
|
the Font Software to a new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed,
|
||||||
|
modify, redistribute, and sell modified and unmodified copies of the
|
||||||
|
Font Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components, in
|
||||||
|
Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the
|
||||||
|
corresponding Copyright Holder. This restriction only applies to the
|
||||||
|
primary font name as presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created using
|
||||||
|
the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
BIN
website/theme/static/fonts/Poppins-Bold.ttf
Normal file
BIN
website/theme/static/fonts/Poppins-Regular.ttf
Normal file
19
website/theme/static/images/gfx-content-1.svg
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_80_246)">
|
||||||
|
<rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
|
||||||
|
<rect x="384" width="64" height="64" fill="#4B1202"/>
|
||||||
|
<rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="352" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_80_246">
|
||||||
|
<rect width="768" height="192" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 800 B |
8
website/theme/static/images/gfx-content-2.svg
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="448" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="512" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="352" cy="160" r="32" fill="#4B1202"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 440 B |
20
website/theme/static/images/gfx-content-3.svg
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_90_2)">
|
||||||
|
<rect x="320" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="480" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="608" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="736" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_90_2">
|
||||||
|
<rect width="768" height="128" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 832 B |
10
website/theme/static/images/gfx-detail-1.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_85_316)">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_85_316">
|
||||||
|
<rect width="64" height="64" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 291 B |
11
website/theme/static/images/gfx-detail-2.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<svg width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_86_327)">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_86_327">
|
||||||
|
<rect width="64" height="128" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 342 B |
10
website/theme/static/images/gfx-detail-3.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_92_25)">
|
||||||
|
<rect width="64" height="64" rx="2" fill="#E9500A"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_92_25">
|
||||||
|
<rect width="64" height="64" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 294 B |
45
website/theme/static/images/gfx-index.svg
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<svg width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_79_77)">
|
||||||
|
<rect width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="192" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="320" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="32" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="160" cy="416" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="480" cy="416" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="416" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="352" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="416" cy="352" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="608" cy="352" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="288" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="160" cy="288" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="416" cy="288" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="352" cy="224" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="224" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="160" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="416" cy="160" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="160" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="160" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="288" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="544" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="96" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_79_77">
|
||||||
|
<rect width="768" height="448" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.2 KiB |
45
website/theme/templates/base.html
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
{% block head %}
|
||||||
|
<head>
|
||||||
|
<title>
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="referrer" content="origin">
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
|
||||||
|
<meta name="description" content="{{ description }}">
|
||||||
|
<meta property="og:site_name" content="{{ SITENAME }}">
|
||||||
|
<meta property="og:locale" content="{{ DEFAULT_LANG }}">
|
||||||
|
<meta property="og:title" content="{{ title }}">
|
||||||
|
<meta property="og:description" content="{{ description }}">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="{{ SITEURL }}">
|
||||||
|
<link rel="canonical" href="{{ SITEURL }}">
|
||||||
|
<!--
|
||||||
|
<meta property="og:image" content="{{ SITEURL }}/theme/images/###">
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="{{ SITEURL }}/theme/images/favicon.ico">
|
||||||
|
-->
|
||||||
|
{% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/styles.css", "css/fonts.css" %}
|
||||||
|
<link rel="stylesheet" href="/{{ ASSET_URL }}">
|
||||||
|
{% endassets %}
|
||||||
|
<!--
|
||||||
|
<link rel="preload" href="/theme/fonts/Poppins-Regular.woff2" as="font" crossorigin>
|
||||||
|
<link rel="preload" href="/theme/fonts/Poppins-Bold.woff2" as="font" crossorigin>
|
||||||
|
-->
|
||||||
|
</head>
|
||||||
|
{% endblock %}
|
||||||
|
<body class="poppins f4 trackedWide lh-title no-js colorSalmon bgColorWine">
|
||||||
|
|
||||||
|
<main class="w-100">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.body.classList.remove('no-js');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
256
website/theme/templates/index.html
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
{% extends "page.html" %}
|
||||||
|
{% set index = True %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
<!-- HEADER -->
|
||||||
|
|
||||||
|
<div class="splashContent">
|
||||||
|
|
||||||
|
<div class="w-100 mw9-ns center-ns h3">
|
||||||
|
<h1 class="f4 ma0 pt3 ml3 ml5-l">
|
||||||
|
<span class="fw4">offen.</span><span class="fw7">software</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-100 bgColorOrange">
|
||||||
|
<div class="mw7 center">
|
||||||
|
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCrop">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mw7 center paddingSplash mt4">
|
||||||
|
<h2 class="f4 f2-ns ma0">
|
||||||
|
<span class="fw4">We </span><span class="fw7">think up, create and ship </span><span class="fw4">software for organisations and individuals who embrace </span><span class="fw7">societal change.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="splashCta bgColorWine">
|
||||||
|
<div class="flex justify-center pb5">
|
||||||
|
<a class="link dim br1 f5 fw7 ttu tc trackedExtraWide h3 w5 buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FOLD 1 -->
|
||||||
|
|
||||||
|
<div class="w-100 colorWine bgColorOrange">
|
||||||
|
|
||||||
|
<div class="w-100 bgColorOrange">
|
||||||
|
<div class="mw7 center">
|
||||||
|
<img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mw7 center mv5 ph3 ph0-l">
|
||||||
|
|
||||||
|
<p class="ma0 mb4 ml6-l">
|
||||||
|
The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-l">facilitate change for the better.</span>
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mr4 mr6-l">
|
||||||
|
We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-l">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-100 bgColorOrange">
|
||||||
|
<div class="mw7 center">
|
||||||
|
<img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mw7 center mt5 ph3 ph0-l">
|
||||||
|
|
||||||
|
<p class="ma0 mb4 ml6-l">
|
||||||
|
<span class="fw7 f4 f2-l">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb4 mr6-l">
|
||||||
|
<span class="fw7 f4 f2-l">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml6-l">
|
||||||
|
Our clients value <span class="fw7 f4 f2-l">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center pv5">
|
||||||
|
<a class="link dim br1 f5 fw7 ttu tc trackedExtraWide h3 w5 buttonPadding colorWhite bgColorWine" href="###" rel="noopener">Work with us</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FOLD 2 -->
|
||||||
|
|
||||||
|
<div class="w-100 mw9-l center-l mv5-l">
|
||||||
|
|
||||||
|
<div class="flex flex-wrap justify-center">
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
|
||||||
|
|
||||||
|
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
|
||||||
|
<div class="wExtra32 h-auto h5-l colorSalmon bgColorWine ph3 pv4 pa4-l">
|
||||||
|
<div class="mw6-m center-m">
|
||||||
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
We offer
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
Web Application and website development
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
Independent infrastructure solutions
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns ">
|
||||||
|
Support and guidance with self hosting
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
||||||
|
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
||||||
|
|
||||||
|
<div class="wExtra24 h-auto h5-l colorSalmon bgColorWine ph3 pv4 pa4-l">
|
||||||
|
<div class="mw6-m center-m">
|
||||||
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
We created
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
Offen Fair Web Analytics
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
analytics.txt
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns">
|
||||||
|
docker-volume-backup
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
|
||||||
|
|
||||||
|
<div class="wExtra24 h-auto h5-l colorSalmon bgColorWine ph3 pv4 pa4-l">
|
||||||
|
<div class="mw6-m center-m">
|
||||||
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
We worked with
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
NLNet
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
RBB
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
Ecosia
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns">
|
||||||
|
Wikimedia
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
||||||
|
|
||||||
|
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
|
||||||
|
<div class="wExtra32 hExtra20 colorSalmon bgColorWine ph3 pv4 pa4-l">
|
||||||
|
<div class="mw6-m center-m">
|
||||||
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
We are
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
Frederik Ring, interested in
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml5-ns ml2 mb2">
|
||||||
|
Minimal Kubernetes distributions
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml5-ns ml2 mb2">
|
||||||
|
Open Source Tomato Seeds
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml5-ns ml2">
|
||||||
|
Psychological aspects of Software Development
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
|
||||||
|
|
||||||
|
<div class="wExtra32 hExtra20 colorSalmon bgColorWine ph3 pv4 pa4-l">
|
||||||
|
<div class="mw6-m center-m">
|
||||||
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
We are
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml4-ns mb2">
|
||||||
|
Hendrik Niefeld, interested in
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml5-ns ml2 mb2">
|
||||||
|
Make things look good
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml5-ns ml2 mb2">
|
||||||
|
Literal present tense in Korean
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml5-ns ml2">
|
||||||
|
Generative systems
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
|
||||||
|
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
|
||||||
|
<div class="w-100 colorWine bgColorOrange">
|
||||||
|
|
||||||
|
<div class="w-100 mw9-ns center-ns flex flex-wrap justify-between pt5 pb6 ph3 ph5-l">
|
||||||
|
|
||||||
|
<div class="w-100 h3">
|
||||||
|
<h1 class="f2 ma0">
|
||||||
|
<span class="fw4">offen.</span><span class="fw7">software</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-100 w-50-ns">
|
||||||
|
<p class="ma0 mb2">
|
||||||
|
hi@offen.software
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb2">
|
||||||
|
LinkedIn
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb2">
|
||||||
|
Imprint
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-100 w-50-ns">
|
||||||
|
<p class="ma0 mb2 tl tr-ns">
|
||||||
|
Source code for this website
|
||||||
|
</p>
|
||||||
|
<p class="fw7 ma0 tl tr-ns">
|
||||||
|
Work with us
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-100 bgColorOrange">
|
||||||
|
<div class="mw7 center">
|
||||||
|
<img src="/theme/images/gfx-content-3.svg" alt="pattern" width="768px" height="128px" class="db imageCrop">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
@ -1,9 +1,10 @@
|
|||||||
{% extends "_layout.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% set href = page.href %}
|
|
||||||
{% set title = page.title %}
|
{% set title = page.title %}
|
||||||
{% set description = page.description %}
|
{% set description = page.description %}
|
||||||
|
{% set href = page.save_as.replace('index.html', '') %}
|
||||||
|
{% set template = page.template %}
|
||||||
|
|
||||||
{% block body %}
|
{% block content %}
|
||||||
{{ page.content }}
|
{{ page.content }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|