Add people image on home

This commit is contained in:
Wolfgang Huß 2024-05-13 17:14:07 +02:00
parent 3b5c9cb966
commit 357771c92e
6 changed files with 71 additions and 32 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View File

@ -15,6 +15,10 @@ $font-family: '"Noto Sans", sans-serif' !default;
$font-family-heading: '"Noto Sans Bold", sans-serif' !default;
$theme-color: #17b53f;
html[data-theme="dark"] body {
color: #b3b3b3;
}
body {
font-family: 'Noto Sans';
};
@ -23,18 +27,46 @@ h1, h2, h3, h4 {
font-family: 'Noto Sans Bold';
};
.md-button {
background-color: $theme-color;
Button {
font-size: 1.1em;
color: rgba(0, 0, 0, 0.85);
border-color: rgba(0, 0, 0, 0.85);
transition: 0.3s;
border-width: 2px !important;
border-style: solid;
border-radius: 5px;
padding: 12px 16px;
cursor: grab;
}
html[data-theme="dark"] Button {
color: rgba(255, 255, 255, 0.85);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(255, 255, 255, 0.66);
}
.hero-button {
color: rgba(255, 255, 255, 0.85);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(255, 255, 255, 0.66);
}
.hero-button:hover {
color: white;
background-color: rgba(255, 225, 255, 0.15);
border-color: white;
}
.donate-button {
background-color: $theme-color;
opacity: 0.85;
border: 0;
color: white;
padding: 5px 10px;
margin-bottom: 20px;
// margin-bottom: 20px;
};
.md-button:hover {
opacity: 0.85;
cursor: grab;
.donate-button:hover {
opacity: 1.0;
};
.image-grid {
@ -46,7 +78,6 @@ h1, h2, h3, h4 {
.hero-container {
width: auto;
background-image: linear-gradient(#282a82, #5e0d46);
position: relative;
display: flex;
flex-direction: column;
@ -56,26 +87,32 @@ h1, h2, h3, h4 {
}
.hero-container-inner {
background-image: url("/society-tile-399x122.png");
background-repeat: repeat-x;
background-position: center bottom;
}
.hero-container-content {
width: 90%;
margin: 2em auto;
margin: 2.8em auto;
text-align: center;
}
.hero-button {
color: white;
font-size: 1.1em;
color: rgba(255, 255, 255, 0.85);
background-color: rgba(0, 0, 0, 0);
border-color: white;
border-color: rgba(255, 255, 255, 0.66);
transition: 0.3s;
border-style: solid;
border-radius: 5px;
padding: 8px 16px;
padding: 12px 16px;
}
.hero-button:hover {
color: white;
background-color: rgba(255, 225, 255, 0.15);
border-color: white;
border-style: solid;
border-radius: 5px;
padding: 8px 16px;
cursor: grab;
}
@ -154,7 +191,7 @@ h2.large-header {
line-height: 1.2em;
text-align: center;
margin-top: 0;
padding-top: 1em;
padding-top: 1.8em;
border: 0;
}
@ -186,7 +223,7 @@ h2.large-header {
}
.center table {
// width: 500px;
width: 560px;
margin: 0 auto !important;
text-align: center;
}

View File

@ -14,6 +14,7 @@ tagLine:
<div class="hero-container">
<div class="hero-container-inner">
<div class="hero-container-content">
<img id="logo" src="/logo.svg" alt="ocelot.social" />
<div id="slogan-container">
<span id="slogan-1" class="slogan">Freie Open-Source-Software</span>
@ -26,6 +27,7 @@ tagLine:
</a>
</div>
</div>
</div>
<h2 id="benefits" class="large-header">Warum Ocelot.Social?</h2>
@ -186,7 +188,7 @@ tagLine:
<div class="all-features">
<a id="hero-button" href="/de/features/">
<Button class="hero-button">
<Button>
Alle Funktionen ansehen
</Button>
</a>
@ -220,7 +222,7 @@ tagLine:
Schau dir an, welche Möglichkeiten es gibt:<br>
</p>
<a id="hero-button" href="/de/get-started/">
<Button class="hero-button">
<Button>
Los geht's
</Button>
</a>
@ -241,7 +243,7 @@ XXX -->
Unterstütze die Nachhaltigkeit der Software und deren Netzwerke gerne mit einer Einmal- oder Dauerspende:
</p>
<a href="https://busfaktor.org/de/spenden" target="_blank">
<Button class="md-button">
<Button class="donate-button">
Hier spenden
</Button>
</a>

View File

@ -29,7 +29,7 @@ Der Verein [busFaktor() e.V.](https://busfaktor.org/de/) koordiniert und förder
Unterstütze die Nachhaltigkeit der Software und deren Netzwerke gerne mit einer Einmal- oder Dauerspende:
<a href="https://busfaktor.org/de/spenden" target="_blank">
<Button class="md-button">
<Button class="donate-button">
Hier spenden
</Button>
</a>

View File

@ -17,7 +17,7 @@ Der Verein [busFaktor() e.V.](https://busfaktor.org/de/) koordiniert und förder
Unterstütze die Nachhaltigkeit der Software und deren Netzwerke gerne mit einer Einmal- oder Dauerspende:
<a href="https://busfaktor.org/de/spenden" target="_blank">
<Button class="md-button">
<Button class="donate-button">
Hier spenden
</Button>
</a>

View File

@ -13,7 +13,7 @@ tagLine:
die durch Spenden der Community erweitert werden können:
<a href="https://busfaktor.org/de/spenden" target="_blank">
<Button class="md-button">
<Button class="donate-button">
Hier spenden
</Button>
</a>