Samples how to use GH pages for documentation

css/stylesheet.css

@@ -221,7 +221,11 @@ a {
 }
 
 .main-content h2 {
-    font-size: 2.3rem;
+    font-size: 2.4rem;
+}
+
+.main-content h2 {
+    font-size: 1.8rem;
 }
 
 .main-content h3 {
@@ -233,8 +237,6 @@ a {
   line-height: 1.6em;
 }
 
-.main-content :first-child {
-  margin-top: 0; }
 .main-content img {
   max-width: 100%; }
 .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
@@ -370,3 +372,7 @@ a {
 @media screen and (max-width: 42em) {
   .site-footer {
     font-size: 0.9rem; } }
+
+.docs {
+    margin-top: 5rem;
+}

data/download.md

@@ -0,0 +1,33 @@
+---
+layout: page
+title: Downloads
+published: true
+---
+
+# Downloads
+
+
+## Planet
+
+Download entire planet as MBTiles:
+
+- [Latest planet (40GB)]()
+
+## Country Extracts
+
+All country extracts consist of the world down to zoom level 6
+and the entire country down to zoom level 14.
+
+- [Afghanistan (2GB)]()
+- [Albania (2GB)]()
+- [Algeria (1.2GB)]()
+- [Andorras (4GB)]()
+- [Angola (2GB)]()
+- [Argentina (0.5GB)]()
+- [Armenia (0.2GB)]()
+- [Austria (1GB)]()
+- [Bahamas (2.2GB)]()
+- [Bahrain (2.4GB)]()
+- [Bangladesh (2.1GB)]()
+- [Belarus (2.2GB)]()
+- [Belgium (2.8GB)]()

docs/faq.md

@@ -0,0 +1,15 @@
+---
+layout: page
+title: FAQ
+published: true
+---
+
+# FAQ
+
+## Can I use Mapbox GL
+
+Yes it is possible veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+ 
+## How can I host a tileserver?
+
+Flank shank beef ribs, landjaeger jerky tongue chuck fatback meatloaf bacon ground round venison filet mignon short ribs. Ham doner pork loin prosciutto t-bone, pork chop rump jerky filet mignon pastrami meatball fatback turkey salami capicola. Shoulder tongue meatball ground round strip steak cupim beef. Kevin kielbasa pancetta picanha. Jowl kevin ham hock brisket frankfurter strip steak corned beef meatloaf jerky flank tri-tip tongue doner.

docs/get-started.md

@@ -0,0 +1,18 @@
+---
+layout: page
+title: Get started
+published: true
+---
+
+# Introduction
+
+Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
+
+
+## What are Vector Tiles
+
+Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. 
+
+## Create your first base map
+
+Pig frankfurter ham hock ribeye, kevin landjaeger beef sirloin prosciutto shank jowl ball tip picanha filet mignon. Jowl shoulder pork belly, andouille doner short loin pork chop tongue shankle capicola landjaeger ham hock kevin boudin. Filet mignon hamburger chicken pig doner jerky drumstick. Tail meatloaf boudin rump, picanha porchetta cupim meatball andouille. Cow ham prosciutto leberkas doner, sausage corned beef landjaeger turkey tongue turducken shank.

docs/layer-reference.md

@@ -0,0 +1,40 @@
+---
+layout: page
+title: Layer Reference
+published: true
+---
+
+# Layer Reference
+
+This is an in-depth guide the data inside the Mapbox Streets vector tile source to help with styling. 
+
+## #landuse
+
+This layer includes polygons representing both land-use and land-cover.
+
+It’s common for many different types of landuse/landcover to be overlapping, so the polygons in this layer are ordered by the area of their geometries to ensure smaller objects will not be obscured by larger ones. Pay attention to use of transparency when styling - the overlapping shapes can cause muddied or unexpected colors.
+
+### Classes
+
+The main field used for styling the landuse layer is `class`.
+Class is a generalization of the various OSM values described as `types`.
+
+
+| Value              | Types
+|--------------------|-----------------------------------------------------------------
+|`agriculture`       | `orchard`, `farm`, `farmland`, `farmyard`, `allotments`, `vineyard`, `plant_nursery`
+|`cemetery`          | `cemetery`, `christian`, `jewish`
+|`glacier`           | `glacier`
+|`grass`             | `grass`, `grassland`, `meadow`
+|`hospital`          | `hospital`
+|`industrial`        | `industrial`
+|`park`              | `park`, `dog_park`, `common`, `garden`, `golf_course`, `playground`, `recreation_ground`, `nature_reserve`, `national_park`, `village_green`, `zoo`
+|`pitch`             | `athletics`, `chess`, `pitch`
+|`sand`              | `sand`
+|`school`            | `school`, `college`, `university`
+|`scrub`             | `scrub`
+|`wood`              | `wood`, `forest`,
+
+## #waterway
+
+The waterway layer contains rivers, streams, canals, etc represented as lines.

docs/overview.md

@@ -0,0 +1,22 @@
+---
+layout: page
+title: Layer Reference
+published: true
+---
+
+## User Documentation
+
+Get started styling and using vector tiles.
+
+- [Layer Reference](/docs/layer-reference.html)
+- [Chapter 2]()
+- [Chapter 3]()
+- [Chapter 4]()
+
+## Developer Documentation
+
+Want to reuse something or take part in development of osm2vectortiles you
+should take a look at the developer documentation.
+
+- [Components]()
+

index.html

@@ -12,12 +12,12 @@
     <section class="header">
       <div class="header__sticky">
         <div class="header__wrapper">
-          <h1 class="header__brand">OSM Vector Tiles</h1>
+          <a href="/"><h1 class="header__brand">OSM Vector Tiles</h1></a>
           <div class="header__nav">
-            <a class="header__nav-link" href="#">Get Started</a>
-            <a class="header__nav-link" href="#">Docs</a>
-            <a class="header__nav-link" href="#">Data</a>
-            <a class="header__nav-link" href="#">FAQ</a>
+            <a class="header__nav-link" href="/docs/get-started.html">Get Started</a>
+            <a class="header__nav-link" href="/docs/overview.html">Docs</a>
+            <a class="header__nav-link" href="/data/download.html">Downloads</a>
+            <a class="header__nav-link" href="/docs/faq.html">FAQ</a>
           </div>
         </div>
       </div>