Menu

menu.css is the styles for menu block

Configurations

You can change it by changing the following configurations.

  • Background Color ($menu-background-color) : #372e37;
  • Header Color ($menu-header-color) : #625362;
  • Font Color ($menu-font-color): #ffffff;
  • Blog Item Selected Color ($menu-blog-item-selected-color): #ffb142;

Base Structure

Menu block has two main area. One is header area with toggle button, another is blogs list block.

@charset "UTF-8";
#menu .container {
  display: none;
}

.menu-main-container {
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 60px;
  overflow: hidden;
  z-index: 90;
}

#menu-main {
  color: white;
  background-color: #372e37;
  display: block;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 450px;
}

Blog List

Blog list has three main parts, histories (recently visited blogs), blog list (the other blogs) and navigation.

History items and blog items are the same styling.

.blogs-list {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  overflow: auto;
  top: 64px;
}
.blogs-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.blogs-list .loading {
  background-color: #282828;
  background-color: rgba(40, 40, 40, 0.9);
  background-position: center 15px;
  height: 78px;
  position: static;
}
.blogs-list .histories,
.blogs-list .blogs {
  position: relative;
}
.blogs-list .histories .blog-item:last-child {
  border-bottom: 4px solid #e0e0e0;
}

Blog Item

Selected blog item is added .selected class and looks like the following

.user-info,
.blog-item {
  border-bottom: 1px solid #665d66;
  position: relative;
}
.user-info .userpic,
.user-info .display-name,
.user-info .blog-asset,
.user-info .blog-name,
.blog-item .userpic,
.blog-item .display-name,
.blog-item .blog-asset,
.blog-item .blog-name {
  display: inline-block;
  vertical-align: middle;
}
.user-info .userpic,
.user-info .blog-asset,
.blog-item .userpic,
.blog-item .blog-asset {
  margin-right: 12px;
}
.user-info a,
.blog-item a {
  border-bottom: 1px solid #4b434b;
  color: white;
  display: block;
  padding: 13px 20px;
  text-decoration: none;
}
.user-info a.tapped, .user-info a:active,
.blog-item a.tapped,
.blog-item a:active {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(5%, rgba(255, 255, 255, 0.05)));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 5%);
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 5%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 5%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 5%);
}

.blog-item.selected a {
  color: #ffb142;
}
.blog-item.selected .blog-asset {
  border-color: #ffb142;
  background-color: #ffb142;
}

.blog-item.error {
  display: block;
  padding: 13px;
  text-align: center;
}

User Pic

.userpic class is expected to show the user picture inside circle

when user has no own picture, shows default image (icon)

.userpic {
  background-position: center center;
  background-size: cover;
}
.userpic.no-image {
  color: #666;
  font-size: 40px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  width: 44px;
}

Blog Navigation

When User has blogs over 25, navigation links is appeared at the bottom of blog list.

.blog-item-nav {
  cursor: pointer;
  height: 76px;
  line-height: 76px;
  padding: 0 10px;
}
.blog-item-nav.blog-item-nav-prev {
  float: left;
}
.blog-item-nav.blog-item-nav-next {
  float: right;
}
.blog-item-nav:hover {
  color: #ff6633;
}

.blog-item-nav-icon,
.blog-item-nav-label {
  display: inline-block;
  vertical-align: middle;
}

.blog-item-nav-icon {
  font-size: 20px;
  padding: 2px;
}

@media screen and (max-width: 450px) {
  #menu-main {
    width: 100%;
    min-width: 320px;
  }
}