Customize header styling and texts

pull/94/head
Lukas Martinelli 2015-09-24 09:13:48 +02:00
rodzic b05d29c1a7
commit 7e0e33f541
6 zmienionych plików z 57 dodań i 31 usunięć

Wyświetl plik

@ -19,20 +19,25 @@ a {
display: inline-block;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.08);
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.btn + .btn {
margin-left: 1rem; }
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn + .btn {
margin-left: 1rem;
}
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3); }
background-color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.3);
}
@media screen and (min-width: 64em) {
.btn {
@ -57,7 +62,11 @@ a {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 30rem;
}
@media screen and (min-width: 64em) {
.page-header {
@ -73,36 +82,54 @@ a {
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
margin-bottom: 0.1rem;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
font-size: 5.25rem; }}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
font-size: 4.25rem; } }
@media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
font-size: 3.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
font-size: 2.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
font-size: 1.5rem;
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem; } }
font-size: 1rem;
}
}
.main-content h3 {
font-size: 2.3rem;
}
.main-content p {
margin-bottom: 1em;
line-height: 1.6em;
}
.main-content :first-child {
margin-top: 0; }
@ -113,8 +140,6 @@ a {
margin-bottom: 1rem;
font-weight: normal;
color: #159957; }
.main-content p {
margin-bottom: 1em; }
.main-content code {
padding: 2px 4px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

BIN
img/bg.jpg 100644

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 292 KiB

BIN
img/bg.png 100644

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 1.3 MiB

Wyświetl plik

@ -6,36 +6,37 @@
<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="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.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">Generating vector tiles from OSM Planet for custom styling</h2>
<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/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/geometalab/osm2vectortiles/tarball/master" class="btn">Download .tar.gz</a>
<a href="https://github.com/geometalab/osm2vectortiles/tarball/master" class="btn">Download .mbtiles</a>
</section>
<section class="main-content">
<h3>
<a id="osm2vectortiles" class="anchor" href="#osm2vectortiles" aria-hidden="true"><span class="octicon octicon-link"></span></a>osm2vectortiles</h3>
<h3>Goal</h3>
<p>Our goal is to create vectortiles for the entire OSM planet and allow easy customizing and styling of these.</p>
<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.
</p>
<h3>
<a id="contributors" class="anchor" href="#contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Contributors</h3>
<p><a href="https://github.com/manuelroth" class="user-mention">@manuelroth</a>
<a href="https://github.com/lukasmartinelli" class="user-mention">@lukasmartinelli</a>
<a href="https://github.com/sfkeller" class="user-mention">@sfkeller</a>
<a href="https://github.com/klokan" class="user-mention">@klokan</a></p>
<ul>
<li>Manuel Roth <a href="https://github.com/manuelroth" class="user-mention">@manuelroth</a></li>
<li>Lukas Martinelli <a href="https://github.com/lukasmartinelli" class="user-mention">@lukasmartinelli</a></li>
<li>Stefan Keller <a href="https://github.com/sfkeller" class="user-mention">@sfkeller</a></li>
<li>Petr Pridal <a href="https://github.com/klokan" class="user-mention">@klokan</a></li>
</ul>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/geometalab/osm2vectortiles">osm2vectortiles</a> is maintained by <a href="https://github.com/geometalab">geometalab</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>