diff --git a/frontend/app/styles/app.css b/frontend/app/styles/app.css deleted file mode 100644 index 9adb5ad..0000000 --- a/frontend/app/styles/app.css +++ /dev/null @@ -1,3 +0,0 @@ -html, body { - margin: 20px; -} diff --git a/frontend/app/styles/app.scss b/frontend/app/styles/app.scss new file mode 100644 index 0000000..b8cbdcc --- /dev/null +++ b/frontend/app/styles/app.scss @@ -0,0 +1,203 @@ +@import "bourbon"; +@import "bower_components/neat/app/assets/stylesheets/neat"; + +$mobile: new-breakpoint(max-width 480px); +$desktop: new-breakpoint(min-width 850px); + +$base-accent-color: #bff073 !default; +$base-color: #ffd041 !default; +$base-font-color: #f05b47; +$hover-font-color: #7f7f7f; + +#page { + @include outer-container; + + #content { + @include media($mobile) { + @include span-columns(12); + } + @include media($desktop) { + @include span-columns(8); + } + } + + #sidebar { + @include media($mobile) { + @include span-columns(12); + } + @include media($desktop) { + @include span-columns(4); + } + } + + .sidebar-content { + /////////////////////////////////////////////////////////////////////////////////// + + ul { + padding: 0; + margin: 0; + } + + li { + list-style: none; + } + + a { + text-decoration: none; + } + ////////////////////////////////////////////////////////////////////////////////// + + $sidebar-border-color: $base-color; + $sidebar-background: lighten($sidebar-border-color, 20%); + $sidebar-color: $base-font-color; + $sidebar-border: 1px solid $sidebar-border-color; + $sidebar-background-hover: lighten($base-accent-color, 15%); + $sidebar-color-hover: darken($base-font-color, 20%); + $sidebar-background-focus: lighten($sidebar-background, 5%); + + background: $sidebar-background; + + li a { + border-bottom: $sidebar-border; + color: $sidebar-color; + display: block; + font-weight: bold; + padding: 1em; + + &:focus { + background-color: $sidebar-background-focus; + } + + &:hover { + background-color: $sidebar-background-hover; + color: $sidebar-color-hover; + } + } + } +} + +div.header { + @include span-columns(12); + background: $base-accent-color; + padding: 0.5em; + + .title { + margin-left: 10px; + margin-top: 5px; + @include media($mobile) { + @include span-columns(12); + } + @include media($desktop) { + @include span-columns(8); + } + font-size: 36px; + } + + nav ul { + @include media($mobile) { + @include span-columns(4); + } + + padding: 0; + margin: 0; + + li { + list-style: none; + display: inline-block; + } + + a { + text-decoration: none; + } + ////////////////////////////////////////////////////////////////////////////////// + + $topbar-border-color: $base-accent-color; + $topbar-background: $topbar-border-color; + $topbar-color: $base-font-color; + $topbar-border: 1px solid $topbar-border-color; + $topbar-background-hover: lighten($base-accent-color, 15%); + $topbar-color-hover: darken($base-font-color, 20%); + $topbar-background-focus: lighten($topbar-background, 5%); + + background: $topbar-background; + + li a { + border-bottom: $topbar-border; + color: $topbar-color; + display: inline-block; + font-weight: bold; + padding: 1em; + + &:focus { + background-color: $topbar-background-focus; + } + + &:hover { + background-color: $topbar-background-hover; + color: $topbar-color-hover; + } + } + } +} + +// accordion component from Refills - stole their CSS +.item-list { + /////////////////////////////////////////////////////////////////////////////////// + $base-border-color: gainsboro !default; + $base-line-height: 1.5em !default; + $base-spacing: 1.5em !default; + $dark-gray: #333 !default; + $base-font-color: $dark-gray !default; + + margin: 0; + padding: 0; + + ul { + margin: 0; + padding: 0; + } + + li { + list-style: none; + } + + p { + color: $base-font-color; + line-height: $base-line-height; + } + + a { + text-decoration: none; + } + ////////////////////////////////////////////////////////////////////////////////// + + $item-list-border-color: $base-border-color; + $item-list-color: $base-font-color; + $item-list-border: 1px solid $item-list-border-color; + $item-list-background: lighten($item-list-border-color, 10%); + $item-list-hover: lighten($item-list-background, 2%); + $item-list-list-padding: ($base-spacing / 2) $gutter; + + background-color: $item-list-background; + border: $item-list-border; + margin-bottom: $base-spacing; + + li { + border-bottom: $item-list-border; + + > a { + color: $item-list-color; + display: block; + padding: $item-list-list-padding; + } + + &:last-child { + border: none; + } + + &:focus, + &:hover { + background-color: $item-list-hover; + } + } +} diff --git a/frontend/app/templates/application.hbs b/frontend/app/templates/application.hbs index 448f931..7666bc9 100644 --- a/frontend/app/templates/application.hbs +++ b/frontend/app/templates/application.hbs @@ -1,20 +1,37 @@ -

Mastermind

+
+
+ +
- {{#if session.isAuthenticated}} -
  • {{link-to 'Add a project' 'projects.new'}}
    • -
  • Logout
    • - {{else}} -
  • {{link-to 'Login' 'login'}}
    • -
  • {{link-to 'Sign Up' 'sign-up'}}
    • - {{/if}} - +
    + +
    + +
    + {{outlet}} +
    +
    diff --git a/frontend/app/templates/projects/index.hbs b/frontend/app/templates/projects/index.hbs index 1ecb41c..c9a38ae 100644 --- a/frontend/app/templates/projects/index.hbs +++ b/frontend/app/templates/projects/index.hbs @@ -1,6 +1,6 @@

    All World Domination Schemes

    -