lab2023#21 Continues

- Prepare layout
- Prepare color swatches
- Prepare variables

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

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)

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

source/assets/stylesheets/application.css.sass

@@ -1,4 +1,55 @@
 @import 'compass'
 @import 'variables'
 @import 'mixins'
-@import 'bootstrap'
+@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

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

source/layouts/layout.haml

@@ -26,15 +26,46 @@
     = 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',
                              '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js',
                              'application'
 
     / Google Analytics
-    = partial 'partials/trackers'
-
+    = partial 'partials/trackers'

source/partials/_navbar.haml

@@ -1,4 +1,10 @@
 .navbar
   %a.navbar-brand{:href => "#"}
     %i.icon-beer
-    Hierapolis
+    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