linear/static/css/styles.css

A simple setup micro-forum built in Node.js with Express and MongoDB.

@font-face {
  font-family: 'social';
  src: url("/fonts/social.eot?-4fm0ki");
  src: url("/fonts/social.eot?#iefix-4fm0ki") format("embedded-opentype"), url("/fonts/social.woff?-4fm0ki") format("woff"), url("/fonts/social.ttf?-4fm0ki") format("truetype"), url("/fonts/social.svg?-4fm0ki#social") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  font-family: 'social';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-google:before {
  content: "\ea88"; }

.icon-facebook:before {
  content: "\ea8c"; }

.icon-twitter:before {
  content: "\ea91"; }

form {
  width: 100%;
  overflow: auto; }
  form fieldset {
    width: 100%;
    border: 0; }
    form fieldset input,
    form fieldset textarea,
    form fieldset select {
      position: relative;
      margin: 1em 0;
      padding: .5em;
      font-family: inherit;
      font-size: 1em; }
    form fieldset input {
      line-height: 1em; }
    form fieldset input,
    form fieldset textarea {
      display: block;
      width: 100%; }
    form fieldset textarea {
      margin: 0 0 1em 0;
      resize: vertical;
      line-height: 1.3em;
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      -ms-appearance: textfield;
      -o-appearance: textfield;
      appearance: textfield; }

.button {
  display: inline-block;
  margin: .5em 0;
  padding: .75em 1em;
  font-size: 1em;
  line-height: 1em;
  color: #fff;
  text-decoration: none;
  background-color: #0DBB3D;
  border: 0;
  border-radius: 1.5em;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased; }

.button.facebook {
  background-color: #3b5998; }

.button.google {
  background-color: #dd4b39; }

.button.twitter {
  background-color: #00aced; }

.markdown-editor .markdown-contents,
.markdown-editor .markdown-preview {
  min-height: 150px; }

.markdown-editor .markdown-contents {
  margin: 0;
  border: 1px solid #eee; }

.markdown-editor .markdown-preview {
  display: none;
  padding: calc(.5em + 1px); }

.markdown-editor .markdown-toolbar {
  overflow: auto;
  padding: .75em;
  background-color: #eee;
  border-radius: 0 0 5px 5px;
  text-align: right; }
  .markdown-editor .markdown-toolbar .icon {
    opacity: .75; }
    .markdown-editor .markdown-toolbar .icon img {
      margin: 0 0 0 .5em;
      display: inline-block;
      vertical-align: middle; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1em;
  line-height: 1.3em;
  color: #333; }

a {
  color: #0DBB3D; }

h1 {
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.3em; }

p,
ul,
ol {
  margin: 0 0 1em 0; }

ul li,
ol li {
  margin: 0 0 0 2em; }

.avatar {
  border-radius: 50%;
  vertical-align: middle; }

.page-header .inner-wrapper,
.page-content .inner-wrapper,
.page-footer .inner-wrapper {
  margin: 0 auto;
  padding: 1em;
  max-width: 56.250em; }

.page-header {
  position: relative;
  color: #fff;
  background-color: #0DBB3D; }
  .page-header a {
    color: inherit;
    text-decoration: none; }
  .page-header .inner-wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center; }
  .page-header .logo {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1; }
  @media screen and (min-width: 37.5em) {
    .page-header .toggle-navigation {
      display: none; }
    .page-header .navigation {
      display: block !important;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      -o-flex: 1;
      flex: 1;
      text-align: right; }
      .page-header .navigation a {
        margin-left: 1em; } }
  @media screen and (max-width: 37.5em) {
    .page-header .inner-wrapper {
      padding: .75em; }
    .page-header .toggle-navigation {
      text-align: right; }
      .page-header .toggle-navigation a {
        display: inline-block;
        padding: .4em;
        font-size: 1.6em;
        border-radius: .25em;
        background-color: #0a9531; }
    .page-header .navigation {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: rgba(13, 187, 61, 0.95);
      z-index: 10; }
    .page-header .navigation a {
      display: block;
      padding: 1em;
      text-align: center; } }

.post,
.post-list-item,
.message {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; }
  .post .avatar,
  .post-list-item .avatar,
  .message .avatar {
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    -o-flex: none;
    flex: none; }
  .post .wrapper,
  .post-list-item .wrapper,
  .message .wrapper {
    margin: 0 0 0 1em;
    width: 100%; }
    .post .wrapper .title,
    .post-list-item .wrapper .title,
    .message .wrapper .title {
      margin: 0 0 0.5em;
      font-weight: 500; }
    .post .wrapper .description,
    .post-list-item .wrapper .description,
    .message .wrapper .description {
      margin: 0 0 0.5em;
      color: #444; }
      .post .wrapper .description img,
      .post-list-item .wrapper .description img,
      .message .wrapper .description img {
        max-width: 100%;
        height: auto; }
      .post .wrapper .description blockquote,
      .post-list-item .wrapper .description blockquote,
      .message .wrapper .description blockquote {
        padding-left: 1em;
        font-style: italic;
        border-left: .5em solid #f6f6f6; }
      .post .wrapper .description pre, .post .wrapper .description code,
      .post-list-item .wrapper .description pre,
      .post-list-item .wrapper .description code,
      .message .wrapper .description pre,
      .message .wrapper .description code {
        background-color: #f6f6f6; }
      .post .wrapper .description code,
      .post-list-item .wrapper .description code,
      .message .wrapper .description code {
        padding: .25em;
        display: inline-block;
        font-family: 'Monaco', monospace;
        font-size: 0.8em;
        line-height: 1.3em; }
      .post .wrapper .description pre,
      .post-list-item .wrapper .description pre,
      .message .wrapper .description pre {
        margin: 1em 0;
        padding: .5em;
        overflow: auto; }
        .post .wrapper .description pre code,
        .post-list-item .wrapper .description pre code,
        .message .wrapper .description pre code {
          padding: 0; }
    .post .wrapper .info,
    .post-list-item .wrapper .info,
    .message .wrapper .info {
      font-size: .85em;
      color: #aaa; }

.post .info a,
.message .info a {
  color: inherit;
  text-decoration: none; }
  .post .info a:hover,
  .message .info a:hover {
    color: #0DBB3D;
    text-decoration: underline; }

.post .admin-links a,
.message .admin-links a {
  color: #0DBB3D; }

.post {
  margin: 0 0 1.5em; }
  .post .title {
    font-size: 1.8em;
    line-height: 1.15em; }
    .post .title a {
      color: inherit;
      text-decoration: none; }

.post-list-item {
  margin: 1.5em 0;
  color: inherit;
  text-decoration: none; }
  .post-list-item .title {
    font-size: 1.1em;
    line-height: 1.3em; }
  .post-list-item .info .stats .octicon {
    margin-right: .25em; }
  .post-list-item .info .stats .data-point:not(:last-child) {
    margin-right: .75em; }
  @media screen and (min-width: 37.5em) {
    .post-list-item .info {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex; }
      .post-list-item .info .posted-by,
      .post-list-item .info .stats {
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        flex: 1;
        -webkit-align-self: flex-end;
        -moz-align-self: flex-end;
        -ms-align-self: flex-end;
        -o-align-self: flex-end;
        align-self: flex-end; }
    .post-list-item .info .stats {
      text-align: right; } }

.message {
  margin: 1.5em 0; }
  @media screen and (min-width: 37.5em) {
    .message {
      margin-left: 5em; } }

.login .social-networks {
  text-align: center; }

.profile ul {
  margin: 1em 0 0 2em; }

.page-footer {
  text-align: center; }