Skip to content

Commit

Permalink
style css
Browse files Browse the repository at this point in the history
  • Loading branch information
jbouzekri committed Jul 1, 2017
1 parent 3c1d400 commit 49b1305
Show file tree
Hide file tree
Showing 14 changed files with 406 additions and 22 deletions.
31 changes: 29 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,35 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>gmalt-web</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">

<title>gmalt - Get My ALTitude</title>
<meta name="description" content="A python project to load SRTM elevation data and query it with a REST JSON API">

<meta name="google-site-verification" content="4q0QBgZz_K0dpEaFTxDy2jBrtTdcOOjT9QaEDo1ns2g" />
<meta property="og:url" content="https://gmalt.github.io">
<meta property="og:type" content="website">
<meta property="og:title" content="gmalt - Get My ALTitude">
<meta property="og:image" content="https://gmalt.github.io/static/logo.svg">
<meta property="og:description" content="A python project to load SRTM elevation data and query it with a REST JSON API">
<meta property="og:locale" content="en">
<meta property="article:author" content="Jonathan Bouzekri">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@jobou78">
<meta name="twitter:url" content="https://gmalt.github.io">
<meta name="twitter:title" content="gmalt - Get My ALTitude">
<meta name="twitter:description" content="A python project to load SRTM elevation data and query it with a REST JSON API">
<meta name="twitter:image" content="https://gmalt.github.io/static/logo.svg">
<link href="https://plus.google.com/+JonathanBouzekri" rel="publisher">
<meta itemprop="name" content="gmalt - Get My ALTitude">
<meta itemprop="description" content="A python project to load SRTM elevation data and query it with a REST JSON API">
<meta itemprop="image" content="https://gmalt.github.io/static/logo.svg">

<link href="/static/favicon.png" rel="shortcut icon" type="image/png" />
<link href="//fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
Expand Down
52 changes: 36 additions & 16 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,44 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<p>Click on the map where you want to find the elevation, look up by address with the search field or search by latitude and longitude.</p>
<gmalt-map :lat="lat" :lng="lng" @lookup="updatePos"></gmalt-map>
<gmalt-search :lat="lat" :lng="lng" @search="updatePos"></gmalt-search>
<p>Current position : {{ lat }}, {{ lng }}</p>
<p>Alt : {{ alt }}</p>
<gmalt-geoloc @geoloc="updatePos"></gmalt-geoloc>
<div>
<header>
<div class="inner">
<img src="./assets/img/logo.svg" />
<h1>Gmalt</h1>
<h2>Get My ALTitude</h2>
<a href="https://github.com/gmalt" class="button">
<small>View project on</small> GitHub
</a>
</div>
</header>

<main id="app">
<div class="inner clearfix">
<section id="main-content">
<p class="intro">Either, Click on the map or look up by address or search by latitude and longitude or use your geolocation.</p>
<gmalt-map :lat="lat" :lng="lng" @lookup="updatePos"></gmalt-map>
<gmalt-search :lat="lat" :lng="lng" @search="updatePos"></gmalt-search>
<p>Current position : {{ lat }}, {{ lng }}</p>
<p>Alt : {{ alt }}</p>
<gmalt-geoloc @geoloc="updatePos"></gmalt-geoloc>
</section>
<aside id="sidebar">
<a href="https://github.com/gmalt/cli" class="button">
<small>Project</small>
Gmalt CLI
</a>
<a href="https://github.com/gmalt/api" class="button">
<small>Project</small>
Gmalt API
</a>
<p class="repo-owner">Theme <a href="https://github.com/pages-themes/architect">architect</a> from <a href="https://github.com/pages-themes">pages-themes</a>.</p>
</aside>
</div>
</main>
</div>
</template>

<script>
import './assets/css/style.css'
import GmaltGeoloc from './components/GmaltGeoloc'
import GmaltMap from './components/GmaltMap'
import GmaltSearch from './components/GmaltSearch'
Expand Down Expand Up @@ -60,12 +88,4 @@ export default {
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
186 changes: 186 additions & 0 deletions src/assets/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
body {
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #666;
background: #fafafa url(../img/body-bg.jpg) 0 0 repeat;
margin: 0;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #dcdcdc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #dcdcdc;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #dcdcdc;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #dcdcdc;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #dcdcdc;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

a {
text-decoration: none;
color: #2879d0;
}

p {
margin-bottom: 20px;
margin-top: 0;
}

header h2 {
width: 540px;
margin-top: 0;
margin-bottom: 0;
font-size: 26px;
font-weight: normal;
line-height: 1.3;
color: #9ddcff;
letter-spacing: 0;
}

header {
padding-top: 40px;
padding-bottom: 40px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
background: #2e7bcf url(../img/header-bg.jpg) 0 0 repeat-x;
border-bottom: solid 1px #275da1;
}

header h1 {
width: 540px;
margin-top: 0;
margin-bottom: 0.2em;
font-size: 72px;
font-weight: normal;
line-height: 1;
color: #fff;
letter-spacing: -1px;
}

.inner {
position: relative;
width: 940px;
margin: 0 auto;
}

header img {
float: left;
height: 116px;
margin-right: 25px;
}

header a.button {
position: absolute;
top: 0;
right: 0;
background: transparent url(../img/github-button.png) 0 0 no-repeat;
}

a.button {
width: 134px;
height: 58px;
padding-top: 22px;
padding-left: 68px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 23px;
line-height: 1.2;
color: #fff;
}

a.button small {
display: block;
font-size: 11px;
}

main {
padding-top: 30px;
border-top: solid 1px #fff;
}

.clearfix {
display: block;
}

#main-content {
float: left;
width: 690px;
}

aside#sidebar {
float: right;
width: 200px;
min-height: 504px;
padding-left: 20px;
font-size: 12px;
line-height: 1.3;
background: transparent url(../img/sidebar-bg.jpg) 0 0 no-repeat;
}

aside a.button {
display: block;
width: 138px;
padding-left: 75px;
margin-bottom: 20px;
font-size: 21px;
background: transparent url(../img/project-button.png) 0 0 no-repeat;
}

#main-content h1 {
margin-top: 0;
margin-bottom: 0;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 2.8em;
font-weight: normal;
color: #474747;
text-indent: 6px;
letter-spacing: -1px;
}

aside#sidebar p.repo-owner, aside#sidebar p.repo-owner a {
font-weight: bold;
}

#main-content .intro {
margin-top: 0;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 1.4em;
font-weight: bold;
color: #474747;
text-align: center;
margin-bottom: 20px;
}

input[type="text"], input[type="number"] {
display: block;
margin: 0;
font-family: sans-serif;
font-size: 18px;
box-shadow: none;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}

input[type="text"]:focus, input[type="text"].focus, input[type="number"]:focus, input[type="number"].focus {
border: solid 1px #275da1;
box-shadow: 0 0 5px 1px #2e7bcf;
outline: none;
}
Binary file added src/assets/img/body-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/github-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/header-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 49b1305

Please sign in to comment.