cupboard 0.2.0

data/app/assets/stylesheets/layouts/_footer-nav.scss

@@ -0,0 +1,151 @@
+// --------------------------------
+// Layouts - Footer / mega footer
+// --------------------------------
+
+/*doc
+---
+parent: 02_footers
+title: Mega footer
+name: footer_nav
+---
+
+<div class="ic-footers">
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="footer">
+        <div class="mega-footer">
+          <div class="container">
+            <div class="row">
+              <div class="col-xs-12 col-sm-12 col-md-4 text-center">
+                <div class="report">
+                  <img alt="愛料理，分享食譜與幸福時刻" class="hidden-xs hidden-sm" src="/images/logo-2x.png">
+                  <a href="#" class="col-xs-12 btn btn-blue">建議或問題回報</a>
+                </div>
+              </div>
+              <div class="col-md-8 pull-right hidden-xs">
+                <div class="footer-links">
+                  <h4>服務總覽</h4>
+                  <ul>
+                    <li><a href="#" rel="nofollow" target="_blank">粉絲專頁</a></li>
+                    <li><a href="#" rel="nofollow" target="_blank">生活誌</a></li>
+                    <li><a href="#" rel="nofollow" target="_blank">討論區</a></li>
+                    <li><a href="#" rel="nofollow" target="_blank">APP下載</a></li>
+                  </ul>
+                </div>
+                <div class="footer-links">
+                  <h4>關於愛料理</h4>
+                  <ul>
+                    <li><a href="#" rel="nofollow" target="_blank">公司資訊</a></li>
+                    <li><a href="#" rel="nofollow" target="_blank">徵才訊息</a></li>
+                    <li><a href="#" rel="nofollow" target="_blank">廣告合作</a></li>
+                  </ul>
+                </div>
+                <div class="footer-links">
+                  <h4>會員服務</h4>
+                  <ul>
+                    <li><a href="#">我的收藏</a></li>
+                    <li><a href="#">個人首頁</a></li>
+                    <li><a href="#">帳號設定</a></li>
+                    <li><a href="#">忘記密碼</a></li>
+                  </ul>
+                </div>
+                <div class="footer-links">
+                  <h4>逛逛食譜</h4>
+                  <ul class="pull-left">
+                    <li><a href="#" rel="nofollow">每日菜色</a></li>
+                    <li><a href="#" rel="nofollow">點心烘培</a></li>
+                    <li><a href="#" rel="nofollow">主要食材</a></li>
+                    <li><a href="#" rel="nofollow">主題料理</a></li>
+                  </ul>
+                  <ul class="pull-right">
+                    <li><a href="#">熱門食譜</a></li>
+                    <li><a href="#">新進食譜</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+.mega-footer {
+  background-color: rgba(255,255,255, .6);
+  border-bottom: 1px solid #e8e5e1;
+  padding: 40px 0;
+
+  ul {
+    margin-bottom: 0;
+    padding-left: 0;
+
+    &.pull-left {
+      margin-right: 20px;
+    }
+  }
+
+  h4 {
+    color: #564e4a;
+    font-size: 16px;
+    margin-bottom: 24px;
+    margin-top: 0;
+    opacity: 0.8;
+  }
+
+  li {
+    list-style-type: none;
+    line-height: 1;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    a {
+      color: #888;
+      font-size: 12px;
+
+      &:hover {
+        color: #aaa;
+      }
+    }
+  }
+
+  .col-md-8.pull-right {
+    padding-left: 10px;
+  }
+
+  .footer-links {
+    float: left;
+    margin-right: 50px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover h4 {
+      opacity: 1;
+    }
+  }
+
+  .report {
+    margin: 0 auto;
+    width: 164px;
+
+    p {
+      color: #888;
+      font-size: 12px;
+      letter-spacing: 0.01em;
+      margin: 20px auto;
+    }
+
+    img {
+      display: block;
+      height: 35px;
+      margin: 0 auto 20px;
+      width: 130px;
+    }
+  }
+}

data/app/assets/stylesheets/layouts/_footer.scss

@@ -0,0 +1,48 @@
+// --------------------------------
+// Layouts - Footer / base footer
+// --------------------------------
+
+/*doc
+---
+parent: 02_footers
+title: Base footer
+name: footer
+---
+
+<div class="ic-footers">
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="footer">
+        <div class="basic-footer">
+          <div class="container">© 2011-2015 Polydice, Inc.<br class="visible-xs">
+            <a rel="nofollow" target="_blank" href="#">服務條款</a>與
+            <a rel="nofollow" target="_blank" href="#">隱私權政策</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+.footer {
+  border-top: 1px solid #e8e5e1;
+}
+
+.basic-footer {
+  background-color: #fff;
+  color: #666;
+  font-size: 13px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  text-align: center;
+  
+  a {
+    color: #666;
+  
+    &:hover {
+      color: #999;
+    }
+  }
+}
+

data/app/assets/stylesheets/layouts/_footers.scss

@@ -0,0 +1,12 @@
+// --------------------------------
+// Layouts - Footers
+// --------------------------------
+
+/*doc
+---
+title: Footers
+name: 02_footers
+category: modular_widgets
+---
+*/
+

data/app/assets/stylesheets/layouts/_global-navbar.scss

