grid works now

This commit is contained in:
Laurens 2024-05-01 13:06:43 +02:00
parent 9ea2e65606
commit c9add794da
7 changed files with 96 additions and 43 deletions

View file

@ -50,4 +50,15 @@
.time {
text-align: right;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
padding: 20px;
}

View file

@ -34,6 +34,7 @@
"section",
"source",
"span",
"style",
"svg",
"textarea",
"time",
@ -64,6 +65,7 @@
"btn-sm",
"capitalize",
"col-12",
"col-md-3",
"col-md-4",
"column",
"container",
@ -92,6 +94,7 @@
"from-body",
"g",
"grid-container",
"grid-item",
"group",
"gx-5",
"h-4",
@ -223,7 +226,6 @@
"search-wrapper-footer",
"search-wrapper-header",
"section",
"section-s",
"section-sm",
"sm:bg-red-200",
"sm:block",

View file

@ -80,24 +80,32 @@
{{ end }}
<!-- /Features -->
<!-- features2-->
{{ range $i, $e:= .Params.features2 }}
<div class="container">
<div>
<h2 class="mb-4">{{ .title | markdownify }}</h2>
<p class="mb-8 text-lg">{{ .content | markdownify }}</p>
</div>
<!-- features2test-->
<div class="container">
<div class="grid-container">
{{ range $i, $e := .Params.features2 }}
<div class="grid-item">
<h2 class="mb-4">{{ .title | markdownify }}</h2>
<p class="mb-8 text-lg">{{ .content | markdownify }}</p>
{{ with .button }} {{ if .enable }}
<a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
{{ .label }}
<i class="fa fa-arrow-right pl-2"></i>
</a>
{{ end }} {{ end }}
</div>
{{ end }}
</div>
{{ end }}
<!--/features2-->
</div>
<!-- features2test-->
{{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
<section>

View file

@ -3061,6 +3061,14 @@ input#nav-toggle:checked ~ #nav-menu {
.time {
text-align: right; }
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; }
.grid-item {
padding: 20px; }
@media (min-width: 540px) {
.sm\:col-10 {

View file

@ -2080,39 +2080,47 @@
<div class="container">
<div>
<h2 class="mb-4">Fediversity explained - for Individuals</h2>
<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>
</div>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<h2 class="mb-4">Fediversity explained - for Individuals</h2>
<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">
Learn more
<i class="fa fa-arrow-right pl-2"></i>
</a>
</div>
<div class="grid-item">
<h2 class="mb-4">Fediversity explained - for Developers</h2>
<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">
Learn more
<i class="fa fa-arrow-right pl-2"></i>
</a>
</div>
<div class="grid-item">
<h2 class="mb-4">Fediversity explained - for the EC</h2>
<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">
Learn more
<i class="fa fa-arrow-right pl-2"></i>
</a>
</div>
</div>
<div class="container">
<div>
<h2 class="mb-4">Fediversity explained - for Developers</h2>
<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>
</div>
</div>
<div class="container">
<div>
<h2 class="mb-4">Fediversity explained - for the EC</h2>
<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>
</div>
</div>
</div>

View file

@ -3061,6 +3061,14 @@ input#nav-toggle:checked ~ #nav-menu {
.time {
text-align: right; }
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; }
.grid-item {
padding: 20px; }
@media (min-width: 540px) {
.sm\:col-10 {

View file

@ -1052,3 +1052,11 @@
.time {
text-align: right; }
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; }
.grid-item {
padding: 20px; }