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
15.post-date {
16  width: 110px;
17}
18
19.layout-aside {
20  max-width: 50rem;
21}
22
23.layout-aside aside {
24  width: 200px;
25}
26
27.layout-aside img {
28  border-radius: 5px;
29}
30
31#readme {
32  display: none;
33}
34
35.albums {
36  width: 100%;
37  display: grid;
38  grid-template-columns: repeat(3, 1fr);
39  grid-template-rows: repeat(auto-fill, 200px);
40  grid-row-gap: 0.5rem;
41  grid-column-gap: 1rem;
42}
43
44.thumbnail-container {
45  position: relative;
46  background-color: #000;
47  display: flex;
48  flex-direction: column;
49  align-items: center;
50  justify-content: center;
51  padding: 3px;
52  min-height: 200px;
53}
54
55.thumbnail {
56  z-index: 1;
57  object-fit: contain;
58  max-width: 200px;
59  height: auto;
60}
61
62#toc {
63  margin: 0;
64}
65
66.thumbnail-link {
67  z-index: 1;
68}
69
70@media only screen and (max-width: 600px) {
71  .layout-aside main {
72    flex-direction: column;
73  }
74
75  aside {
76    display: none;
77  }
78
79  #readme {
80    display: block;
81  }
82
83  .albums {
84    grid-template-columns: repeat(1, 1fr);
85    justify-content: center;
86  }
87}