marble/build/templates/blog.css

WeDeploy's style guide and UI components

:root {
  font-size: 14px; }
  :root [class*='icon-12'] {
    font-size: 12px; }
  :root [class*='icon-16'] {
    font-size: 16px; }

@media (min-width: 600px) and (max-width: 1800px) {
  :root {
    font-size: 16px; } }

@media (min-width: 1800px) {
  :root {
    font-size: 18px; } }

.content .topbar.topbar-fixed + .blog {
  padding-top: 60px; }

.blog .container header {
  margin: calc(2rem * 1.5) auto; }

.blog .container .content section > *,
.blog .container .content article > * {
  margin-top: 0;
  margin-bottom: calc(1rem * 1.5); }
  .blog .container .content section > *:last-child,
  .blog .container .content article > *:last-child {
    margin-bottom: 0; }

.blog .container h1, .blog .container h2, .blog .container h3, .blog .container h4, .blog .container h5, .blog .container h6 {
  color: rgba(14, 20, 26, 0.8);
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left; }

.blog .container h1 {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 4.2358rem;
  line-height: calc(3rem * 1.5); }

.blog .container h2 {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 3.42676rem;
  line-height: calc(3rem * 1.5); }

.blog .container h3 {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 2.77225rem;
  line-height: calc(2rem * 1.5); }

.blog .container h4 {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: calc(2rem * 1.5); }

.blog .container h5 {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 1.618rem;
  line-height: calc(2rem * 1.5); }

.blog .container h6 {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 1.05895rem;
  line-height: calc(1rem * 1.5); }

.blog .container p:not([class]),
.blog .container li {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: calc(1rem * 1.5);
  color: rgba(14, 20, 26, 0.8); }

.blog .container small {
  display: inline-block;
  font-family: "Galano", sans-serif;
  font-weight: 600;
  font-size: 0.809rem;
  line-height: calc(1rem * 1.5);
  color: rgba(14, 20, 26, 0.4);
  margin-bottom: calc(1rem * 1.5); }
  .blog .container small span {
    color: rgba(14, 20, 26, 0.6); }

.blog .container ul:not(.dropdown-menu):not(.radio-group):not(.checklist),
.blog .container ol:not(.dropdown-menu):not(.radio-group):not(.checklist) {
  list-style: none;
  padding: 0;
  margin-left: 2rem; }

.blog .container ul:not(.dropdown-menu):not(.radio-group):not(.checklist) li {
  position: relative; }

.blog .container ul:not(.dropdown-menu):not(.radio-group):not(.checklist) li:before {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  display: inline-block;
  content: '\2022';
  width: 2rem;
  position: absolute;
  left: -1.5rem; }

.blog .container ul.checklist {
  list-style: none;
  padding: 0;
  margin-left: 0; }

.blog .container ul.checklist li:before {
  color: #00d46a;
  content: "\E017";
  display: inline-block;
  font-family: "icon-16";
  font-size: 16px;
  left: 0;
  position: relative;
  top: 2px;
  width: 2rem; }

.blog .container ol li {
  counter-increment: list;
  position: relative; }

.blog .container ol li:before {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  content: counter(list) ".";
  width: 2rem;
  text-align: left;
  position: absolute;
  left: -2rem; }

.blog .container a:not([class]) {
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  font-family: inherit;
  font-size: inherit;
  border-bottom: 1px dashed rgba(14, 20, 26, 0.4);
  color: #00d46a; }
  .blog .container a:not([class]):hover, .blog .container a:not([class]):focus {
    border-color: #00d46a;
    color: rgba(0, 212, 106, 0.6); }

.blog .container code {
  background: rgba(14, 20, 26, 0.1);
  display: inline-block;
  font-family: "Roboto Mono", sans-serif;
  font-size: 0.809rem;
  line-height: cacl(1rem*1.5);
  padding: 0 4px;
  color: inherit; }

.blog .container strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700; }

.blog .container em {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic; }

.blog .container strike {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: line-through; }

.blog .container blockquote,
.blog .container blockquote p:not([class]) {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: calc(2rem * 1.5);
  color: rgba(14, 20, 26, 0.8);
  border: 0px;
  padding: 0; }

.blog .container blockquote p {
  padding: 0px; }

.blog .container blockquote::before {
  content: '\201C';
  color: rgba(14, 20, 26, 0.4);
  display: block;
  width: 2.5rem;
  text-align: left; }

.blog .container blockquote::after {
  position: relative;
  content: '\201D';
  color: rgba(14, 20, 26, 0.4);
  display: block;
  width: 2.5rem;
  text-align: left;
  top: 1rem; }

.blog .container figure {
  width: 100%;
  text-align: center;
  padding: calc(0.5rem * 1.5) 0; }
  .blog .container figure img {
    display: block;
    width: calc(100% + 5rem);
    position: relative;
    left: -2.5rem;
    border-radius: 0; }
    @media (min-width: 600px) {
      .blog .container figure img {
        border-radius: 4px; } }
    .blog .container figure img.original-size {
      width: auto;
      max-width: 100%;
      left: 50%;
      transform: translateX(-50%); }
  .blog .container figure figcaption {
    color: rgba(14, 20, 26, 0.4);
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 0.809rem;
    line-height: calc(1rem * 1.5);
    text-align: center;
    margin-top: 0.5rem; }

.blog .container ul.radio-group {
  list-style: none;
  padding: 0;
  margin-left: 0; }

.blog .container ul.radio-group * {
  position: relative; }

.blog .container ul.radio-group *:before {
  content: ""; }

.blog .container ul.radio-group * label {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  padding-left: 2rem;
  margin: 0;
  top: 0; }

