offen.software/website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basics_01 #1

Merged
hendr-ik merged 17 commits from basics_01 into development 2023-11-12 20:44:33 +01:00
Conversation 0 Commits 17 Files Changed 17 +35 -38
5 changed files with 35 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 37a45f262c - Show all commits

7
website/theme/static/css/styles.css
View File

@ -30,7 +30,7 @@ COLORS
LAYOUT LAYOUT
----------------------------------------------------*/ ----------------------------------------------------*/
.splashContent { .splashContent {
min-height: 85vh; min-height: 84vh;
} }
.splashCta { .splashCta {
position: -webkit-sticky; position: -webkit-sticky;
@ -48,10 +48,7 @@ LAYOUT
} }
} }
.buttonPadding { .buttonPadding {
padding-top: 0.8rem; padding-top: 1.4rem;
padding-right: 3rem;
padding-bottom: 0.75rem;
padding-left: 3rem;
} }
.gapExtra { .gapExtra {
grid-gap: 1rem; grid-gap: 1rem;

8
website/theme/static/images/gfx-content-1.svg
View File

@ -1,10 +1,10 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg"> <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)"> <g clip-path="url(#clip0_80_246)">
<rect width="64" height="64" fill="#4B1202"/> <rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="704" y="128" width="64" height="64" fill="#4B1202"/>
<rect x="448" y="64" width="64" height="64" fill="#4B1202"/> <rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="256" y="128" width="64" height="64" fill="#4B1202"/> <rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" 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="96" cy="160" r="32" fill="#4B1202"/>
<circle cx="352" cy="96" r="32" fill="#4B1202"/> <circle cx="352" cy="96" r="32" fill="#4B1202"/>
<circle cx="672" cy="96" r="32" fill="#4B1202"/> <circle cx="672" cy="96" r="32" fill="#4B1202"/>

Side by Side

After

Width:  |  Height:  |  Size: 697 B

4
website/theme/static/images/gfx-content-2.svg
View File

@ -1,6 +1,6 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="128" y="64" width="64" height="64" fill="#4B1202"/> <rect x="128" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="128" width="64" height="64" 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="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="352" cy="160" r="32" fill="#4B1202"/> <circle cx="352" cy="160" r="32" fill="#4B1202"/>
</svg> </svg>

Side by Side

After

Width:  |  Height:  |  Size: 342 B

26
website/theme/static/images/gfx-index.svg
View File

@ -1,18 +1,18 @@
<svg width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg"> <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)"> <g clip-path="url(#clip0_79_77)">
<rect width="64" height="64" fill="#4B1202"/> <rect width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="64" y="64" width="64" height="64" fill="#4B1202"/> <rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="192" y="192" width="64" height="64" fill="#4B1202"/> <rect x="192" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="384" y="192" width="64" height="64" fill="#4B1202"/> <rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="256" y="256" width="64" height="64" fill="#4B1202"/> <rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="320" y="320" width="64" height="64" fill="#4B1202"/> <rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="384" y="384" width="64" height="64" fill="#4B1202"/> <rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="320" width="64" height="64" fill="#4B1202"/> <rect x="320" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="192" y="64" width="64" height="64" fill="#4B1202"/> <rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="448" y="128" width="64" height="64" fill="#4B1202"/> <rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="192" width="64" height="64" fill="#4B1202"/> <rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="576" y="256" width="64" height="64" fill="#4B1202"/> <rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="704" y="384" width="64" height="64" 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="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="32" cy="96" r="32" fill="#4B1202"/> <circle cx="32" cy="96" r="32" fill="#4B1202"/>
<circle cx="96" cy="160" r="32" fill="#4B1202"/> <circle cx="96" cy="160" r="32" fill="#4B1202"/>

Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

28
website/theme/templates/index.html
View File

@ -7,19 +7,19 @@
<div class="splashContent"> <div class="splashContent">
<div class="w-100 pt3 ph3 ph5-ns mb3 mb4-m mb5-l"> <div class="w-100 h3">
<h1 class="f4 ma0"> <h1 class="f4 ma0 pt3 ml3">
<span class="fw4">offen.</span><span class="fw7">software</span> <span class="fw4">offen.</span><span class="fw7">software</span>
</h1> </h1>
</div> </div>
<div class="w-100 bgColorOrange mb3 mb4-ns"> <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="448" class="db imageCrop"> <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448" class="db imageCrop">
</div> </div>
</div> </div>
<div class="mw7 center paddingSplash"> <div class="mw7 center paddingSplash mt4">
<h2 class="f4 f2-ns ma0"> <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> <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> </h2>
@ -28,39 +28,39 @@
</div> </div>
<div class="splashCta bgColorWine"> <div class="splashCta bgColorWine">
<div class="flex justify-center pv4"> <div class="flex justify-center pv5">
<a class="link dim br1 f5 fw7 ttu tc trackedExtraWide buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a> <a class="link dim br1 f5 fw7 ttu tc trackedExtraWide h3 w5 buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
</div> </div>
</div> </div>
<!-- FOLD --> <!-- FOLD 1 -->
<div class="w-100 colorWine bgColorOrange pb5 mt5 ph3 ph5-ns"> <div class="w-100 colorWine bgColorOrange">
<div class="w-100 bgColorOrange mb3 mb4-ns"> <div class="w-100 bgColorOrange">
<div class="mw7 center"> <div class="mw7 center">
<img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192" class="db imageCrop"> <img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
</div> </div>
</div> </div>
<div class="mw7 center paddingExtra pb4"> <div class="mw7 center paddingExtra ph3 ph5-ns">
<p class="ma0 mb3 ml4 ml6-ns"> <p class="ma0 mb3 ml4 ml6-ns">
The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span> The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span>
</p> </p>
<p class="ma0 mb3 mr4 mr6-ns"> <p class="ma0 mr4 mr6-ns">
We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-ns">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy. We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-ns">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
</p> </p>
</div> </div>
<div class="w-100 bgColorOrange mb3 mb4-ns"> <div class="w-100 bgColorOrange">
<div class="mw7 center"> <div class="mw7 center">
<img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192" class="db imageCrop"> <img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
</div> </div>
</div> </div>
<div class="mw7 center paddingExtra pt4"> <div class="mw7 center paddingExtra ph3 ph5-ns">
<p class="ma0 mb3 ml4 ml6-ns"> <p class="ma0 mb3 ml4 ml6-ns">
<span class="fw7 f4 f2-ns">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. <span class="fw7 f4 f2-ns">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.
@ -79,7 +79,7 @@
</div> </div>
<!-- FOLD --> <!-- FOLD 2 -->
<div class="w-100 w-auto-ns pt5 pb6 ph3"> <div class="w-100 w-auto-ns pt5 pb6 ph3">