mirror of
https://github.com/offen/website.git
synced 2024-11-25 18:20:28 +01:00
bg svg details
This commit is contained in:
parent
e18242ae96
commit
67205c548f
61
homepage/theme/static/images/gfx-cta-top.svg
Normal file
61
homepage/theme/static/images/gfx-cta-top.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 157 KiB |
61
homepage/theme/static/images/gfx-feature-a.svg
Normal file
61
homepage/theme/static/images/gfx-feature-a.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 157 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 157 KiB |
61
homepage/theme/static/images/gfx-outro.svg
Normal file
61
homepage/theme/static/images/gfx-outro.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 157 KiB |
@ -80,7 +80,7 @@
|
||||
{% if page.href == "/" %}
|
||||
<div class="intro">
|
||||
<div class="container-reader">
|
||||
<div class="bg">
|
||||
<div class="bg" id="bg-intro">
|
||||
<div class="sign">
|
||||
<img src="/theme/images/offen-sign-brand-white.svg" alt="offen logo" width="152" height="94">
|
||||
</div>
|
||||
@ -91,7 +91,7 @@
|
||||
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
|
||||
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,27 +101,33 @@
|
||||
<div class="container-full">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<div class="card-gfx">
|
||||
<img src="/theme/images/illustration.svg" width="179" height="122">
|
||||
</div>
|
||||
<div class="card-text">
|
||||
Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
||||
<div class="bg" id="bg-feature-a">
|
||||
<h2>
|
||||
Free & Open Source
|
||||
</h2>
|
||||
<p>
|
||||
Anyone can audit our code to verify it works as intended. <strong>offen</strong> will always be available free of charge.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-gfx">
|
||||
<img src="/theme/images/illustration.svg" width="179" height="122">
|
||||
</div>
|
||||
<div class="card-text">
|
||||
Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
||||
<div class="bg" id="bg-feature-b">
|
||||
<h2>
|
||||
Fair & Secure
|
||||
</h2>
|
||||
<p>
|
||||
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="card">
|
||||
<div class="card-gfx">
|
||||
<img src="/theme/images/illustration.svg" width="179" height="122">
|
||||
</div>
|
||||
<div class="card-text">
|
||||
Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
||||
<div class="bg" id="bg-feature-c">
|
||||
<h2>
|
||||
Easy to use
|
||||
</h2>
|
||||
<p>
|
||||
Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,14 +138,16 @@
|
||||
<div class="container-full">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<div class="card-gfx">
|
||||
<img src="/theme/images/illustration.svg" width="179" height="122">
|
||||
<div class="bg" id="bg-cta-top">
|
||||
<h2>
|
||||
Build in progress
|
||||
</h2>
|
||||
<p>
|
||||
What is already up and running and where we want to go.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-white" href="/status/">Project status</a>
|
||||
</div>
|
||||
<div class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sit amet, consectetuer adipiscing elit.
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-yellow" href="/status/">Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -165,30 +173,51 @@
|
||||
<div class="cta-bottom">
|
||||
<div class="container-full">
|
||||
<div class="card-deck">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
<div class="bg" id="bg-cta-bottom">
|
||||
<h2>
|
||||
Transparent web analytics
|
||||
</h2>
|
||||
<p>
|
||||
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
|
||||
<a class="btn btn-color-black" href="{{GITHUB_ORG}}">Get involved</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
<div class="bg" id="bg-cta-bottom">
|
||||
<h2>
|
||||
Build in progress
|
||||
</h2>
|
||||
<p>
|
||||
What is already up and running and where we want to go.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="/status/" target="_blank">Status</a>
|
||||
<a class="btn btn-color-black" href="/status/">Project status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
<div class="bg" id="bg-cta-bottom">
|
||||
<h2>
|
||||
Charitable purpose
|
||||
</h2>
|
||||
<p>
|
||||
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="{{PATREON_URL}}" target="_blank">Support Us</a>
|
||||
<a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -197,14 +226,16 @@
|
||||
<div class="container-full">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<div class="card-gfx">
|
||||
<img src="/theme/images/illustration.svg" width="179" height="122">
|
||||
</div>
|
||||
<div class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sit amet, consectetuer adipiscing elit.
|
||||
<div class="btn-wrapper">
|
||||
<div class="bg" id="bg-outro">
|
||||
<h2>
|
||||
Charitable purpose
|
||||
</h2>
|
||||
<p>
|
||||
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<a class="btn btn-color-black" href="{{PATREON_URL}}">Support us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -215,8 +246,9 @@
|
||||
<div class="footer">
|
||||
<div class="footer-card-deck">
|
||||
<div class="footer-card">
|
||||
<h3>offen</h3>
|
||||
<h3>Transparent web analytics</h4>
|
||||
<h3><strong>offen</strong></h3>
|
||||
<h4>Transparent web analytics</h4>
|
||||
<h4>for everyone</h4>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<p>
|
||||
|
||||
103
styles/index.css
103
styles/index.css
@ -124,13 +124,13 @@ CARDS
|
||||
max-width: 400px;
|
||||
color: var(--black-mid);
|
||||
}
|
||||
.cta-top .card,
|
||||
.outro .card {
|
||||
max-width: 600px;
|
||||
}
|
||||
.cta-top .card {
|
||||
color: var(--yellow-mid);
|
||||
}
|
||||
.card h2,
|
||||
.card p {
|
||||
text-align: center;
|
||||
}
|
||||
.footer-card p {
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
@ -138,9 +138,6 @@ CARDS
|
||||
.footer-card:nth-child(2) {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.card-gfx {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
/* Mobile Styles */
|
||||
@media only screen and (max-width: 960px) {
|
||||
.card-deck,
|
||||
@ -154,8 +151,6 @@ CARDS
|
||||
.card:nth-child(2) {
|
||||
margin: 80px 0 80px 0;
|
||||
}
|
||||
.card-gfx,
|
||||
.card-text,
|
||||
.footer-card {
|
||||
text-align: center;
|
||||
}
|
||||
@ -177,20 +172,6 @@ CARDS
|
||||
.card:nth-child(2) {
|
||||
margin: 0 40px 0 40px;
|
||||
}
|
||||
.card-gfx,
|
||||
.card-text {
|
||||
text-align: center;
|
||||
}
|
||||
.cta-top .card-gfx,
|
||||
.cta-top .card-text,
|
||||
.outro .card-gfx,
|
||||
.outro .card-text {
|
||||
text-align: left;
|
||||
}
|
||||
.cta-top .card-gfx,
|
||||
.outro .card-gfx {
|
||||
margin: 0 40px 0 0;
|
||||
}
|
||||
.footer-card-deck {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -304,9 +285,14 @@ blockquote {
|
||||
border-left: 1px solid var(--grey-bright);
|
||||
}
|
||||
strong,
|
||||
h1 + p strong {
|
||||
h1 + p strong,
|
||||
.bg strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.footer-card h3 strong {
|
||||
font-weight: 700;
|
||||
color: var(--yellow-mid);
|
||||
}
|
||||
strong,
|
||||
h3 strong {
|
||||
text-decoration: none;
|
||||
@ -366,7 +352,15 @@ BUTTONS
|
||||
color: var(--black-mid);
|
||||
border: solid var(--black-mid) 5px;
|
||||
}
|
||||
|
||||
.btn-color-white,
|
||||
.btn-color-white:visited,
|
||||
.btn-color-white:link,
|
||||
.btn-color-white:hover,
|
||||
.btn-color-white:active {
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
border: solid var(--white) 5px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MENU
|
||||
@ -526,13 +520,66 @@ nav ul li ul li a {
|
||||
/* ---------------------------------------------------
|
||||
GRAPHICS
|
||||
----------------------------------------------------*/
|
||||
.intro .bg {
|
||||
.bg h2 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
#bg-intro {
|
||||
width: 75%;
|
||||
background: url(/theme/images/temp.svg) no-repeat center;
|
||||
background: url(/theme/images/gfx-intro.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
/*-------------------------*/
|
||||
#bg-feature-a,
|
||||
#bg-feature-b,
|
||||
#bg-feature-c {
|
||||
background: url(/theme/images/gfx-feature-a.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
/*-------------------------*/
|
||||
#bg-cta-top {
|
||||
width: 75%;
|
||||
}
|
||||
#bg-cta-top h2,
|
||||
#bg-cta-top p {
|
||||
color: var(--white);
|
||||
}
|
||||
#bg-cta-top h2,
|
||||
#bg-cta-top p,
|
||||
#bg-cta-top .btn-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
#bg-cta-top {
|
||||
background: url(/theme/images/gfx-cta-top.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
/*-------------------------*/
|
||||
#bg-outro {
|
||||
width: 75%;
|
||||
}
|
||||
#bg-outro h2,
|
||||
#bg-outro p,
|
||||
#bg-outro .btn-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
#bg-outro {
|
||||
background: url(/theme/images/gfx-outro.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
/*-------------------------*/
|
||||
#bg-cta-bottom {
|
||||
width: 75%;
|
||||
}
|
||||
#bg-cta-bottom h2,
|
||||
#bg-cta-bottom p,
|
||||
#bg-cta-bottom .btn-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
#bg-cta-bottom {
|
||||
background: url(/theme/images/gfx-outro.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.intro .bg {
|
||||
#bg-intro {
|
||||
width: 100%;
|
||||
background-size: 440px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user