basics_01 #3

Merged
hendr-ik merged 21 commits from basics_01 into main 2023-11-13 09:46:15 +01:00
7 changed files with 188 additions and 151 deletions
Showing only changes of commit c21fef7769 - Show all commits

View File

@ -0,0 +1,34 @@
title: Imprint offen.software
template: page
slug: imprint
exclude_from_sitemap: true
### Imprint
#### External hosting
This website is hosted by an external service provider. Non-personal data on requests to this website are stored on the hoster's servers and automatically deleted after 7 days.
Responsible for hosting this website is:
Hetzner Online GmbH
Industriestr. 25
91710 Gunzenhausen, Germany
E-mail: info@hetzner.com
Internet address: www.hetzner.com
#### Data processing / Information in accordance with Section 5 TMG
Data processing on this website is handled by the website operator. If you have any questions about data protection, please feel free to contact us at any time. Responsible for data processing and general contact for this website is:
Frederik Ring
Cuxhavener Str. 12
10555 Berlin, Germany
E-mail: hioffen@posteo.de
Internet address: www.offen.dev
#### Contact by e-mail
If you contact us by e-mail, your request including all resulting personal data (name, request) will be stored by us for the purpose of processing your request. We will not disclose your data without your consent. It remains stored with us until you request us to delete it or revoke your consent to store it.
#### License
The content of this website itself is licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License, and the underlying source code used to format and display that content is licensed under the GNU Affero General Public License v3.0.

View File

@ -1,5 +1,5 @@
title: offen.software title: offen.software
description: TBD description: We think up, create and ship software for organisations and individuals who embrace societal change.
save_as: index.html save_as: index.html
template: index template: index
sitemap_priority: 1.0 sitemap_priority: 1.0

View File

@ -58,9 +58,6 @@ MARKDOWN = {
} }
DECORATE_CONTENT = { DECORATE_CONTENT = {
'h2': ['ma0'], 'h3': ['ma0 f4'],
'h3': ['ma0'], 'h4': ['ma0 f4 normal mt5'],
'h4': ['ma0'],
'h5': ['ma0'],
'h6': ['ma0']
} }

View File

@ -61,6 +61,7 @@ LAYOUT
.gapExtra { .gapExtra {
grid-gap: 1rem; grid-gap: 1rem;
} }
/* --------------------------------------------------- /* ---------------------------------------------------
SPACING SPACING
----------------------------------------------------*/ ----------------------------------------------------*/
@ -96,6 +97,16 @@ TYPOGRAPHY
/* --------------------------------------------------- /* ---------------------------------------------------
IMAGES IMAGES
----------------------------------------------------*/ ----------------------------------------------------*/
.imageCropSplash {
height: 448px;
object-fit: none;
}
@media only screen and (max-height: 800px) {
.imageCropSplash {
height: 320px;
object-fit: none;
}
}
.imageCrop { .imageCrop {
object-fit: none; object-fit: none;
} }

View File

@ -33,9 +33,52 @@
{% endblock %} {% endblock %}
<body class="poppins f4 trackedWide lh-title no-js colorSalmon bgColorWine"> <body class="poppins f4 trackedWide lh-title no-js colorSalmon bgColorWine">
<main class="w-100"> <div class="w-100 mw9-ns center-ns h3 colorSalmonLink">
{% block content %}{% endblock %} <a class="link dim" href="/"><h1 class="f4 ma0 pt3 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
</main> </div>
{% block content %}{% endblock %}
<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 colorWineLink">
<a class="link dim" href="/"><span class="fw4">offen.</span><span class="fw7">software</span></a>
</h1>
</div>
<div class="w-100 w-50-ns">
<p class="ma0 mb2 colorWineLink">
<a class="link dim" href="mailto:hi@offen.software">hi@offen.software</a>
</p>
<p class="ma0 mb2 colorWineLink">
<a class="link dim" href="https://www.linkedin.com/company/hioffen/" rel="noopener" target="_blank">LinkedIn</a>
</p>
<p class="ma0 mb2 colorWineLink">
<a class="link dim" href="/imprint/">Imprint</a>
</p>
</div>
<div class="w-100 w-50-ns">
<p class="ma0 mb2 tl tr-ns colorWineLink">
<a class="link dim" href="https://git.offen.dev/offen.software/website" rel="noopener" target="_blank">Source code for this website</a>
</p>
<p class="fw7 ma0 tl tr-ns colorWineLink">
<a class="link dim" href="mailto:hi@offen.software">Work with us</a>
</p>
</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>
</div>
<script> <script>
document.body.classList.remove('no-js'); document.body.classList.remove('no-js');

View File

