2
0
mirror of https://github.com/offen/website.git synced 2024-10-18 12:10:25 +02:00

bg images vs layout

This commit is contained in:
Hendrik Niefeld 2020-02-23 23:21:26 +01:00
parent 97d654e630
commit bcf62c0c9c
5 changed files with 62 additions and 7 deletions

View File

@ -66,12 +66,13 @@ LAYOUT
}
}
/* Custom Tachyons class */
.w55-container,
.w55 {
width: 18.5rem;
width: 20rem;
}
/* Custom media query - extra small */
@media only screen and (max-width: 30em) {
.w55 {
@media only screen and (max-width: 40em) {
.w55-container {
width: 100%;
}
}
@ -347,6 +348,10 @@ GRAPHICS
background-position: 10px 60px;
}
}
#bg-temp {
background: url(/theme/images/temp.png) center;
background-repeat: no-repeat;
}
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

View File

@ -86,7 +86,7 @@
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
<div class="mw8 center">
<div class="flex flex-wrap justify-center">
<div class="w55 mh3 pt5 tc">
<div class="w55 ph3 pt5 tc">
<h2 class="f25 normal lh-solid ma0 mb3">
Participate
</h2>
@ -96,7 +96,7 @@
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
</div>
{% if is_article != 'true' %}
<div class="w55 mh3 pt5 tc">
<div class="w55 ph3 pt5 tc">
<h2 class="f25 normal lh-solid ma0 mb3">
In the making
</h2>
@ -106,7 +106,7 @@
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
</div>
{% endif %}
<div class="w55 mh3 pt5 tc">
<div class="w55 ph3 pt5 tc">
<h2 class="f25 normal lh-solid ma0 mb3">
Ethical internet
</h2>

View File

@ -30,6 +30,55 @@
</div>
</div>
<div class="w-100" id="bg-feature">
<div class="center pt4 pb5">
<div class="flex flex-wrap justify-center w-100">
<div class="w55-container flex justify-center" id="bg-temp">
<div class="w55 tc pa3">
<h2 class="f25 normal lh-solid mt7 mb3">
<em>Free & Open</em>
</h2>
<p class="ma0">
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
</p>
</div>
</div>
<div class="w55-container flex justify-center" id="bg-temp">
<div class="w55 tc pa3">
<h2 class="f25 normal lh-solid mt7 mb3">
<em>Fair & Secure</em>
</h2>
<p class="ma0">
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>
<div class="w55-container flex justify-center" id="bg-temp">
<div class="w55 tc pa3">
<h2 class="f25 normal lh-solid mt7 mb3">
<em>Easy to use</em>
</h2>
<p class="ma0">
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="w-100 cclr-mid-mint">
<div class="pt3 pb6 ph3" id="bg-feature">
<div class="mw8 center">
@ -62,7 +111,7 @@
</div>
</div>
</div>
-->
<div class="w-100 cclr-mid-black white">
<div class="pt3 pb6 ph4" id="bg-cta-top">