Improve reading doc pages

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"
                         ]
                     ]
                 ]

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

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