Add services list from data template

content/services/_index.md

@@ -9,4 +9,4 @@ menu:
 
 ## Community Services
 
-## Hosting
+{{< partial "services/community" >}}

data/services/community.yaml

@@ -0,0 +1,36 @@
+- category: Communication
+  items:
+    - name: Chat
+      url: https://wiki.kosmos.org/Services:Chat
+      description: Chat rooms and instant messaging (XMPP/Jabber)
+    - name: Social
+      url: kosmos.social
+      description: Social media (micro-blogging on the fediverse)
+    - name: Forums
+      url: https://community.kosmos.org
+      description: Kosmos community forums and user support/help site
+- category: Software development
+  items:
+    - name: Gitea
+      url: https://gitea.kosmos.org
+      description: Code hosting and collaboration for software projects
+
+    - name: Drone CI
+      url: https://drone.kosmos.org
+      description: Continuous integration and build pipelines
+- category: Account & Auxiliary services
+  items:
+    - name: Accounts
+      url: https://accounts.kosmos.org
+      description: Manage your Kosmos account, and invite new users
+    - name: Sockethub
+      url: https://sockethub.org
+      description: Access other Internet protocols from Web apps
+    - name: IPFS Gateway
+      url: https://wiki.kosmos.org/Kredits:IPFS
+      description: Web gateway for the IPFS decentralized filesystem
+- category: Documentation
+  items:
+    - name: Wiki
+      url: https://wiki.kosmos.org
+      description: Kosmos documentation and knowledge base

shortcodes/partial.html

@@ -0,0 +1 @@
+{{ partial (.Get 0) }}

themes/kosmos-22/layouts/_default/section.html

@@ -4,7 +4,7 @@
   </div>
   <div class="max-w-5xl mx-auto -mt-12 py-8 px-8 text-left bg-white">
   <header class="mb-8">
-    <h2 class="text-2xl font-bold">{{ .Title }}</h1>
+    <h1 class="text-2xl font-bold">{{ .Title }}</h1>
     {{ if .Description }}
     <p class="mt-2 text-lg text-zinc-500">{{ .Description }}</p>
     {{ end }}

themes/kosmos-22/layouts/_default/single.html

@@ -4,7 +4,7 @@
   </div>
   <div class="max-w-5xl mx-auto -mt-12 py-8 px-8 text-left bg-white">
   <header class="mb-8">
-    <h2 class="text-2xl font-bold">{{ .Title }}</h1>
+    <h1 class="text-2xl font-bold">{{ .Title }}</h1>
     {{ if .Description }}
     <p class="mt-2 text-lg text-zinc-500">{{ .Description }}</p>
     {{ end }}

themes/kosmos-22/layouts/partials/services/community.html

@@ -0,0 +1,13 @@
+{{ range site.Data.services.community }}
+  <h3 class="mb-4 text-sm uppercase text-zinc-500">{{ .category }}</h3>
+  <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-8">
+  {{ range .items }}
+    <li>
+      <h4 class="text-lg font-bold mb-2">
+        <a href="{{ .url }}" class="border-b border-zinc-400">{{ .name }}</a>
+      </h4>
+      <p>{{ .description }}</p>
+    </li>
+  {{ end }}
+  </ul>
+{{ end }}

themes/kosmos-22/layouts/shortcodes/partial.html

@@ -0,0 +1 @@
+{{ partial (.Get 0) (.Get 1) }}

themes/kosmos-22/source/main.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  h2 {
+    @apply text-lg font-bold mb-8;
+  }
+}

themes/kosmos-22/static/css/main.css

@@ -423,6 +423,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 
+h2 {
+  margin-bottom: 2rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
 *, ::before, ::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -485,26 +492,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 0.5rem;
 }
 
-.ml-20 {
+.-mt-0\.5 {
-  margin-left: 5rem;
+  margin-top: -0.125rem;
-}
-
-.-mt-2 {
-  margin-top: -0.5rem;
-}
-
-.-mt-1 {
-  margin-top: -0.25rem;
 }
 
 .mr-1 {
   margin-right: 0.25rem;
 }
 
-.-mt-0\.5 {
-  margin-top: -0.125rem;
-}
-
 .-mt-0 {
   margin-top: -0px;
 }
@@ -513,6 +508,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 4rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -525,6 +532,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -537,10 +548,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 5rem;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
@@ -565,6 +572,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .items-center {
   align-items: center;
 }
@@ -577,6 +588,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: space-between;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -587,11 +602,35 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-width: 2px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-teal-500 {
   --tw-border-opacity: 1;
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
+.border-zinc-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(228 228 231 / var(--tw-border-opacity));
+}
+
+.border-zinc-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(212 212 216 / var(--tw-border-opacity));
+}
+
+.border-zinc-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(113 113 122 / var(--tw-border-opacity));
+}
+
+.border-zinc-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(161 161 170 / var(--tw-border-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -631,14 +670,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   vertical-align: top;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
-.align-bottom {
-  vertical-align: bottom;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -649,6 +680,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -662,8 +698,23 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(113 113 122 / var(--tw-text-opacity));
 }
 
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 768px) {
   .md\:block {
     display: block;
   }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }