From 9266a6bd32726227fc896f97b75f4cccd13640a3 Mon Sep 17 00:00:00 2001
From: Eike Kettner <eike.kettner@posteo.de>
Date: Thu, 13 Aug 2020 23:25:51 +0200
Subject: [PATCH] Improve reading doc pages

---
 website/elm/Main.elm                        | 26 ++++++++++-----------
 website/site/content/docs/webapp/finding.md | 14 +++++------
 website/site/sass/styles.sass               |  6 +++++
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/website/elm/Main.elm b/website/elm/Main.elm
index 46d2bc0c..596fe6c4 100644
--- a/website/elm/Main.elm
+++ b/website/elm/Main.elm
@@ -111,6 +111,13 @@ view model =
     node "body"
         []
         [ mainHero model
+        , demoHero
+        , section [ class "section" ]
+            [ div [ class "container" ]
+                [ Demo.demo Demo.processDemo
+                , Demo.demo Demo.navigateDemo
+                ]
+            ]
         , featureHero model
         , section [ class "section" ]
             [ div [ class "container" ]
@@ -127,13 +134,6 @@ view model =
                        ]
                 )
             ]
-        , demoHero
-        , section [ class "section" ]
-            [ div [ class "container" ]
-                [ Demo.demo Demo.processDemo
-                , Demo.demo Demo.navigateDemo
-                ]
-            ]
         , getStartedHero model
         , div [ class "section" ]
             (GetStarted.getStarted model.flags.version)
@@ -322,10 +322,10 @@ mainHero model =
                     ]
                 , div [ class " buttons is-centered" ]
                     [ a
-                        [ class "button is-primary is-medium"
-                        , href "#get-started"
+                        [ class "button is-info is-medium"
+                        , href "#demos"
                         ]
-                        [ text "Get Started"
+                        [ text "Screencasts"
                         ]
                     , a
                         [ class "button is-info is-medium"
@@ -334,10 +334,10 @@ mainHero model =
                         [ text "Features"
                         ]
                     , a
-                        [ class "button is-info is-medium"
-                        , href "#demos"
+                        [ class "button is-primary is-medium"
+                        , href "#get-started"
                         ]
-                        [ text "Screencast"
+                        [ text "Get Started"
                         ]
                     ]
                 ]
diff --git a/website/site/content/docs/webapp/finding.md b/website/site/content/docs/webapp/finding.md
index f246579f..8e583c17 100644
--- a/website/site/content/docs/webapp/finding.md
+++ b/website/site/content/docs/webapp/finding.md
@@ -72,16 +72,16 @@ looked at are marked as "new" automatically.
 Click on a tag to show only items with this tag, the tag is marked
 with a check (✔) icon. Click again, to show only items that are not
 tagged with the tag. Then the tag is marked with a minus (–) icon.
-Clicking a third time deselects the tag and the icon goes back to an
+Clicking a third time deselects the tag and the icon goes back to a
 "tag" icon.
 
-By default, a few tags are shown and you can expand to list all using
-the *Show more* link. How many tags are displayed can be changed in
-the ui settings (go to *User Settings* ‣ *Ui Settings*).
+By default, the most used tags are shown and you can click on *Show
+more…* to list all. How many tags are displayed can be changed in the
+ui settings (go to *User Settings* ‣ *Ui Settings*).
 
-When multiple tags are checked (✔), only tags are shown that have all
-the tags. When multiple tags are excluded (–), then only tags are
-shown that don't have at least one of these tags.
+When multiple tags are checked (✔), only items are shown that have all
+these tags. When multiple tags are excluded (–), then only items are
+shown that don't have these tags.
 
 The same applies to tag categories. You can show all items that have
 at least on tag of a checked (✔) category. Or you can list all items
diff --git a/website/site/sass/styles.sass b/website/site/sass/styles.sass
index 608687b0..4eac0ffa 100644
--- a/website/site/sass/styles.sass
+++ b/website/site/sass/styles.sass
@@ -53,6 +53,7 @@ h1
     border-bottom: 1px solid #ccc
     padding-bottom: 0.15em
 
+
 a.zola-anchor
   padding-left: 0.75rem
   display: none
@@ -100,3 +101,8 @@ p.has-text
 .card.full-height
   .card-content
     height: 100%
+
+.content.doc
+  font-size: 1.1em
+  max-width: $desktop
+  text-align: left