raspberry-pi-pcie-devices/assets/css/style.scss

---
---

@import "{{ site.theme }}";

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  letter-spacing: 0;
}

// Site layout.
#header_wrap .inner {
  padding: 40px 10px 10px;
}

.inner {
  max-width: 1000px;
}

#sponsor_banner {
  display: block;
  position: absolute;
  top: 0;
  right: 200px;
  z-index: 12;
  padding: 10px 20px;
  color: #fff;
  background-color: #db61a2;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#forkme_banner {
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 10;
  padding: 10px 20px;
  color: #fff;
  background: #0090ff;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#project_title {
  background: none;
  padding: 0;

  a {
    color: inherit;
  }
}

#project_tagline {
  font-size: 18px;
  margin-top: 0;
}

#main_content p:first-of-type {
  margin-top: 0;
}

// Index pages.
.card_table,
.board_table,
.hat_table {
  width: 100%;

  td {
    vertical-align: top;
  }

  .links {
    margin-top: 1em;
    font-size: .8em;
  }
}

.card_table_picture,
.board_table_picture,
.hat_table_picture {
  max-width: 100px;
  max-height: 100px;
  margin: 0;
}

.card_picture_td,
.board_picture_td,
.hat_picture_td {
  width: 100px;
}

// Detail pages.
#card_title,
#board_title,
#hat_title {
  font-size: 24px;
}

.card_picture,
.board_picture,
.hat_picture {
  text-align: center;
  width: 100%;

  img {
    max-width: 500px;
  }
}

.card_details_table,
.board_details_table,
.hat_details_table {
  margin: 0 auto;
}

// Responsive styles.
@media screen and (max-width: 800px) {
  img {
    height: auto;
  }

  .card_picture img,
  .board_picture img,
  .hat_picture img {
    max-width: 100%;
  }
}