header fix

This commit is contained in:
Laurens 2024-05-01 13:12:55 +02:00
parent db669bd84e
commit cf5f4d1520
6 changed files with 49 additions and 10 deletions

View file

@ -62,3 +62,14 @@
padding: 20px;
}
.header-with-image {
display: flex;
align-items: center;
}
.header-with-image img {
margin-right: 10px;
max-width: 100px; /* Adjust as needed */
max-height: 100px; /* Adjust as needed */
}

View file

@ -84,7 +84,7 @@ features:
link: "/grants"
features2:
- title: "Fediversity explained - for Individuals"
- title: "Individuals"
image: "/images/user.png"
content: "2Always be in control with your own data on social networks, whether that's with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible."
button:
@ -92,7 +92,7 @@ features2:
label: "Learn more"
link: "/individuals"
- title: "Fediversity explained - for Developers"
- title: "Developers"
image: "/images/code.png"
content: "2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help."
button:
@ -100,7 +100,7 @@ features2:
label: "Learn more"
link: "/developers"
- title: "Fediversity explained - for the EC"
- title: "European Commission"
image: "/images/globe.png"
content: "2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project."
button:

View file

@ -6,6 +6,7 @@
"base",
"body",
"button",
"center",
"div",
"footer",
"form",
@ -34,7 +35,6 @@
"section",
"source",
"span",
"style",
"svg",
"textarea",
"time",
@ -65,8 +65,6 @@
"btn-sm",
"capitalize",
"col-12",
"col-md-3",
"col-md-4",
"column",
"container",
"content",
@ -102,6 +100,7 @@
"h2",
"h3",
"header",
"header-with-image",
"hidden",
"hover:text-primary",
"hr-list",

View file

@ -84,13 +84,18 @@
<!-- features2test-->
<center><h2> Fediverse Explained</h2></center>
<div class="container">
<div class="grid-container">
{{ range $i, $e := .Params.features2 }}
<div class="grid-item">
<h2 class="mb-4">{{ .title | markdownify }}</h2>
<div class="header-with-image">
<img src="{{ .image }}" alt="Image">
<h4 class="mb-4">{{ .title | markdownify }}</h4>
</div>
<p class="mb-8 text-lg">{{ .content | markdownify }}</p>
{{ with .button }} {{ if .enable }}
<a class="btn btn-primary mt-6" href="{{ .link | absURL }}">

View file

@ -3069,6 +3069,17 @@ input#nav-toggle:checked ~ #nav-menu {
.grid-item {
padding: 20px; }
.header-with-image {
display: flex;
align-items: center; }
.header-with-image img {
margin-right: 10px;
max-width: 100px;
/* Adjust as needed */
max-height: 100px;
/* Adjust as needed */ }
@media (min-width: 540px) {
.sm\:col-10 {

View file

@ -2081,13 +2081,18 @@
<center><h2> Fediverse Explained</h2></center>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<h2 class="mb-4">Fediversity explained - for Individuals</h2>
<div class="header-with-image">
<img src="/images/user.png" alt="Image">
<h4 class="mb-4">Individuals</h4>
</div>
<p class="mb-8 text-lg">2Always be in control with your own data on social networks, whether that&rsquo;s with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible.</p>
<a class="btn btn-primary mt-6" href="//localhost:1313/individuals">
@ -2098,7 +2103,11 @@
</div>
<div class="grid-item">
<h2 class="mb-4">Fediversity explained - for Developers</h2>
<div class="header-with-image">
<img src="/images/code.png" alt="Image">
<h4 class="mb-4">Developers</h4>
</div>
<p class="mb-8 text-lg">2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help.</p>
<a class="btn btn-primary mt-6" href="//localhost:1313/developers">
@ -2109,7 +2118,11 @@
</div>
<div class="grid-item">
<h2 class="mb-4">Fediversity explained - for the EC</h2>
<div class="header-with-image">
<img src="/images/globe.png" alt="Image">
<h4 class="mb-4">European Commission</h4>
</div>
<p class="mb-8 text-lg">2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project.</p>
<a class="btn btn-primary mt-6" href="//localhost:1313/ec">