repos / pico

main.css

  1body {
  2  max-width: var(--body-max-width, 720px);
  3}
  4
  5table {
  6  display: block;
  7  max-width: fit-content;
  8  margin: 0 auto;
  9  overflow-x: auto;
 10  white-space: nowrap;
 11  border-spacing: 10px;
 12  border-collapse: separate;
 13}
 14
 15header blockquote {
 16  margin: var(--grid-height) 0;
 17}
 18
 19.transform-none {
 20  text-transform: none;
 21}
 22
 23.post-date {
 24  width: 110px;
 25}
 26
 27.layout-aside {
 28  max-width: 50rem;
 29}
 30
 31.layout-aside aside {
 32  width: 200px;
 33}
 34
 35.layout-aside img {
 36  border-radius: 5px;
 37}
 38
 39.footnotes li p {
 40  display: inline;
 41}
 42
 43#readme {
 44  display: none;
 45}
 46
 47.albums {
 48  width: 100%;
 49  display: grid;
 50  grid-template-columns: repeat(3, 1fr);
 51  grid-template-rows: repeat(auto-fill, 200px);
 52  grid-row-gap: 0.5rem;
 53  grid-column-gap: 1rem;
 54}
 55
 56.thumbnail-container {
 57  position: relative;
 58  background-color: #000;
 59  display: flex;
 60  flex-direction: column;
 61  align-items: center;
 62  justify-content: center;
 63  padding: 3px;
 64  min-height: 200px;
 65}
 66
 67.thumbnail {
 68  z-index: 1;
 69  object-fit: contain;
 70  max-width: 200px;
 71  height: auto;
 72}
 73
 74#toc {
 75  margin: 0;
 76}
 77
 78.thumbnail-link {
 79  z-index: 1;
 80}
 81
 82.text-grey {
 83  color: var(--grey-light);
 84}
 85
 86@media only screen and (max-width: 600px) {
 87  .layout-aside main {
 88    flex-direction: column;
 89  }
 90
 91  aside {
 92    display: none;
 93  }
 94
 95  #readme {
 96    display: block;
 97  }
 98
 99  .albums {
100    grid-template-columns: repeat(1, 1fr);
101    justify-content: center;
102  }
103}