diff --git a/web/layouts/index.html b/web/layouts/index.html
index aeb621099fb843faea3603a4c8dce77abbf5ffe5..3e4b0401e45cc672316dfd753490b8ea4faa15f5 100644
--- a/web/layouts/index.html
+++ b/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
diff --git a/web/layouts/partials/components/hero.html b/web/layouts/partials/components/hero.html
index 33b5bc0e7b4aa7aba02aec7683333c4da4d91c7d..2a445a274568c6e0a13324311f972dac8aeaa394 100644
--- a/web/layouts/partials/components/hero.html
+++ b/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>
diff --git a/web/layouts/partials/components/news.html b/web/layouts/partials/components/news.html
index 5f133f86ecfd1672e01f283dd65a9fd29c596aa7..3db6f183c87b4e473e1a249a9750fd3617912d36 100644
--- a/web/layouts/partials/components/news.html
+++ b/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">
·
</span>
diff --git a/web/package.json b/web/package.json
index e61d4ab2e462167f6c4f4e254fd36a3086993e14..d7cd7c550ddf3691e3053e41852988f82b06fc45 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,5 +16,8 @@
},
"peerDependencies": {
"postcss": "^8.1.9"
+ },
+ "dependencies": {
+ "@tailwindcss/line-clamp": "^0.2.0"
}
}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 6b6fc08034219ee07fec6ff16c16b90506089947..c342be4f4b4e5b399d1213e4fb0d582af9e3cd16 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -77,5 +77,6 @@ module.exports = {
},
plugins: [
require('@tailwindcss/typography'),
+ require('@tailwindcss/line-clamp'),
],
}
diff --git a/web/yarn.lock b/web/yarn.lock
index 5a3e3163a3746909d23edef5e6e19d074b81c170..0312abb47dfab45a26181f9e08d5ce36009fd554 100644
--- a/web/yarn.lock
+++ b/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"