@@ -0,0 +1,261 @@
+// --------------------------------
+// Layouts - Global navigation
+// --------------------------------
+
+/*doc
+---
+parent: 01_headers
+title: Global navigation
+name: global_navbar
+---
+
+> Primary header<br/><small>a.k.a. iCook-navbar which is on multiple sites as global header.</small>
+
+<div class="ic-header">
+  <div class="ic-highlight">Note this is already made as a gem-used application. check this: <a href="https://github.com/polydice/icook-navbar" target="_blank">polydice/icook-navbar</a> on github.</div>
+
+  <div class="navbar navbar-default navbar-static-top global-header" id="global-header" role="navigation">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="visible-xs">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a herf="#" title="愛料理 - 食譜社群網站" class="logo visible-xs pull-left" rel="nofollow">
+          <span>愛料理首頁</span>
+        </a>
+      </div>
+      <div class="hidden-xs global-header-menu" id="main-menu">
+        <ul class="nav navbar-nav">
+          <li class="hidden-xs hidden-sm mobile">
+            <a href="#">愛料理首頁</a>
+          </li>
+          <li class="visible-sm hidden-md hidden-lg mobile">
+            <a href="#">首頁</a>
+          </li>
+          <li><a href="#"><span>生活誌</span></a></li>
+          <li><a href="#"><span>影音</span></a></li>
+          <li><a href="#"><span>市集</span></a></li>
+          <li><a href="#"><span>享樂誌</span></a></li>
+          <li><a href="#"><span>手機 APP</span></a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right sign-in">
+          <li><a href="#" class="recipes">逛食譜</a></li>
+          <li><a href="#">登入</a></li>
+          <li><a href="#">註冊</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+
+// to define zindex for navbars
+$elements: sub-header, global-dropdown, global-header;
+
+// default global header
+$gl-hd-bg: $white !default; // default global header background color
+$gl-hd-link: $ic-brown !default; // default global header link color
+$gl-hd-link-hover: #8c8783 !default;
+$gl-hd-text-size: 15px !default; // default global header font size
+$gl-hd-border: #aa0000 !default;
+$gl-hd-button-border: $basic-border !default;
+$gl-hd-dropdown-border: #e0dcda !default;
+
+.navbar-default {
+  border-color: transparent;
+}
+
+// global header
+.global-header {
+  background-color: $gl-hd-bg;
+  border-top: 2px solid $gl-hd-border;
+  height: 52px;
+  z-index: index($elements, global-header);
+
+  .navbar-nav > li > a,
+  .dropdown-menu > li > a,
+  .logged a,
+  a.visible-xs {
+    color: $gl-hd-link;
+    font-size: $gl-hd-text-size;
+  }
+
+  .img-circle {
+    margin-right: 2px;
+    margin-top: -4px;
+    position: relative;
+    top: 2px;
+  }
+
+  .recipes {
+    @include icon("\f0f5");
+  }
+
+  .account {
+    @include icon("\f013");
+
+    &::before {
+      left: 3px;
+      position: relative;
+    }
+  }
+
+  .my-fav {
+    @include icon("\f004");
+  }
+
+  .sign-in {
+    margin-right: 0;
+
+    li:last-child a {
+      padding-right: 0 !important;
+    }
+
+    .recipes::before {
+      display: none;
+    }
+  }
+
+  .user::after {
+    content: "|";
+    margin-left: 5px;
+  }
+
+  .navbar-nav > li > a,
+  .dropdown-menu > li > a,
+  .logged a {
+    display: block;
+
+    &:hover,
+    &:active {
+      color: $gl-hd-link-hover;
+      text-decoration: none;
+    }
+  }
+
+  li {
+    list-style-type: none;
+
+    &.mobile {
+      &::after {
+        content: "|";
+        position: absolute;
+        right: 10px;
+        top: 11px;
+      }
+
+      a {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .logged {
+    margin-right: 0;
+  }
+
+  .dropdown-menu {
+    border-top: 0;
+    border-color: $gl-hd-dropdown-border;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    box-shadow: none;
+    right: -1px;
+    z-index: index($elements, global-dropdown);
+  }
+
+	.avatar::after {
+    content: "|";
+    margin-left: 5px;
+  }
+}
+
+// desktop and tablet
+@media only screen and (min-width: 768px) {
+  .global-header {
+    height: 45px;
+    min-height: 45px;
+
+    .dropdown-menu {
+      min-width: 100%;
+
+      li {
+        text-align: center;
+      }
+    }
+
+    .dropdown.open a,
+    .dropdown.open a:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .navbar-nav > li > a {
+    padding: 12px 15px 12px 0;
+
+    &.dropdown-toggle {
+      padding-right: 0 !important;
+    }
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  // override bootstrap
+  .global-header-menu > li > a:hover,
+  .global-header-menu > li > a:focus {
+    background-color: transparent;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// small tablet and phone
+@media only screen and (max-width: 767px) {
+  .global-header {
+    .account::before {
+      content: "";
+      margin-right: 0;
+    }
+
+    .navbar-nav {
+      float: left;
+      margin-left: 0;
+      margin-right: 0;
+      width: 50%;
+
+      a {
+        padding: 10px 0;
+      }
+    }
+
+    a.logo {
+      @include background(asset-url("icook-logo.png") no-repeat 0px 7px);
+
+      background-size: 32px 22px;
+      font-size: 16px;
+      margin: 5px 0 0 16px;
+      padding: 9px 6px 9px 38px;
+    }
+  }
+}
+
+.sub-header {
+  z-index: index($elements, sub-header);
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .global-header .logged a {
+    max-width: 130px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+