.blog .container ul.radio-group * input[type="radio"] {
  display: none; }

.blog .container ul.radio-group * input[type="radio"] + label:before {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: rgba(14, 20, 26, 0.8);
  content: "\E059";
  font-family: 'icon-16';
  font-size: 16px;
  position: absolute;
  left: 0; }

.blog .container ul.radio-group * input[type="radio"]:checked + label:before {
  content: "\E058";
  color: #00d46a; }

.blog .container .card {
  box-shadow: 0 2px 12px rgba(14, 20, 26, 0.12);
  border-radius: 4px;
  max-width: calc(34rem + 5rem);
  padding: calc(2rem * 1.5);
  margin: 0 auto; }

.blog .container .aside {
  padding: calc(1rem * 1.5);
  background: rgba(14, 20, 26, 0.05);
  border-radius: 4px; }
  .blog .container .aside > * {
    margin-top: 0;
    margin-bottom: calc(1rem * 1.5); }
    .blog .container .aside > *:last-child {
      margin-bottom: 0; }
  .blog .container .aside p {
    font-size: 0.809rem; }
  .blog .container .aside h4 {
    font-size: 1.618rem; }
  .blog .container .aside ul.radio-group li label {
    font-size: 0.809rem;
    padding-left: 2rem; }

.blog .container .content .table {
  border-collapse: collapse; }

.blog .container .content .table.block {
  width: 100%; }

.blog .container .content .table.fixed {
  table-layout: fixed; }

.blog .container .content .table thead tr {
  background: rgba(14, 20, 26, 0.05); }

.blog .container .content .table tbody tr:nth-child(odd) {
  background: rgba(14, 20, 26, 0.02); }

.blog .container .content .table tbody tr:nth-child(even) {
  background: rgba(14, 20, 26, 0.05); }

.blog .container .content .table tr th,
.blog .container .content .table tr td {
  border-width: 0px;
  font-size: 0.809rem;
  line-height: calc(1rem * 1.5);
  padding: calc(0.5rem * 1.5) calc(1rem * 1.5);
  vertical-align: top;
  height: calc(2rem * 1.5); }

.blog .container .content .btn {
  -webkit-transition: none 0.3s ease-in-out;
  -o-transition: none 0.3s ease-in-out;
  transition: none 0.3s ease-in-out;
  font-size: 0.809rem;
  padding: 0 calc(1rem * 1.5);
  margin-bottom: 1rem;
  margin-right: 1rem;
  height: calc(2rem * 1.5);
  line-height: calc(1rem * 1.5); }
  .blog .container .content .btn:last-child {
    margin-right: 0; }
  @media (min-width: 600px) {
    .blog .container .content .btn {
      margin-bottom: 0; } }

.blog .container .content .btn.btn-inverse-accent {
  background: rgba(14, 20, 26, 0.1);
  color: rgba(14, 20, 26, 0.8); }
  .blog .container .content .btn.btn-inverse-accent:focus, .blog .container .content .btn.btn-inverse-accent:hover {
    background: rgba(14, 20, 26, 0.2); }

.blog .container {
  width: 100%;
  max-width: 34rem;
  padding: 0 2.5rem 0;
  margin: 0 auto; }
  @media (min-width: 600px) {
    .blog .container {
      padding: 0; } }

.blog .container .content p,
.blog .container .content li {
  font-size: 1.05895rem; }

.blog .container .content blockquote p {
  font-size: 2rem; }

.blog .container .content a {
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  border-bottom: 1px dashed rgba(14, 20, 26, 0.4);
  color: inherit; }
  .blog .container .content a:hover, .blog .container .content a:focus {
    border-color: #00d46a;
    color: #00d46a; }

.blog .posts-list {
  background: rgba(14, 20, 26, 0.02);
  padding: calc(3rem * 1.5) 0; }

.blog .post-item {
  margin-bottom: calc(2rem * 1.5); }
  .blog .post-item:last-child {
    margin-bottom: 0; }

.blog .posts-list a {
  border-width: 0px; }

.blog .posts-list a small {
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  margin-bottom: 0; }

.blog .posts-list a:hover small {
  color: rgba(14, 20, 26, 0.8); }

.blog .posts-list a h4 {
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out; }

.blog .posts-list a:hover h4 {
  color: #00d46a; }

.blog .iframe-container {
  height: 400px;
  position: relative;
  width: calc(100% + 5rem);
  padding: 0 15px;
  display: none; }
  @media (min-width: 600px) {
    .blog .iframe-container {
      display: block; } }

.blog .no-iframe {
  display: block; }
  @media (min-width: 600px) {
    .blog .no-iframe {
      display: none; } }

.blog .iframe-container iframe {
  min-width: 100%;
  width: 1px;
  border: 3px solid;
  position: relative;
  top: -3px;
  height: calc(100% - 23px);
  left: 0;
  right: 0; }

.blog .iframe-container .iframe-frame {
  width: 100%;
  position: relative;
  left: 0; }

.blog .we-container {
  padding: calc(4rem * 1.5) 0;
  text-align: center; }
  .blog .we-container .we-circle {
    width: calc(2rem * 1.5);
    height: calc(2rem * 1.5);
    border-radius: 50%;
    background: rgba(14, 20, 26, 0.1);
    display: inline-block; }
  .blog .we-container .we {
    font-family: "Galano", sans-serif;
    font-weight: 700;
    font-size: 1.05895rem;
    color: #fff;
    line-height: calc(2rem * 1.5);
    width: 2rem;
    text-align: center;
    position: relative;
    top: 0.5px;
    left: 0.5px; }