From fe8788355afda96dcf984b331eeaf337aea7c666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 4 Aug 2013 17:43:32 +0300 Subject: [PATCH] #21 Continues - Prepare layout - Prepare color swatches - Prepare variables --- .../stylesheets/_color-swatches.css.sass | 31 +++++++++++ source/assets/stylesheets/_mixins.css.sass | 4 ++ source/assets/stylesheets/_variables.css.sass | 27 ++++++++++ .../assets/stylesheets/application.css.sass | 53 ++++++++++++++++++- source/index.html.haml | 8 +-- source/layouts/layout.haml | 37 +++++++++++-- source/partials/_navbar.haml | 8 ++- 7 files changed, 160 insertions(+), 8 deletions(-) create mode 100755 source/assets/stylesheets/_color-swatches.css.sass diff --git a/source/assets/stylesheets/_color-swatches.css.sass b/source/assets/stylesheets/_color-swatches.css.sass new file mode 100755 index 0000000..fb20d2d --- /dev/null +++ b/source/assets/stylesheets/_color-swatches.css.sass @@ -0,0 +1,31 @@ +// Flat Color Swatches by Flat-ui (http://designmodo.github.io/Flat-UI/) + +$turquoise: #1abc9c +$green-sea: #16a085 + +$emerald: #2ecc71 +$nephritis: #27ae60 + +$peter-river: #3498db +$belize-hole: #2980b9 + +$amethyst: #9b59b6 +$wisteria: #8e44ad + +$wet-asphalt: #34495e +$midnight-blue: #2c3e50 + +$sun-flower: #f1c40f +$orange: #f39c12 + +$carrot: #e67e22 +$pumpkin: #d35400 + +$alizarin: #e74c3c +$pomegranate: #c0392b + +$clouds: #ecf0f1 +$silver: #bdc3c7 + +$concrete: #95a5a6 +$asbestos: #7f8c8d \ No newline at end of file diff --git a/source/assets/stylesheets/_mixins.css.sass b/source/assets/stylesheets/_mixins.css.sass index e69de29..e0e11ae 100755 --- a/source/assets/stylesheets/_mixins.css.sass +++ b/source/assets/stylesheets/_mixins.css.sass @@ -0,0 +1,4 @@ +@mixin animate-property($property, $duration, $timing) + +transition-property($property) + +transition-duration($duration) + +transition-timing-function($timing) \ No newline at end of file diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass index e69de29..d864147 100755 --- a/source/assets/stylesheets/_variables.css.sass +++ b/source/assets/stylesheets/_variables.css.sass @@ -0,0 +1,27 @@ +@import 'color-swatches' + +// Globals +$base-color: $turquoise + +$body-bg-primary: $silver +$body-bg-secondary: $asbestos + +$sidebar-width: 80px +$sidebar-bg: $midnight-blue + + +$dock-bg: $midnight-blue +$dock-active-icon-color: $base-color + +$animation-duration: .4s + +// Bootstrap Overrides + +$navbar-bg: rgba(0,0,0,0) +$navbar-brand-color: $midnight-blue +$navbar-brand-hover-color: $wet-asphalt + +$breadcrumb-bg: $clouds +$panel-heading-bg: $clouds + +$link-color: $base-color \ No newline at end of file diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 89a44ad..4142d96 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -1,4 +1,55 @@ @import 'compass' @import 'variables' @import 'mixins' -@import 'bootstrap' \ No newline at end of file +@import 'bootstrap' + +body.main + padding: 10px + background-color: $body-bg-primary + //+background-image(linear-gradient(left, $body-bg-primary, $body-bg-secondary)) + +.navbar-brand + font-size: 1.6em + +#content, #sidebar + z-index: 1030 + position: absolute + top: 70px + bottom: 0 + left: 20px + right: 20px + +#sidebar + +border-top-left-radius(10px) + background-color: $sidebar-bg + width: $sidebar-width + + #dock + width: $sidebar-width + text-align: center + color: $clouds + .launcher + margin-top: 10px + cursor: pointer + i + display: block + font-size: 2.5em + a + text-decoration: none + color: $clouds + font-size: .7em + &:hover, &.active + i, a + +animate-property(font-size, $animation-duration, ease-in-out) + +animate-property(color, $animation-duration, ease-in-out) + color: $dock-active-icon-color + +#content + +border-top-right-radius(10px) + background-color: $body-bg + padding: 10px + left: $sidebar-width + 20 + +#toolbar + position: relative + top: 10px \ No newline at end of file diff --git a/source/index.html.haml b/source/index.html.haml index 03b3d35..13d47c7 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -1,6 +1,8 @@ - @title = '## HIERAPOLIS ##' - @body_class = 'main' -%h1 - %i.icon-beer.icon-large - Hierapolis Rocks! +.panel + .panel-heading + %i.icon-beer.icon-large + Hierapolis Rocks! + Lorem ipsum diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 1bb86d9..ee63e71 100755 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -26,9 +26,41 @@ = yield_content :head %body{class: @body_class || 'page'} - .container{ role: 'main' } + + / Navbar + = partial 'partials/navbar' + / Sidebar + + #sidebar + #dock + .launcher.active + %i.icon-dashboard + %a{href: '#'} Dashboard + .launcher + %i.icon-user + %a{href: '#'} Users + .launcher + %i.icon-flag + %a{href: '#'} Reports + .launcher + %i.icon-camera-retro + %a{href: '#'} Photos + .launcher + %i.icon-bookmark + %a{href: '#'} Bookmarks + .launcher + %i.icon-cloud + %a{href: '#'} Backup + .launcher + %i.icon-bug + %a{href: '#'} Feedback + + / Content + #content + = partial 'partials/breadcrumb' = yield + / Javascripts = javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', @@ -36,5 +68,4 @@ 'application' / Google Analytics - = partial 'partials/trackers' - + = partial 'partials/trackers' \ No newline at end of file diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml index b338037..61d3134 100644 --- a/source/partials/_navbar.haml +++ b/source/partials/_navbar.haml @@ -1,4 +1,10 @@ .navbar %a.navbar-brand{:href => "#"} %i.icon-beer - Hierapolis \ No newline at end of file + Hierapolis + %ul.nav.navbar-nav.pull-right + %li.active + .navbar-text + %strong John DOE + =image_tag 'http://lorempixel.com/30/30/nature', class: 'img-circle' + %a{:href => "#"} Home