@ -3,17 +3,11 @@
{% block content %} {% block content %}
<!-- HEADER -->
<div class="splashContent"> <div class="splashContent">
<div class="w-100 mw9-ns center-ns h3 colorSalmonLink">
<a class="link dim" href="/"><h1 class="f4 ma0 pt3 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
</div>
<div class="w-100 bgColorOrange"> <div class="w-100 bgColorOrange">
<div class="mw7 center"> <div class="mw7 center">
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCrop"> <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
</div> </div>
</div> </div>
@ -79,176 +73,132 @@
<!-- FOLD 2 --> <!-- FOLD 2 -->
<div class="w-100 mw9-l center-l mv5-l" id="we"> <div id="we">
<div class="flex flex-wrap justify-center"> <div class="w-100 mw9-l center-l pv5-l" >
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l"> <div class="flex flex-wrap justify-center">
<div class="w-100 w-auto-l flex flex-column-l 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="wExtra32 h-auto h5-l colorSalmon bgColorWine ph3 pv4 pa4-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 colorSalmonLink">
<a class="link dim" href="https://www.offen.dev/" rel="noopener" target="_blank">Offen Fair Web Analytics</a>
</p>
<p class="ma0 ml4-ns mb2 colorSalmonLink">
<a class="link dim" href="https://www.analyticstxt.org/" rel="noopener" target="_blank">analytics.txt</a>
</p>
<p class="ma0 ml4-ns colorSalmonLink">
<a class="link dim" href="https://github.com/offen/docker-volume-backup" rel="noopener" target="_blank">docker-volume-backup</a>
</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"> <div class="mw6-m center-m">
<p class="fw7 f4 f2-l ma0 mb3"> <p class="fw7 f4 f2-l ma0 mb3">
We offer We are
</p> </p>
<p class="ma0 ml4-ns mb2"> <p class="ma0 ml4-ns mb2">
Web Application and website development Frederik Ring, interested in
</p> </p>
<p class="ma0 ml4-ns mb2"> <p class="ma0 ml5-ns ml2 mb2">
Independent infrastructure solutions Minimal Kubernetes distributions
</p> </p>
<p class="ma0 ml4-ns "> <p class="ma0 ml5-ns ml2 mb2">
Support and guidance with self hosting Open Source Tomato Seeds
</p>
<p class="ma0 ml5-ns ml2">
Psychological aspects of Software Development
</p> </p>
</div> </div>
</div> </div>
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l"> <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-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 colorSalmonLink">
<a class="link dim" href="https://www.offen.dev/" rel="noopener" target="_blank">Offen Fair Web Analytics</a>
</p>
<p class="ma0 ml4-ns mb2 colorSalmonLink">
<a class="link dim" href="https://www.analyticstxt.org/" rel="noopener" target="_blank">analytics.txt</a>
</p>
<p class="ma0 ml4-ns colorSalmonLink">
<a class="link dim" href="https://github.com/offen/docker-volume-backup" rel="noopener" target="_blank">docker-volume-backup</a>
</p>
</div> </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-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="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="wExtra32 hExtra20 colorSalmon bgColorWine ph3 pv4 pa4-l">
<div class="mw6-m center-m"> <div class="mw6-m center-m">
<p class="fw7 f4 f2-l ma0 mb3"> <p class="fw7 f4 f2-l ma0 mb3">
We are We are
</p> </p>
<p class="ma0 ml4-ns mb2"> <p class="ma0 ml4-ns mb2">
Frederik Ring, interested in Hendrik Niefeld, interested in
</p> </p>
<p class="ma0 ml5-ns ml2 mb2"> <p class="ma0 ml5-ns ml2 mb2">
Minimal Kubernetes distributions Make things look good
</p> </p>
<p class="ma0 ml5-ns ml2 mb2"> <p class="ma0 ml5-ns ml2 mb2">
Open Source Tomato Seeds Literal present tense in Korean
</p> </p>
<p class="ma0 ml5-ns ml2"> <p class="ma0 ml5-ns ml2">
Psychological aspects of Software Development Generative systems
</p> </p>
</div> </div>
</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-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l"> <img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 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 colorWineLink">
<a class="link dim" href="/"><span class="fw4">offen.</span><span class="fw7">software</span></a>
</h1>
</div>
<div class="w-100 w-50-ns">
<p class="ma0 mb2 colorWineLink">
<a class="link dim" href="mailto:hi@offen.software">hi@offen.software</a>
</p>
<p class="ma0 mb2 colorWineLink">
<a class="link dim" href="https://www.linkedin.com/company/hioffen/" rel="noopener" target="_blank">LinkedIn</a>
</p>
<p class="ma0 mb2 colorWineLink">
<a class="link dim" href="/imprint/">Imprint</a>
</p>
</div>
<div class="w-100 w-50-ns">
<p class="ma0 mb2 tl tr-ns colorWineLink">
<a class="link dim" href="https://git.offen.dev/offen.software/website" rel="noopener" target="_blank">Source code for this website</a>
</p>
<p class="fw7 ma0 tl tr-ns colorWineLink">
<a class="link dim" href="mailto:hi@offen.software">Work with us</a>
</p>
</div> </div>
</div> </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 %} {% endblock %}

View File

@ -6,5 +6,7 @@
{% set template = page.template %} {% set template = page.template %}
{% block content %} {% block content %}
{{ page.content }} <div class="mw7 center mv5 ph3 ph0-l">
{{ page.content }}
</div>
{% endblock %} {% endblock %}