microblog.pub/sass/base_theme.scss

.note-container p:first-child {
        margin-top: 0;
}
html, body {
	  height: 100%;
}

@media only screen and (max-width: 480px) {
  #menu-item-following {
    display: none;
  }
}
body {
  background-color: $background-color;
  color: $color;
  display: flex;
  flex-direction: column;
}
.base-container {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
a, h1, h2, h3, h4, h5, h6 {
  color: $color-title-link;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.gold {
  color: $primary-color;
}
.pcolor {
  color: $primary-color;
}
.lcolor {
  color: $color-light;
}
.older-link, .newer-link, .older-link:hover, .newer-link:hover {
  text-decoration: none;
  padding: 3px;
}
.older-link { float: left }
.newer-link { float: right }
.clear { clear: both; }
.remote-follow-button {
  background: $color-menu-background;
  color: $color-light;
  text-decoration: none;
  padding: 5px 8px;
  margin-top: 5px;
  border-radius: 2px;
}
.remote-follow-button:hover {
  text-decoration: none;
  background: $primary-color;
  color: $background-color;
}
#admin-menu-wrapper {
  padding: 10px;
  margin:0 auto;
  width: 100%;
  background: $color-menu-background;
  max-width: 720px;

#admin-menu {
  list-style-type: none;
  display: inline;
  padding: 10px;
  color: $color-light;
  border-radius-bottom-left: 2px;
  border-radius-bottom-right: 2px;
  .left { float: left; }
  .right { float: right; }
  li {
     a { text-decoration: none; }
    .admin-title {
       text-transform: uppercase;
       font-weight: bold;
    }
    padding-right:10px;
    .selected, a:hover {
      color: $primary-color;
    }
  }
}
}
#header {
  margin-bottom: 70px;

  .title {
    font-size: 1.2em;
    padding-right: 15px;
    color: $color-title-link;
  }
  .title:hover {
    text-decoration: none;
  }
  .subtitle-username {
    color: $color;
  }
  .menu {
    clear: both;
    padding: 0 0 10px 0;
    ul {
      display: inline;
      list-style-type: none;
      padding: 0;
      li {
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }
    a {
      padding: 5px 10px;
        small.badge {
          background-color: $color-menu-background;
          color: $color-light;
          border-radius: 2px;
          margin-left: 5px;
          padding: 3px 5px 0px 5px;
          font-weight: bold;
        }
    }
    a.selected {
      background: $primary-color;
      color: $background-color;
      border-radius:2px;
      .badge {
        color: $primary-color;
        background: $background-color;
      }

    }
    a:hover {
      background: $primary-color;
      color: $background-color;
      text-decoration: none;
      border-radius: 2px;
      .badge {
        color: $primary-color;
        background: $background-color;
      }
    }
  }
}
#container {
  width: 90%;
  max-width: 720px;
  margin: 30px auto;
}
#container #notes {
  margin-top: 20px;
}
.actor-box {
  display: block;
  text-decoration: none;
  margin-bottom: 40px;

  .actor-icon {
    width: 120px;
    border-radius:2px;
  }

  h3 { margin: 0; }

  .actor-inline {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.actor-box-big {
  display: block;
  text-decoration: none;

  .actor-box-wrapper {
    margin-bottom:40px;

    .actor-icon {
      width:120px;
      border-radius:2px;
    }

    h3 { margin: 0; }
  }
}
.note-box {
  margin-bottom: 70px;
}
.note {
  display: flex;
  .l {
    color: $color-note-link;
  }
  
  .h-card {
    flex: initial;
    width: 50px;
  }
  
  .u-photo {
    width: 50px;
    border-radius: 2px;
  }
  .note-wrapper {
    flex: 1;
    padding-left: 15px;
    overflow: hidden;
  }

  .bottom-bar { margin-top:10px;display:inline-block; }

  .img-attachment {
    max-width:100%;
    border-radius:2px;
  }

  h3 {
    font-size: 1.1em;
    color: $color-light;
  }

  strong { font-weight:600; }

  .note-container {
    clear: right;
    padding:10px 0;
    word-break: normal;
  }
}
.color-menu-background {
  background: $color-menu-background;
}
.og-link { text-decoration: none; }
.og-link:hover { text-decoration: none; }
.bar-item-no-hover {
  cursor: default;
  background: $color-menu-background;
  padding: 5px;
  color: $color-light;
  margin-right:5px;
  border-radius:2px;
  float: left;
}
.bar-item-no-hover:hover {
  cursor: default;
}
.bar-item-pinned {
  cursor: default;
  background: $color-menu-background;
  color: $color-light;
  padding: 5px;
  margin-right:5px;
  border-radius:2px;
}
.bar-item-pinned:hover {
  cursor: default;
}
.bar-item {
  background: $color-menu-background;
  padding: 5px;
  color: $color-light;
  margin-right: 10px;
  float: left;
  border-radius:2px;
}
.bar-icon {
  background: $background-color;
  padding: 5px;
  color: $color-light;
  margin-right: 10px;
  float: left;
  border: none;
}

.bar-item:hover {
  background: $primary-color;
  color: $background-color;
}
button.bar-item {
  border: 0
}
form.action-form {
  display: inline;
}
.perma {
  font-size: 1.25em;
}
.bottom-bar .perma-item {
  margin-right: 5px;
}
.bottom-bar a.bar-item:hover {
  text-decoration: none;
}
.footer > div  {
  width: 90%;
  max-width: 720px;
  margin: 40px auto;
}
.footer a, .footer a:hover, .footer a:visited {
  text-decoration: underline;
  color: $color;
}
.summary {
  color: $color-summary;
  font-size: 1.1em;
  margin-top: 10px;
  margin-bottom: 30px;
}
.summary a, .summay a:hover {
  color: $color-summary;
  text-decoration: underline;
}
#followers, #following, #new {
  margin-top: 50px;
}
#admin {
  margin-top: 50px;
}
textarea, input {
  background: $color-menu-background;
  padding: 10px;
  color: $color-light;
  border: 0px;
  border-radius: 2px;
}
input {
  padding: 10px;
}
input[type=submit] {
  color: $primary-color;
  text-transform: uppercase;
}
.note-video {
  margin: 30px 0 10px 0;
}
li.answer {
  height:30px;
  margin-bottom:10px;
  position:relative;
}
.answer .answer-bar {
  position:absolute;
  height:30px;
  border-radius:2px;
}
.answer .answer-text {
  position:relative;
  top:6px;
  padding-left:10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.answer .answer-text > span {
   width:70px;
   display:inline-block;
}