kopia lustrzana https://github.com/osm2vectortiles/osm2vectortiles
Improve site
Lukas Martinelli
rodzic
7e0e33f541
commit
2240395781
|
|
@ -1,3 +1,5 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
|
||||
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
|
|
@ -39,6 +41,102 @@ a {
|
|||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.header__sticky {
|
||||
width: 100%;
|
||||
border-top: 3px solid #159957;
|
||||
border-bottom: 8px solid rgba(40, 40, 40, 0.1)
|
||||
min-height: 20rem;
|
||||
background: #fff;
|
||||
opacity: 0.9;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header__wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: 64rem;
|
||||
padding: 1rem 6rem;
|
||||
}
|
||||
|
||||
.header__brand {
|
||||
font-family: 'Open Sans';
|
||||
color: #777;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header__brand, .header__nav {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.header__nav-link {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6em;
|
||||
padding: 0rem 0.8rem;
|
||||
color: #159957;
|
||||
}
|
||||
|
||||
.header__nav-link:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.action {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.action__item {
|
||||
display: inline-block;
|
||||
width: 28%;
|
||||
margin-right: 3%;
|
||||
padding: 0.5rem;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.action__logo {
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.action__header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action__logo img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.action__item:hover .action__logo img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action__item:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.action__item:hover .action__header {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.header__image {
|
||||
width: 100%;
|
||||
background-color: #57B987;
|
||||
background-image: url('../img/bg.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 27rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.btn {
|
||||
padding: 0.75rem 1rem; } }
|
||||
|
|
@ -61,11 +159,11 @@ a {
|
|||
.page-header {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #159957;
|
||||
background-color: #57B987;
|
||||
background-image: url('../img/bg.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 30rem;
|
||||
height: 27rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
|
|
@ -122,10 +220,14 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.main-content h3 {
|
||||
.main-content h2 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
|
||||
.main-content h3 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.main-content p {
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.6em;
|
||||
|
|
|
|||
BIN
img/bg.jpg
BIN
img/bg.jpg
Plik binarny nie jest wyświetlany.
|
Przed Szerokość: | Wysokość: | Rozmiar: 292 KiB Po Szerokość: | Wysokość: | Rozmiar: 299 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 3.4 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 1.6 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 5.0 KiB |
50
index.html
50
index.html
|
|
@ -4,27 +4,57 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>osm2vectortiles by geometalab</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="css/github-light.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<section class="page-header">
|
||||
<h1 class="project-name">osm2vectortiles</h1>
|
||||
<h2 class="project-tagline">Vector tiles from OSM Planet</h2>
|
||||
<a href="https://github.com/geometalab/osm2vectortiles" class="btn">View on GitHub</a>
|
||||
<a href="https://github.com/geometalab/osm2vectortiles/tarball/master" class="btn">Download .mbtiles</a>
|
||||
<section class="header">
|
||||
<div class="header__sticky">
|
||||
<div class="header__wrapper">
|
||||
<h1 class="header__brand">OSM Vector Tiles</h1>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__image"></div>
|
||||
</section>
|
||||
|
||||
<section class="main-content">
|
||||
<h3>Goal</h3>
|
||||
<h2>Free Vector Tiles from OpenStreetMap</h2>
|
||||
|
||||
<p>
|
||||
Create <a href="https://www.mapbox.com/developers/vector-tiles/mapbox-streets-v5">Mapbox Streets</a>
|
||||
compatible vector tiles for custom styling with <a href="https://www.mapbox.com/mapbox-studio-classic/">Mapbox Studio Classic</a> and provide easy deployment methods.
|
||||
Create a custom base map in minutes with our free vector tiles from <a href="http://openstreetmap.org">OpenStreetMap</a>
|
||||
data.
|
||||
Avoid vendor lockin but still use awesome technologies like <a href="https://www.mapbox.com/mapbox-gl-js/">Mapbox GL</a> and <a href="https://www.mapbox.com/mapbox-studio-classic/">Mapbox Studio Classic</a> because our tiles are
|
||||
<a href="https://www.mapbox.com/developers/vector-tiles/mapbox-streets-v5">Mapbox Streets</a> compatible.
|
||||
</p>
|
||||
|
||||
<div class="action">
|
||||
<a href="#" class="action__item">
|
||||
<div class="action__logo">
|
||||
<img src="img/map.png" alt="Browse examples">
|
||||
</div>
|
||||
<h3 class="action__header">Browse Examples</h3>
|
||||
</a>
|
||||
<a href="#" class="action__item">
|
||||
<div class="action__logo">
|
||||
<img src="img/download.png" alt="Download MBTiles">
|
||||
</div>
|
||||
<h3 class="action__header">Download Data</h3>
|
||||
</a>
|
||||
<a href="#" class="action__item">
|
||||
<div class="action__logo">
|
||||
<img src="img/docker.png" alt="Deployment with Docker">
|
||||
</div>
|
||||
<h3 class="action__header">Deploy</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
<a id="contributors" class="anchor" href="#contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Contributors</h3>
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue