styled header

phonegap · Mar 30, 2015 · 8fa4704 · 8fa4704
1 parent 34bcd7f
commit 8fa4704
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -16,7 16,7 @@ npm start
 
 This will start a local server in development mode. The server will generate
 all of the documentation to `/out` and watch for file changes. When a file is
-changed, LiveReload will regenerate the file and refresh your browser.
 changed, BrowserSync will regenerate the file and refresh your browser.
 
 ## Directory Structure
 

diff --git a/assets/styles/index.css.stylus b/assets/styles/index.css.stylus
@@ -1,34 1,115 @@
 // Future adventurers: In an attempt to avoid building dragons, we will use [BEM](https://en.bem.info/) for css class naming and organization.
-// base
 
 $header-bg = #27A1C5;
 
 // Mobile first and default mediaquery
 //Base Styles
 :root
  font-size 16px
 body
- background #FFF
-main
- display flex
- align-items stretch
- height 100%
- width 100%
  font-family 'adobe-clean', Helvetica, Arial, sans-serif
 .bounds
  max-width 1230px
  position relative
  margin 0 auto
  padding 0 20px
  box-sizing border-box
 a
  text-decoration none
  &:hover
  text-decoration underline
 
-// header
 //Header
 .site-header
  color white
  height 60px
  width 100%
- background #CCC
  background $header-bg
  display block
- &__nav
- background #333
  margin-bottom 30px
  .bounds
  display flex
  justify-content space-between
  align-items center
  height 100%
  a
  color white
  &:hover
  text-decoration none
 .site-header__logo
  h1
  font-size 1.8rem
  margin 0
  padding 0
  font-weight 200
  img
  vertical-align middle
  margin-right .8rem
  width 2rem
  height auto
  span
  position relative
  top .125rem
 .site-header__nav
  display none
  ul
  margin 0
  padding 0
  display flex
  flex-direction column
  list-style none
 
-// sidebar (sidenav)
-.sidebar
- background #F2F2F2
- display block
- width 300px
 @media (min-width: 800px)
  .site-header
  height 100px
  margin-bottom 50px
  .site-header__nav
  display block
  ul
  flex-direction row
  li
  padding 10px
  margin 0 4px
  .site-header__logo
  h1
  font-size 2.25rem
  img
  margin-right 1rem
  width 2.5rem
  span
  top .125rem
 
-// footer
-.site-footer
- background #333
- height 260px
 
-// content
-.content
- background #FFF
- width 100%
 // // base
 // body
 // background #FFF
 // main
 // display flex
 // align-items stretch
 // height 100%
 // width 100%
 //
 // // header
 // .site-header
 // height 60px
 // width 100%
 // background #CCC
 // display block
 // &__nav
 // background #333
 //
 // // sidebar (sidenav)
 // .sidebar
 // background #F2F2F2
 // display block
 // width 300px
 //
 // // footer
 // .site-footer
 // background #333
 // height 260px
 //
 // // content
 // .content
 // background #FFF
 // width 100%
diff --git a/docpad.js b/docpad.js
@@ -22,7 22,16 @@ module.exports = {
  "compress": true,
  "include css": true
  }
- }
  },
  "browsersync": {
  "open": true,
  "ghostMode": {
  "clicks": true,
  "location": true,
  "forms": true,
  "scroll": true
  }
  }
  },
  "environments": {
  "development": {
@@ -31,12 40,6 @@ module.exports = {
  }
  }
  },
- "watchOptions": {
- /**
- * Improve livereload responsiveness on OS X.
- */
- "preferredMethods": ["watch", "watchFile"]
- },
  "ignorePaths": [
  /**
  * Ignore output directory to prevent watch triggering

diff --git a/layouts/default.html.jade b/layouts/default.html.jade
@@ -1,28 1,34 @@
-- var meta = getBlock('meta')
-- var scripts = getBlock('scripts')
-- var styles = getBlock('styles')
-
-//- user styles and scripts
-- styles.add(['/styles/normalize.css'])
-- styles.add(['/styles/index.css'])
-
 doctype html
 html(lang='en')
 
  head
 
- //- meta
- != meta.toHTML()
  block meta
  meta(name="viewport", content="initial-scale=1.0")
  block styles
  link(href='/styles/normalize.css', rel='stylesheet')
  link(href='/styles/index.css', rel='stylesheet')
 
- //- styles
- != styles.toHTML()
 
  body
  header.site-header
  .bounds
  .site-header__logo
  h1
  a(href="/")
  img(src="/images/phonegaplogo.svg")
  span Adobe PhoneGap
  nav.site-header__nav
  ul
  li: a(href="#") Products
  li: a(href="#") Get Started
  li: a(href="#") Docs &amp; Resources
  li: a(href="#") App Showcase
  li: a(href="#") Blog
  main
- aside.sidebar test
- .content!= content
  .bounds
  aside.sidebar test
  .content!= content
  footer.site-footer
 
- //- scripts
- != scripts.toHTML()
  block scripts
diff --git a/package.json b/package.json
@@ -5,8 5,8 @@
  "dependencies": {
  "autoprefixer-stylus": "^0.5.0",
  "docpad": "6.73.5",
  "docpad-plugin-browsersync": "~2.0.6",
  "docpad-plugin-jade": "2.9.0",
- "docpad-plugin-livereload": "2.6.1",
  "docpad-plugin-marked": "2.3.0",
  "docpad-plugin-stylus": "2.9.0"
  },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/phonegaplogo.svg b/public/images/phonegaplogo.svg