diff --git a/apidoc/template/tmpl/layout.tmpl b/apidoc/template/tmpl/layout.tmpl index 6fab32deef..dbecd6f857 100644 --- a/apidoc/template/tmpl/layout.tmpl +++ b/apidoc/template/tmpl/layout.tmpl @@ -21,7 +21,7 @@
- OpenLayers 3 API Documentation - + OpenLayers 3
diff --git a/doc/index.hbs b/doc/index.hbs new file mode 100644 index 0000000000..ee1051ae3d --- /dev/null +++ b/doc/index.hbs @@ -0,0 +1,12 @@ +--- +title: Documentation +layout: doc.hbs +--- + +# Documentation + +If you're eager to get your first OpenLayers 3 map on a page, dive into the [quick start](quickstart.html). + +For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/). + +Find additional reference material in the [API docs](../apidoc). diff --git a/doc/quickstart.hbs b/doc/quickstart.hbs new file mode 100644 index 0000000000..dbc37808fe --- /dev/null +++ b/doc/quickstart.hbs @@ -0,0 +1,132 @@ +--- +title: Quick Start +layout: doc.hbs +--- + +# Quick Start + +## Put a map on a page + +Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser: + +```xml + + + + + + + OpenLayers 3 example + + +

My Map

+
+ + + +``` + +## Understanding what is going on + +To include a map a web page you will need 3 things: + + 1. Include OpenLayers + 2. `
` map container + 3. JavaScript to create a simple map + +### Include OpenLayers + +```xml + +``` + +The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the ol3js.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application. + + +### `
` to contain the map + +```xml +
+``` + +The map in the application is contained in a [`
` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `
` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window. + +```xml + +``` + +### JavaScript to create a simple map + +```js + var map = new ol.Map({ + target: 'map', + layers: [ + new ol.layer.Tile({ + source: new ol.source.MapQuestOpenAerial() + }) + ], + view: new ol.View2D({ + center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), + zoom: 4 + }) + }); +``` + +With this JavaScript code, a map object is created with a MapQuest Open Aerial layer zoomed on the African East coast. Let's break this down: + +The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it. + +```js + var map = new ol.Map({ ... }); +``` + +To attach the map object to the `
`, the map object takes a `target` into arguments. The value is the `id` of the `
`: + +```js + target: 'map' +``` + +The `layers: [ ... ]` array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer: + +```js + layers: [ + new ol.layer.Tile({ + source: new ol.source.MapQuestOpenAerial() + }) + ] +``` + +Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html) + +The next part of the `Map` object is the `View`. The view allow to specify the center, resolution, and rotation of the map. Right now, only `View2D` is supported, but other views should be available at some point. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out. + +```js + view: new ol.View2D({ + center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), + zoom: 4 + }) +``` + +You will notice that the `center` specified is in lat/lon coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates. diff --git a/doc/tutorials/concepts.hbs b/doc/tutorials/concepts.hbs new file mode 100644 index 0000000000..09110938c5 --- /dev/null +++ b/doc/tutorials/concepts.hbs @@ -0,0 +1,73 @@ +--- +title: Basic Concepts +layout: doc.hbs +--- + +# Basic Concepts + +## Map +The core component of OpenLayers 3 is the map (`ol.Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`. + +```xml +
+ +``` + +## View +`ol.Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of an `ol.View` instance - typically an `ol.View2D` for 2D maps. The reason for this abstraction is the idea of instantly switching e.g. between a 2D and a tilted 3D view, without the need to maintain two copies of the `layers`. + +```js + map.setView(new ol.View2D({ + center: [0, 0], + zoom: 2 + })); +``` + +An `ol.View2D` also has a `projection`. The projection determines the coordinate system of the `center` and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units. + +The `zoom` option is a convenient way to specify the map resolution. The available zoom levels are determined by `maxZoom` (default: 28), `zoomFactor` (default: 2) and `maxResolution` (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of `maxResolution` units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by `zoomFactor`, until zoom level `maxZoom` is reached. + + +## Source +To get remote data for a layer, OpenLayers 3 uses `ol.source.Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML. + +```js + var osmSource = new ol.source.OSM(); +``` + +## Layer +A layer is a visual representation of data from a `source`. OpenLayers 3 has three basic types of layers: `ol.layer.Tile`, `ol.layer.Image` and `ol.layer.Vector`. + +`ol.layer.Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions. + +`ol.layer.Image` is for server rendered images that are available for arbitrary extents and resolutions. + +`ol.layer.Vector` is for vector data that is rendered client-side. + +```js + var osmLayer = new ol.layer.Tile({source: osmSource}); + map.addLayer(osmLayer); +``` + +## Putting it all together + + +The above snippets can be conflated to a self contained map configuration with view and layers: + +```xml +
+ +``` diff --git a/doc/tutorials/index.hbs b/doc/tutorials/index.hbs new file mode 100644 index 0000000000..2ac1298a88 --- /dev/null +++ b/doc/tutorials/index.hbs @@ -0,0 +1,8 @@ +--- +title: Tutorials +layout: doc.hbs +--- + +# Tutorials + +We'll be putting together a more comprehensive set of tutorials here. For now, you can take a look at the [basic concepts](concepts.html) tutorial. Stay tuned for more! diff --git a/examples/accessible.html b/examples/accessible.html index 2f54c51911..94339ed9ac 100644 --- a/examples/accessible.html +++ b/examples/accessible.html @@ -20,7 +20,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/animation.html b/examples/animation.html index 60d6f937fd..f8f7d2c1ff 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/bind-input.html b/examples/bind-input.html index c5015ddc7f..3418fbf246 100644 --- a/examples/bind-input.html +++ b/examples/bind-input.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/bing-maps.html b/examples/bing-maps.html index 0b11b7e66c..c038972c4c 100644 --- a/examples/bing-maps.html +++ b/examples/bing-maps.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/brightness-contrast.html b/examples/brightness-contrast.html index 07b42173a5..80dc70f757 100644 --- a/examples/brightness-contrast.html +++ b/examples/brightness-contrast.html @@ -23,7 +23,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/canvas-tiles.html b/examples/canvas-tiles.html index e896536fc8..51f97905f9 100644 --- a/examples/canvas-tiles.html +++ b/examples/canvas-tiles.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/custom-controls.html b/examples/custom-controls.html index 766941a871..9cf24d173b 100644 --- a/examples/custom-controls.html +++ b/examples/custom-controls.html @@ -51,7 +51,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/device-orientation.html b/examples/device-orientation.html index 0fb7ba701a..470b06839d 100644 --- a/examples/device-orientation.html +++ b/examples/device-orientation.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/drag-rotate-and-zoom.html b/examples/drag-rotate-and-zoom.html index e3c2df70d8..3111e8ef8f 100644 --- a/examples/drag-rotate-and-zoom.html +++ b/examples/drag-rotate-and-zoom.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/epsg-4326.html b/examples/epsg-4326.html index 9e55b944cb..91439320e5 100644 --- a/examples/epsg-4326.html +++ b/examples/epsg-4326.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/export-map.html b/examples/export-map.html index 334b02238f..14076fe011 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/full-screen-drag-rotate-and-zoom.html b/examples/full-screen-drag-rotate-and-zoom.html index 84eb71902c..8ef61c96ba 100644 --- a/examples/full-screen-drag-rotate-and-zoom.html +++ b/examples/full-screen-drag-rotate-and-zoom.html @@ -26,7 +26,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/full-screen.html b/examples/full-screen.html index 89af0abe72..d641ce5938 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -26,7 +26,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/geolocation.html b/examples/geolocation.html index 34553bbe60..44e31c630b 100644 --- a/examples/geolocation.html +++ b/examples/geolocation.html @@ -24,7 +24,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/getfeatureinfo.html b/examples/getfeatureinfo.html index 1997d916b8..16446f0cfd 100644 --- a/examples/getfeatureinfo.html +++ b/examples/getfeatureinfo.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/gml.html b/examples/gml.html index beacda13e4..9f43183b3e 100644 --- a/examples/gml.html +++ b/examples/gml.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/gpx.html b/examples/gpx.html index cc3f23738d..f0997c44fb 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html index c1c1967025..9c90d64c9a 100644 --- a/examples/hue-saturation.html +++ b/examples/hue-saturation.html @@ -23,7 +23,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/icon.html b/examples/icon.html index de344d6861..0471245a5d 100644 --- a/examples/icon.html +++ b/examples/icon.html @@ -23,7 +23,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/index.html b/examples/index.html index 191dd2fa3f..41d41eb105 100644 --- a/examples/index.html +++ b/examples/index.html @@ -20,6 +20,9 @@ .example:hover { background-color: #ddd; } + .navbar-search.pull-left { + padding: 5px; + } ::-webkit-scrollbar { width: 8px; @@ -175,7 +178,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/kml-earthquakes.html b/examples/kml-earthquakes.html index 0b0f2696fa..f57958c012 100644 --- a/examples/kml-earthquakes.html +++ b/examples/kml-earthquakes.html @@ -36,7 +36,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/kml-timezones.html b/examples/kml-timezones.html index 39f134ac00..e8c6c57446 100644 --- a/examples/kml-timezones.html +++ b/examples/kml-timezones.html @@ -26,7 +26,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/kml.html b/examples/kml.html index 6bca94260b..c3d95e7119 100644 --- a/examples/kml.html +++ b/examples/kml.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/layer-group.html b/examples/layer-group.html index 867adcfe45..121197f838 100644 --- a/examples/layer-group.html +++ b/examples/layer-group.html @@ -19,7 +19,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/localized-openstreetmap.html b/examples/localized-openstreetmap.html index a3ad06d944..4cbfa2c000 100644 --- a/examples/localized-openstreetmap.html +++ b/examples/localized-openstreetmap.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/mapquest.html b/examples/mapquest.html index 3fbfe48a25..a47e4442c5 100644 --- a/examples/mapquest.html +++ b/examples/mapquest.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/min-max-resolution.html b/examples/min-max-resolution.html index 02d7ce1b8c..1a452f05e3 100644 --- a/examples/min-max-resolution.html +++ b/examples/min-max-resolution.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/mouse-position.html b/examples/mouse-position.html index 592993e894..b6bfb34ea3 100644 --- a/examples/mouse-position.html +++ b/examples/mouse-position.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/moveend.html b/examples/moveend.html index 4f4aa41283..295ab02df3 100644 --- a/examples/moveend.html +++ b/examples/moveend.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/navigation-controls.html b/examples/navigation-controls.html index feb153769f..a6303758d4 100644 --- a/examples/navigation-controls.html +++ b/examples/navigation-controls.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/overlay.html b/examples/overlay.html index 9926ee14d2..c5f6c7c515 100644 --- a/examples/overlay.html +++ b/examples/overlay.html @@ -27,7 +27,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/popup.html b/examples/popup.html index 1ba3e11cfa..c820c9e40c 100644 --- a/examples/popup.html +++ b/examples/popup.html @@ -60,7 +60,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/preload.html b/examples/preload.html index 21d4635836..ae32d8dd72 100644 --- a/examples/preload.html +++ b/examples/preload.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/rotation.html b/examples/rotation.html index bc60f6ab97..e465956111 100644 --- a/examples/rotation.html +++ b/examples/rotation.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/scale-line.html b/examples/scale-line.html index ecd7f02139..023d806f4c 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/select-features.html b/examples/select-features.html index 1043e1097d..a764084d44 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html index 758049c493..0a1b1594b9 100644 --- a/examples/semi-transparent-layer.html +++ b/examples/semi-transparent-layer.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 87eb439c87..aaf627e073 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/simple.html b/examples/simple.html index f6c42a8e41..13b2a7d56e 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/stamen.html b/examples/stamen.html index 9ccd3967e8..d259a40893 100644 --- a/examples/stamen.html +++ b/examples/stamen.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/style-rules.html b/examples/style-rules.html index 88f05e077c..1837ab41ce 100644 --- a/examples/style-rules.html +++ b/examples/style-rules.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/teleport.html b/examples/teleport.html index 94942df3f2..dd1f93e128 100644 --- a/examples/teleport.html +++ b/examples/teleport.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/tilejson.html b/examples/tilejson.html index e332722538..fca30e7d80 100644 --- a/examples/tilejson.html +++ b/examples/tilejson.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/topojson.html b/examples/topojson.html index d71a38c331..9bf116555d 100644 --- a/examples/topojson.html +++ b/examples/topojson.html @@ -14,7 +14,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/vector-layer.html b/examples/vector-layer.html index 4695f80f48..e9ecdd5aea 100644 --- a/examples/vector-layer.html +++ b/examples/vector-layer.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-capabilities.html b/examples/wms-capabilities.html index 1636862845..b45b69ac2d 100644 --- a/examples/wms-capabilities.html +++ b/examples/wms-capabilities.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-custom-proj.html b/examples/wms-custom-proj.html index 96ff5ba530..5ca2ceb206 100644 --- a/examples/wms-custom-proj.html +++ b/examples/wms-custom-proj.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-image-custom-proj.html b/examples/wms-image-custom-proj.html index 86d46b7df4..14b877d3c4 100644 --- a/examples/wms-image-custom-proj.html +++ b/examples/wms-image-custom-proj.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-image.html b/examples/wms-image.html index b6e6f327a2..067c09863b 100644 --- a/examples/wms-image.html +++ b/examples/wms-image.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-no-proj.html b/examples/wms-no-proj.html index e76dcdfd16..bda0c340f3 100644 --- a/examples/wms-no-proj.html +++ b/examples/wms-no-proj.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-tiled.html b/examples/wms-tiled.html index 35da401567..2f83ac7fe5 100644 --- a/examples/wms-tiled.html +++ b/examples/wms-tiled.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts-capabilities.html b/examples/wmts-capabilities.html index 0d379cb167..7e318da573 100644 --- a/examples/wmts-capabilities.html +++ b/examples/wmts-capabilities.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts-from-capabilities.html b/examples/wmts-from-capabilities.html index bd7b62b13a..caf9292e1a 100644 --- a/examples/wmts-from-capabilities.html +++ b/examples/wmts-from-capabilities.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts-ign.html b/examples/wmts-ign.html index 34b47828e6..5fb49cbfb9 100644 --- a/examples/wmts-ign.html +++ b/examples/wmts-ign.html @@ -20,7 +20,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts.html b/examples/wmts.html index 1f67aba491..4419968a8f 100644 --- a/examples/wmts.html +++ b/examples/wmts.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/xyz-esri.html b/examples/xyz-esri.html index f7bedfb982..13fa73fe5f 100644 --- a/examples/xyz-esri.html +++ b/examples/xyz-esri.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/zoomslider.html b/examples/zoomslider.html index 77c47723d8..7cf1cb941e 100644 --- a/examples/zoomslider.html +++ b/examples/zoomslider.html @@ -67,7 +67,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/resources/layout.css b/resources/layout.css index d6ed91dfc2..d870e4a7c5 100644 --- a/resources/layout.css +++ b/resources/layout.css @@ -1,4 +1,5 @@ @import url(font-awesome/css/font-awesome.min.css); +@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700); body { padding-top: 60px; @@ -15,7 +16,14 @@ body { display: none; } -/* padding for social links to match bootstrap nav links */ -.nav>li>.twitter-share-button, .nav>li>.g-plusone-wrapper, .nav>li>.github-watch-button { - padding: 10px 10px 0px; +body, h1, h2, h3, h4, p, li, td, th { + font-family: Quattrocento Sans; } +.navbar-inverse .navbar-inner { + background: #1F6B75; +} +.navbar-inverse .brand { + color: white; + padding: 5px; +} + diff --git a/resources/logo.png b/resources/logo.png new file mode 100644 index 0000000000..3d9702eb3c Binary files /dev/null and b/resources/logo.png differ