a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minimal mobile style for homepage

Browse Source
This commit is contained in:
Tom Russell 2018-08-09 13:14:40 +01:00
parent bbf282b9c0
commit 0f26cf797f
2 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/index.html
View File

@ -14,12 +14,12 @@
<body>
<p class="beta-banner" role="alert" >
Hello! Welcome to the prototype (beta) site for Colouring London. <a
Welcome to the prototype (beta) site for Colouring London. <a
href="http://colouringlondon.org">Find out more about the project.</a>
</p>
<header class="main-header">
<nav class="navbar navbar-light navbar-expand">
<nav class="navbar navbar-light navbar-expand-md">
<a href="index.html" class="logo navbar-brand" id="top">
<div class="grid">
<div class="row">
@ -57,9 +57,9 @@
<main class="beta">
<div id="map"></div>
<div class="jumbotron welcome-float">
<h1>Welcome to Colouring London</h1>
<h1 class="h1">Welcome to Colouring London</h1>
<p class="lead">Colour in, view and download data on London's buildings</p>
<a href="maps.html" class="btn btn-lg">Get Started</a>
<a href="maps.html" class="btn btn-outline-dark btn-lg btn-block">Get Started</a>
</div>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="

44
frontend/main.css
View File

@ -12,10 +12,11 @@ html,
body {
background: #fff;
color: #222;
min-width: 40em; /* jumbotron */
}
.h1, .h2, .h3, .h4, .h5 {
font-family: 'glacial_cl', sans-serif;
}
.h2 {
font-family: 'glacial_cl', sans-serif;
font-weight: normal;
margin: 0;
}
@ -34,11 +35,17 @@ pre {
* Main Layout
*/
main.beta {
position: absolute;
top: 114px; /* 32px banner + 82px header */
bottom: 0;
left: 0;
right: 0;
position: relative;
min-height: 35rem;
}
@media (min-width: 768px){
main.beta {
position: absolute;
top: 114px; /* 32px banner + 82px header */
bottom: 0;
left: 0;
right: 0;
}
}
#map {
position: absolute;
@ -59,13 +66,20 @@ main.beta {
overflow-y: auto;
}
.welcome-float {
z-index: 10000;
position: absolute;
left: 50%;
margin-left: -20em;
width: 40em;
top: 1em;
background-color: rgba(255,255,255,0.8);
z-index: 10000;
top: 0;
width: 100%;
border-radius: 0;
background-color: rgba(255,255,255,0.95);
}
@media (min-width: 768px){
.welcome-float {
left: 50%;
margin-left: -20em;
width: 40em;
top: 1em;
}
}
/**
@ -96,7 +110,7 @@ hr {
*/
.beta-banner {
width: 100%;
height: 32px;
min-height: 32px;
padding: 0.25em 1em;
background: #c57d00;
color: #fff;
@ -118,7 +132,7 @@ hr {
*/
.main-header {
display: block;
height: 82px;
min-height: 82px;
text-decoration: none;
border-bottom: 3px solid #222;
}