Skip to content
This repository has been archived by the owner on Jan 11, 2019. It is now read-only.

Commit

Permalink
sync styles with main site (navbar logo, footer)
Browse files Browse the repository at this point in the history
  • Loading branch information
hanbyul-here committed Apr 15, 2015
1 parent b407980 commit be158cb
Show file tree
Hide file tree
Showing 9 changed files with 83 additions and 49 deletions.
39 changes: 5 additions & 34 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Transitland Developer Playground</title>
<link href='//fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="/css/backgrid.css" rel='stylesheet' />
<link href="/css/MarkerCluster.css" rel="stylesheet" />
<link href="/css/MarkerCluster.Default.css" rel="stylesheet" />

<link rel="stylesheet" href="/css/main.css">
<!-- <link href="/assets/leaflet.css" rel='stylesheet' /> -->

Expand All @@ -41,38 +41,9 @@
</script>

</head>
<nav class="navbar col-lg-12 col-md-12 col-sm-12">
<a href="/">
<div class="logo-image"></div>
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu-bar" aria-expanded="false" aria-controls="navbar">
<!--<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>-->
MENU
</button>
</div>
<div id="nav-menu-helper"></div>
<div id="nav-menu-bar" class="navbar-collapse collapse">
<div class="nav-menu">
{% assign url = page.url|remove:'index.html' %}
{% for link in page.navigation %}
<div class="float-left">
<a {% if url == link.url %}class="selected"{% endif %} href="{{link.url}}" target="_self">
<div class="circle"></div>
<div class="main">
{{link.text}}
</div>
</a>
</div>
{% endfor %}
</div>
</div><!--/.navbar-collapse -->
</nav>

<body>
{% include nav.html %}
{{ content }}

</body>
{% include footer.html %}
</body>
</html>
43 changes: 43 additions & 0 deletions _sass/_footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
footer{
width: 100%;
bottom:0;
position:fixed;
z-index:-1;
background-color: #cecece;
height: $footer-h;
.container{
color: #666;
margin: 0 auto;
max-width:800px;
}
ul{
list-style-type:none;
padding: 0 0;
font-weight:400;
text-align: center;
li{font-weight: 400; display:inline; padding:0 5px;}
}
.container{
padding-top:$spacing-unit;
}
.fa{padding-right:5px;}
}

@include media-query($on-ipad){
footer{
position:relative;
height: $footer-h;
display:inline-block;
z-index:0;
padding-bottom:$spacing-unit;
.container{
top:5%;
height:100%;
padding-top:$spacing-unit;
}
}
}

@include media-query($on-palm){

}
21 changes: 17 additions & 4 deletions _sass/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,26 @@
padding:10px 0;
text-align: center;
z-index:1030;
border-radius:0;
}

.nav-menu{
display:inline-block;
}

.logo-image{
background-image:url(../images/transit-logo.png);
background-image:url(../images/logo/transitland_logo@1x.png);
background-size:contain;
background-repeat:no-repeat;
width: 326px;
height:145px;
margin: 0 auto;
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
background-image:url(../images/logo/[email protected]);
}

.circle{
background-color:#fff;
Expand All @@ -33,14 +39,17 @@
width:8px;
height:8px;
position:relative;
top:-5px;
top:-4px;
}

.float-left{
float:left;
padding: 0 20px;
}

.main{
text-transform: uppercase;
}
nav a{
color:#000000;
text-decoration: none;
Expand All @@ -59,7 +68,7 @@ nav a:visited{

@for $i from 1 through 6 {
.nav-menu .float-left:nth-child(#{$i}) a:hover{color:nth($logo-colors,$i);}
.nav-menu .float-left:nth-child(#{$i}) .selected{color:nth($logo-colors,$i);}
.nav-menu .float-left:nth-child(#{$i}) .active{color:nth($logo-colors,$i);}
}

.nav-helper{
Expand Down Expand Up @@ -89,7 +98,11 @@ nav a:visited{
}
.logo-image{
margin:0 auto;
background-image:url(../images/transit-logo.png);
background-image:url(../images/logo/[email protected]);
@media
(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image:url(../images/logo/[email protected]);
}
width:226px;
height:100px;

Expand Down
1 change: 1 addition & 0 deletions _sass/_style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
#developer-playground{
background-color:#000;
padding:50px 0;
margin-bottom:$footer-h;
}

#developer-playground p.h2{
Expand Down
28 changes: 17 additions & 11 deletions css/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@
@charset "utf-8";
// Our variables
$base-font-family: Lato, Helvetica, Arial, sans-serif;
$font-awesome: FontAwesome;
$base-font-size: 30px;
$base-font-weight: 300;
$medium-font-size: $base-font-size * 0.875;
$small-font-size: $base-font-size * 0.575;
$small-font-size: $base-font-size * 0.575;
$base-line-height: 1.5;

$spacing-unit: 30px;

$mobile-footer-h: 120px;
$footer-h: 150px;
$text-color: #000;
$background-color: #fdfdfd;
$brand-color: #2a7ae2;
Expand All @@ -21,8 +25,9 @@ $grey-color-dark: darken($grey-color, 25%);
// Width of the content area
$content-width: 800px;

$on-palm: 399px;
$on-palm: 400px;
$on-pad: 767px;
$on-ipad: 768px;
$on-small-screen: 991px;


Expand All @@ -34,13 +39,13 @@ $logo-color-4: #ee914b;
$logo-color-5: #66ad2a;
$logo-color-6: #9f5bcc;
$logo-colors : ($logo-color-1,$logo-color-2,$logo-color-3,$logo-color-4,$logo-color-5,$logo-color-6);
// Using media queries with like this:
// @include media-query($on-palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
$logo-hover-colors: ();
$index-sections:();

@for $i from 1 through 6 {
$logo-hover-colors:append($logo-hover-colors,darken(nth($logo-colors,$i),5%) );
}

@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
Expand All @@ -52,5 +57,6 @@ $logo-colors : ($logo-color-1,$logo-color-2,$logo-color-3,$logo-color-4,$logo-co
"bootstrap",
"override",
"nav",
"style"
"style",
"footer"
;
Binary file added images/logo/[email protected]
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 images/logo/[email protected]
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 images/logo/[email protected]
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 images/logo/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit be158cb

Please sign in to comment.