repos / starfx

main.css

  1@media (prefers-color-scheme: light) {
  2  .logo {
  3    stroke: #414558;
  4    fill: none;
  5  }
  6}
  7@media (prefers-color-scheme: dark) {
  8  .logo {
  9    stroke: #f2f2f2;
 10    fill: none;
 11  }
 12}
 13
 14.logo-sm svg {
 15  width: 10px;
 16  height: 10px;
 17}
 18
 19.logo-md svg {
 20  width: 25px;
 21  height: 25px;
 22}
 23
 24.logo-lg svg {
 25  width: 50px;
 26  height: 50px;
 27}
 28
 29.divider {
 30  width: 1px;
 31  height: auto;
 32  background-color: var(--grey-light);
 33}
 34
 35.visited {
 36  color: var(--visited);
 37}
 38
 39.sitemap {
 40  width: 250px;
 41  flex: 0 0 250px;
 42  margin: 0;
 43  overflow-y: scroll;
 44  padding-bottom: 2rem !important;
 45  height: calc(100vh - 3px - 3 * var(--line-height));
 46}
 47
 48.post {
 49  max-width: 650px;
 50  height: calc(100vh - 3px - 3 * var(--line-height));
 51  overflow-y: auto;
 52  padding-right: 20px;
 53}
 54
 55.post-container {
 56  max-width: 60rem;
 57}
 58
 59.container-xs {
 60  max-width: 20em;
 61  width: 100%;
 62}
 63
 64.hero {
 65  padding: calc(var(--line-height) * 3) 0 0 0;
 66}
 67
 68.home-features pre {
 69  margin: 0;
 70}
 71
 72.features {
 73  display: grid;
 74  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
 75  gap: calc(var(--line-height) - 4px);
 76}
 77
 78.features h3 {
 79  border: none;
 80}
 81
 82.mk-nav {
 83  padding: var(--line-height);
 84}
 85
 86.pager {
 87  min-width: 150px;
 88}
 89
 90.sitemap-grid {
 91  display: grid;
 92  grid-template-columns: repeat(2, 1fr);
 93  gap: 1rem;
 94}
 95
 96.sidebar-list {
 97  padding: 0 0 0 var(--line-height);
 98}
 99
100.post-group {
101  display: flex;
102  gap: 1rem;
103  flex-direction: row-reverse;
104}
105
106@media only screen and (max-width: 800px) {
107  body {
108    padding: 0 0.75rem;
109  }
110
111  header {
112    margin: 0;
113  }
114
115  .post-group {
116    display: block;
117  }
118
119  .post {
120    height: 100%;
121    overflow-y: unset;
122    padding-right: 0;
123  }
124
125  .sitemap {
126    column-count: 2;
127    width: 100%;
128    margin-bottom: calc(2 * var(--line-height));
129  }
130
131  .sitemap-grid {
132    grid-template-columns: repeat(1, 1fr);
133  }
134
135  .mk-nav {
136    padding: var(--line-height) 0;
137  }
138
139  .divider {
140    display: none;
141  }
142}