[web] Styled front page discourse links.

web/layouts/index.html

@@ -3,7 +3,7 @@
 <!-- {{ partial "components/quicklinks" .Params.hero }} -->
 <h1
   class="text-center text-3xl lg:text-5xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 mt-6 md:mt-10 lg:mt-16 md:mb-4 lg:mb-6">
-  Announcements & Discussions
+  Announcements<span class="hidden md:inline"> & Discussions</span>
 </h1>
 {{ partial "components/news" . }}
 <h1

web/layouts/partials/components/hero.html

@@ -7,7 +7,7 @@
       <h2 class="text-right uppercase text-xs md:text-base lg:text-lg border-b-0 border-t-2">{{ .headline }}</h2>
     </div>
   </div>
-  <div class="prose mt-3 max-w-md mx-auto md:mt-5 md:text-lg lg:text-xl md:max-w-3xl">
+  <div class="prose mt-3 mx-auto md:mt-5 md:text-lg md:max-w-4xl">
     {{ markdownify .textline }}
   </div>
 </div>

web/layouts/partials/components/news.html

@@ -2,7 +2,7 @@
   {{ template "discours-posts" (dict "page" . "category" "announcements" "count" "3") }}
 </div>
 
-<div class="relative mx-auto lg:max-w-7xl mt-8">
+<div class="hidden md:block relative md:mx-auto lg:max-w-7xl mt-8">
   {{ template "discours-posts" (dict "page" . "category" "usability" "count" "3" "heading" "Discussions") }}
 </div>
 
@@ -11,7 +11,7 @@
   <h3 class="mb-4 text-3xl">Latest Benchmarks</h3>
   <div class="py-0 lg:px-4">
     {{ template "latest-pages" . }}
-</div>
+  </div>
 </div>
 */}}
 
@@ -19,29 +19,19 @@
 {{/*
 <h2 class="mb-2 lg:mb-4 text-2xl lg:text-3xl">
   {{ if .heading }}
-{{ .heading }}
-{{ else }}
-{{ .category | humanize }}
-{{ end }}
+  {{ .heading }}
+  {{ else }}
+  {{ .category | humanize }}
+  {{ end }}
 </h2>
 */}}
-<div class="mt-2 grid lg:grid-cols-3 lg:gap-x-5 gap-4" x-data="categoryData('{{ .category }}', {{ .count }})"
+<div class="mt-2 grid md:grid-cols-3 lg:gap-x-5 md:gap-4" x-data="categoryData('{{ .category }}', {{ .count }})"
   x-init="init()">
   <template x-for="topic in topics" :key="topic.id">
-    <div class="mb-3 border-b-2 lg:border-b-o lg:shadow lg:rounded-lg p-4">
+    <div class="p-1 px-2 md:p-4 md:mb-3 md:border-b-2 lg:border-b-o lg:shadow lg:rounded-lg">
       <a x-bind:href="'https://discourse.opengeosys.org/t/' + topic.slug" class="block">
-        <template x-if="topic.tags.length > 0">
-          <div class="float-right lg:float-none">
-            <span x-text="topic.tags.slice(0, 1)" x-bind:class="{
-                'bg-indigo-100 text-indigo-800': topic.tags.slice(0, 1) == 'ogs6',
-                'bg-green-100 text-green-800': topic.tags.slice(0, 1) == 'ogs5',
-                'bg-pink-100 text-pink-800': topic.tags.slice(0, 1) == 'infrastructure' }"
-              class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5">
-            </span>
-
-          </div>
-        </template>
-        <h3 x-text="topic.title" class="text-xl font-bold leading-7 text-gray-800 mt-3">
+        <h3 x-text="topic.title"
+          class="text-l lg:text-xl font-bold leading-7 text-blue-800 underline mt-3 line-clamp-1 lg:line-clamp-2">
         </h3>
         <div class="mt-2 flex items-center">
           <div class="flex-shrink-0">
@@ -54,8 +44,18 @@
               <time datetime="2020-03-15"
                 x-text="(new Date(topic.created_at)).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })">
               </time>
+              <template x-if="topic.tags.length > 0">
+                <div class="float-right lg:float-none hidden">
+                  <span x-text="topic.tags.slice(0, 1)" x-bind:class="{
+                      'bg-indigo-100 text-indigo-800': topic.tags.slice(0, 1) == 'ogs6',
+                      'bg-green-100 text-green-800': topic.tags.slice(0, 1) == 'ogs5',
+                      'bg-pink-100 text-pink-800': topic.tags.slice(0, 1) == 'infrastructure' }"
+                    class="inline-flex items-center mx-1 px-2 py-0.1 rounded-full text-sm font-medium leading-5">
+                  </span>
+                </div>
+              </template>
               <template x-if="topic.posts_count > 1">
-                <span>
+                <span class="hidden lg:inline">
                   <span class="mx-1">
                     &middot;
                   </span>

web/package.json

@@ -16,5 +16,8 @@
   },
   "peerDependencies": {
     "postcss": "^8.1.9"
+  },
+  "dependencies": {
+    "@tailwindcss/line-clamp": "^0.2.0"
   }
 }

web/tailwind.config.js

@@ -77,5 +77,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
+    require('@tailwindcss/line-clamp'),
   ],
 }

web/yarn.lock

@@ -31,6 +31,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@tailwindcss/line-clamp@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.2.0.tgz#7f30f26ed3835d64d1eb5a9b0d60cf5291dd2a3b"
+  integrity sha512-+jXSdRK3/9V/BCPCr+iNpMMhxWMMv62vn/AS2b3/ClmueGuhCijW3bUwO1IiHnE7uCaF74Sli8jUCv9djwvpLg==
+
 "@tailwindcss/typography@^0.3.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.3.1.tgz#253ce580c8e06b6163d9a288edd24f25e1d0dfee"